@nation-a/ui 0.5.1 → 0.6.0

package/dist/styled-system/styles.css

@@ -1267,6 +1267,30 @@
     padding: 8px;
 }
 
+  .bg_surface\.layer_1 {
+    background: var(--colors-surface-layer_1);
+}
+
+  .z_10 {
+    z-index: 10;
+}
+
+  .h_48px {
+    height: 48px;
+}
+
+  .w_64px {
+    width: 64px;
+}
+
+  .px_2 {
+    padding-inline: var(--spacing-2);
+}
+
+  .c_content\.neutral\.subtlest {
+    color: var(--colors-content-neutral-subtlest);
+}
+
   .sr_true {
     position: absolute;
     width: 1px;
@@ -1323,6 +1347,66 @@
     height: var(--sizes-24);
 }
 
+  .c_neutral {
+    color: neutral;
+}
+
+  .c_black {
+    color: black;
+}
+
+  .c_white {
+    color: white;
+}
+
+  .bg_off {
+    background: off;
+}
+
+  .py_1 {
+    padding-block: var(--spacing-1);
+}
+
+  .h_fit-content {
+    height: fit-content;
+}
+
+  .w_fit-content {
+    width: fit-content;
+}
+
+  .cursor_default {
+    cursor: default;
+}
+
+  .bdr_sm {
+    border-radius: var(--radii-sm);
+}
+
+  .bg_background\.static\.whiteAlpha\.bold {
+    background: var(--colors-background-static-white-alpha-bold);
+}
+
+  .c_content\.static\.black\.default {
+    color: var(--colors-content-static-black-default);
+}
+
+  .bg_background\.neutral\.selected {
+    background: var(--colors-background-neutral-selected);
+}
+
+  .bg_background\.static\.blackAlpha\.default {
+    background: var(--colors-background-static-black-alpha-default);
+}
+
+  .c_content\.static\.white\.default {
+    color: var(--colors-content-static-white-default);
+}
+
+  .bg_background\.static\.whiteAlpha\.selected {
+    background: var(--colors-background-static-white-alpha-selected);
+}
+
   .font_inter {
     font: inter;
 }
@@ -1454,6 +1538,18 @@
     flex-direction: row;
 }
 
+  .jc_space-around {
+    justify-content: space-around;
+}
+
+  .pt_2 {
+    padding-top: var(--spacing-2);
+}
+
+  .pb_8 {
+    padding-bottom: var(--spacing-8);
+}
+
   .bd-c_inherit {
     border-color: inherit;
 }
@@ -1474,6 +1570,10 @@
     animation-duration: var(--durations-slowest);
 }
 
+  .pl_1 {
+    padding-left: var(--spacing-1);
+}
+
   .ff_inter {
     font-family: var(--fonts-inter);
 }
@@ -1546,6 +1646,14 @@
     animation: var(--animations-dialog-out);
 }
 
+  .selected\:c_content\.neutral\.default:is([aria-selected=true], [data-selected]) {
+    color: var(--colors-content-neutral-default);
+}
+
+  .selected\:bg_background\.neutral\.default:is([aria-selected=true], [data-selected]) {
+    background: var(--colors-background-neutral-default);
+}
+
   .disabled\:bd-c_border\.neutral\.disabled:is(:disabled, [disabled], [data-disabled]) {
     border-color: var(--colors-border-neutral-disabled);
 }

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

@@ -1,13 +1,6 @@
-import { StoryObj } from '@storybook/react';
-declare const meta: {
-    title: string;
-    component: (props: import('@ark-ui/react').DialogRootProps) => import("react/jsx-runtime").JSX.Element;
-    parameters: {
-        layout: string;
-    };
-    tags: string[];
-    argTypes: {};
-};
+import { Meta, StoryObj } from '@storybook/react';
+import { default as Dialog } from './index';
+declare const meta: Meta<typeof Dialog.Root>;
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const BasicDialog: Story;

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

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

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

@@ -0,0 +1,30 @@
+import { Tabs as ArkTabs } from '@ark-ui/react/tabs';
+import { Assign } from '@ark-ui/react';
+import { ButtonHTMLAttributes, ComponentProps, HTMLAttributes } from 'react';
+export type NavigationProps = ComponentProps<typeof Root>;
+declare const Root: (props: ArkTabs.RootProps) => import("react/jsx-runtime").JSX.Element;
+export type NavigationTriggerProps = Assign<ButtonHTMLAttributes<HTMLButtonElement>, ArkTabs.TriggerBaseProps> & {
+    /**
+     * The icon to display in the trigger.
+     */
+    icon: React.ReactNode;
+    /**
+     * The label to display in the trigger.
+     */
+    label: string;
+};
+declare const Navigation: {
+    Root: (props: ArkTabs.RootProps) => import("react/jsx-runtime").JSX.Element;
+    Item: import('react').ForwardRefExoticComponent<Omit<ButtonHTMLAttributes<HTMLButtonElement>, keyof ArkTabs.TriggerBaseProps> & ArkTabs.TriggerBaseProps & {
+        /**
+         * The icon to display in the trigger.
+         */
+        icon: React.ReactNode;
+        /**
+         * The label to display in the trigger.
+         */
+        label: string;
+    } & import('react').RefAttributes<HTMLButtonElement>>;
+    List: import('react').ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLDivElement>, "asChild"> & ArkTabs.ListBaseProps & import('react').RefAttributes<HTMLDivElement>>;
+};
+export default Navigation;

package/dist/types/components/Navigation/navigation.recipe.d.ts

@@ -0,0 +1,2 @@
+export type NavigationVariantProps = keyof typeof navigationRecipe.variantMap;
+export declare const navigationRecipe: import('../../../styled-system/types').SlotRecipeRuntimeFn<"content" | "list" | "trigger" | "root" | "indicator", import('../../../styled-system/types').SlotRecipeVariantRecord<"content" | "list" | "trigger" | "root" | "indicator">>;

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

@@ -1,26 +1,6 @@
-import { StoryObj } from '@storybook/react';
-declare const meta: {
-    title: string;
-    component: import('react').ForwardRefExoticComponent<import('react').HTMLAttributes<HTMLDivElement> & {
-        size?: "sm" | "md" | "lg" | "xl" | undefined;
-    } & {
-        label?: string;
-        color?: import('../../../styled-system/tokens').ColorToken;
-    } & import('react').RefAttributes<HTMLDivElement>>;
-    parameters: {
-        layout: string;
-    };
-    tags: string[];
-    argTypes: {
-        size: {
-            control: "select";
-            options: string[];
-        };
-        label: {
-            control: "text";
-        };
-    };
-};
+import { Meta, StoryObj } from '@storybook/react';
+import { default as Spinner } from './index';
+declare const meta: Meta<typeof Spinner>;
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const DefaultSpinner: Story;

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

@@ -0,0 +1,10 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { default as Tag } from './index';
+declare const meta: Meta<typeof Tag>;
+export default meta;
+type Story = StoryObj<typeof Tag>;
+export declare const DefaultTag: Story;
+export declare const NoCloseTag: Story;
+export declare const TagWithBackground: Story;
+export declare const TagWithNoBackground: Story;
+export declare const TagWithImage: Story;

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

@@ -0,0 +1,13 @@
+import { ButtonHTMLAttributes } from 'react';
+import { TagVariantProps } from './tag.recipe';
+export type TagProps = ButtonHTMLAttributes<HTMLDivElement> & TagVariantProps & {
+    imageSrc?: string;
+    text: string;
+    onDeleteClick?: () => void;
+};
+declare const Tag: import('react').ForwardRefExoticComponent<ButtonHTMLAttributes<HTMLDivElement> & TagVariantProps & {
+    imageSrc?: string;
+    text: string;
+    onDeleteClick?: () => void;
+} & import('react').RefAttributes<HTMLDivElement>>;
+export default Tag;

package/dist/types/components/Tag/tag.recipe.d.ts

@@ -0,0 +1,27 @@
+export type TagVariantProps = Omit<typeof tagRecipe.__type, 'avatar'>;
+export declare const tagRecipe: import('../../../styled-system/types').RecipeRuntimeFn<{
+    color: {
+        neutral: {};
+        black: {};
+        white: {};
+    };
+    background: {
+        on: {};
+        off: {};
+    };
+    radius: {
+        sm: {
+            borderRadius: "sm";
+        };
+        full: {
+            borderRadius: "full";
+        };
+    };
+    avatar: {
+        true: {
+            borderRadius: "full";
+            pl: number;
+        };
+        false: {};
+    };
+}>;

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

@@ -4,4 +4,6 @@ export { default as Dialog, type DialogProps } from './Dialog';
 export { default as Spinner, type SpinnerProps } from './Spinner';
 export { default as IconButton, type IconButtonProps } from './IconButton';
 export { default as BottomSheet } from './BottomSheet';
+export { default as Navigation, type NavigationProps, type NavigationTriggerProps } from './Navigation';
+export { default as Tag, type TagProps } from './Tag';
 export { Portal, type PortalProps } from '@ark-ui/react';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nation-a/ui",
-  "version": "0.5.1",
+  "version": "0.6.0",
   "type": "module",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
@@ -25,11 +25,14 @@
     "@storybook/addon-essentials": "^8.6.11",
     "@storybook/addon-interactions": "^8.6.11",
     "@storybook/addon-onboarding": "^8.6.11",
+    "@storybook/addon-themes": "^8.6.11",
     "@storybook/blocks": "^8.6.11",
     "@storybook/builder-vite": "^8.6.11",
+    "@storybook/manager-api": "^8.6.11",
     "@storybook/react": "^8.6.11",
     "@storybook/react-vite": "^8.6.11",
     "@storybook/test": "^8.6.11",
+    "@storybook/theming": "^8.6.11",
     "@types/node": "^22.13.10",
     "@types/react": "^18.3.1",
     "@types/react-dom": "^18.3.1",