@mesob/ui 0.3.0 → 0.3.2

package/dist/providers.d.ts

@@ -8,6 +8,9 @@ type Navigation = ReturnType<typeof createNavigation>;
 type MesobContextValue = {
     navigation: Navigation;
     linkComponent: Navigation['Link'];
+    goBack: () => void;
+    navigate: (href: string) => void;
+    pathname: string;
     locale: string;
     defaultLanguage: string;
     supportedLanguages: SupportedLanguage[];

package/dist/providers.js

@@ -87,6 +87,8 @@ function MesobProvider({
   }
   const locale = useLocale();
   const navigation = useMemo(() => createNavigation(routing), [routing]);
+  const router = navigation.useRouter();
+  const pathname = navigation.usePathname();
   const value = useMemo(() => {
     const linkComponent = linkComponentProp ?? navigation?.Link;
     if (!linkComponent) {
@@ -97,6 +99,9 @@ function MesobProvider({
     return {
       navigation,
       linkComponent,
+      goBack: () => router.back(),
+      navigate: (href) => router.push(href),
+      pathname,
       locale,
       defaultLanguage,
       supportedLanguages
@@ -104,6 +109,8 @@ function MesobProvider({
   }, [
     navigation,
     linkComponentProp,
+    router,
+    pathname,
     locale,
     defaultLanguage,
     supportedLanguages

package/dist/providers.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/provider/mesob-provider.tsx","../src/components/ui/tooltip.tsx","../src/lib/utils.ts","../src/lib/locale.ts"],"sourcesContent":["'use client';\n\nimport { useLocale } from 'next-intl';\nimport { createNavigation } from 'next-intl/navigation';\nimport { createContext, type ReactNode, useContext, useMemo } from 'react';\nimport { TooltipProvider } from '../components/ui/tooltip';\nimport {\n  DEFAULT_LANGUAGE,\n  SUPPORTED_LANGUAGES,\n  type SupportedLanguage,\n} from '../lib/locale';\n\ntype Navigation = ReturnType<typeof createNavigation>;\n\ntype MesobContextValue = {\n  navigation: Navigation;\n  linkComponent: Navigation['Link'];\n  locale: string;\n  defaultLanguage: string;\n  supportedLanguages: SupportedLanguage[];\n  t?: (key: string, params?: Record<string, string | number>) => string;\n};\n\nconst MesobContext = createContext<MesobContextValue | null>(null);\n\nconst MESOB_ERR = '[MesobProvider]';\n\nexport type MesobProviderProps = {\n  children: ReactNode;\n  routing: Parameters<typeof createNavigation>[0];\n  linkComponent?: Navigation['Link'];\n  defaultLanguage?: string;\n  supportedLanguages?: SupportedLanguage[];\n};\n\nexport function MesobProvider({\n  children,\n  routing,\n  linkComponent: linkComponentProp,\n  defaultLanguage = DEFAULT_LANGUAGE,\n  supportedLanguages = SUPPORTED_LANGUAGES,\n}: MesobProviderProps) {\n  if (!routing) {\n    throw new Error(`${MESOB_ERR} routing is required`);\n  }\n\n  const locale = useLocale();\n  const navigation = useMemo(() => createNavigation(routing), [routing]);\n\n  const value = useMemo(() => {\n    const linkComponent = linkComponentProp ?? navigation?.Link;\n    if (!linkComponent) {\n      throw new Error(\n        `${MESOB_ERR} linkComponent or valid createNavigation required`,\n      );\n    }\n    return {\n      navigation,\n      linkComponent,\n      locale,\n      defaultLanguage,\n      supportedLanguages,\n    };\n  }, [\n    navigation,\n    linkComponentProp,\n    locale,\n    defaultLanguage,\n    supportedLanguages,\n  ]);\n\n  return (\n    <MesobContext.Provider value={value}>\n      <TooltipProvider delay={0}>{children}</TooltipProvider>\n    </MesobContext.Provider>\n  );\n}\n\nexport function useMesob(): MesobContextValue | null {\n  return useContext(MesobContext);\n}\n\nexport function useLocaleConfig(): {\n  defaultLanguage: string;\n  supportedLanguages: SupportedLanguage[];\n} {\n  const mesob = useMesob();\n  return {\n    defaultLanguage: mesob?.defaultLanguage ?? DEFAULT_LANGUAGE,\n    supportedLanguages: mesob?.supportedLanguages ?? SUPPORTED_LANGUAGES,\n  };\n}\n","'use client';\n\nimport { Tooltip as TooltipPrimitive } from '@base-ui/react/tooltip';\n\nimport { cn } from '../../lib/utils';\n\nfunction TooltipProvider({\n  delay = 0,\n  ...props\n}: TooltipPrimitive.Provider.Props) {\n  return (\n    <TooltipPrimitive.Provider\n      data-slot=\"tooltip-provider\"\n      delay={delay}\n      {...props}\n    />\n  );\n}\n\nfunction Tooltip({ ...props }: TooltipPrimitive.Root.Props) {\n  return <TooltipPrimitive.Root data-slot=\"tooltip\" {...props} />;\n}\n\nfunction TooltipTrigger({ ...props }: TooltipPrimitive.Trigger.Props) {\n  return <TooltipPrimitive.Trigger data-slot=\"tooltip-trigger\" {...props} />;\n}\n\nfunction TooltipContent({\n  className,\n  side = 'top',\n  sideOffset = 4,\n  align = 'center',\n  alignOffset = 0,\n  children,\n  ...props\n}: TooltipPrimitive.Popup.Props &\n  Pick<\n    TooltipPrimitive.Positioner.Props,\n    'align' | 'alignOffset' | 'side' | 'sideOffset'\n  >) {\n  return (\n    <TooltipPrimitive.Portal>\n      <TooltipPrimitive.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        side={side}\n        sideOffset={sideOffset}\n        className=\"isolate z-50\"\n      >\n        <TooltipPrimitive.Popup\n          data-slot=\"tooltip-content\"\n          className={cn(\n            'cn-tooltip-content cn-tooltip-content-logical bg-foreground text-background z-50 w-fit max-w-xs origin-(--transform-origin)',\n            className,\n          )}\n          {...props}\n        >\n          {children}\n          <TooltipPrimitive.Arrow className=\"cn-tooltip-arrow cn-tooltip-arrow-logical bg-foreground fill-foreground z-50 data-[side=bottom]:top-1 data-[side=left]:top-1/2! data-[side=left]:-right-1 data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2! data-[side=right]:-left-1 data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-2.5\" />\n        </TooltipPrimitive.Popup>\n      </TooltipPrimitive.Positioner>\n    </TooltipPrimitive.Portal>\n  );\n}\n\nexport { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };\n","import { type ClassValue, clsx } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n","import { z } from 'zod';\n\nexport type LocaleKey = 'am' | 'en' | 'om' | 'ti' | 'so' | 'sw' | 'fr' | 'ar';\n\nexport type Locale = {\n  [key in LocaleKey | string]?: string;\n};\n\nexport type Translation = (key: string) => string;\n\nexport const DEFAULT_LANGUAGE = 'en';\n\nexport type SupportedLanguage = { value: string; label: string; key: string };\n\nexport const SUPPORTED_LANGUAGES: SupportedLanguage[] = [\n  { value: 'en', label: 'English', key: 'En' },\n  { value: 'am', label: 'አማርኛ', key: 'አማ' },\n];\n\nexport const LOCALE_INPUT_DEFAULT = Object.fromEntries(\n  SUPPORTED_LANGUAGES.map(({ value }) => [value, '']),\n);\n\ntype SchemaAccumulator = {\n  [key: string]: z.ZodTypeAny;\n};\n\nexport function createLocalInputSchema(\n  defaultValidation: z.ZodTypeAny,\n  otherValidation: z.ZodTypeAny,\n): z.ZodObject<SchemaAccumulator> {\n  const schemaDefinition: { [key: string]: z.ZodTypeAny } =\n    SUPPORTED_LANGUAGES.reduce((acc: SchemaAccumulator, { value }) => {\n      acc[value] =\n        value === DEFAULT_LANGUAGE ? defaultValidation : otherValidation;\n      return acc;\n    }, {});\n\n  return z.object(schemaDefinition);\n}\n\nexport function createLocalRequiredInputSchema(\n  validation: z.ZodTypeAny,\n): z.ZodEffects<z.ZodObject<SchemaAccumulator>> {\n  const schemaDefinition: { [key: string]: z.ZodTypeAny } =\n    SUPPORTED_LANGUAGES.reduce((acc: SchemaAccumulator, { value }) => {\n      acc[value] = validation;\n      return acc;\n    }, {});\n\n  return z.object(schemaDefinition).superRefine((data, ctx) => {\n    const hasValue = Object.values(data).some(\n      (value) => typeof value === 'string' && value.trim().length > 0,\n    );\n\n    if (!hasValue) {\n      for (const { value } of SUPPORTED_LANGUAGES) {\n        ctx.addIssue({\n          code: z.ZodIssueCode.custom,\n          message: 'field is required',\n          path: [value],\n        });\n      }\n    }\n  });\n}\n\nexport const LOCALE_REQUIRED_INPUT_SCHEMA = createLocalRequiredInputSchema(\n  z.string().optional(),\n);\n\nexport const LOCALE_OPTIONAL_INPUT_SCHEMA = createLocalInputSchema(\n  z.string().optional(),\n  z.string().optional(),\n);\n"],"mappings":"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","names":["jsx"]}
+{"version":3,"sources":["../src/provider/mesob-provider.tsx","../src/components/ui/tooltip.tsx","../src/lib/utils.ts","../src/lib/locale.ts"],"sourcesContent":["'use client';\n\nimport { useLocale } from 'next-intl';\nimport { createNavigation } from 'next-intl/navigation';\nimport { createContext, type ReactNode, useContext, useMemo } from 'react';\nimport { TooltipProvider } from '../components/ui/tooltip';\nimport {\n  DEFAULT_LANGUAGE,\n  SUPPORTED_LANGUAGES,\n  type SupportedLanguage,\n} from '../lib/locale';\n\ntype Navigation = ReturnType<typeof createNavigation>;\n\ntype MesobContextValue = {\n  navigation: Navigation;\n  linkComponent: Navigation['Link'];\n  goBack: () => void;\n  navigate: (href: string) => void;\n  pathname: string;\n  locale: string;\n  defaultLanguage: string;\n  supportedLanguages: SupportedLanguage[];\n  t?: (key: string, params?: Record<string, string | number>) => string;\n};\n\nconst MesobContext = createContext<MesobContextValue | null>(null);\n\nconst MESOB_ERR = '[MesobProvider]';\n\nexport type MesobProviderProps = {\n  children: ReactNode;\n  routing: Parameters<typeof createNavigation>[0];\n  linkComponent?: Navigation['Link'];\n  defaultLanguage?: string;\n  supportedLanguages?: SupportedLanguage[];\n};\n\nexport function MesobProvider({\n  children,\n  routing,\n  linkComponent: linkComponentProp,\n  defaultLanguage = DEFAULT_LANGUAGE,\n  supportedLanguages = SUPPORTED_LANGUAGES,\n}: MesobProviderProps) {\n  if (!routing) {\n    throw new Error(`${MESOB_ERR} routing is required`);\n  }\n\n  const locale = useLocale();\n  const navigation = useMemo(() => createNavigation(routing), [routing]);\n  const router = navigation.useRouter();\n  const pathname = navigation.usePathname();\n\n  const value = useMemo(() => {\n    const linkComponent = linkComponentProp ?? navigation?.Link;\n    if (!linkComponent) {\n      throw new Error(\n        `${MESOB_ERR} linkComponent or valid createNavigation required`,\n      );\n    }\n    return {\n      navigation,\n      linkComponent,\n      goBack: () => router.back(),\n      navigate: (href: string) => router.push(href),\n      pathname,\n      locale,\n      defaultLanguage,\n      supportedLanguages,\n    };\n  }, [\n    navigation,\n    linkComponentProp,\n    router,\n    pathname,\n    locale,\n    defaultLanguage,\n    supportedLanguages,\n  ]);\n\n  return (\n    <MesobContext.Provider value={value}>\n      <TooltipProvider delay={0}>{children}</TooltipProvider>\n    </MesobContext.Provider>\n  );\n}\n\nexport function useMesob(): MesobContextValue | null {\n  return useContext(MesobContext);\n}\n\nexport function useLocaleConfig(): {\n  defaultLanguage: string;\n  supportedLanguages: SupportedLanguage[];\n} {\n  const mesob = useMesob();\n  return {\n    defaultLanguage: mesob?.defaultLanguage ?? DEFAULT_LANGUAGE,\n    supportedLanguages: mesob?.supportedLanguages ?? SUPPORTED_LANGUAGES,\n  };\n}\n","'use client';\n\nimport { Tooltip as TooltipPrimitive } from '@base-ui/react/tooltip';\n\nimport { cn } from '../../lib/utils';\n\nfunction TooltipProvider({\n  delay = 0,\n  ...props\n}: TooltipPrimitive.Provider.Props) {\n  return (\n    <TooltipPrimitive.Provider\n      data-slot=\"tooltip-provider\"\n      delay={delay}\n      {...props}\n    />\n  );\n}\n\nfunction Tooltip({ ...props }: TooltipPrimitive.Root.Props) {\n  return <TooltipPrimitive.Root data-slot=\"tooltip\" {...props} />;\n}\n\nfunction TooltipTrigger({ ...props }: TooltipPrimitive.Trigger.Props) {\n  return <TooltipPrimitive.Trigger data-slot=\"tooltip-trigger\" {...props} />;\n}\n\nfunction TooltipContent({\n  className,\n  side = 'top',\n  sideOffset = 4,\n  align = 'center',\n  alignOffset = 0,\n  children,\n  ...props\n}: TooltipPrimitive.Popup.Props &\n  Pick<\n    TooltipPrimitive.Positioner.Props,\n    'align' | 'alignOffset' | 'side' | 'sideOffset'\n  >) {\n  return (\n    <TooltipPrimitive.Portal>\n      <TooltipPrimitive.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        side={side}\n        sideOffset={sideOffset}\n        className=\"isolate z-50\"\n      >\n        <TooltipPrimitive.Popup\n          data-slot=\"tooltip-content\"\n          className={cn(\n            'cn-tooltip-content cn-tooltip-content-logical bg-foreground text-background z-50 w-fit max-w-xs origin-(--transform-origin)',\n            className,\n          )}\n          {...props}\n        >\n          {children}\n          <TooltipPrimitive.Arrow className=\"cn-tooltip-arrow cn-tooltip-arrow-logical bg-foreground fill-foreground z-50 data-[side=bottom]:top-1 data-[side=left]:top-1/2! data-[side=left]:-right-1 data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2! data-[side=right]:-left-1 data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-2.5\" />\n        </TooltipPrimitive.Popup>\n      </TooltipPrimitive.Positioner>\n    </TooltipPrimitive.Portal>\n  );\n}\n\nexport { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };\n","import { type ClassValue, clsx } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n","import { z } from 'zod';\n\nexport type LocaleKey = 'am' | 'en' | 'om' | 'ti' | 'so' | 'sw' | 'fr' | 'ar';\n\nexport type Locale = {\n  [key in LocaleKey | string]?: string;\n};\n\nexport type Translation = (key: string) => string;\n\nexport const DEFAULT_LANGUAGE = 'en';\n\nexport type SupportedLanguage = { value: string; label: string; key: string };\n\nexport const SUPPORTED_LANGUAGES: SupportedLanguage[] = [\n  { value: 'en', label: 'English', key: 'En' },\n  { value: 'am', label: 'አማርኛ', key: 'አማ' },\n];\n\nexport const LOCALE_INPUT_DEFAULT = Object.fromEntries(\n  SUPPORTED_LANGUAGES.map(({ value }) => [value, '']),\n);\n\ntype SchemaAccumulator = {\n  [key: string]: z.ZodTypeAny;\n};\n\nexport function createLocalInputSchema(\n  defaultValidation: z.ZodTypeAny,\n  otherValidation: z.ZodTypeAny,\n): z.ZodObject<SchemaAccumulator> {\n  const schemaDefinition: { [key: string]: z.ZodTypeAny } =\n    SUPPORTED_LANGUAGES.reduce((acc: SchemaAccumulator, { value }) => {\n      acc[value] =\n        value === DEFAULT_LANGUAGE ? defaultValidation : otherValidation;\n      return acc;\n    }, {});\n\n  return z.object(schemaDefinition);\n}\n\nexport function createLocalRequiredInputSchema(\n  validation: z.ZodTypeAny,\n): z.ZodEffects<z.ZodObject<SchemaAccumulator>> {\n  const schemaDefinition: { [key: string]: z.ZodTypeAny } =\n    SUPPORTED_LANGUAGES.reduce((acc: SchemaAccumulator, { value }) => {\n      acc[value] = validation;\n      return acc;\n    }, {});\n\n  return z.object(schemaDefinition).superRefine((data, ctx) => {\n    const hasValue = Object.values(data).some(\n      (value) => typeof value === 'string' && value.trim().length > 0,\n    );\n\n    if (!hasValue) {\n      for (const { value } of SUPPORTED_LANGUAGES) {\n        ctx.addIssue({\n          code: z.ZodIssueCode.custom,\n          message: 'field is required',\n          path: [value],\n        });\n      }\n    }\n  });\n}\n\nexport const LOCALE_REQUIRED_INPUT_SCHEMA = createLocalRequiredInputSchema(\n  z.string().optional(),\n);\n\nexport const LOCALE_OPTIONAL_INPUT_SCHEMA = createLocalInputSchema(\n  z.string().optional(),\n  z.string().optional(),\n);\n"],"mappings":"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","names":["jsx"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mesob/ui",
-  "version": "0.3.0",
+  "version": "0.3.2",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -26,10 +26,16 @@
     "./lib/*": {
       "types": "./dist/lib/*.d.ts",
       "default": "./dist/lib/*.js"
+    },
+    "./styles/themes.css": {
+      "default": "./src/styles/themes.css",
+      "import": "./src/styles/themes.css",
+      "require": "./src/styles/themes.css"
     }
   },
   "files": [
-    "dist"
+    "dist",
+    "src/styles"
   ],
   "dependencies": {
     "@base-ui/react": "^1.1.0",

package/src/styles/lyra/button.css

@@ -0,0 +1,79 @@
+.style-lyra {
+  /* MARK: Button */
+  .cn-button {
+    @apply focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-none border border-transparent bg-clip-padding text-xs font-medium focus-visible:ring-1 aria-invalid:ring-1 [&_svg:not([class*='size-'])]:size-4;
+  }
+
+  .cn-button-variant-default {
+    @apply bg-primary text-primary-foreground [a]:hover:bg-primary/80;
+  }
+
+  .cn-button-variant-outline {
+    @apply border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground;
+  }
+
+  .cn-button-variant-secondary {
+    @apply bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground;
+  }
+
+  .cn-button-variant-ghost {
+    @apply hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground;
+  }
+
+  .cn-button-variant-destructive {
+    @apply bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30;
+  }
+
+  .cn-button-variant-link {
+    @apply text-primary underline-offset-4 hover:underline;
+  }
+
+  .cn-button-variant-light {
+    @apply bg-primary/12 text-primary hover:bg-primary/18 dark:bg-primary/20 dark:hover:bg-primary/28;
+  }
+
+  .cn-button-variant-destructive-filled {
+    @apply bg-destructive text-destructive-foreground hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40;
+  }
+
+  .cn-button-size-xl {
+    @apply h-10 gap-2 px-4.5 has-data-[icon=inline-end]:pr-4 has-data-[icon=inline-start]:pl-4 text-sm;
+  }
+
+  .cn-button-size-icon-xl {
+    @apply size-10 [&_svg:not([class*='size-'])]:size-4.5;
+  }
+
+  .cn-button-size-xs {
+    @apply h-6 gap-1 rounded-none px-2 text-xs has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3;
+  }
+
+  .cn-button-size-sm {
+    @apply h-7 gap-1.5 rounded-none px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 [&_svg:not([class*='size-'])]:size-3.5;
+  }
+
+  .cn-button-size-default {
+    @apply h-8 gap-1.5 px-3 has-data-[icon=inline-end]:pr-2.5 has-data-[icon=inline-start]:pl-2.5;
+  }
+
+  .cn-button-size-lg {
+    @apply h-9 gap-2 px-3.5 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3;
+  }
+
+  .cn-button-size-icon-xs {
+    @apply size-6 rounded-none [&_svg:not([class*='size-'])]:size-3;
+  }
+
+  .cn-button-size-icon-sm {
+    @apply size-7 rounded-none [&_svg:not([class*='size-'])]:size-3.5;
+  }
+
+  .cn-button-size-icon {
+    @apply size-8 [&_svg:not([class*='size-'])]:size-4;
+  }
+
+  .cn-button-size-icon-lg {
+    @apply size-9 [&_svg:not([class*='size-'])]:size-4;
+  }
+
+}

package/src/styles/maia/button.css

@@ -0,0 +1,79 @@
+.style-maia {
+  /* MARK: Button */
+  .cn-button {
+    @apply focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-4xl border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-[3px] aria-invalid:ring-[3px] [&_svg:not([class*='size-'])]:size-4;
+  }
+
+  .cn-button-variant-default {
+    @apply bg-primary text-primary-foreground hover:bg-primary/80;
+  }
+
+  .cn-button-variant-outline {
+    @apply border-border bg-input/30 hover:bg-input/50 hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground;
+  }
+
+  .cn-button-variant-secondary {
+    @apply bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground;
+  }
+
+  .cn-button-variant-ghost {
+    @apply hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground;
+  }
+
+  .cn-button-variant-destructive {
+    @apply bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30;
+  }
+
+  .cn-button-variant-link {
+    @apply text-primary underline-offset-4 hover:underline;
+  }
+
+  .cn-button-variant-light {
+    @apply bg-primary/12 text-primary hover:bg-primary/18 dark:bg-primary/20 dark:hover:bg-primary/28;
+  }
+
+  .cn-button-variant-destructive-filled {
+    @apply bg-destructive text-destructive-foreground hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40;
+  }
+
+  .cn-button-size-xl {
+    @apply h-12 gap-2 px-7 has-data-[icon=inline-end]:pr-5 has-data-[icon=inline-start]:pl-5 text-lg;
+  }
+
+  .cn-button-size-icon-xl {
+    @apply size-12;
+  }
+
+  .cn-button-size-xs {
+    @apply h-6 gap-1 px-2.5 text-xs has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 [&_svg:not([class*='size-'])]:size-3;
+  }
+
+  .cn-button-size-sm {
+    @apply h-8 gap-1 px-3 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2;
+  }
+
+  .cn-button-size-default {
+    @apply h-9 gap-1.5 px-3 has-data-[icon=inline-end]:pr-2.5 has-data-[icon=inline-start]:pl-2.5;
+  }
+
+  .cn-button-size-lg {
+    @apply h-10 gap-1.5 px-4 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3;
+  }
+
+  .cn-button-size-icon-xs {
+    @apply size-6 [&_svg:not([class*='size-'])]:size-3;
+  }
+
+  .cn-button-size-icon-sm {
+    @apply size-8;
+  }
+
+  .cn-button-size-icon {
+    @apply size-9;
+  }
+
+  .cn-button-size-icon-lg {
+    @apply size-10;
+  }
+
+}

package/src/styles/mira/button.css

@@ -0,0 +1,79 @@
+.style-mira {
+  /* MARK: Button */
+  .cn-button {
+    @apply focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-md border border-transparent bg-clip-padding text-xs/relaxed font-medium focus-visible:ring-2 aria-invalid:ring-2 [&_svg:not([class*='size-'])]:size-4;
+  }
+
+  .cn-button-variant-default {
+    @apply bg-primary text-primary-foreground hover:bg-primary/80;
+  }
+
+  .cn-button-variant-outline {
+    @apply border-border dark:bg-input/30 hover:bg-input/50 hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground;
+  }
+
+  .cn-button-variant-secondary {
+    @apply bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground;
+  }
+
+  .cn-button-variant-ghost {
+    @apply hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground;
+  }
+
+  .cn-button-variant-destructive {
+    @apply bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30;
+  }
+
+  .cn-button-variant-link {
+    @apply text-primary underline-offset-4 hover:underline;
+  }
+
+  .cn-button-variant-light {
+    @apply bg-primary/12 text-primary hover:bg-primary/18 dark:bg-primary/20 dark:hover:bg-primary/28;
+  }
+
+  .cn-button-variant-destructive-filled {
+    @apply bg-destructive text-destructive-foreground hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40;
+  }
+
+  .cn-button-size-xl {
+    @apply h-12 gap-2 px-7 has-data-[icon=inline-end]:pr-5 has-data-[icon=inline-start]:pl-5 text-lg;
+  }
+
+  .cn-button-size-icon-xl {
+    @apply size-12;
+  }
+
+  .cn-button-size-xs {
+    @apply h-5 gap-1 rounded-sm px-2 text-[0.625rem] has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-2.5;
+  }
+
+  .cn-button-size-sm {
+    @apply h-6 gap-1 px-2 text-xs/relaxed has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3;
+  }
+
+  .cn-button-size-default {
+    @apply h-7 gap-1 px-2 text-xs/relaxed has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5;
+  }
+
+  .cn-button-size-lg {
+    @apply h-8 gap-1 px-2.5 text-xs/relaxed has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 [&_svg:not([class*='size-'])]:size-4;
+  }
+
+  .cn-button-size-icon-xs {
+    @apply size-5 rounded-sm [&_svg:not([class*='size-'])]:size-2.5;
+  }
+
+  .cn-button-size-icon-sm {
+    @apply size-6 [&_svg:not([class*='size-'])]:size-3;
+  }
+
+  .cn-button-size-icon {
+    @apply size-7 [&_svg:not([class*='size-'])]:size-3.5;
+  }
+
+  .cn-button-size-icon-lg {
+    @apply size-8 [&_svg:not([class*='size-'])]:size-4;
+  }
+
+}