@opexa/portal-components 0.0.27 → 0.0.28

package/dist/ui/AlertDialog/AlertDialog.jsx

@@ -0,0 +1,17 @@
+'use client';
+import { ark, Dialog } from '@ark-ui/react';
+import { createRecipeContext } from '../../client/utils';
+import { alertDialogRecipe } from './alertDialog.recipe';
+const { withContext, withRootProvider } = createRecipeContext(alertDialogRecipe);
+export const Root = withRootProvider(Dialog.Root);
+export const Backdrop = withContext(Dialog.Backdrop, 'backdrop');
+export const CloseTrigger = withContext(Dialog.CloseTrigger, 'closeTrigger');
+export const Content = withContext(Dialog.Content, 'content');
+export const Description = withContext(Dialog.Description, 'description');
+export const Positioner = withContext(Dialog.Positioner, 'positioner');
+export const Title = withContext(Dialog.Title, 'title');
+export const Trigger = withContext(Dialog.Trigger, 'trigger');
+export const Header = withContext(ark.section, 'header');
+export const Body = withContext(ark.section, 'body');
+export const Footer = withContext(ark.section, 'footer');
+export const Context = Dialog.Context;

package/dist/ui/AlertDialog/alertDialog.recipe.d.ts

@@ -1,46 +1,46 @@
-export declare const alertDialogRecipe: import('tailwind-variants').TVReturnType<{
+export declare const alertDialogRecipe: import("tailwind-variants").TVReturnType<{
     [key: string]: {
-        [key: string]: import('tailwind-variants').ClassValue | {
-            title?: import('tailwind-variants').ClassValue;
-            content?: import('tailwind-variants').ClassValue;
-            body?: import('tailwind-variants').ClassValue;
-            footer?: import('tailwind-variants').ClassValue;
-            header?: import('tailwind-variants').ClassValue;
-            trigger?: import('tailwind-variants').ClassValue;
-            backdrop?: import('tailwind-variants').ClassValue;
-            positioner?: import('tailwind-variants').ClassValue;
-            description?: import('tailwind-variants').ClassValue;
-            closeTrigger?: import('tailwind-variants').ClassValue;
+        [key: string]: import("tailwind-variants").ClassValue | {
+            title?: import("tailwind-variants").ClassValue;
+            content?: import("tailwind-variants").ClassValue;
+            body?: import("tailwind-variants").ClassValue;
+            footer?: import("tailwind-variants").ClassValue;
+            header?: import("tailwind-variants").ClassValue;
+            trigger?: import("tailwind-variants").ClassValue;
+            backdrop?: import("tailwind-variants").ClassValue;
+            positioner?: import("tailwind-variants").ClassValue;
+            description?: import("tailwind-variants").ClassValue;
+            closeTrigger?: import("tailwind-variants").ClassValue;
         };
     };
 } | {
     [x: string]: {
-        [x: string]: import('tailwind-variants').ClassValue | {
-            title?: import('tailwind-variants').ClassValue;
-            content?: import('tailwind-variants').ClassValue;
-            body?: import('tailwind-variants').ClassValue;
-            footer?: import('tailwind-variants').ClassValue;
-            header?: import('tailwind-variants').ClassValue;
-            trigger?: import('tailwind-variants').ClassValue;
-            backdrop?: import('tailwind-variants').ClassValue;
-            positioner?: import('tailwind-variants').ClassValue;
-            description?: import('tailwind-variants').ClassValue;
-            closeTrigger?: import('tailwind-variants').ClassValue;
+        [x: string]: import("tailwind-variants").ClassValue | {
+            title?: import("tailwind-variants").ClassValue;
+            content?: import("tailwind-variants").ClassValue;
+            body?: import("tailwind-variants").ClassValue;
+            footer?: import("tailwind-variants").ClassValue;
+            header?: import("tailwind-variants").ClassValue;
+            trigger?: import("tailwind-variants").ClassValue;
+            backdrop?: import("tailwind-variants").ClassValue;
+            positioner?: import("tailwind-variants").ClassValue;
+            description?: import("tailwind-variants").ClassValue;
+            closeTrigger?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}, Record<"title" | "content" | "body" | "footer" | "header" | "trigger" | "backdrop" | "positioner" | "description" | "closeTrigger", string | string[]>, undefined, {
     [key: string]: {
-        [key: string]: import('tailwind-variants').ClassValue | {
-            title?: import('tailwind-variants').ClassValue;
-            content?: import('tailwind-variants').ClassValue;
-            body?: import('tailwind-variants').ClassValue;
-            footer?: import('tailwind-variants').ClassValue;
-            header?: import('tailwind-variants').ClassValue;
-            trigger?: import('tailwind-variants').ClassValue;
-            backdrop?: import('tailwind-variants').ClassValue;
-            positioner?: import('tailwind-variants').ClassValue;
-            description?: import('tailwind-variants').ClassValue;
-            closeTrigger?: import('tailwind-variants').ClassValue;
+        [key: string]: import("tailwind-variants").ClassValue | {
+            title?: import("tailwind-variants").ClassValue;
+            content?: import("tailwind-variants").ClassValue;
+            body?: import("tailwind-variants").ClassValue;
+            footer?: import("tailwind-variants").ClassValue;
+            header?: import("tailwind-variants").ClassValue;
+            trigger?: import("tailwind-variants").ClassValue;
+            backdrop?: import("tailwind-variants").ClassValue;
+            positioner?: import("tailwind-variants").ClassValue;
+            description?: import("tailwind-variants").ClassValue;
+            closeTrigger?: import("tailwind-variants").ClassValue;
         };
     };
-} | {}, Record<"title" | "content" | "body" | "footer" | "header" | "trigger" | "backdrop" | "positioner" | "description" | "closeTrigger", string | string[]>, import('tailwind-variants').TVReturnType<unknown, Record<"title" | "content" | "body" | "footer" | "header" | "trigger" | "backdrop" | "positioner" | "description" | "closeTrigger", string | string[]>, undefined, unknown, unknown, undefined>>;
+} | {}, Record<"title" | "content" | "body" | "footer" | "header" | "trigger" | "backdrop" | "positioner" | "description" | "closeTrigger", string | string[]>, import("tailwind-variants").TVReturnType<unknown, Record<"title" | "content" | "body" | "footer" | "header" | "trigger" | "backdrop" | "positioner" | "description" | "closeTrigger", string | string[]>, undefined, unknown, unknown, undefined>>;

package/dist/ui/AlertDialog/alertDialog.recipe.js

@@ -1 +1,17 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("@ark-ui/react"),t=require("tailwind-variants"),i=require("../../utils/anatomyToRecipeSlots.js");require("../../utils/capitalize.js");require("../../utils/parseDecimal.js");require("../../constants/index.js");require("../../utils/getLocaleInfo.js");require("../../utils/getQueryClient.js");require("../../utils/isMobile.js");const r=e.dialogAnatomy.extendWith("header","body","footer"),o=t.tv({slots:i.anatomyToRecipeSlots(r,{backdrop:"z-backdrop ui-open:animate-backdrop-in ui-closed:animate-backdrop-out backdrop-blur-xs fixed inset-0 bg-black/75",positioner:"z-dialog fixed inset-0 flex items-center justify-center",content:"ui-open:animate-alertdialog-in ui-closed:animate-alertdialog-out bg-bg-primary relative w-[400px] max-w-[90vw] rounded-xl p-3xl shadow-xl",header:"flex items-start justify-between",body:"mt-xl",title:"text-lg font-semibold",description:"text-text-secondary-700 mt-xs text-sm",closeTrigger:"text-text-quinary icon:size-6",footer:"mt-4xl flex items-center justify-center gap-lg"})});exports.alertDialogRecipe=o;
+import { dialogAnatomy } from '@ark-ui/react';
+import { tv } from 'tailwind-variants';
+import { anatomyToRecipeSlots } from '../../utils';
+const anatomy = dialogAnatomy.extendWith('header', 'body', 'footer');
+export const alertDialogRecipe = tv({
+    slots: anatomyToRecipeSlots(anatomy, {
+        backdrop: 'z-backdrop ui-open:animate-backdrop-in ui-closed:animate-backdrop-out backdrop-blur-xs fixed inset-0 bg-black/75',
+        positioner: 'z-dialog fixed inset-0 flex items-center justify-center',
+        content: 'ui-open:animate-alertdialog-in ui-closed:animate-alertdialog-out bg-bg-primary relative w-[400px] max-w-[90vw] rounded-xl p-3xl shadow-xl',
+        header: 'flex items-start justify-between',
+        body: 'mt-xl',
+        title: 'text-lg font-semibold',
+        description: 'text-text-secondary-700 mt-xs text-sm',
+        closeTrigger: 'text-text-quinary icon:size-6',
+        footer: 'mt-4xl flex items-center justify-center gap-lg',
+    }),
+});

package/dist/ui/AlertDialog/index.js

@@ -0,0 +1 @@
+export * as AlertDialog from './AlertDialog';

package/dist/ui/Avatar/Avatar.d.ts

@@ -1,5 +1,5 @@
 import { Avatar } from '@ark-ui/react';
-export declare const Root: import('react').ComponentType<import('@ark-ui/react').Assign<Avatar.RootProps & import('react').RefAttributes<HTMLDivElement>, import('tailwind-variants').VariantProps<import('tailwind-variants').TVReturnType<{
+export declare const Root: import("react").ComponentType<import("@ark-ui/react").Assign<Avatar.RootProps & import("react").RefAttributes<HTMLDivElement>, import("tailwind-variants").VariantProps<import("tailwind-variants").TVReturnType<{
     size: {
         md: {
             root: string;
@@ -13,7 +13,7 @@ export declare const Root: import('react').ComponentType<import('@ark-ui/react')
             fallback: string;
         };
     };
-}, Record<"image" | "root" | "fallback", string | string[]>, import('tailwind-variants').TVReturnType<{
+}, Record<"image" | "root" | "fallback", string | string[]>, import("tailwind-variants").TVReturnType<{
     size: {
         md: {
             root: string;
@@ -21,7 +21,7 @@ export declare const Root: import('react').ComponentType<import('@ark-ui/react')
         };
     };
 }, Record<"image" | "root" | "fallback", string | string[]>, undefined, unknown, unknown, undefined>>>>>;
-export declare const Image: import('react').ComponentType<import('@ark-ui/react').Assign<Avatar.ImageProps & import('react').RefAttributes<HTMLImageElement>, import('tailwind-variants').VariantProps<import('tailwind-variants').TVReturnType<{
+export declare const Image: import("react").ComponentType<import("@ark-ui/react").Assign<Avatar.ImageProps & import("react").RefAttributes<HTMLImageElement>, import("tailwind-variants").VariantProps<import("tailwind-variants").TVReturnType<{
     size: {
         md: {
             root: string;
@@ -35,7 +35,7 @@ export declare const Image: import('react').ComponentType<import('@ark-ui/react'
             fallback: string;
         };
     };
-}, Record<"image" | "root" | "fallback", string | string[]>, import('tailwind-variants').TVReturnType<{
+}, Record<"image" | "root" | "fallback", string | string[]>, import("tailwind-variants").TVReturnType<{
     size: {
         md: {
             root: string;
@@ -43,7 +43,7 @@ export declare const Image: import('react').ComponentType<import('@ark-ui/react'
         };
     };
 }, Record<"image" | "root" | "fallback", string | string[]>, undefined, unknown, unknown, undefined>>>>>;
-export declare const Fallback: import('react').ComponentType<import('@ark-ui/react').Assign<Avatar.FallbackProps & import('react').RefAttributes<HTMLSpanElement>, import('tailwind-variants').VariantProps<import('tailwind-variants').TVReturnType<{
+export declare const Fallback: import("react").ComponentType<import("@ark-ui/react").Assign<Avatar.FallbackProps & import("react").RefAttributes<HTMLSpanElement>, import("tailwind-variants").VariantProps<import("tailwind-variants").TVReturnType<{
     size: {
         md: {
             root: string;
@@ -57,7 +57,7 @@ export declare const Fallback: import('react').ComponentType<import('@ark-ui/rea
             fallback: string;
         };
     };
-}, Record<"image" | "root" | "fallback", string | string[]>, import('tailwind-variants').TVReturnType<{
+}, Record<"image" | "root" | "fallback", string | string[]>, import("tailwind-variants").TVReturnType<{
     size: {
         md: {
             root: string;
@@ -65,4 +65,4 @@ export declare const Fallback: import('react').ComponentType<import('@ark-ui/rea
         };
     };
 }, Record<"image" | "root" | "fallback", string | string[]>, undefined, unknown, unknown, undefined>>>>>;
-export declare const Context: (props: Avatar.ContextProps) => import('react').ReactNode;
+export declare const Context: (props: Avatar.ContextProps) => import("react").ReactNode;

package/dist/ui/Avatar/Avatar.jsx

@@ -0,0 +1,9 @@
+'use client';
+import { Avatar } from '@ark-ui/react';
+import { createRecipeContext } from '../../client/utils';
+import { avatarRecipe } from './avatar.recipe';
+const { withContext, withProvider } = createRecipeContext(avatarRecipe);
+export const Root = withProvider(Avatar.Root, 'root');
+export const Image = withContext(Avatar.Image, 'image');
+export const Fallback = withContext(Avatar.Fallback, 'fallback');
+export const Context = Avatar.Context;

package/dist/ui/Avatar/avatar.recipe.d.ts

@@ -1,4 +1,4 @@
-export declare const avatarRecipe: import('tailwind-variants').TVReturnType<{
+export declare const avatarRecipe: import("tailwind-variants").TVReturnType<{
     size: {
         md: {
             root: string;
@@ -12,7 +12,7 @@ export declare const avatarRecipe: import('tailwind-variants').TVReturnType<{
             fallback: string;
         };
     };
-}, Record<"image" | "root" | "fallback", string | string[]>, import('tailwind-variants').TVReturnType<{
+}, Record<"image" | "root" | "fallback", string | string[]>, import("tailwind-variants").TVReturnType<{
     size: {
         md: {
             root: string;

package/dist/ui/Avatar/avatar.recipe.js

@@ -1 +1,21 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("@ark-ui/react"),r=require("tailwind-variants"),t=require("../../utils/anatomyToRecipeSlots.js");require("../../utils/capitalize.js");require("../../utils/parseDecimal.js");require("../../constants/index.js");require("../../utils/getLocaleInfo.js");require("../../utils/getQueryClient.js");require("../../utils/isMobile.js");const i=r.tv({slots:t.anatomyToRecipeSlots(e.avatarAnatomy,{root:"border-gray-200 bg-gray-50 flex items-center justify-center overflow-hidden rounded-full border",fallback:"text-gray-600 icon:text-gray-500 flex size-full items-center justify-center",image:"size-full object-cover"}),variants:{size:{md:{root:"size-10",fallback:"icon:size-6 text-sm font-semibold"}}},defaultVariants:{size:"md"}});exports.avatarRecipe=i;
+import { avatarAnatomy } from '@ark-ui/react';
+import { tv } from 'tailwind-variants';
+import { anatomyToRecipeSlots } from '../../utils';
+export const avatarRecipe = tv({
+    slots: anatomyToRecipeSlots(avatarAnatomy, {
+        root: 'border-gray-200 bg-gray-50 flex items-center justify-center overflow-hidden rounded-full border',
+        fallback: 'text-gray-600 icon:text-gray-500 flex size-full items-center justify-center',
+        image: 'size-full object-cover',
+    }),
+    variants: {
+        size: {
+            md: {
+                root: 'size-10',
+                fallback: 'icon:size-6 text-sm font-semibold',
+            },
+        },
+    },
+    defaultVariants: {
+        size: 'md',
+    },
+});

package/dist/ui/Avatar/index.js

@@ -0,0 +1 @@
+export * as Avatar from './Avatar';

package/dist/ui/Badge/Badge.d.ts

@@ -1,8 +1,8 @@
-import { ComponentPropsWithRef } from 'react';
+import type { ComponentPropsWithRef } from 'react';
 interface BadgeProps extends ComponentPropsWithRef<'div'> {
     asChild?: boolean;
 }
-export declare const Root: import('react').ComponentType<import('@ark-ui/react').Assign<BadgeProps, import('tailwind-variants').VariantProps<import('tailwind-variants').TVReturnType<{
+export declare const Root: import("react").ComponentType<import("@ark-ui/react").Assign<BadgeProps, import("tailwind-variants").VariantProps<import("tailwind-variants").TVReturnType<{
     size: {
         md: {
             root: string;
@@ -68,7 +68,7 @@ export declare const Root: import('react').ComponentType<import('@ark-ui/react')
             root: string;
         };
     };
-}, Record<"label" | "root" | "icon" | "indicator", string | string[]>, import('tailwind-variants').TVReturnType<{
+}, Record<"label" | "root" | "icon" | "indicator", string | string[]>, import("tailwind-variants").TVReturnType<{
     size: {
         md: {
             root: string;
@@ -105,7 +105,7 @@ export declare const Root: import('react').ComponentType<import('@ark-ui/react')
 interface BadgeLabelProps extends ComponentPropsWithRef<'span'> {
     asChild?: boolean;
 }
-export declare const Label: import('react').ComponentType<import('@ark-ui/react').Assign<BadgeLabelProps, import('tailwind-variants').VariantProps<import('tailwind-variants').TVReturnType<{
+export declare const Label: import("react").ComponentType<import("@ark-ui/react").Assign<BadgeLabelProps, import("tailwind-variants").VariantProps<import("tailwind-variants").TVReturnType<{
     size: {
         md: {
             root: string;
@@ -171,7 +171,7 @@ export declare const Label: import('react').ComponentType<import('@ark-ui/react'
             root: string;
         };
     };
-}, Record<"label" | "root" | "icon" | "indicator", string | string[]>, import('tailwind-variants').TVReturnType<{
+}, Record<"label" | "root" | "icon" | "indicator", string | string[]>, import("tailwind-variants").TVReturnType<{
     size: {
         md: {
             root: string;
@@ -208,7 +208,7 @@ export declare const Label: import('react').ComponentType<import('@ark-ui/react'
 interface BadgeIndicatorProps extends ComponentPropsWithRef<'svg'> {
     asChild?: boolean;
 }
-export declare const Indicator: import('react').ComponentType<import('@ark-ui/react').Assign<BadgeIndicatorProps, import('tailwind-variants').VariantProps<import('tailwind-variants').TVReturnType<{
+export declare const Indicator: import("react").ComponentType<import("@ark-ui/react").Assign<BadgeIndicatorProps, import("tailwind-variants").VariantProps<import("tailwind-variants").TVReturnType<{
     size: {
         md: {
             root: string;
@@ -274,7 +274,7 @@ export declare const Indicator: import('react').ComponentType<import('@ark-ui/re
             root: string;
         };
     };
-}, Record<"label" | "root" | "icon" | "indicator", string | string[]>, import('tailwind-variants').TVReturnType<{
+}, Record<"label" | "root" | "icon" | "indicator", string | string[]>, import("tailwind-variants").TVReturnType<{
     size: {
         md: {
             root: string;
@@ -311,7 +311,7 @@ export declare const Indicator: import('react').ComponentType<import('@ark-ui/re
 interface BadgeIconProps extends ComponentPropsWithRef<'svg'> {
     asChild?: boolean;
 }
-export declare const Icon: import('react').ComponentType<import('@ark-ui/react').Assign<BadgeIconProps, import('tailwind-variants').VariantProps<import('tailwind-variants').TVReturnType<{
+export declare const Icon: import("react").ComponentType<import("@ark-ui/react").Assign<BadgeIconProps, import("tailwind-variants").VariantProps<import("tailwind-variants").TVReturnType<{
     size: {
         md: {
             root: string;
@@ -377,7 +377,7 @@ export declare const Icon: import('react').ComponentType<import('@ark-ui/react')
             root: string;
         };
     };
-}, Record<"label" | "root" | "icon" | "indicator", string | string[]>, import('tailwind-variants').TVReturnType<{
+}, Record<"label" | "root" | "icon" | "indicator", string | string[]>, import("tailwind-variants").TVReturnType<{
     size: {
         md: {
             root: string;

package/dist/ui/Badge/Badge.jsx

@@ -0,0 +1,11 @@
+'use client';
+import { ark } from '@ark-ui/react';
+import { createRecipeContext } from '../../client/utils';
+import { badgeAnatomy } from './badge.anatomy';
+import { badgeRecipe } from './badge.recipe';
+const { withProvider, withContext } = createRecipeContext(badgeRecipe);
+const parts = badgeAnatomy.build();
+export const Root = withProvider((props) => <ark.div {...parts.root.attrs} {...props}/>, 'root');
+export const Label = withContext((props) => <ark.span {...parts.label.attrs} {...props}/>, 'label');
+export const Indicator = withContext((props) => (<ark.svg {...parts.indicator.attrs} {...props}/>), 'indicator');
+export const Icon = withContext((props) => (<ark.svg {...parts.icon.attrs} asChild {...props}/>), 'icon');

package/dist/ui/Badge/badge.anatomy.d.ts

@@ -1 +1 @@
-export declare const badgeAnatomy: import('@ark-ui/anatomy').AnatomyInstance<"label" | "root" | "icon" | "indicator">;
+export declare const badgeAnatomy: import("@ark-ui/anatomy").AnatomyInstance<"label" | "root" | "icon" | "indicator">;

package/dist/ui/Badge/badge.anatomy.js

@@ -1 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("@ark-ui/anatomy"),e=t.createAnatomy("badge").parts("root","label","icon","indicator");exports.badgeAnatomy=e;
+import { createAnatomy } from '@ark-ui/anatomy';
+export const badgeAnatomy = createAnatomy('badge').parts('root', 'label', 'icon', 'indicator');

package/dist/ui/Badge/badge.recipe.d.ts

@@ -1,4 +1,4 @@
-export declare const badgeRecipe: import('tailwind-variants').TVReturnType<{
+export declare const badgeRecipe: import("tailwind-variants").TVReturnType<{
     size: {
         md: {
             root: string;
@@ -64,7 +64,7 @@ export declare const badgeRecipe: import('tailwind-variants').TVReturnType<{
             root: string;
         };
     };
-}, Record<"label" | "root" | "icon" | "indicator", string | string[]>, import('tailwind-variants').TVReturnType<{
+}, Record<"label" | "root" | "icon" | "indicator", string | string[]>, import("tailwind-variants").TVReturnType<{
     size: {
         md: {
             root: string;

package/dist/ui/Badge/badge.recipe.js

@@ -1 +1,103 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("tailwind-variants"),e=require("../../utils/anatomyToRecipeSlots.js");require("../../utils/capitalize.js");require("../../utils/parseDecimal.js");require("../../constants/index.js");require("../../utils/getLocaleInfo.js");require("../../utils/getQueryClient.js");require("../../utils/isMobile.js");const i=require("./badge.anatomy.js"),r=t.tv({slots:e.anatomyToRecipeSlots(i.badgeAnatomy,{root:"inline-flex items-center",icon:"shrink-0",label:"font-medium leading-tight",indicator:"shrink-0 rounded-full"}),variants:{size:{md:{root:"gap-1 px-2 py-0.5",label:"text-xs",icon:"size-3",indicator:"size-2"},lg:{root:"gap-1 px-2 py-1",label:"text-sm",icon:"size-3",indicator:"size-2"}},variant:{subtle:{}},colorScheme:{brand:{},danger:{},success:{},warning:{},blue:{}},round:{true:{root:"rounded-full"},false:{root:"rounded-md"}}},compoundVariants:[{variant:"subtle",colorScheme:"brand",className:{root:"bg-utility-brand-50 border-utility-brand-200 border",label:"text-utility-brand-700",indicator:"bg-utility-brand-500",icon:"text-utility-brand-600"}},{variant:"subtle",colorScheme:"success",className:{root:"bg-utility-success-50 border-utility-success-200 border",label:"text-utility-success-700",indicator:"bg-utility-success-500",icon:"text-utility-success-700"}},{variant:"subtle",colorScheme:"warning",className:{root:"bg-utility-warning-50 border-utility-warning-200 border",label:"text-utility-warning-700",indicator:"bg-utility-warning-500",icon:"text-utility-warning-700"}},{variant:"subtle",colorScheme:"danger",className:{root:"bg-utility-error-50 border-utility-error-200 border",label:"text-utility-error-700",indicator:"bg-utility-error-500",icon:"text-utility-error-700"}},{variant:"subtle",colorScheme:"blue",className:{root:"bg-utility-blue-50 border-utility-blue-200 border",label:"text-utility-blue-700",indicator:"bg-utility-blue-500",icon:"text-utility-blue-700"}}],defaultVariants:{size:"md",variant:"subtle",colorScheme:"success",round:!0}});exports.badgeRecipe=r;
+import { tv } from 'tailwind-variants';
+import { anatomyToRecipeSlots } from '../../utils';
+import { badgeAnatomy } from './badge.anatomy';
+export const badgeRecipe = tv({
+    slots: anatomyToRecipeSlots(badgeAnatomy, {
+        root: 'inline-flex items-center',
+        icon: 'shrink-0',
+        label: 'font-medium leading-tight',
+        indicator: 'shrink-0 rounded-full',
+    }),
+    variants: {
+        size: {
+            md: {
+                root: 'gap-1 px-2 py-0.5',
+                label: 'text-xs',
+                icon: 'size-3',
+                indicator: 'size-2',
+            },
+            lg: {
+                root: 'gap-1 px-2 py-1',
+                label: 'text-sm',
+                icon: 'size-3',
+                indicator: 'size-2',
+            },
+        },
+        variant: {
+            subtle: {},
+        },
+        colorScheme: {
+            brand: {},
+            danger: {},
+            success: {},
+            warning: {},
+            blue: {},
+        },
+        round: {
+            true: {
+                root: 'rounded-full',
+            },
+            false: {
+                root: 'rounded-md',
+            },
+        },
+    },
+    compoundVariants: [
+        {
+            variant: 'subtle',
+            colorScheme: 'brand',
+            className: {
+                root: 'bg-utility-brand-50 border-utility-brand-200 border',
+                label: 'text-utility-brand-700',
+                indicator: 'bg-utility-brand-500',
+                icon: 'text-utility-brand-600',
+            },
+        },
+        {
+            variant: 'subtle',
+            colorScheme: 'success',
+            className: {
+                root: 'bg-utility-success-50 border-utility-success-200 border',
+                label: 'text-utility-success-700',
+                indicator: 'bg-utility-success-500',
+                icon: 'text-utility-success-700',
+            },
+        },
+        {
+            variant: 'subtle',
+            colorScheme: 'warning',
+            className: {
+                root: 'bg-utility-warning-50 border-utility-warning-200 border',
+                label: 'text-utility-warning-700',
+                indicator: 'bg-utility-warning-500',
+                icon: 'text-utility-warning-700',
+            },
+        },
+        {
+            variant: 'subtle',
+            colorScheme: 'danger',
+            className: {
+                root: 'bg-utility-error-50 border-utility-error-200 border',
+                label: 'text-utility-error-700',
+                indicator: 'bg-utility-error-500',
+                icon: 'text-utility-error-700',
+            },
+        },
+        {
+            variant: 'subtle',
+            colorScheme: 'blue',
+            className: {
+                root: 'bg-utility-blue-50 border-utility-blue-200 border',
+                label: 'text-utility-blue-700',
+                indicator: 'bg-utility-blue-500',
+                icon: 'text-utility-blue-700',
+            },
+        },
+    ],
+    defaultVariants: {
+        size: 'md',
+        variant: 'subtle',
+        colorScheme: 'success',
+        round: true,
+    },
+});

package/dist/ui/Badge/index.js

@@ -0,0 +1 @@
+export * as Badge from './Badge';

package/dist/ui/Button/Button.d.ts

@@ -1,6 +1,6 @@
-import { ComponentPropsWithRef } from 'react';
-import { Merge } from 'type-fest';
-import { ButtonRecipeProps } from './button.recipe';
+import type { ComponentPropsWithRef } from 'react';
+import type { Merge } from 'type-fest';
+import { type ButtonRecipeProps } from './button.recipe';
 export interface ButtonProps extends Merge<ComponentPropsWithRef<'button'>, ButtonRecipeProps> {
     asChild?: boolean;
 }

package/dist/ui/Button/Button.jsx

@@ -0,0 +1,11 @@
+'use client';
+import { ark } from '@ark-ui/react';
+import { createSplitProps, dataAttr } from '../../utils';
+import { buttonRecipe } from './button.recipe';
+export function Button(props) {
+    const [recipeProps, localProps] = createSplitProps(buttonRecipe.variantKeys)(props);
+    return (<ark.button type="button" {...localProps} className={buttonRecipe({
+            ...recipeProps,
+            className: localProps.className,
+        })} data-disabled={dataAttr(localProps.disabled)}/>);
+}

package/dist/ui/Button/button.recipe.d.ts

@@ -1,5 +1,5 @@
-import { VariantProps } from 'tailwind-variants';
-export declare const buttonRecipe: import('tailwind-variants').TVReturnType<{
+import { type VariantProps } from 'tailwind-variants';
+export declare const buttonRecipe: import("tailwind-variants").TVReturnType<{
     size: {
         xs: string;
         sm: string;
@@ -35,7 +35,7 @@ export declare const buttonRecipe: import('tailwind-variants').TVReturnType<{
     fullWidth: {
         true: string;
     };
-}, undefined, import('tailwind-variants').TVReturnType<{
+}, undefined, import("tailwind-variants").TVReturnType<{
     size: {
         xs: string;
         sm: string;

package/dist/ui/Button/button.recipe.js

@@ -1 +1,56 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("tailwind-variants"),r=e.tv({base:"shadow-xs inline-flex items-center justify-center rounded-md font-semibold disabled:opacity-60 disabled:shadow-none",variants:{size:{xs:"h-9 gap-sm px-3 text-sm",sm:"h-10 gap-md px-3",md:"h-11 gap-lg px-3.5"},variant:{solid:"",outline:""},colorScheme:{primary:"",danger:"",gray:""},fullWidth:{true:"flex w-full"}},compoundVariants:[{variant:"solid",colorScheme:"primary",class:"bg-button-primary-bg text-button-primary-fg"},{variant:"solid",colorScheme:"gray",class:"bg-bg-tertiary"},{variant:"solid",colorScheme:"danger",class:"bg-error-600 text-white"},{variant:"outline",colorScheme:"primary",class:"bg-button-secondary-bg border-button-secondary-border text-button-secondary-fg border"},{variant:"outline",colorScheme:"gray",class:"border-border-secondary bg-bg-primary-alt text-text-secondary-700 border"}],defaultVariants:{size:"md",variant:"solid",colorScheme:"primary",fullWidth:!0}});exports.buttonRecipe=r;
+import { tv } from 'tailwind-variants';
+export const buttonRecipe = tv({
+    base: 'shadow-xs inline-flex items-center justify-center rounded-md font-semibold disabled:opacity-60 disabled:shadow-none',
+    variants: {
+        size: {
+            xs: 'h-9 gap-sm px-3 text-sm',
+            sm: 'h-10 gap-md px-3',
+            md: 'h-11 gap-lg px-3.5',
+        },
+        variant: {
+            solid: '',
+            outline: '',
+        },
+        colorScheme: {
+            primary: '',
+            danger: '',
+            gray: '',
+        },
+        fullWidth: {
+            true: 'flex w-full',
+        },
+    },
+    compoundVariants: [
+        {
+            variant: 'solid',
+            colorScheme: 'primary',
+            class: 'bg-button-primary-bg text-button-primary-fg',
+        },
+        {
+            variant: 'solid',
+            colorScheme: 'gray',
+            class: 'bg-bg-tertiary',
+        },
+        {
+            variant: 'solid',
+            colorScheme: 'danger',
+            class: 'bg-error-600 text-white',
+        },
+        {
+            variant: 'outline',
+            colorScheme: 'primary',
+            class: 'bg-button-secondary-bg border-button-secondary-border text-button-secondary-fg border',
+        },
+        {
+            variant: 'outline',
+            colorScheme: 'gray',
+            class: 'border-border-secondary bg-bg-primary-alt text-text-secondary-700 border',
+        },
+    ],
+    defaultVariants: {
+        size: 'md',
+        variant: 'solid',
+        colorScheme: 'primary',
+        fullWidth: true,
+    },
+});

package/dist/ui/Button/index.js

@@ -0,0 +1 @@
+export * from './Button';