@nation-a/ui 0.11.11 → 0.13.0

package/dist/styled-system/styles.css

@@ -1293,6 +1293,22 @@ html:not(#\#),body:not(#\#) {
   opacity: 0;
 }
 
+.c_content\.neutralInverse\.bold:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+  color: var(--colors-content-neutral-inverse-bold);
+}
+
+.w_4\.5:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+  width: var(--sizes-4\.5);
+}
+
+.h_4\.5:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+  height: var(--sizes-4\.5);
+}
+
+.bdr_sm:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+  border-radius: var(--radii-sm);
+}
+
 .px_6:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
   padding-inline: var(--spacing-6);
 }
@@ -1442,6 +1458,46 @@ html:not(#\#),body:not(#\#) {
   width: 64px;
 }
 
+.w_90vw:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+  width: 90vw;
+}
+
+.p_10:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+  padding: var(--spacing-10);
+}
+
+.h_40px:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+  height: 40px;
+}
+
+.p_0_16px:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+  padding: 0 16px;
+}
+
+.trs_all_0\.2s_ease:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+  transition: all 0.2s ease;
+}
+
+.cursor_not-allowed:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+  cursor: not-allowed;
+}
+
+.z_dropdown:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+  z-index: var(--z-index-dropdown);
+}
+
+.flex_1:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+  flex: 1 1 0%;
+}
+
+.ta_left:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+  text-align: left;
+}
+
+.px_1:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+  padding-inline: var(--spacing-1);
+}
+
 .gap_2rem:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
   gap: 2rem;
 }
@@ -1516,10 +1572,6 @@ html:not(#\#),body:not(#\#) {
   transition-duration: var(--transition-duration, 150ms);
 }
 
-.flex_1:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
-  flex: 1 1 0%;
-}
-
 .ov_hidden:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
   overflow: hidden;
 }
@@ -1568,10 +1620,6 @@ html:not(#\#),body:not(#\#) {
   cursor: default;
 }
 
-.bdr_sm:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
-  border-radius: var(--radii-sm);
-}
-
 .bg_background\.static\.whiteAlpha\.bold:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
   background: var(--colors-background-static-white-alpha-bold);
 }
@@ -1608,10 +1656,6 @@ html:not(#\#),body:not(#\#) {
   overflow-wrap: anywhere;
 }
 
-.c_content\.neutralInverse\.bold:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
-  color: var(--colors-content-neutral-inverse-bold);
-}
-
 .px_3:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
   padding-inline: var(--spacing-3);
 }
@@ -2055,6 +2099,15 @@ html:not(#\#),body:not(#\#) {
   top: 50%;
 }
 
+.bd-c_content\.neutral\.bold:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+  border-color: var(--colors-content-neutral-bold);
+}
+
+.trs-prop_border-color\,_background:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+  --transition-prop: border-color, background;
+  transition-property: border-color, background;
+}
+
 .top_0:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
   top: var(--spacing-0);
 }
@@ -2099,6 +2152,22 @@ html:not(#\#),body:not(#\#) {
   padding-bottom: var(--spacing-8);
 }
 
+.bg-c_background\.neutral\.default:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+  background-color: var(--colors-background-neutral-default);
+}
+
+.mt_2:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+  margin-top: var(--spacing-2);
+}
+
+.ov-y_auto:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+  overflow-y: auto;
+}
+
+.fs_12px:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+  font-size: 12px;
+}
+
 .ov-x_auto:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
   overflow-x: auto;
 }
@@ -2247,6 +2316,26 @@ html:not(#\#),body:not(#\#) {
   height: 24px;
 }
 
+.\[\&_svg\]\:w_2\.5:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) svg {
+  width: var(--sizes-2\.5);
+}
+
+.\[\&_svg\]\:h_2\.5:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) svg {
+  height: var(--sizes-2\.5);
+}
+
+.checked\:bg_content\.neutral\.bold:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+  background: var(--colors-content-neutral-bold);
+}
+
+.indeterminate\:bg_content\.neutral\.bold:is(:indeterminate, [data-indeterminate], [aria-checked=mixed], [data-state=indeterminate]):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+  background: var(--colors-content-neutral-bold);
+}
+
+.disabled\:tch-a_none:is(:disabled, [disabled], [data-disabled]):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+  touch-action: none;
+}
+
 .open\:anim_backdrop-in:is([open], [data-open], [data-state="open"]):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
   animation: var(--animations-backdrop-in);
 }
@@ -2311,6 +2400,10 @@ html:not(#\#),body:not(#\#) {
   background: var(--colors-background-neutral-default);
 }
 
+.\[\&\[data-placeholder\]\]\:c_content\.neutral\.subtlest[data-placeholder]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+  color: var(--colors-content-neutral-subtlest);
+}
+
 .\[\&_path\]\:stk_currentColor:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) path {
   stroke: currentColor;
 }
@@ -2659,6 +2752,14 @@ html:not(#\#),body:not(#\#) {
   border-color: var(--colors-border-neutral-disabled);
 }
 
+.indeterminate\:bd-c_content\.neutral\.bold:is(:indeterminate, [data-indeterminate], [aria-checked=mixed], [data-state=indeterminate]):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+  border-color: var(--colors-content-neutral-bold);
+}
+
+.disabled\:bd-c_content\.neutral\.disabled\!:is(:disabled, [disabled], [data-disabled]):not(#\#):not(#\#) {
+  border-color: var(--colors-content-neutral-disabled) !important;
+}
+
 .\[\&_textarea\]\:ov-y_auto:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) textarea {
   overflow-y: auto;
 }
@@ -2671,10 +2772,38 @@ html:not(#\#),body:not(#\#) {
   border-color: var(--colors-border-neutral-default);
 }
 
+.\[\&\:has\(\+_\:focus-visible\)\]\:ring-o_2px:has(+ :focus-visible):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+  outline-offset: 2px;
+}
+
+.\[\&\:has\(\+_\:focus-visible\)\]\:ring_2px_solid:has(+ :focus-visible):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+  outline: 2px solid;
+}
+
+.\[\&\:has\(\+_\:focus-visible\)\]\:ring-c_border\.neutral\.default:has(+ :focus-visible):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+  outline-color: var(--colors-border-neutral-default);
+}
+
 .\[\&\:hover\]\:op_0\.8:hover:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
   opacity: 0.8;
 }
 
+.\[\&\:hover\]\:bg-c_background\.neutral\.default:hover:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+  background-color: var(--colors-background-neutral-default);
+}
+
+.\[\&\:hover\]\:bg-c_background\.neutral\.hover:hover:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+  background-color: background.neutral.hover;
+}
+
+.checked\:disabled\:bg_content\.neutral\.disabled\!:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]):is(:disabled, [disabled], [data-disabled]):not(#\#):not(#\#) {
+  background: var(--colors-content-neutral-disabled) !important;
+}
+
+.indeterminate\:disabled\:bg_content\.neutral\.disabled\!:is(:indeterminate, [data-indeterminate], [aria-checked=mixed], [data-state=indeterminate]):is(:disabled, [disabled], [data-disabled]):not(#\#):not(#\#) {
+  background: var(--colors-content-neutral-disabled) !important;
+}
+
 .group:is(:disabled, [disabled], [data-disabled]):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .placeholder\:groupDisabled\:c_content\.static\.white\.disabled::placeholder, .group:is(:disabled, [disabled], [data-disabled]):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .placeholder\:groupDisabled\:c_content\.static\.white\.disabled[data-placeholder] {
   color: var(--colors-content-static-white-disabled);
 }
@@ -2683,6 +2812,10 @@ html:not(#\#),body:not(#\#) {
   color: var(--colors-content-neutral-disabled);
 }
 
+.\[\&\:has\(\+_\:focus-visible\)\]\:checked\:ring-c_border\.neutral\.default:has(+ :focus-visible):is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+  outline-color: var(--colors-border-neutral-default);
+}
+
 @media (hover: hover) and (pointer: fine) {
   .hover\:bg_background\.neuroidPrimary\.selected:is(:hover, [data-hover]):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
     background: var(--colors-background-neuroid-primary-selected);
@@ -2771,4 +2904,22 @@ html:not(#\#),body:not(#\#) {
   .hover\:c_content\.neutral\.hovered:is(:hover, [data-hover]):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
     color: content.neutral.hovered;
 }
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .hover\:bd-c_content\.neutral\.subtle:is(:hover, [data-hover]):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+    border-color: var(--colors-content-neutral-subtle);
+}
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .checked\:hover\:bg_content\.neutral\.subtle:is(:hover, [data-hover]):is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+    background: var(--colors-content-neutral-subtle);
+}
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .indeterminate\:hover\:bg_content\.neutral\.subtle:is(:hover, [data-hover]):is(:indeterminate, [data-indeterminate], [aria-checked=mixed], [data-state=indeterminate]):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+    background: var(--colors-content-neutral-subtle);
+}
 }

package/dist/types/components/CheckBox/checkbox.recipe.d.ts

@@ -0,0 +1,16 @@
+import { RecipeVariantProps } from '../../../styled-system/css';
+export type CheckboxVariantProps = RecipeVariantProps<typeof checkboxRecipe>;
+export declare const checkboxRecipe: import('../../../styled-system/types').SlotRecipeRuntimeFn<"label" | "group" | "indicator" | "root" | "control", {
+    variant: {
+        square: {
+            control: {
+                borderRadius: "sm";
+            };
+        };
+        round: {
+            control: {
+                borderRadius: "full";
+            };
+        };
+    };
+}>;

package/dist/types/components/CheckBox/checkbox.stories.d.ts

@@ -0,0 +1,10 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Checkbox } from '.';
+declare const meta: Meta<typeof Checkbox>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Base: Story;
+export declare const Variant: Story;
+export declare const Checked: Story;
+export declare const Disabled: Story;
+export declare const Indeterminate: Story;

package/dist/types/components/CheckBox/checkbox.styled.d.ts

@@ -0,0 +1,16 @@
+import { Assign } from '@ark-ui/react';
+import { Checkbox } from '@ark-ui/react/checkbox';
+import { ComponentProps, HTMLStyledProps } from 'styled-system/types';
+export type RootProviderProps = ComponentProps<typeof RootProvider>;
+export declare const RootProvider: import('react').ForwardRefExoticComponent<Omit<Omit<Assign<HTMLStyledProps<"label">, Checkbox.RootProviderBaseProps>, never> & {
+    variant?: "round" | "square" | undefined;
+}, "ref"> & import('react').RefAttributes<HTMLLabelElement>>;
+export type RootProps = ComponentProps<typeof Root>;
+export declare const Root: import('react').ForwardRefExoticComponent<Omit<Omit<Assign<HTMLStyledProps<"label">, Checkbox.RootBaseProps>, never> & {
+    variant?: "round" | "square" | undefined;
+}, "ref"> & import('react').RefAttributes<HTMLLabelElement>>;
+export declare const Control: import('react').ForwardRefExoticComponent<Omit<Assign<HTMLStyledProps<"div">, Checkbox.ControlBaseProps>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+export declare const Group: import('react').ForwardRefExoticComponent<Omit<Assign<HTMLStyledProps<"div">, Checkbox.GroupBaseProps>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+export declare const Indicator: import('react').ForwardRefExoticComponent<Omit<Assign<HTMLStyledProps<"div">, Checkbox.IndicatorBaseProps>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+export declare const Label: import('react').ForwardRefExoticComponent<Omit<Assign<HTMLStyledProps<"span">, Checkbox.LabelBaseProps>, "ref"> & import('react').RefAttributes<HTMLSpanElement>>;
+export { CheckboxContext as Context, CheckboxHiddenInput as HiddenInput } from '@ark-ui/react/checkbox';

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

@@ -0,0 +1,4 @@
+import * as StyledCheckbox from './checkbox.styled';
+export interface CheckboxProps extends StyledCheckbox.RootProps {
+}
+export declare const Checkbox: import('react').ForwardRefExoticComponent<Omit<CheckboxProps, "ref"> & import('react').RefAttributes<HTMLLabelElement>>;

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

@@ -0,0 +1,21 @@
+import { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: (props: Omit<import('../../../styled-system/jsx').HTMLStyledProps<"div">, keyof import('@ark-ui/react').SelectRootProps<T>> & {
+        collection: any;
+    } & import('@ark-ui/react').SelectRootProps<any>) => import("react/jsx-runtime").JSX.Element;
+    tags: string[];
+    parameters: {
+        layout: string;
+    };
+    argTypes: {
+        className: {
+            control: "text";
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const WithDescription: Story;
+export declare const WithDescriptionAndCustomIcons: Story;

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

@@ -0,0 +1,32 @@
+import { Select as ArkSelect } from '@ark-ui/react/select';
+import { HTMLStyledProps } from '../../../styled-system/jsx';
+import { Assign } from '@ark-ui/react';
+import { ComponentProps } from 'react';
+export type SelectProps = ComponentProps<typeof Root>;
+type RootProps<T> = Assign<HTMLStyledProps<'div'>, {
+    collection: any;
+} & ArkSelect.RootProps<T>>;
+declare const Root: (props: RootProps<any>) => import("react/jsx-runtime").JSX.Element;
+type LabelProps = Assign<HTMLStyledProps<'label'>, ArkSelect.LabelProps>;
+type TriggerProps = Assign<HTMLStyledProps<'button'>, ArkSelect.TriggerProps & {
+    description?: string;
+}>;
+type ValueTextProps = Assign<HTMLStyledProps<'span'>, ArkSelect.ValueTextProps>;
+type DescriptionProps = Assign<HTMLStyledProps<'div'>, {
+    text: string;
+    className?: string;
+}>;
+type ContentProps = Assign<HTMLStyledProps<'div'>, ArkSelect.ContentProps & {
+    radius?: 'md' | 'lg';
+}>;
+type ItemProps = Assign<HTMLStyledProps<'div'>, ArkSelect.ItemProps>;
+declare const Select: {
+    Root: (props: RootProps<any>) => import("react/jsx-runtime").JSX.Element;
+    Label: import('react').ForwardRefExoticComponent<Omit<LabelProps, "ref"> & import('react').RefAttributes<HTMLLabelElement>>;
+    Trigger: import('react').ForwardRefExoticComponent<Omit<TriggerProps, "ref"> & import('react').RefAttributes<HTMLButtonElement>>;
+    Content: import('react').ForwardRefExoticComponent<Omit<ContentProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+    Item: import('react').ForwardRefExoticComponent<Omit<ItemProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+    ValueText: import('react').ForwardRefExoticComponent<Omit<ValueTextProps, "ref"> & import('react').RefAttributes<HTMLSpanElement>>;
+    Description: import('react').ForwardRefExoticComponent<Omit<DescriptionProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+};
+export default Select;

package/dist/types/components/Select/select.recipe.d.ts

@@ -0,0 +1,32 @@
+export type SelectVariantProps = keyof typeof selectRecipe.variantMap;
+export declare const selectRecipe: import('../../../styled-system/types').SlotRecipeRuntimeFn<"label" | "description" | "content" | "trigger" | "item" | "root" | "valueText", {
+    radius: {
+        md: {
+            trigger: {
+                borderRadius: number;
+            };
+            content: {
+                borderRadius: number;
+            };
+        };
+        lg: {
+            trigger: {
+                borderRadius: number;
+            };
+            content: {
+                borderRadius: number;
+            };
+        };
+    };
+    disabled: {
+        true: {
+            trigger: {
+                opacity: number;
+                cursor: "not-allowed";
+                '&:hover': {
+                    backgroundColor: "background.neutral.default";
+                };
+            };
+        };
+    };
+}>;

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@nation-a/ui",
-  "version": "0.11.11",
+  "version": "0.13.0",
   "type": "module",
+  "types": "./dist/types/index.d.ts",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
-  "types": "./dist/types/index.d.ts",
   "files": [
     "dist"
   ],
@@ -21,7 +21,7 @@
     "react-hot-toast": "^2.5.2",
     "react-lottie": "^1.2.10",
     "@nation-a/icons": "0.2.0",
-    "@nation-a/tokens": "0.2.1"
+    "@nation-a/tokens": "0.2.2"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^3",
@@ -44,6 +44,7 @@
     "@typescript-eslint/eslint-plugin": "^5.59.7",
     "@typescript-eslint/parser": "^5.59.7",
     "@vitejs/plugin-react": "^4.3.4",
+    "chromatic": "^11.28.0",
     "eslint": "^8.40.0",
     "eslint-plugin-storybook": "^0.12.0",
     "storybook": "^8.6.11",