@gilav21/shadcn-angular 0.0.9 → 0.0.11

package/src/registry/index.ts

@@ -16,6 +16,11 @@ export const registry: Record<string, ComponentDefinition> = {
     name: 'accordion',
     files: ['accordion.component.ts'],
   },
+  autocomplete: {
+    name: 'autocomplete',
+    files: ['autocomplete.component.ts', 'highlight.pipe.ts'],
+    dependencies: ['popover', 'command', 'badge'],
+  },
   alert: {
     name: 'alert',
     files: ['alert.component.ts'],
@@ -70,6 +75,15 @@ export const registry: Record<string, ComponentDefinition> = {
     name: 'collapsible',
     files: ['collapsible.component.ts'],
   },
+  'color-picker': {
+    name: 'color-picker',
+    files: ['color-picker.component.ts'],
+    dependencies: ['popover', 'input', 'tabs'],
+  },
+  confetti: {
+    name: 'confetti',
+    files: ['confetti.directive.ts'],
+  },
   command: {
     name: 'command',
     files: ['command.component.ts'],
@@ -84,6 +98,25 @@ export const registry: Record<string, ComponentDefinition> = {
     files: ['date-picker.component.ts'],
     dependencies: ['calendar'],
   },
+  'data-table': {
+    name: 'data-table',
+    files: [
+      'data-table/data-table.component.ts',
+      'data-table/data-table-column-header.component.ts',
+      'data-table/data-table-pagination.component.ts',
+      'data-table/data-table.types.ts',
+      'data-table/cell-host.directive.ts',
+    ],
+    dependencies: [
+      'table',
+      'input',
+      'button',
+      'checkbox',
+      'select',
+      'pagination',
+      'popover',
+    ],
+  },
   dialog: {
     name: 'dialog',
     files: ['dialog.component.ts'],
@@ -104,6 +137,11 @@ export const registry: Record<string, ComponentDefinition> = {
     name: 'field',
     files: ['field.component.ts'],
   },
+  'file-upload': {
+    name: 'file-upload',
+    files: ['file-upload.component.ts'],
+    dependencies: ['button', 'progress'],
+  },
   'hover-card': {
     name: 'hover-card',
     files: ['hover-card.component.ts'],
@@ -114,7 +152,8 @@ export const registry: Record<string, ComponentDefinition> = {
   },
   'input-group': {
     name: 'input-group',
-    files: ['input-group.component.ts'],
+    files: ['input-group.component.ts', 'input-group.token.ts'],
+    dependencies: ['input'],
   },
   'input-otp': {
     name: 'input-otp',
@@ -140,6 +179,10 @@ export const registry: Record<string, ComponentDefinition> = {
     name: 'navigation-menu',
     files: ['navigation-menu.component.ts'],
   },
+  'number-ticker': {
+    name: 'number-ticker',
+    files: ['number-ticker.component.ts'],
+  },
   pagination: {
     name: 'pagination',
     files: ['pagination.component.ts'],
@@ -156,6 +199,10 @@ export const registry: Record<string, ComponentDefinition> = {
     name: 'radio-group',
     files: ['radio-group.component.ts'],
   },
+  rating: {
+    name: 'rating',
+    files: ['rating.component.ts'],
+  },
   resizable: {
     name: 'resizable',
     files: ['resizable.component.ts'],
@@ -192,6 +239,10 @@ export const registry: Record<string, ComponentDefinition> = {
     name: 'spinner',
     files: ['spinner.component.ts'],
   },
+  stepper: {
+    name: 'stepper',
+    files: ['stepper.component.ts'],
+  },
   switch: {
     name: 'switch',
     files: ['switch.component.ts'],
@@ -208,6 +259,10 @@ export const registry: Record<string, ComponentDefinition> = {
     name: 'textarea',
     files: ['textarea.component.ts'],
   },
+  timeline: {
+    name: 'timeline',
+    files: ['timeline.component.ts'],
+  },
   toast: {
     name: 'toast',
     files: ['toast.component.ts'],
@@ -224,6 +279,10 @@ export const registry: Record<string, ComponentDefinition> = {
     name: 'tooltip',
     files: ['tooltip.component.ts'],
   },
+  tree: {
+    name: 'tree',
+    files: ['tree.component.ts'],
+  },
   'speed-dial': {
     name: 'speed-dial',
     files: ['speed-dial.component.ts'],
@@ -232,7 +291,7 @@ export const registry: Record<string, ComponentDefinition> = {
   'chip-list': {
     name: 'chip-list',
     files: ['chip-list.component.ts'],
-    dependencies: ['badge', 'button'],
+    dependencies: ['badge', 'button', 'input', 'input-group'],
   },
   'emoji-picker': {
     name: 'emoji-picker',
@@ -259,4 +318,69 @@ export const registry: Record<string, ComponentDefinition> = {
       'scroll-area',
     ],
   },
+  // Chart Components
+  'pie-chart': {
+    name: 'pie-chart',
+    files: [
+      'charts/pie-chart.component.ts',
+      'charts/chart.types.ts',
+      'charts/chart.utils.ts',
+    ],
+  },
+  'pie-chart-drilldown': {
+    name: 'pie-chart-drilldown',
+    files: [
+      'charts/pie-chart-drilldown.component.ts',
+      'charts/chart.types.ts',
+      'charts/chart.utils.ts',
+    ],
+  },
+  'bar-chart': {
+    name: 'bar-chart',
+    files: [
+      'charts/bar-chart.component.ts',
+      'charts/chart.types.ts',
+      'charts/chart.utils.ts',
+    ],
+  },
+  'bar-chart-drilldown': {
+    name: 'bar-chart-drilldown',
+    files: [
+      'charts/bar-chart-drilldown.component.ts',
+      'charts/chart.types.ts',
+      'charts/chart.utils.ts',
+    ],
+  },
+  'stacked-bar-chart': {
+    name: 'stacked-bar-chart',
+    files: [
+      'charts/stacked-bar-chart.component.ts',
+      'charts/chart.types.ts',
+      'charts/chart.utils.ts',
+    ],
+  },
+  'column-range-chart': {
+    name: 'column-range-chart',
+    files: [
+      'charts/column-range-chart.component.ts',
+      'charts/chart.types.ts',
+      'charts/chart.utils.ts',
+    ],
+  },
+  'bar-race-chart': {
+    name: 'bar-race-chart',
+    files: [
+      'charts/bar-race-chart.component.ts',
+      'charts/chart.types.ts',
+      'charts/chart.utils.ts',
+    ],
+  },
+  'org-chart': {
+    name: 'org-chart',
+    files: [
+      'charts/org-chart.component.ts',
+      'charts/chart.types.ts',
+      'charts/chart.utils.ts',
+    ],
+  },
 };

package/src/templates/styles.ts

@@ -1,4 +1,5 @@
 type BaseColor = 'neutral' | 'slate' | 'stone' | 'gray' | 'zinc';
+type ThemeColor = 'zinc' | 'slate' | 'stone' | 'gray' | 'neutral' | 'red' | 'rose' | 'orange' | 'green' | 'blue' | 'yellow' | 'violet' | 'amber';
 
 const baseColors: Record<BaseColor, { light: Record<string, string>; dark: Record<string, string> }> = {
   neutral: {
@@ -9,8 +10,6 @@ const baseColors: Record<BaseColor, { light: Record<string, string>; dark: Recor
       '--card-foreground': 'oklch(0.145 0 0)',
       '--popover': 'oklch(1 0 0)',
       '--popover-foreground': 'oklch(0.145 0 0)',
-      '--primary': 'oklch(0.205 0 0)',
-      '--primary-foreground': 'oklch(0.985 0 0)',
       '--secondary': 'oklch(0.97 0 0)',
       '--secondary-foreground': 'oklch(0.205 0 0)',
       '--muted': 'oklch(0.97 0 0)',
@@ -20,7 +19,6 @@ const baseColors: Record<BaseColor, { light: Record<string, string>; dark: Recor
       '--destructive': 'oklch(0.577 0.245 27.325)',
       '--border': 'oklch(0.922 0 0)',
       '--input': 'oklch(0.922 0 0)',
-      '--ring': 'oklch(0.708 0 0)',
     },
     dark: {
       '--background': 'oklch(0.145 0 0)',
@@ -29,8 +27,6 @@ const baseColors: Record<BaseColor, { light: Record<string, string>; dark: Recor
       '--card-foreground': 'oklch(0.985 0 0)',
       '--popover': 'oklch(0.269 0 0)',
       '--popover-foreground': 'oklch(0.985 0 0)',
-      '--primary': 'oklch(0.922 0 0)',
-      '--primary-foreground': 'oklch(0.205 0 0)',
       '--secondary': 'oklch(0.269 0 0)',
       '--secondary-foreground': 'oklch(0.985 0 0)',
       '--muted': 'oklch(0.269 0 0)',
@@ -40,7 +36,6 @@ const baseColors: Record<BaseColor, { light: Record<string, string>; dark: Recor
       '--destructive': 'oklch(0.704 0.191 22.216)',
       '--border': 'oklch(1 0 0 / 10%)',
       '--input': 'oklch(1 0 0 / 15%)',
-      '--ring': 'oklch(0.556 0 0)',
     },
   },
   slate: {
@@ -51,8 +46,6 @@ const baseColors: Record<BaseColor, { light: Record<string, string>; dark: Recor
       '--card-foreground': 'oklch(0.129 0.042 264.695)',
       '--popover': 'oklch(1 0 0)',
       '--popover-foreground': 'oklch(0.129 0.042 264.695)',
-      '--primary': 'oklch(0.208 0.042 265.755)',
-      '--primary-foreground': 'oklch(0.984 0.003 247.858)',
       '--secondary': 'oklch(0.968 0.007 247.896)',
       '--secondary-foreground': 'oklch(0.208 0.042 265.755)',
       '--muted': 'oklch(0.968 0.007 247.896)',
@@ -62,7 +55,6 @@ const baseColors: Record<BaseColor, { light: Record<string, string>; dark: Recor
       '--destructive': 'oklch(0.577 0.245 27.325)',
       '--border': 'oklch(0.929 0.013 255.508)',
       '--input': 'oklch(0.929 0.013 255.508)',
-      '--ring': 'oklch(0.704 0.04 256.788)',
     },
     dark: {
       '--background': 'oklch(0.129 0.042 264.695)',
@@ -71,8 +63,6 @@ const baseColors: Record<BaseColor, { light: Record<string, string>; dark: Recor
       '--card-foreground': 'oklch(0.984 0.003 247.858)',
       '--popover': 'oklch(0.269 0.04 260.031)',
       '--popover-foreground': 'oklch(0.984 0.003 247.858)',
-      '--primary': 'oklch(0.929 0.013 255.508)',
-      '--primary-foreground': 'oklch(0.208 0.042 265.755)',
       '--secondary': 'oklch(0.269 0.04 260.031)',
       '--secondary-foreground': 'oklch(0.984 0.003 247.858)',
       '--muted': 'oklch(0.269 0.04 260.031)',
@@ -82,7 +72,6 @@ const baseColors: Record<BaseColor, { light: Record<string, string>; dark: Recor
       '--destructive': 'oklch(0.704 0.191 22.216)',
       '--border': 'oklch(1 0 0 / 10%)',
       '--input': 'oklch(1 0 0 / 15%)',
-      '--ring': 'oklch(0.554 0.046 257.417)',
     },
   },
   stone: {
@@ -93,8 +82,6 @@ const baseColors: Record<BaseColor, { light: Record<string, string>; dark: Recor
       '--card-foreground': 'oklch(0.147 0.004 49.25)',
       '--popover': 'oklch(1 0 0)',
       '--popover-foreground': 'oklch(0.147 0.004 49.25)',
-      '--primary': 'oklch(0.216 0.006 56.043)',
-      '--primary-foreground': 'oklch(0.985 0.001 106.423)',
       '--secondary': 'oklch(0.97 0.001 106.424)',
       '--secondary-foreground': 'oklch(0.216 0.006 56.043)',
       '--muted': 'oklch(0.97 0.001 106.424)',
@@ -104,7 +91,6 @@ const baseColors: Record<BaseColor, { light: Record<string, string>; dark: Recor
       '--destructive': 'oklch(0.577 0.245 27.325)',
       '--border': 'oklch(0.923 0.003 48.717)',
       '--input': 'oklch(0.923 0.003 48.717)',
-      '--ring': 'oklch(0.709 0.01 56.259)',
     },
     dark: {
       '--background': 'oklch(0.147 0.004 49.25)',
@@ -113,8 +99,6 @@ const baseColors: Record<BaseColor, { light: Record<string, string>; dark: Recor
       '--card-foreground': 'oklch(0.985 0.001 106.423)',
       '--popover': 'oklch(0.268 0.007 34.298)',
       '--popover-foreground': 'oklch(0.985 0.001 106.423)',
-      '--primary': 'oklch(0.923 0.003 48.717)',
-      '--primary-foreground': 'oklch(0.216 0.006 56.043)',
       '--secondary': 'oklch(0.268 0.007 34.298)',
       '--secondary-foreground': 'oklch(0.985 0.001 106.423)',
       '--muted': 'oklch(0.268 0.007 34.298)',
@@ -124,7 +108,6 @@ const baseColors: Record<BaseColor, { light: Record<string, string>; dark: Recor
       '--destructive': 'oklch(0.704 0.191 22.216)',
       '--border': 'oklch(1 0 0 / 10%)',
       '--input': 'oklch(1 0 0 / 15%)',
-      '--ring': 'oklch(0.553 0.013 58.071)',
     },
   },
   gray: {
@@ -135,8 +118,6 @@ const baseColors: Record<BaseColor, { light: Record<string, string>; dark: Recor
       '--card-foreground': 'oklch(0.13 0.028 261.692)',
       '--popover': 'oklch(1 0 0)',
       '--popover-foreground': 'oklch(0.13 0.028 261.692)',
-      '--primary': 'oklch(0.21 0.028 264.532)',
-      '--primary-foreground': 'oklch(0.985 0.002 247.839)',
       '--secondary': 'oklch(0.967 0.003 264.542)',
       '--secondary-foreground': 'oklch(0.21 0.028 264.532)',
       '--muted': 'oklch(0.967 0.003 264.542)',
@@ -146,7 +127,6 @@ const baseColors: Record<BaseColor, { light: Record<string, string>; dark: Recor
       '--destructive': 'oklch(0.577 0.245 27.325)',
       '--border': 'oklch(0.928 0.006 264.531)',
       '--input': 'oklch(0.928 0.006 264.531)',
-      '--ring': 'oklch(0.707 0.022 264.436)',
     },
     dark: {
       '--background': 'oklch(0.13 0.028 261.692)',
@@ -155,8 +135,6 @@ const baseColors: Record<BaseColor, { light: Record<string, string>; dark: Recor
       '--card-foreground': 'oklch(0.985 0.002 247.839)',
       '--popover': 'oklch(0.274 0.029 256.848)',
       '--popover-foreground': 'oklch(0.985 0.002 247.839)',
-      '--primary': 'oklch(0.928 0.006 264.531)',
-      '--primary-foreground': 'oklch(0.21 0.028 264.532)',
       '--secondary': 'oklch(0.274 0.029 256.848)',
       '--secondary-foreground': 'oklch(0.985 0.002 247.839)',
       '--muted': 'oklch(0.274 0.029 256.848)',
@@ -166,7 +144,6 @@ const baseColors: Record<BaseColor, { light: Record<string, string>; dark: Recor
       '--destructive': 'oklch(0.704 0.191 22.216)',
       '--border': 'oklch(1 0 0 / 10%)',
       '--input': 'oklch(1 0 0 / 15%)',
-      '--ring': 'oklch(0.551 0.027 264.364)',
     },
   },
   zinc: {
@@ -177,8 +154,6 @@ const baseColors: Record<BaseColor, { light: Record<string, string>; dark: Recor
       '--card-foreground': 'oklch(0.141 0.005 285.823)',
       '--popover': 'oklch(1 0 0)',
       '--popover-foreground': 'oklch(0.141 0.005 285.823)',
-      '--primary': 'oklch(0.21 0.006 285.885)',
-      '--primary-foreground': 'oklch(0.985 0 0)',
       '--secondary': 'oklch(0.967 0.001 286.375)',
       '--secondary-foreground': 'oklch(0.21 0.006 285.885)',
       '--muted': 'oklch(0.967 0.001 286.375)',
@@ -188,7 +163,6 @@ const baseColors: Record<BaseColor, { light: Record<string, string>; dark: Recor
       '--destructive': 'oklch(0.577 0.245 27.325)',
       '--border': 'oklch(0.92 0.004 286.32)',
       '--input': 'oklch(0.92 0.004 286.32)',
-      '--ring': 'oklch(0.705 0.015 286.067)',
     },
     dark: {
       '--background': 'oklch(0.141 0.005 285.823)',
@@ -197,8 +171,6 @@ const baseColors: Record<BaseColor, { light: Record<string, string>; dark: Recor
       '--card-foreground': 'oklch(0.985 0 0)',
       '--popover': 'oklch(0.274 0.006 286.033)',
       '--popover-foreground': 'oklch(0.985 0 0)',
-      '--primary': 'oklch(0.92 0.004 286.32)',
-      '--primary-foreground': 'oklch(0.21 0.006 285.885)',
       '--secondary': 'oklch(0.274 0.006 286.033)',
       '--secondary-foreground': 'oklch(0.985 0 0)',
       '--muted': 'oklch(0.274 0.006 286.033)',
@@ -208,19 +180,77 @@ const baseColors: Record<BaseColor, { light: Record<string, string>; dark: Recor
       '--destructive': 'oklch(0.704 0.191 22.216)',
       '--border': 'oklch(1 0 0 / 10%)',
       '--input': 'oklch(1 0 0 / 15%)',
-      '--ring': 'oklch(0.552 0.016 285.938)',
     },
   },
 };
 
+const themeColors: Record<ThemeColor, { light: Record<string, string>; dark: Record<string, string> }> = {
+  neutral: {
+    light: { '--primary': 'oklch(0.205 0 0)', '--primary-foreground': 'oklch(0.985 0 0)', '--ring': 'oklch(0.708 0 0)' },
+    dark: { '--primary': 'oklch(0.985 0 0)', '--primary-foreground': 'oklch(0.205 0 0)', '--ring': 'oklch(0.708 0 0)' },
+  },
+  zinc: { // Same as neutral for now
+    light: { '--primary': 'oklch(0.205 0 0)', '--primary-foreground': 'oklch(0.985 0 0)', '--ring': 'oklch(0.708 0 0)' },
+    dark: { '--primary': 'oklch(0.985 0 0)', '--primary-foreground': 'oklch(0.205 0 0)', '--ring': 'oklch(0.708 0 0)' },
+  },
+  slate: {
+    light: { '--primary': 'oklch(0.208 0.042 265.755)', '--primary-foreground': 'oklch(0.984 0.003 247.858)', '--ring': 'oklch(0.704 0.04 256.788)' },
+    dark: { '--primary': 'oklch(0.929 0.013 255.508)', '--primary-foreground': 'oklch(0.208 0.042 265.755)', '--ring': 'oklch(0.704 0.04 256.788)' },
+  },
+  stone: {
+    light: { '--primary': 'oklch(0.216 0.006 56.043)', '--primary-foreground': 'oklch(0.985 0.001 106.423)', '--ring': 'oklch(0.709 0.01 56.259)' },
+    dark: { '--primary': 'oklch(0.923 0.003 48.717)', '--primary-foreground': 'oklch(0.216 0.006 56.043)', '--ring': 'oklch(0.553 0.013 58.071)' },
+  },
+  gray: {
+    light: { '--primary': 'oklch(0.21 0.028 264.532)', '--primary-foreground': 'oklch(0.985 0.002 247.839)', '--ring': 'oklch(0.707 0.022 264.436)' },
+    dark: { '--primary': 'oklch(0.928 0.006 264.531)', '--primary-foreground': 'oklch(0.21 0.028 264.532)', '--ring': 'oklch(0.551 0.027 264.364)' },
+  },
+  red: {
+    light: { '--primary': 'oklch(0.577 0.245 27.325)', '--primary-foreground': 'oklch(0.985 0 0)', '--ring': 'oklch(0.577 0.245 27.325)' },
+    dark: { '--primary': 'oklch(0.577 0.245 27.325)', '--primary-foreground': 'oklch(0.985 0 0)', '--ring': 'oklch(0.577 0.245 27.325)' },
+  },
+  rose: {
+    light: { '--primary': 'oklch(0.645 0.246 16.439)', '--primary-foreground': 'oklch(0.985 0 0)', '--ring': 'oklch(0.645 0.246 16.439)' },
+    dark: { '--primary': 'oklch(0.645 0.246 16.439)', '--primary-foreground': 'oklch(0.985 0 0)', '--ring': 'oklch(0.645 0.246 16.439)' },
+  },
+  orange: {
+    light: { '--primary': 'oklch(0.646 0.222 41.116)', '--primary-foreground': 'oklch(0.985 0 0)', '--ring': 'oklch(0.646 0.222 41.116)' },
+    dark: { '--primary': 'oklch(0.646 0.222 41.116)', '--primary-foreground': 'oklch(0.985 0 0)', '--ring': 'oklch(0.646 0.222 41.116)' },
+  },
+  green: {
+    light: { '--primary': 'oklch(0.623 0.214 131.655)', '--primary-foreground': 'oklch(0.985 0 0)', '--ring': 'oklch(0.623 0.214 131.655)' },
+    dark: { '--primary': 'oklch(0.623 0.214 131.655)', '--primary-foreground': 'oklch(0.985 0 0)', '--ring': 'oklch(0.623 0.214 131.655)' },
+  },
+  blue: {
+    light: { '--primary': 'oklch(0.546 0.245 262.881)', '--primary-foreground': 'oklch(0.985 0 0)', '--ring': 'oklch(0.546 0.245 262.881)' },
+    dark: { '--primary': 'oklch(0.546 0.245 262.881)', '--primary-foreground': 'oklch(0.985 0 0)', '--ring': 'oklch(0.546 0.245 262.881)' },
+  },
+  yellow: {
+    light: { '--primary': 'oklch(0.82 0.185 84.67)', '--primary-foreground': 'oklch(0.205 0 0)', '--ring': 'oklch(0.82 0.185 84.67)' },
+    dark: { '--primary': 'oklch(0.82 0.185 84.67)', '--primary-foreground': 'oklch(0.205 0 0)', '--ring': 'oklch(0.82 0.185 84.67)' },
+  },
+  violet: {
+    light: { '--primary': 'oklch(0.558 0.288 302.321)', '--primary-foreground': 'oklch(0.985 0 0)', '--ring': 'oklch(0.558 0.288 302.321)' },
+    dark: { '--primary': 'oklch(0.558 0.288 302.321)', '--primary-foreground': 'oklch(0.985 0 0)', '--ring': 'oklch(0.558 0.288 302.321)' },
+  },
+  amber: {
+    light: { '--primary': 'oklch(0.77 0.16 70)', '--primary-foreground': 'oklch(0.145 0 0)', '--ring': 'oklch(0.77 0.16 70)' },
+    dark: { '--primary': 'oklch(0.77 0.16 70)', '--primary-foreground': 'oklch(0.145 0 0)', '--ring': 'oklch(0.77 0.16 70)' },
+  },
+};
+
 function generateCssVars(vars: Record<string, string>, indent: string = '  '): string {
   return Object.entries(vars)
     .map(([key, value]) => `${indent}${key}: ${value};`)
     .join('\n');
 }
 
-export function getStylesTemplate(baseColor: BaseColor = 'neutral'): string {
-  const colors = baseColors[baseColor];
+export function getStylesTemplate(baseColor: BaseColor = 'neutral', themeColor: ThemeColor = 'zinc'): string {
+  const base = baseColors[baseColor];
+  const theme = themeColors[themeColor] || themeColors.neutral;
+
+  const lightVars = { ...base.light, ...theme.light };
+  const darkVars = { ...base.dark, ...theme.dark };
 
   return `@import "tailwindcss";
 
@@ -232,7 +262,7 @@ export function getStylesTemplate(baseColor: BaseColor = 'neutral'): string {
 
 :root {
   --radius: 0.625rem;
-${generateCssVars(colors.light)}
+${generateCssVars(lightVars)}
   --chart-1: oklch(0.646 0.222 41.116);
   --chart-2: oklch(0.6 0.118 184.704);
   --chart-3: oklch(0.398 0.07 227.392);
@@ -249,7 +279,7 @@ ${generateCssVars(colors.light)}
 }
 
 .dark {
-${generateCssVars(colors.dark)}
+${generateCssVars(darkVars)}
   --chart-1: oklch(0.488 0.243 264.376);
   --chart-2: oklch(0.696 0.17 162.48);
   --chart-3: oklch(0.769 0.188 70.08);
@@ -319,6 +349,7 @@ ${generateCssVars(colors.dark)}
   }
   html {
     font-family: var(--font-sans);
+    font-size: 16px;
   }
   button:not(:disabled),
   [role="button"]:not(:disabled) {

package/src/templates/utils.ts

@@ -1,5 +1,5 @@
 export function getUtilsTemplate(): string {
-    return `import { clsx, type ClassValue } from 'clsx';
+  return `import { clsx, type ClassValue } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 
 /**
@@ -8,5 +8,14 @@ import { twMerge } from 'tailwind-merge';
 export function cn(...inputs: ClassValue[]): string {
   return twMerge(clsx(inputs));
 }
+
+/**
+ * Check if the current direction is RTL by reading the computed style of the element.
+ * This allows components to detect RTL without needing an explicit input.
+ */
+export function isRtl(el: HTMLElement): boolean {
+    return getComputedStyle(el).direction === 'rtl';
+}
+
 `;
 }

package/src/utils/config.ts

@@ -3,10 +3,11 @@ import path from 'path';
 
 export interface Config {
     $schema: string;
-    style: 'default' | 'new-york';
+    style: 'default';
     tailwind: {
         css: string;
         baseColor: 'neutral' | 'slate' | 'stone' | 'gray' | 'zinc';
+        theme?: 'zinc' | 'slate' | 'stone' | 'gray' | 'neutral' | 'red' | 'rose' | 'orange' | 'green' | 'blue' | 'yellow' | 'violet' | 'amber';
         cssVariables: boolean;
     };
     aliases: {
@@ -24,6 +25,7 @@ export function getDefaultConfig(): Config {
         tailwind: {
             css: 'src/styles.scss',
             baseColor: 'neutral',
+            theme: 'zinc',
             cssVariables: true,
         },
         aliases: {