feat: add missing new-york style components
This commit is contained in:
parent
6ff3074bc0
commit
f0fface575
17
apps/www/src/lib/registry/new-york/ui/alert/Alert.vue
Normal file
17
apps/www/src/lib/registry/new-york/ui/alert/Alert.vue
Normal file
|
|
@ -0,0 +1,17 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { alertVariants } from '.'
|
||||||
|
import { cn } from '@/lib/utils'
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
variant?: NonNullable<Parameters<typeof alertVariants>[0]>['variant']
|
||||||
|
class?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
const props = defineProps<Props>()
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div :class="cn(alertVariants({ variant }), props.class ?? '')">
|
||||||
|
<slot />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
@ -0,0 +1,13 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { cn } from '@/lib/utils'
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
class: String,
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div :class="cn('text-sm [&_p]:leading-relaxed', props.class)">
|
||||||
|
<slot />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
@ -0,0 +1,9 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { cn } from '@/lib/utils'
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<h5 :class="cn('mb-1 font-medium leading-none tracking-tight', $attrs.class ?? '')">
|
||||||
|
<slot />
|
||||||
|
</h5>
|
||||||
|
</template>
|
||||||
21
apps/www/src/lib/registry/new-york/ui/alert/index.ts
Normal file
21
apps/www/src/lib/registry/new-york/ui/alert/index.ts
Normal file
|
|
@ -0,0 +1,21 @@
|
||||||
|
import { cva } from 'class-variance-authority'
|
||||||
|
|
||||||
|
export { default as Alert } from './Alert.vue'
|
||||||
|
export { default as AlertTitle } from './AlertTitle.vue'
|
||||||
|
export { default as AlertDescription } from './AlertDescription.vue'
|
||||||
|
|
||||||
|
export const alertVariants = cva(
|
||||||
|
'relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7',
|
||||||
|
{
|
||||||
|
variants: {
|
||||||
|
variant: {
|
||||||
|
default: 'bg-background text-foreground',
|
||||||
|
destructive:
|
||||||
|
'border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
defaultVariants: {
|
||||||
|
variant: 'default',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
)
|
||||||
24
apps/www/src/lib/registry/new-york/ui/checkbox/Checkbox.vue
Normal file
24
apps/www/src/lib/registry/new-york/ui/checkbox/Checkbox.vue
Normal file
|
|
@ -0,0 +1,24 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import type { CheckboxRootEmits, CheckboxRootProps } from 'radix-vue'
|
||||||
|
import { CheckboxIndicator, CheckboxRoot } from 'radix-vue'
|
||||||
|
import RadixIconsCheck from '~icons/radix-icons/check'
|
||||||
|
import { cn, useEmitAsProps } from '@/lib/utils'
|
||||||
|
|
||||||
|
const props = defineProps<CheckboxRootProps>()
|
||||||
|
const emits = defineEmits<CheckboxRootEmits>()
|
||||||
|
|
||||||
|
const emitsAsProps = useEmitAsProps(emits)
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<CheckboxRoot
|
||||||
|
v-bind="{ ...props, ...emitsAsProps }"
|
||||||
|
:class="
|
||||||
|
cn('peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
|
||||||
|
$attrs.class ?? '')"
|
||||||
|
>
|
||||||
|
<CheckboxIndicator class="flex items-center justify-center text-current">
|
||||||
|
<RadixIconsCheck class="h-4 w-4" />
|
||||||
|
</CheckboxIndicator>
|
||||||
|
</CheckboxRoot>
|
||||||
|
</template>
|
||||||
1
apps/www/src/lib/registry/new-york/ui/checkbox/index.ts
Normal file
1
apps/www/src/lib/registry/new-york/ui/checkbox/index.ts
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
export { default as Checkbox } from './Checkbox.vue'
|
||||||
|
|
@ -0,0 +1,12 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { RadioGroupRoot, type RadioGroupRootProps } from 'radix-vue'
|
||||||
|
import { cn } from '@/lib/utils'
|
||||||
|
|
||||||
|
const props = defineProps<RadioGroupRootProps & { class?: string }>()
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<RadioGroupRoot :class="cn('grid gap-2', props.class)">
|
||||||
|
<slot />
|
||||||
|
</RadioGroupRoot>
|
||||||
|
</template>
|
||||||
|
|
@ -0,0 +1,29 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import {
|
||||||
|
RadioGroupIndicator,
|
||||||
|
RadioGroupItem,
|
||||||
|
type RadioGroupItemProps,
|
||||||
|
} from 'radix-vue'
|
||||||
|
import { cn } from '@/lib/utils'
|
||||||
|
import RadixIconsCheck from '~icons/radix-icons/check'
|
||||||
|
|
||||||
|
const props = defineProps<RadioGroupItemProps & { class?: string }>()
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<RadioGroupItem
|
||||||
|
v-bind="props"
|
||||||
|
:class="
|
||||||
|
cn(
|
||||||
|
'aspect-square h-4 w-4 rounded-full border border-primary text-primary shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
|
||||||
|
props.class,
|
||||||
|
)
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<RadioGroupIndicator
|
||||||
|
:class="cn('flex items-center justify-center', props.class)"
|
||||||
|
>
|
||||||
|
<RadixIconsCheck class="h-3.5 w-3.5 fill-primary" />
|
||||||
|
</RadioGroupIndicator>
|
||||||
|
</RadioGroupItem>
|
||||||
|
</template>
|
||||||
|
|
@ -0,0 +1,2 @@
|
||||||
|
export { default as RadioGroup } from './RadioGroup.vue'
|
||||||
|
export { default as RadioGroupItem } from './RadioGroupItem.vue'
|
||||||
Loading…
Reference in New Issue
Block a user