@nation-a/ui 0.15.3 → 0.16.1

package/dist/styled-system/styles.css

@@ -1466,6 +1466,26 @@ html:not(#\#),body:not(#\#) {
   color: var(--colors-content-neutral-subtlest);
 }
 
+.w_500px:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+  width: 500px;
+}
+
+.py_2:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+  padding-block: var(--spacing-2);
+}
+
+.trs_background-color_0\.1s_ease-in-out:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+  transition: background-color 0.1s ease-in-out;
+}
+
+.h_52px:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+  height: 52px;
+}
+
+.h_68px:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+  height: 68px;
+}
+
 .z_10:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
   z-index: 10;
 }
@@ -1570,10 +1590,6 @@ html:not(#\#),body:not(#\#) {
   max-width: 500px;
 }
 
-.w_500px:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
-  width: 500px;
-}
-
 .gap_24px:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
   gap: 24px;
 }
@@ -1594,10 +1610,6 @@ html:not(#\#),body:not(#\#) {
   box-shadow: 0px 8px 12px 0px var(--colors-semantic-shadow-overlay, rgba(0, 0, 0, 0.08));
 }
 
-.py_2:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
-  padding-block: var(--spacing-2);
-}
-
 .trs_all:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
   transition-property: var(--transition-prop, all);
   transition-timing-function: var(--transition-easing, cubic-bezier(0.4, 0, 0.2, 1));
@@ -2160,12 +2172,12 @@ html:not(#\#),body:not(#\#) {
   margin-top: calc(var(--spacing-0\.5) * -1);
 }
 
-.pt_2:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
-  padding-top: var(--spacing-2);
+.pl_12:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+  padding-left: var(--spacing-12);
 }
 
-.pb_8:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
-  padding-bottom: var(--spacing-8);
+.pr_2:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+  padding-right: var(--spacing-2);
 }
 
 .bd-w_2px:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
@@ -2422,6 +2434,14 @@ html:not(#\#),body:not(#\#) {
   background: var(--colors-background-neutral-disabled);
 }
 
+.\[\&_\.label\]\:c_content\.neutral\.default:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .label {
+  color: var(--colors-content-neutral-default);
+}
+
+.\[\&_\.sub-label\]\:c_content\.neutral\.subtlest:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .sub-label {
+  color: var(--colors-content-neutral-subtlest);
+}
+
 .selected\:c_content\.neutral\.default:is([aria-selected=true], [data-selected]):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
   color: var(--colors-content-neutral-default);
 }
@@ -2918,6 +2938,14 @@ html:not(#\#),body:not(#\#) {
   color: var(--colors-content-neutral-disabled);
 }
 
+.disabled\:\[\&_\.label\]\:c_content\.neutral\.disabled:is(:disabled, [disabled], [data-disabled]):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .label {
+  color: var(--colors-content-neutral-disabled);
+}
+
+.disabled\:\[\&_\.sub-label\]\:c_content\.neutral\.disabled:is(:disabled, [disabled], [data-disabled]):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .sub-label {
+  color: var(--colors-content-neutral-disabled);
+}
+
 .checked\:disabled\:bg_content\.neutral\.disabled:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]):is(:disabled, [disabled], [data-disabled]):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
   background: var(--colors-content-neutral-disabled);
 }
@@ -3046,6 +3074,12 @@ html:not(#\#),body:not(#\#) {
 }
 }
 
+@media (hover: hover) and (pointer: fine) {
+  .disabled\:hover\:bg_transparent:is(:hover, [data-hover]):is(:disabled, [disabled], [data-disabled]):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+    background: transparent;
+}
+}
+
 @media (hover: hover) and (pointer: fine) {
   .disabled\:hover\:bg_initial:is(:hover, [data-hover]):is(:disabled, [disabled], [data-disabled]):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
     background: initial;

package/dist/types/components/Input/index.d.ts

@@ -11,6 +11,7 @@ export type InputProps = Assign<HTMLStyledProps<'input'>, InputVariantProps> & {
     startAdornment?: ReactNode;
     endAdornment?: ReactNode;
     removeBorder?: boolean;
+    fontSize?: number;
 };
 declare const _default: import('react').MemoExoticComponent<import('react').ForwardRefExoticComponent<Omit<InputProps, "ref"> & import('react').RefAttributes<HTMLInputElement>>>;
 export default _default;

package/dist/types/components/List/List.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { default as List, ListProps } from '.';
+declare const meta: Meta<typeof List>;
+export default meta;
+type Story = StoryObj<ListProps>;
+export declare const Basic: Story;

package/dist/types/components/List/index.d.ts

@@ -0,0 +1,26 @@
+import { ListVariantProps } from './list.recipe';
+import { ComponentProps, HTMLStyledProps } from '../../../styled-system/types';
+import { Assign } from '@ark-ui/react';
+declare const Root: (props: Omit<HTMLStyledProps<"ul">, never> & {
+    size?: "sm" | "lg" | undefined;
+    density?: 1 | 2 | undefined;
+}) => import("react/jsx-runtime").JSX.Element;
+export type ListProps = ComponentProps<typeof Root>;
+export type ListItemProps = Assign<HTMLStyledProps<'li'>, ListVariantProps> & {
+    startAdornment?: React.ReactNode;
+    endAdornment?: React.ReactNode;
+    label?: string;
+    subLabel?: string;
+    disabled?: boolean;
+};
+declare const List: ((props: Omit<HTMLStyledProps<"ul">, never> & {
+    size?: "sm" | "lg" | undefined;
+    density?: 1 | 2 | undefined;
+}) => import("react/jsx-runtime").JSX.Element) & {
+    Root: (props: Omit<HTMLStyledProps<"ul">, never> & {
+        size?: "sm" | "lg" | undefined;
+        density?: 1 | 2 | undefined;
+    }) => import("react/jsx-runtime").JSX.Element;
+    Item: import('react').ForwardRefExoticComponent<Omit<ListItemProps, "ref"> & import('react').RefAttributes<HTMLStyledProps<"li">>>;
+};
+export default List;

package/dist/types/components/List/list.recipe.d.ts

@@ -0,0 +1,29 @@
+import { RecipeVariantProps } from '../../../styled-system/css';
+export type ListVariantProps = RecipeVariantProps<typeof listRecipe>;
+export declare const listRecipe: import('../../../styled-system/types').SlotRecipeRuntimeFn<"item" | "root", {
+    size: {
+        sm: {
+            item: {
+                h: "52px";
+            };
+        };
+        lg: {
+            item: {
+                h: "68px";
+            };
+        };
+    };
+    density: {
+        1: {
+            item: {
+                px: number;
+            };
+        };
+        2: {
+            item: {
+                pl: number;
+                pr: number;
+            };
+        };
+    };
+}>;

package/dist/types/components/Tabs/index.d.ts

@@ -2,21 +2,29 @@ import { default as React } from 'react';
 import { ComponentProps } from '../../../styled-system/types';
 import { Tabs as ArkTabs } from '@ark-ui/react/tabs';
 import { Assign } from '@ark-ui/react';
-export interface TabsVariantProps {
-    variant?: 'line' | 'enclosed';
-    fitted?: boolean;
-    bottomLine?: boolean;
-    shadow?: boolean;
-}
-type RootProps = Assign<ArkTabs.RootProps, TabsVariantProps>;
-declare const Root: (props: RootProps) => import("react/jsx-runtime").JSX.Element;
+declare const Root: (props: Omit<ArkTabs.RootProps, never> & {
+    variant?: "line" | "enclosed" | undefined;
+    fitted?: boolean | undefined;
+    bottomLine?: boolean | undefined;
+    shadow?: boolean | undefined;
+}) => import("react/jsx-runtime").JSX.Element;
 export type TabsProps = ComponentProps<typeof Root>;
 export type TabsListProps = Assign<React.HTMLAttributes<HTMLDivElement>, ArkTabs.ListBaseProps>;
 export type TabsTriggerProps = Assign<React.HTMLAttributes<HTMLButtonElement>, ArkTabs.TriggerBaseProps>;
 export type TabsContentProps = Assign<React.HTMLAttributes<HTMLDivElement>, ArkTabs.ContentBaseProps>;
 export type TabsIndicatorProps = Assign<React.HTMLAttributes<HTMLDivElement>, ArkTabs.IndicatorBaseProps>;
-declare const Tabs: ((props: RootProps) => import("react/jsx-runtime").JSX.Element) & {
-    Root: (props: RootProps) => import("react/jsx-runtime").JSX.Element;
+declare const Tabs: ((props: Omit<ArkTabs.RootProps, never> & {
+    variant?: "line" | "enclosed" | undefined;
+    fitted?: boolean | undefined;
+    bottomLine?: boolean | undefined;
+    shadow?: boolean | undefined;
+}) => import("react/jsx-runtime").JSX.Element) & {
+    Root: (props: Omit<ArkTabs.RootProps, never> & {
+        variant?: "line" | "enclosed" | undefined;
+        fitted?: boolean | undefined;
+        bottomLine?: boolean | undefined;
+        shadow?: boolean | undefined;
+    }) => import("react/jsx-runtime").JSX.Element;
     List: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLDivElement>, "asChild"> & ArkTabs.ListBaseProps & React.RefAttributes<HTMLDivElement>>;
     Trigger: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLButtonElement>, keyof ArkTabs.TriggerBaseProps> & ArkTabs.TriggerBaseProps & React.RefAttributes<HTMLButtonElement>>;
     Content: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLDivElement>, keyof ArkTabs.ContentBaseProps> & ArkTabs.ContentBaseProps & React.RefAttributes<HTMLDivElement>>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nation-a/ui",
-  "version": "0.15.3",
+  "version": "0.16.1",
   "type": "module",
   "types": "./dist/types/index.d.ts",
   "main": "./dist/index.cjs",
@@ -20,8 +20,8 @@
     "react-dom": "^18.3.1",
     "react-hot-toast": "^2.5.2",
     "react-lottie": "^1.2.10",
-    "@nation-a/tokens": "0.2.3",
-    "@nation-a/icons": "0.2.0"
+    "@nation-a/icons": "0.2.0",
+    "@nation-a/tokens": "0.2.3"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^3",