@opexa/portal-components 0.0.308 → 0.0.309

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

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

@@ -4,14 +4,14 @@ import { anatomyToRecipeSlots } from '../../utils/anatomyToRecipeSlots.js';
 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 bg-bg-overlay/70 fixed inset-0 backdrop-blur-sm',
-        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',
+        backdrop: 'fixed inset-0 z-backdrop ui-closed:animate-backdrop-out ui-open:animate-backdrop-in bg-bg-overlay/70 backdrop-blur-sm',
+        positioner: 'fixed inset-0 z-dialog flex items-center justify-center',
+        content: 'relative w-[400px] max-w-[90vw] ui-closed:animate-alertdialog-out ui-open:animate-alertdialog-in rounded-xl bg-bg-primary p-3xl shadow-xl',
         header: 'flex items-start justify-center',
         body: 'mt-xl',
-        title: 'text-center text-lg font-semibold',
-        description: 'text-text-tertiary-600 mx-auto mt-xs max-w-[22rem] text-center text-sm',
-        closeTrigger: 'text-text-quinary icon:size-6 absolute right-4 top-4 p-md',
+        title: 'text-center font-semibold text-lg',
+        description: 'mx-auto mt-xs max-w-[22rem] text-center text-sm text-text-tertiary-600',
+        closeTrigger: 'absolute top-4 right-4 icon:size-6 p-md text-text-quinary',
         footer: 'mt-4xl flex items-center justify-center gap-lg',
     }),
 });

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

@@ -3,15 +3,15 @@ import { tv } from 'tailwind-variants';
 import { anatomyToRecipeSlots } from '../../utils/anatomyToRecipeSlots.js';
 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',
+        root: 'flex items-center justify-center overflow-hidden rounded-full border border-gray-200 bg-gray-50',
+        fallback: 'flex size-full items-center justify-center icon:text-gray-500 text-gray-600',
         image: 'size-full object-cover',
     }),
     variants: {
         size: {
             md: {
                 root: 'size-10',
-                fallback: 'icon:size-6 text-sm font-semibold',
+                fallback: 'icon:size-6 font-semibold text-sm',
             },
         },
     },

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

@@ -37,7 +37,7 @@ export declare const Root: import("react").ComponentType<import("@ark-ui/react")
             root: string;
         };
     };
-}, Record<"indicator" | "label" | "root" | "icon", string | string[]>, undefined, {
+}, Record<"label" | "root" | "icon" | "indicator", string | string[]>, undefined, {
     size: {
         md: {
             root: string;
@@ -72,7 +72,7 @@ export declare const Root: import("react").ComponentType<import("@ark-ui/react")
             root: string;
         };
     };
-}, Record<"indicator" | "label" | "root" | "icon", string | string[]>, import("tailwind-variants").TVReturnType<{
+}, Record<"label" | "root" | "icon" | "indicator", string | string[]>, import("tailwind-variants").TVReturnType<{
     size: {
         md: {
             root: string;
@@ -107,7 +107,7 @@ export declare const Root: import("react").ComponentType<import("@ark-ui/react")
             root: string;
         };
     };
-}, Record<"indicator" | "label" | "root" | "icon", string | string[]>, undefined, unknown, unknown, undefined>>>>>;
+}, Record<"label" | "root" | "icon" | "indicator", string | string[]>, undefined, unknown, unknown, undefined>>>>>;
 interface BadgeLabelProps extends ComponentPropsWithRef<'span'> {
     asChild?: boolean;
 }
@@ -146,7 +146,7 @@ export declare const Label: import("react").ComponentType<import("@ark-ui/react"
             root: string;
         };
     };
-}, Record<"indicator" | "label" | "root" | "icon", string | string[]>, undefined, {
+}, Record<"label" | "root" | "icon" | "indicator", string | string[]>, undefined, {
     size: {
         md: {
             root: string;
@@ -181,7 +181,7 @@ export declare const Label: import("react").ComponentType<import("@ark-ui/react"
             root: string;
         };
     };
-}, Record<"indicator" | "label" | "root" | "icon", string | string[]>, import("tailwind-variants").TVReturnType<{
+}, Record<"label" | "root" | "icon" | "indicator", string | string[]>, import("tailwind-variants").TVReturnType<{
     size: {
         md: {
             root: string;
@@ -216,7 +216,7 @@ export declare const Label: import("react").ComponentType<import("@ark-ui/react"
             root: string;
         };
     };
-}, Record<"indicator" | "label" | "root" | "icon", string | string[]>, undefined, unknown, unknown, undefined>>>>>;
+}, Record<"label" | "root" | "icon" | "indicator", string | string[]>, undefined, unknown, unknown, undefined>>>>>;
 interface BadgeIndicatorProps extends ComponentPropsWithRef<'svg'> {
     asChild?: boolean;
 }
@@ -255,7 +255,7 @@ export declare const Indicator: import("react").ComponentType<import("@ark-ui/re
             root: string;
         };
     };
-}, Record<"indicator" | "label" | "root" | "icon", string | string[]>, undefined, {
+}, Record<"label" | "root" | "icon" | "indicator", string | string[]>, undefined, {
     size: {
         md: {
             root: string;
@@ -290,7 +290,7 @@ export declare const Indicator: import("react").ComponentType<import("@ark-ui/re
             root: string;
         };
     };
-}, Record<"indicator" | "label" | "root" | "icon", string | string[]>, import("tailwind-variants").TVReturnType<{
+}, Record<"label" | "root" | "icon" | "indicator", string | string[]>, import("tailwind-variants").TVReturnType<{
     size: {
         md: {
             root: string;
@@ -325,7 +325,7 @@ export declare const Indicator: import("react").ComponentType<import("@ark-ui/re
             root: string;
         };
     };
-}, Record<"indicator" | "label" | "root" | "icon", string | string[]>, undefined, unknown, unknown, undefined>>>>>;
+}, Record<"label" | "root" | "icon" | "indicator", string | string[]>, undefined, unknown, unknown, undefined>>>>>;
 interface BadgeIconProps extends ComponentPropsWithRef<'svg'> {
     asChild?: boolean;
 }
@@ -364,7 +364,7 @@ export declare const Icon: import("react").ComponentType<import("@ark-ui/react")
             root: string;
         };
     };
-}, Record<"indicator" | "label" | "root" | "icon", string | string[]>, undefined, {
+}, Record<"label" | "root" | "icon" | "indicator", string | string[]>, undefined, {
     size: {
         md: {
             root: string;
@@ -399,7 +399,7 @@ export declare const Icon: import("react").ComponentType<import("@ark-ui/react")
             root: string;
         };
     };
-}, Record<"indicator" | "label" | "root" | "icon", string | string[]>, import("tailwind-variants").TVReturnType<{
+}, Record<"label" | "root" | "icon" | "indicator", string | string[]>, import("tailwind-variants").TVReturnType<{
     size: {
         md: {
             root: string;
@@ -434,5 +434,5 @@ export declare const Icon: import("react").ComponentType<import("@ark-ui/react")
             root: string;
         };
     };
-}, Record<"indicator" | "label" | "root" | "icon", string | string[]>, undefined, unknown, unknown, undefined>>>>>;
+}, Record<"label" | "root" | "icon" | "indicator", string | string[]>, undefined, unknown, unknown, undefined>>>>>;
 export {};

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

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

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

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

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

@@ -49,7 +49,7 @@ export const badgeRecipe = tv({
             variant: 'subtle',
             colorScheme: 'gray',
             className: {
-                root: 'bg-bg-primary border-border-primary border',
+                root: 'border border-border-primary bg-bg-primary',
                 label: 'text-text-secondary-700',
                 indicator: 'bg-text-quarterary-500',
                 icon: 'text-text-quarterary-500',
@@ -59,7 +59,7 @@ export const badgeRecipe = tv({
             variant: 'subtle',
             colorScheme: 'brand',
             className: {
-                root: 'bg-utility-brand-50 border-utility-brand-200 border',
+                root: 'border border-utility-brand-200 bg-utility-brand-50',
                 label: 'text-utility-brand-700',
                 indicator: 'bg-utility-brand-500',
                 icon: 'text-utility-brand-600',
@@ -69,7 +69,7 @@ export const badgeRecipe = tv({
             variant: 'subtle',
             colorScheme: 'brand-dark',
             className: {
-                root: 'bg-bg-brand-dark-solid border-border-brand-dark border',
+                root: 'border border-border-brand-dark bg-bg-brand-dark-solid',
                 label: 'text-brand-700',
                 indicator: 'bg-utility-brand-500',
                 icon: 'text-brand-700',
@@ -79,7 +79,7 @@ export const badgeRecipe = tv({
             variant: 'subtle',
             colorScheme: 'success',
             className: {
-                root: 'bg-utility-success-50 border-utility-success-200 border',
+                root: 'border border-utility-success-200 bg-utility-success-50',
                 label: 'text-utility-success-700',
                 indicator: 'bg-utility-success-500',
                 icon: 'text-utility-success-700',
@@ -89,7 +89,7 @@ export const badgeRecipe = tv({
             variant: 'subtle',
             colorScheme: 'warning',
             className: {
-                root: 'bg-utility-warning-50 border-utility-warning-200 border',
+                root: 'border border-utility-warning-200 bg-utility-warning-50',
                 label: 'text-utility-warning-700',
                 indicator: 'bg-utility-warning-500',
                 icon: 'text-utility-warning-700',
@@ -99,7 +99,7 @@ export const badgeRecipe = tv({
             variant: 'subtle',
             colorScheme: 'danger',
             className: {
-                root: 'bg-utility-error-50 border-utility-error-200 border',
+                root: 'border border-utility-error-200 bg-utility-error-50',
                 label: 'text-utility-error-700',
                 indicator: 'bg-utility-error-500',
                 icon: 'text-utility-error-700',
@@ -109,7 +109,7 @@ export const badgeRecipe = tv({
             variant: 'subtle',
             colorScheme: 'blue',
             className: {
-                root: 'bg-utility-blue-50 border-utility-blue-200 border',
+                root: 'border border-utility-blue-200 bg-utility-blue-50',
                 label: 'text-utility-blue-700',
                 indicator: 'bg-utility-blue-500',
                 icon: 'text-utility-blue-700',

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

@@ -17,7 +17,7 @@ export declare const buttonRecipe: import("tailwind-variants").TVReturnType<{
     fullWidth: {
         true: string;
     };
-}, undefined, "shadow-xs inline-flex items-center justify-center rounded-md font-semibold disabled:opacity-60 disabled:shadow-none aria-disabled:cursor-not-allowed aria-disabled:opacity-60 aria-disabled:shadow-none", {
+}, undefined, "inline-flex items-center justify-center rounded-md font-semibold shadow-xs disabled:opacity-60 disabled:shadow-none aria-disabled:cursor-not-allowed aria-disabled:opacity-60 aria-disabled:shadow-none", {
     size: {
         xs: string;
         sm: string;
@@ -53,5 +53,5 @@ export declare const buttonRecipe: import("tailwind-variants").TVReturnType<{
     fullWidth: {
         true: string;
     };
-}, undefined, "shadow-xs inline-flex items-center justify-center rounded-md font-semibold disabled:opacity-60 disabled:shadow-none aria-disabled:cursor-not-allowed aria-disabled:opacity-60 aria-disabled:shadow-none", unknown, unknown, undefined>>;
+}, undefined, "inline-flex items-center justify-center rounded-md font-semibold shadow-xs disabled:opacity-60 disabled:shadow-none aria-disabled:cursor-not-allowed aria-disabled:opacity-60 aria-disabled:shadow-none", unknown, unknown, undefined>>;
 export type ButtonRecipeProps = VariantProps<typeof buttonRecipe>;

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

@@ -1,6 +1,6 @@
 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 aria-disabled:cursor-not-allowed aria-disabled:opacity-60 aria-disabled:shadow-none',
+    base: 'inline-flex items-center justify-center rounded-md font-semibold shadow-xs disabled:opacity-60 disabled:shadow-none aria-disabled:cursor-not-allowed aria-disabled:opacity-60 aria-disabled:shadow-none',
     variants: {
         size: {
             xs: 'h-9 gap-sm px-3 text-sm',
@@ -39,12 +39,12 @@ export const buttonRecipe = tv({
         {
             variant: 'outline',
             colorScheme: 'primary',
-            class: 'bg-button-secondary-bg border-button-secondary-border text-button-secondary-fg border',
+            class: 'border border-button-secondary-border bg-button-secondary-bg text-button-secondary-fg',
         },
         {
             variant: 'outline',
             colorScheme: 'gray',
-            class: 'border-border-secondary bg-bg-primary-alt text-text-secondary-700 border',
+            class: 'border border-border-secondary bg-bg-primary-alt text-text-secondary-700',
         },
     ],
     defaultVariants: {