@reinvented/design 0.3.0 → 1.0.0

package/src/styles/tokens.css

@@ -15,7 +15,7 @@
   --card-foreground: 240 10% 3.9%;
   --popover: 0 0% 100%;
   --popover-foreground: 240 10% 3.9%;
-  --primary: 252 100% 63%;        /* Vibrant purple — Reinvented brand */
+  --primary: 12 85% 60%;          /* Medium Coral — Reinvented brand */
   --primary-foreground: 0 0% 100%;
   --secondary: 240 4.8% 95.9%;
   --secondary-foreground: 240 5.9% 10%;
@@ -27,15 +27,15 @@
   --destructive-foreground: 0 0% 98%;
   --border: 240 5.9% 90%;
   --input: 240 5.9% 90%;
-  --ring: 252 100% 63%;
+  --ring: 12 85% 60%;
   --radius: 0.625rem;
 
   /* ── Success / Warning / Info ──────────────────────────────── */
-  --success: 142 76% 36%;
+  --success: 142 60% 45%;
   --success-foreground: 0 0% 100%;
-  --warning: 38 92% 50%;
+  --warning: 38 80% 55%;
   --warning-foreground: 0 0% 100%;
-  --info: 217 91% 60%;
+  --info: 217 80% 55%;
   --info-foreground: 0 0% 100%;
 
   /* ── Typography ────────────────────────────────────────────── */
@@ -86,12 +86,20 @@
   /* ── Sidebar (for ShadCN sidebar component) ────────────────── */
   --sidebar-background: 0 0% 98%;
   --sidebar-foreground: 240 5.3% 26.1%;
-  --sidebar-primary: 252 100% 63%;
+  --sidebar-primary: 12 85% 60%;
   --sidebar-primary-foreground: 0 0% 100%;
   --sidebar-accent: 240 4.8% 95.9%;
   --sidebar-accent-foreground: 240 5.9% 10%;
   --sidebar-border: 220 13% 91%;
-  --sidebar-ring: 252 100% 63%;
+  --sidebar-ring: 12 85% 60%;
+
+  /* ── Charts (Unovis) ───────────────────────────────────────── */
+  --vis-primary-color: var(--primary);
+  --vis-secondary-color: var(--muted);
+  --vis-text-color: var(--foreground);
+  --vis-tooltip-background-color: hsl(var(--popover));
+  --vis-tooltip-border-color: hsl(var(--border));
+  --vis-tooltip-text-color: hsl(var(--popover-foreground));
 }
 
 /* ── Dark Mode ───────────────────────────────────────────────── */
@@ -102,7 +110,7 @@
   --card-foreground: 0 0% 98%;
   --popover: 240 10% 3.9%;
   --popover-foreground: 0 0% 98%;
-  --primary: 252 100% 69%;
+  --primary: 12 85% 65%;
   --primary-foreground: 0 0% 100%;
   --secondary: 240 3.7% 15.9%;
   --secondary-foreground: 0 0% 98%;
@@ -114,27 +122,26 @@
   --destructive-foreground: 0 0% 98%;
   --border: 240 3.7% 15.9%;
   --input: 240 3.7% 15.9%;
-  --ring: 252 100% 69%;
+  --ring: 12 85% 65%;
 
-  --success: 142 76% 45%;
-  --warning: 38 92% 55%;
-  --info: 217 91% 65%;
+  --success: 142 65% 50%;
+  --success-foreground: 0 0% 98%;
+  --warning: 38 85% 55%;
+  --warning-foreground: 0 0% 98%;
+  --info: 217 80% 60%;
+  --info-foreground: 0 0% 98%;
 
   --sidebar-background: 240 5.9% 10%;
   --sidebar-foreground: 240 4.8% 95.9%;
-  --sidebar-primary: 252 100% 69%;
+  --sidebar-primary: 12 85% 65%;
   --sidebar-primary-foreground: 0 0% 100%;
   --sidebar-accent: 240 3.7% 15.9%;
   --sidebar-accent-foreground: 240 4.8% 95.9%;
   --sidebar-border: 240 3.7% 15.9%;
-  --sidebar-ring: 252 100% 69%;
+  --sidebar-ring: 12 85% 65%;
 }
 
 /* ── Base Styles ─────────────────────────────────────────────── */
-* {
-  border-color: hsl(var(--border));
-}
-
 body {
   font-family: var(--font-sans);
   background-color: hsl(var(--background));
@@ -142,3 +149,8 @@ body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
+
+/* ── Unovis Overrides ────────────────────────────────────────── */
+.unovis-donut-central-label {
+  fill: hsl(var(--foreground)) !important;
+}

package/tailwind.config.js

@@ -1,108 +1,130 @@
 /** @type {import('tailwindcss').Config} */
 export default {
-  darkMode: 'class',
+  darkMode: ['class', 'class'],
   content: [
     './src/**/*.{vue,ts,tsx}',
     // Consumer apps should add their own content paths
   ],
   theme: {
-    container: {
-      center: true,
-      padding: '2rem',
-      screens: { '2xl': '1400px' },
-    },
-    extend: {
-      colors: {
-        border: 'hsl(var(--border))',
-        input: 'hsl(var(--input))',
-        ring: 'hsl(var(--ring))',
-        background: 'hsl(var(--background))',
-        foreground: 'hsl(var(--foreground))',
-        primary: {
-          DEFAULT: 'hsl(var(--primary))',
-          foreground: 'hsl(var(--primary-foreground))',
-        },
-        secondary: {
-          DEFAULT: 'hsl(var(--secondary))',
-          foreground: 'hsl(var(--secondary-foreground))',
-        },
-        destructive: {
-          DEFAULT: 'hsl(var(--destructive))',
-          foreground: 'hsl(var(--destructive-foreground))',
-        },
-        muted: {
-          DEFAULT: 'hsl(var(--muted))',
-          foreground: 'hsl(var(--muted-foreground))',
-        },
-        accent: {
-          DEFAULT: 'hsl(var(--accent))',
-          foreground: 'hsl(var(--accent-foreground))',
-        },
-        popover: {
-          DEFAULT: 'hsl(var(--popover))',
-          foreground: 'hsl(var(--popover-foreground))',
-        },
-        card: {
-          DEFAULT: 'hsl(var(--card))',
-          foreground: 'hsl(var(--card-foreground))',
-        },
-        success: {
-          DEFAULT: 'hsl(var(--success))',
-          foreground: 'hsl(var(--success-foreground))',
-        },
-        warning: {
-          DEFAULT: 'hsl(var(--warning))',
-          foreground: 'hsl(var(--warning-foreground))',
-        },
-        info: {
-          DEFAULT: 'hsl(var(--info))',
-          foreground: 'hsl(var(--info-foreground))',
-        },
-        sidebar: {
-          DEFAULT: 'hsl(var(--sidebar-background))',
-          foreground: 'hsl(var(--sidebar-foreground))',
-          primary: 'hsl(var(--sidebar-primary))',
-          'primary-foreground': 'hsl(var(--sidebar-primary-foreground))',
-          accent: 'hsl(var(--sidebar-accent))',
-          'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
-          border: 'hsl(var(--sidebar-border))',
-          ring: 'hsl(var(--sidebar-ring))',
-        },
-      },
-      borderRadius: {
-        lg: 'var(--radius)',
-        md: 'calc(var(--radius) - 2px)',
-        sm: 'calc(var(--radius) - 4px)',
-      },
-      fontFamily: {
-        sans: ['var(--font-sans)'],
-        mono: ['var(--font-mono)'],
-      },
-      keyframes: {
-        'accordion-down': {
-          from: { height: '0' },
-          to: { height: 'var(--radix-accordion-content-height)' },
-        },
-        'accordion-up': {
-          from: { height: 'var(--radix-accordion-content-height)' },
-          to: { height: '0' },
-        },
-        'collapsible-down': {
-          from: { height: '0' },
-          to: { height: 'var(--radix-collapsible-content-height)' },
-        },
-        'collapsible-up': {
-          from: { height: 'var(--radix-collapsible-content-height)' },
-          to: { height: '0' },
-        },
-      },
-      animation: {
-        'accordion-down': 'accordion-down 0.2s ease-out',
-        'accordion-up': 'accordion-up 0.2s ease-out',
-        'collapsible-down': 'collapsible-down 0.2s ease-out',
-        'collapsible-up': 'collapsible-up 0.2s ease-out',
-      },
-    },
+  	container: {
+  		center: true,
+  		padding: '2rem',
+  		screens: {
+  			'2xl': '1400px'
+  		}
+  	},
+  	extend: {
+  		colors: {
+  			border: 'hsl(var(--border))',
+  			input: 'hsl(var(--input))',
+  			ring: 'hsl(var(--ring))',
+  			background: 'hsl(var(--background))',
+  			foreground: 'hsl(var(--foreground))',
+  			primary: {
+  				DEFAULT: 'hsl(var(--primary))',
+  				foreground: 'hsl(var(--primary-foreground))'
+  			},
+  			secondary: {
+  				DEFAULT: 'hsl(var(--secondary))',
+  				foreground: 'hsl(var(--secondary-foreground))'
+  			},
+  			destructive: {
+  				DEFAULT: 'hsl(var(--destructive))',
+  				foreground: 'hsl(var(--destructive-foreground))'
+  			},
+  			muted: {
+  				DEFAULT: 'hsl(var(--muted))',
+  				foreground: 'hsl(var(--muted-foreground))'
+  			},
+  			accent: {
+  				DEFAULT: 'hsl(var(--accent))',
+  				foreground: 'hsl(var(--accent-foreground))'
+  			},
+  			popover: {
+  				DEFAULT: 'hsl(var(--popover))',
+  				foreground: 'hsl(var(--popover-foreground))'
+  			},
+  			card: {
+  				DEFAULT: 'hsl(var(--card))',
+  				foreground: 'hsl(var(--card-foreground))'
+  			},
+  			success: {
+  				DEFAULT: 'hsl(var(--success))',
+  				foreground: 'hsl(var(--success-foreground))'
+  			},
+  			warning: {
+  				DEFAULT: 'hsl(var(--warning))',
+  				foreground: 'hsl(var(--warning-foreground))'
+  			},
+  			info: {
+  				DEFAULT: 'hsl(var(--info))',
+  				foreground: 'hsl(var(--info-foreground))'
+  			},
+  			sidebar: {
+  				DEFAULT: 'hsl(var(--sidebar-background))',
+  				foreground: 'hsl(var(--sidebar-foreground))',
+  				primary: 'hsl(var(--sidebar-primary))',
+  				'primary-foreground': 'hsl(var(--sidebar-primary-foreground))',
+  				accent: 'hsl(var(--sidebar-accent))',
+  				'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
+  				border: 'hsl(var(--sidebar-border))',
+  				ring: 'hsl(var(--sidebar-ring))'
+  			}
+  		},
+  		borderRadius: {
+  			lg: 'var(--radius)',
+  			md: 'calc(var(--radius) - 2px)',
+  			sm: 'calc(var(--radius) - 4px)'
+  		},
+  		fontFamily: {
+  			sans: [
+  				'var(--font-sans)'
+  			],
+  			mono: [
+  				'var(--font-mono)'
+  			]
+  		},
+  		keyframes: {
+  			'accordion-down': {
+  				from: {
+  					height: '0'
+  				},
+  				to: {
+  					height: 'var(--radix-accordion-content-height)'
+  				}
+  			},
+  			'accordion-up': {
+  				from: {
+  					height: 'var(--radix-accordion-content-height)'
+  				},
+  				to: {
+  					height: '0'
+  				}
+  			},
+  			'collapsible-down': {
+  				from: {
+  					height: '0'
+  				},
+  				to: {
+  					height: 'var(--radix-collapsible-content-height)'
+  				}
+  			},
+  			'collapsible-up': {
+  				from: {
+  					height: 'var(--radix-collapsible-content-height)'
+  				},
+  				to: {
+  					height: '0'
+  				}
+  			}
+  		},
+  		animation: {
+  			'accordion-down': 'accordion-down 0.2s ease-out',
+  			'accordion-up': 'accordion-up 0.2s ease-out',
+  			'collapsible-down': 'collapsible-down 0.2s ease-out',
+  			'collapsible-up': 'collapsible-up 0.2s ease-out'
+  		}
+  	}
   },
   plugins: [require('tailwindcss-animate')],
 }

package/tsconfig.json

@@ -5,7 +5,7 @@
     "moduleResolution": "bundler",
     "lib": ["ES2020", "DOM", "DOM.Iterable"],
     "strict": true,
-    "jsx": "preserve",
+    "jsx": "react-jsx",
     "esModuleInterop": true,
     "skipLibCheck": true,
     "forceConsistentCasingInFileNames": true,
@@ -17,5 +17,5 @@
     },
     "noEmit": true
   },
-  "include": ["src/**/*.ts", "src/**/*.vue", "src/env.d.ts"]
+  "include": ["src/**/*.ts", "src/**/*.tsx"]
 }

package/src/components/ui/accordion/Accordion.vue

@@ -1,13 +0,0 @@
-<script setup lang="ts">
-import { AccordionRoot, type AccordionRootEmits, type AccordionRootProps, useForwardPropsEmits } from 'radix-vue'
-
-const props = defineProps<AccordionRootProps>()
-const emits = defineEmits<AccordionRootEmits>()
-const forwarded = useForwardPropsEmits(props, emits)
-</script>
-
-<template>
-  <AccordionRoot v-bind="forwarded">
-    <slot />
-  </AccordionRoot>
-</template>

package/src/components/ui/accordion/AccordionContent.vue

@@ -1,20 +0,0 @@
-<script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { AccordionContent, type AccordionContentProps, useForwardProps } from 'radix-vue'
-import { cn } from '../lib/utils'
-
-const props = defineProps<AccordionContentProps & { class?: HTMLAttributes['class'] }>()
-const delegatedProps = computed(() => { const { class: _, ...d } = props; return d })
-const forwardedProps = useForwardProps(delegatedProps)
-</script>
-
-<template>
-  <AccordionContent
-    v-bind="forwardedProps"
-    class="overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
-  >
-    <div :class="cn('pb-4 pt-0', props.class)">
-      <slot />
-    </div>
-  </AccordionContent>
-</template>

package/src/components/ui/accordion/AccordionItem.vue

@@ -1,15 +0,0 @@
-<script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { AccordionItem, type AccordionItemProps, useForwardProps } from 'radix-vue'
-import { cn } from '../lib/utils'
-
-const props = defineProps<AccordionItemProps & { class?: HTMLAttributes['class'] }>()
-const delegatedProps = computed(() => { const { class: _, ...d } = props; return d })
-const forwardedProps = useForwardProps(delegatedProps)
-</script>
-
-<template>
-  <AccordionItem v-bind="forwardedProps" :class="cn('border-b', props.class)">
-    <slot />
-  </AccordionItem>
-</template>

package/src/components/ui/accordion/AccordionTrigger.vue

@@ -1,25 +0,0 @@
-<script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { AccordionHeader, AccordionTrigger, type AccordionTriggerProps, useForwardProps } from 'radix-vue'
-import { ChevronDown } from 'lucide-vue-next'
-import { cn } from '../lib/utils'
-
-const props = defineProps<AccordionTriggerProps & { class?: HTMLAttributes['class'] }>()
-const delegatedProps = computed(() => { const { class: _, ...d } = props; return d })
-const forwardedProps = useForwardProps(delegatedProps)
-</script>
-
-<template>
-  <AccordionHeader class="flex">
-    <AccordionTrigger
-      v-bind="forwardedProps"
-      :class="cn(
-        'flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',
-        props.class,
-      )"
-    >
-      <slot />
-      <ChevronDown class="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200" />
-    </AccordionTrigger>
-  </AccordionHeader>
-</template>

package/src/components/ui/accordion/index.ts

@@ -1,4 +0,0 @@
-export { default as Accordion } from './Accordion.vue'
-export { default as AccordionContent } from './AccordionContent.vue'
-export { default as AccordionItem } from './AccordionItem.vue'
-export { default as AccordionTrigger } from './AccordionTrigger.vue'

package/src/components/ui/alert/Alert.vue

@@ -1,38 +0,0 @@
-<script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { cva, type VariantProps } from 'class-variance-authority'
-import { cn } from '../lib/utils'
-
-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',
-    },
-  },
-)
-
-export type AlertVariants = VariantProps<typeof alertVariants>
-
-const props = defineProps<{
-  variant?: AlertVariants['variant']
-  class?: HTMLAttributes['class']
-}>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...d } = props
-  return d
-})
-</script>
-
-<template>
-  <div :class="cn(alertVariants({ variant: delegatedProps.variant }), props.class)" role="alert">
-    <slot />
-  </div>
-</template>

package/src/components/ui/alert/AlertDescription.vue

@@ -1,12 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '../lib/utils'
-
-const props = defineProps<{ class?: HTMLAttributes['class'] }>()
-</script>
-
-<template>
-  <div :class="cn('text-sm [&_p]:leading-relaxed', props.class)">
-    <slot />
-  </div>
-</template>

package/src/components/ui/alert/AlertTitle.vue

@@ -1,12 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '../lib/utils'
-
-const props = defineProps<{ class?: HTMLAttributes['class'] }>()
-</script>
-
-<template>
-  <h5 :class="cn('mb-1 font-medium leading-none tracking-tight', props.class)">
-    <slot />
-  </h5>
-</template>

package/src/components/ui/alert/index.ts

@@ -1,3 +0,0 @@
-export { default as Alert } from './Alert.vue'
-export { default as AlertDescription } from './AlertDescription.vue'
-export { default as AlertTitle } from './AlertTitle.vue'

package/src/components/ui/alert-dialog/AlertDialog.vue

@@ -1,13 +0,0 @@
-<script setup lang="ts">
-import { AlertDialogRoot, type AlertDialogEmits, type AlertDialogProps, useForwardPropsEmits } from 'radix-vue'
-
-const props = defineProps<AlertDialogProps>()
-const emits = defineEmits<AlertDialogEmits>()
-const forwarded = useForwardPropsEmits(props, emits)
-</script>
-
-<template>
-  <AlertDialogRoot v-bind="forwarded">
-    <slot />
-  </AlertDialogRoot>
-</template>

package/src/components/ui/alert-dialog/AlertDialogAction.vue

@@ -1,21 +0,0 @@
-<script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { AlertDialogAction, type AlertDialogActionProps, useForwardProps } from 'radix-vue'
-import { cn } from '../lib/utils'
-
-const props = defineProps<AlertDialogActionProps & { class?: HTMLAttributes['class'] }>()
-const delegatedProps = computed(() => { const { class: _, ...d } = props; return d })
-const forwardedProps = useForwardProps(delegatedProps)
-</script>
-
-<template>
-  <AlertDialogAction
-    v-bind="forwardedProps"
-    :class="cn(
-      'inline-flex h-10 items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-semibold text-primary-foreground ring-offset-background transition-colors hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
-      props.class,
-    )"
-  >
-    <slot />
-  </AlertDialogAction>
-</template>

package/src/components/ui/alert-dialog/AlertDialogCancel.vue

@@ -1,21 +0,0 @@
-<script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { AlertDialogCancel, type AlertDialogCancelProps, useForwardProps } from 'radix-vue'
-import { cn } from '../lib/utils'
-
-const props = defineProps<AlertDialogCancelProps & { class?: HTMLAttributes['class'] }>()
-const delegatedProps = computed(() => { const { class: _, ...d } = props; return d })
-const forwardedProps = useForwardProps(delegatedProps)
-</script>
-
-<template>
-  <AlertDialogCancel
-    v-bind="forwardedProps"
-    :class="cn(
-      'inline-flex h-10 items-center justify-center rounded-md border border-input bg-background px-4 py-2 text-sm font-semibold ring-offset-background transition-colors hover:bg-accent hover:text-accent-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 mt-2 sm:mt-0',
-      props.class,
-    )"
-  >
-    <slot />
-  </AlertDialogCancel>
-</template>

package/src/components/ui/alert-dialog/AlertDialogContent.vue

@@ -1,39 +0,0 @@
-<script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import {
-  AlertDialogContent,
-  type AlertDialogContentEmits,
-  type AlertDialogContentProps,
-  AlertDialogOverlay,
-  AlertDialogPortal,
-  useForwardPropsEmits,
-} from 'radix-vue'
-import { cn } from '../lib/utils'
-
-const props = defineProps<AlertDialogContentProps & { class?: HTMLAttributes['class'] }>()
-const emits = defineEmits<AlertDialogContentEmits>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-  return delegated
-})
-
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
-</script>
-
-<template>
-  <AlertDialogPortal>
-    <AlertDialogOverlay
-      class="fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
-    />
-    <AlertDialogContent
-      v-bind="forwarded"
-      :class="cn(
-        'fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
-        props.class,
-      )"
-    >
-      <slot />
-    </AlertDialogContent>
-  </AlertDialogPortal>
-</template>

package/src/components/ui/alert-dialog/AlertDialogDescription.vue

@@ -1,15 +0,0 @@
-<script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { AlertDialogDescription, type AlertDialogDescriptionProps, useForwardProps } from 'radix-vue'
-import { cn } from '../lib/utils'
-
-const props = defineProps<AlertDialogDescriptionProps & { class?: HTMLAttributes['class'] }>()
-const delegatedProps = computed(() => { const { class: _, ...d } = props; return d })
-const forwardedProps = useForwardProps(delegatedProps)
-</script>
-
-<template>
-  <AlertDialogDescription v-bind="forwardedProps" :class="cn('text-sm text-muted-foreground', props.class)">
-    <slot />
-  </AlertDialogDescription>
-</template>

package/src/components/ui/alert-dialog/AlertDialogFooter.vue

@@ -1,12 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '../lib/utils'
-
-const props = defineProps<{ class?: HTMLAttributes['class'] }>()
-</script>
-
-<template>
-  <div :class="cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2', props.class)">
-    <slot />
-  </div>
-</template>

package/src/components/ui/alert-dialog/AlertDialogHeader.vue

@@ -1,12 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '../lib/utils'
-
-const props = defineProps<{ class?: HTMLAttributes['class'] }>()
-</script>
-
-<template>
-  <div :class="cn('flex flex-col gap-y-2 text-center sm:text-left', props.class)">
-    <slot />
-  </div>
-</template>