From f0fface575fd8799fffa9b0848a359759c061e95 Mon Sep 17 00:00:00 2001
From: Ahmed <ahmedmayara789@gmail.com>
Date: Wed, 6 Sep 2023 14:23:35 +0100
Subject: [PATCH] feat: add missing new-york style components

---
 .../lib/registry/new-york/ui/alert/Alert.vue  | 17 +++++++++++
 .../new-york/ui/alert/AlertDescription.vue    | 13 +++++++++
 .../registry/new-york/ui/alert/AlertTitle.vue |  9 ++++++
 .../lib/registry/new-york/ui/alert/index.ts   | 21 ++++++++++++++
 .../new-york/ui/checkbox/Checkbox.vue         | 24 +++++++++++++++
 .../registry/new-york/ui/checkbox/index.ts    |  1 +
 .../new-york/ui/radio-group/RadioGroup.vue    | 12 ++++++++
 .../ui/radio-group/RadioGroupItem.vue         | 29 +++++++++++++++++++
 .../registry/new-york/ui/radio-group/index.ts |  2 ++
 9 files changed, 128 insertions(+)
 create mode 100644 apps/www/src/lib/registry/new-york/ui/alert/Alert.vue
 create mode 100644 apps/www/src/lib/registry/new-york/ui/alert/AlertDescription.vue
 create mode 100644 apps/www/src/lib/registry/new-york/ui/alert/AlertTitle.vue
 create mode 100644 apps/www/src/lib/registry/new-york/ui/alert/index.ts
 create mode 100644 apps/www/src/lib/registry/new-york/ui/checkbox/Checkbox.vue
 create mode 100644 apps/www/src/lib/registry/new-york/ui/checkbox/index.ts
 create mode 100644 apps/www/src/lib/registry/new-york/ui/radio-group/RadioGroup.vue
 create mode 100644 apps/www/src/lib/registry/new-york/ui/radio-group/RadioGroupItem.vue
 create mode 100644 apps/www/src/lib/registry/new-york/ui/radio-group/index.ts

diff --git a/apps/www/src/lib/registry/new-york/ui/alert/Alert.vue b/apps/www/src/lib/registry/new-york/ui/alert/Alert.vue
new file mode 100644
index 00000000..b95d5c89
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/ui/alert/Alert.vue
@@ -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>
diff --git a/apps/www/src/lib/registry/new-york/ui/alert/AlertDescription.vue b/apps/www/src/lib/registry/new-york/ui/alert/AlertDescription.vue
new file mode 100644
index 00000000..a539b631
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/ui/alert/AlertDescription.vue
@@ -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>
diff --git a/apps/www/src/lib/registry/new-york/ui/alert/AlertTitle.vue b/apps/www/src/lib/registry/new-york/ui/alert/AlertTitle.vue
new file mode 100644
index 00000000..c5dd22c2
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/ui/alert/AlertTitle.vue
@@ -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>
diff --git a/apps/www/src/lib/registry/new-york/ui/alert/index.ts b/apps/www/src/lib/registry/new-york/ui/alert/index.ts
new file mode 100644
index 00000000..499ee68a
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/ui/alert/index.ts
@@ -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',
+    },
+  },
+)
diff --git a/apps/www/src/lib/registry/new-york/ui/checkbox/Checkbox.vue b/apps/www/src/lib/registry/new-york/ui/checkbox/Checkbox.vue
new file mode 100644
index 00000000..321b3c88
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/ui/checkbox/Checkbox.vue
@@ -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>
diff --git a/apps/www/src/lib/registry/new-york/ui/checkbox/index.ts b/apps/www/src/lib/registry/new-york/ui/checkbox/index.ts
new file mode 100644
index 00000000..8c28c286
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/ui/checkbox/index.ts
@@ -0,0 +1 @@
+export { default as Checkbox } from './Checkbox.vue'
diff --git a/apps/www/src/lib/registry/new-york/ui/radio-group/RadioGroup.vue b/apps/www/src/lib/registry/new-york/ui/radio-group/RadioGroup.vue
new file mode 100644
index 00000000..1eff3f58
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/ui/radio-group/RadioGroup.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>
diff --git a/apps/www/src/lib/registry/new-york/ui/radio-group/RadioGroupItem.vue b/apps/www/src/lib/registry/new-york/ui/radio-group/RadioGroupItem.vue
new file mode 100644
index 00000000..153d720e
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/ui/radio-group/RadioGroupItem.vue
@@ -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>
diff --git a/apps/www/src/lib/registry/new-york/ui/radio-group/index.ts b/apps/www/src/lib/registry/new-york/ui/radio-group/index.ts
new file mode 100644
index 00000000..fa1da9c2
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/ui/radio-group/index.ts
@@ -0,0 +1,2 @@
+export { default as RadioGroup } from './RadioGroup.vue'
+export { default as RadioGroupItem } from './RadioGroupItem.vue'