@nation-a/ui 0.13.1 → 0.14.0

package/dist/styled-system/styles.css

@@ -1530,6 +1530,26 @@ html:not(#\#),body:not(#\#) {
   height: var(--sizes-24);
 }
 
+.bg_background\.neutral\.selected:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+  background: var(--colors-background-neutral-selected);
+}
+
+.p_1:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+  padding: var(--spacing-1);
+}
+
+.w_14:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+  width: var(--sizes-14);
+}
+
+.bg_content\.neutral\.bold:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+  background: var(--colors-content-neutral-bold);
+}
+
+.bx-sh_xs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+  box-shadow: xs;
+}
+
 .max-w_500px:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
   max-width: 500px;
 }
@@ -1554,10 +1574,6 @@ html:not(#\#),body:not(#\#) {
   gap: var(--spacing-16);
 }
 
-.p_1:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
-  padding: var(--spacing-1);
-}
-
 .bx-sh_0px_8px_12px_0px_var\(--colors-semantic-shadow-overlay\,_rgba\(0\,_0\,_0\,_0\.08\)\):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
   box-shadow: 0px 8px 12px 0px var(--colors-semantic-shadow-overlay, rgba(0, 0, 0, 0.08));
 }
@@ -1592,10 +1608,6 @@ html:not(#\#),body:not(#\#) {
   border-radius: var(--radii-xs);
 }
 
-.bg_content\.neutral\.bold:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
-  background: var(--colors-content-neutral-bold);
-}
-
 .d_none:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
   display: none;
 }
@@ -1628,10 +1640,6 @@ html:not(#\#),body:not(#\#) {
   color: var(--colors-content-static-black-default);
 }
 
-.bg_background\.neutral\.selected:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
-  background: var(--colors-background-neutral-selected);
-}
-
 .bg_background\.static\.blackAlpha\.default:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
   background: var(--colors-background-static-black-alpha-default);
 }
@@ -2152,6 +2160,15 @@ html:not(#\#),body:not(#\#) {
   padding-bottom: var(--spacing-8);
 }
 
+.bd-w_2px:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+  border-width: 2px;
+}
+
+.trs-prop_background:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+  --transition-prop: background;
+  transition-property: background;
+}
+
 .bg-c_background\.neutral\.default:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
   background-color: var(--colors-background-neutral-default);
 }
@@ -2168,6 +2185,11 @@ html:not(#\#),body:not(#\#) {
   font-size: 12px;
 }
 
+.trs-prop_transform\,_background:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+  --transition-prop: transform, background;
+  transition-property: transform, background;
+}
+
 .ov-x_auto:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
   overflow-x: auto;
 }
@@ -2400,6 +2422,18 @@ html:not(#\#),body:not(#\#) {
   background: var(--colors-background-neutral-default);
 }
 
+.vertical\:gap_4[data-orientation=vertical]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+  gap: var(--spacing-4);
+}
+
+.horizontal\:gap_6[data-orientation=horizontal]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+  gap: var(--spacing-6);
+}
+
+.checked\:ring-o_-4px:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+  outline-offset: -4px;
+}
+
 .\[\&\[data-placeholder\]\]\:c_content\.neutral\.subtlest[data-placeholder]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
   color: var(--colors-content-neutral-subtlest);
 }
@@ -2408,6 +2442,46 @@ html:not(#\#),body:not(#\#) {
   stroke: currentColor;
 }
 
+.checked\:bg_background\.neutralInverse\.selected:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+  background: var(--colors-background-neutral-inverse-selected);
+}
+
+.disabled\:bg_background\.neutral\.disabled\!:is(:disabled, [disabled], [data-disabled]):not(#\#):not(#\#) {
+  background: var(--colors-background-neutral-disabled) !important;
+}
+
+.checked\:bg_background\.neuroidSecondary\.selected:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+  background: var(--colors-background-neuroid-secondary-selected);
+}
+
+.checked\:bg_background\.heydPrimary\.selected:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+  background: var(--colors-background-heyd-primary-selected);
+}
+
+.checked\:bg_background\.heybeePrimary\.selected:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+  background: var(--colors-background-heybee-primary-selected);
+}
+
+.checked\:bg_background\.zoltarinaPrimary\.selected:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+  background: var(--colors-background-zoltarina-primary-selected);
+}
+
+.checked\:trf_translateX\(100\%\):is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+  transform: translateX(100%);
+}
+
+.disabled\:bg_content\.neutral\.disabled\!:is(:disabled, [disabled], [data-disabled]):not(#\#):not(#\#) {
+  background: var(--colors-content-neutral-disabled) !important;
+}
+
+.checked\:bg_content\.neutralInverse\.bold:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+  background: var(--colors-content-neutral-inverse-bold);
+}
+
+.checked\:bg_content\.static\.white\.bold:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+  background: var(--colors-content-static-white-bold);
+}
+
 .\[\&\:\:-webkit-scrollbar\]\:d_none:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::-webkit-scrollbar {
   display: none;
 }
@@ -2768,6 +2842,30 @@ html:not(#\#),body:not(#\#) {
   border-color: var(--colors-border-neutral-disabled);
 }
 
+.vertical\:flex-d_column[data-orientation=vertical]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+  flex-direction: column;
+}
+
+.horizontal\:flex-d_row[data-orientation=horizontal]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+  flex-direction: row;
+}
+
+.checked\:bd-c_content\.neutral\.bold:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+  border-color: var(--colors-content-neutral-bold);
+}
+
+.checked\:ring-c_content\.neutral\.default_inverse:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+  outline-color: var(--colors-content-neutral-default_inverse);
+}
+
+.checked\:outline-style_solid:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+  outline-style: solid;
+}
+
+.checked\:ring-w_2px:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+  outline-width: 2px;
+}
+
 .focusWithin\:bd-c_border\.neutral\.default:focus-within:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
   border-color: var(--colors-border-neutral-default);
 }
@@ -2812,6 +2910,10 @@ html:not(#\#),body:not(#\#) {
   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);
+}
+
 .\[\&\: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);
 }
@@ -2922,4 +3024,10 @@ html:not(#\#),body:not(#\#) {
   .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);
 }
+}
+
+@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/{CheckBox → Checkbox}/checkbox.stories.d.ts

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

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

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

package/dist/types/components/RadioGroup/Radio.stories.d.ts

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

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

@@ -0,0 +1,14 @@
+import { Assign } from '@ark-ui/react';
+import { RadioGroup as ArkRadioGroup } from '@ark-ui/react/radio-group';
+import { ComponentProps, HTMLStyledProps } from 'styled-system/types';
+export type RootProviderProps = ComponentProps<typeof RootProvider>;
+declare const RootProvider: import('react').ForwardRefExoticComponent<Omit<Omit<Assign<HTMLStyledProps<"div">, ArkRadioGroup.RootProviderBaseProps>, never> & {}, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+export type RadioGroupProps = ComponentProps<typeof Root>;
+declare const Root: import('react').ForwardRefExoticComponent<Omit<Omit<Assign<HTMLStyledProps<"div">, ArkRadioGroup.RootBaseProps>, never> & {}, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+declare const RadioGroup: {
+    Root: import('react').ForwardRefExoticComponent<Omit<Omit<Assign<HTMLStyledProps<"div">, ArkRadioGroup.RootBaseProps>, never> & {}, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+    Item: import('react').ForwardRefExoticComponent<Omit<Assign<HTMLStyledProps<"label">, ArkRadioGroup.ItemBaseProps>, "ref"> & import('react').RefAttributes<HTMLLabelElement>>;
+    Label: import('react').ForwardRefExoticComponent<Omit<Assign<HTMLStyledProps<"label">, ArkRadioGroup.LabelBaseProps>, "ref"> & import('react').RefAttributes<HTMLLabelElement>>;
+    Context: (props: import('@ark-ui/react').RadioGroupContextProps) => import('react').ReactNode;
+};
+export default RadioGroup;

package/dist/types/components/RadioGroup/radio.recipe.d.ts

@@ -0,0 +1,3 @@
+import { RecipeVariantProps } from '../../../styled-system/css';
+export type RadioGroupRecipeVariantProps = RecipeVariantProps<typeof radioGroupRecipe>;
+export declare const radioGroupRecipe: import('../../../styled-system/types').SlotRecipeRuntimeFn<"label" | "indicator" | "item" | "root" | "itemText" | "itemControl", import('../../../styled-system/types').SlotRecipeVariantRecord<"label" | "indicator" | "item" | "root" | "itemText" | "itemControl">>;

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

@@ -2,6 +2,7 @@ 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 { createListCollection } from '@ark-ui/react/select';
 export type SelectProps = ComponentProps<typeof Root>;
 type RootProps<T> = Assign<HTMLStyledProps<'div'>, {
     collection: any;

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

@@ -0,0 +1,9 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { default as Switch } from './index';
+declare const meta: Meta<typeof Switch>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const DefaultSwitch: Story;
+export declare const DisabledSwitches: Story;
+export declare const SwitchSizes: Story;
+export declare const SwitchColors: Story;

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

@@ -0,0 +1,4 @@
+import * as StyledSwitch from './switch.styled';
+export type SwitchProps = StyledSwitch.RootProps;
+declare const Switch: import('react').ForwardRefExoticComponent<Omit<StyledSwitch.RootProps, "ref"> & import('react').RefAttributes<HTMLLabelElement>>;
+export default Switch;

package/dist/types/components/Switch/switch.recipe.d.ts

@@ -0,0 +1,83 @@
+import { RecipeVariantProps } from '../../../styled-system/css';
+export type SwitchRecipeVariantProps = RecipeVariantProps<typeof switchRecipe>;
+export declare const switchRecipe: import('../../../styled-system/types').SlotRecipeRuntimeFn<"label" | "root" | "control" | "thumb", {
+    size: {
+        md: {
+            control: {
+                width: number;
+                p: number;
+            };
+            thumb: {
+                width: number;
+                height: number;
+            };
+        };
+        lg: {
+            control: {
+                width: number;
+                p: number;
+            };
+            thumb: {
+                width: number;
+                height: number;
+            };
+        };
+    };
+    color: {
+        neutral: {
+            thumb: {
+                _checked: {
+                    background: "content.neutralInverse.bold";
+                };
+            };
+        };
+        neuroid: {
+            control: {
+                _checked: {
+                    background: "background.neuroidSecondary.selected";
+                };
+            };
+            thumb: {
+                _checked: {
+                    background: "content.static.white.bold";
+                };
+            };
+        };
+        heyd: {
+            control: {
+                _checked: {
+                    background: "background.heydPrimary.selected";
+                };
+            };
+            thumb: {
+                _checked: {
+                    background: "content.static.white.bold";
+                };
+            };
+        };
+        heybee: {
+            control: {
+                _checked: {
+                    background: "background.heybeePrimary.selected";
+                };
+            };
+            thumb: {
+                _checked: {
+                    background: "content.static.white.bold";
+                };
+            };
+        };
+        zoltarina: {
+            control: {
+                _checked: {
+                    background: "background.zoltarinaPrimary.selected";
+                };
+            };
+            thumb: {
+                _checked: {
+                    background: "content.static.white.bold";
+                };
+            };
+        };
+    };
+}>;

package/dist/types/components/Switch/switch.styled.d.ts

@@ -0,0 +1,17 @@
+import { Assign } from '@ark-ui/react';
+import { Switch } from '@ark-ui/react/switch';
+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">, Switch.RootProviderBaseProps>, never> & {
+    size?: "md" | "lg" | undefined;
+    color?: "neutral" | "neuroid" | "heyd" | "heybee" | "zoltarina" | undefined;
+}, "ref"> & import('react').RefAttributes<HTMLLabelElement>>;
+export type RootProps = ComponentProps<typeof Root>;
+export declare const Root: import('react').ForwardRefExoticComponent<Omit<Omit<Assign<HTMLStyledProps<"label">, Switch.RootBaseProps>, never> & {
+    size?: "md" | "lg" | undefined;
+    color?: "neutral" | "neuroid" | "heyd" | "heybee" | "zoltarina" | undefined;
+}, "ref"> & import('react').RefAttributes<HTMLLabelElement>>;
+export declare const Control: import('react').ForwardRefExoticComponent<Omit<Assign<HTMLStyledProps<"span">, Switch.ControlBaseProps>, "ref"> & import('react').RefAttributes<HTMLSpanElement>>;
+export declare const Label: import('react').ForwardRefExoticComponent<Omit<Assign<HTMLStyledProps<"span">, Switch.LabelBaseProps>, "ref"> & import('react').RefAttributes<HTMLSpanElement>>;
+export declare const Thumb: import('react').ForwardRefExoticComponent<Omit<Assign<HTMLStyledProps<"span">, Switch.ThumbBaseProps>, "ref"> & import('react').RefAttributes<HTMLSpanElement>>;
+export { SwitchContext as Context, SwitchHiddenInput as HiddenInput } from '@ark-ui/react/switch';

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

@@ -11,5 +11,8 @@ export { default as Input, type InputProps } from './Input';
 export { default as TextArea, type TextAreaProps } from './TextArea';
 export { default as Tabs, type TabsProps } from './Tabs';
 export { default as Toast, type ToastProps } from './Toast';
-export { default as Select, type SelectProps } from './Select';
+export { default as Select, type SelectProps, createListCollection } from './Select';
+export { default as RadioGroup, type RadioGroupProps } from './RadioGroup';
+export { default as Checkbox, type CheckboxProps } from './Checkbox';
+export { default as Switch, type SwitchProps } from './Switch';
 export * from './Layout';

package/dist/types/index.d.ts

@@ -1,4 +1,3 @@
 export * from './components';
 export * from './theme';
-export * from './contexts';
 export * from './utils';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nation-a/ui",
-  "version": "0.13.1",
+  "version": "0.14.0",
   "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/icons": "0.2.0",
-    "@nation-a/tokens": "0.2.2"
+    "@nation-a/tokens": "0.2.3",
+    "@nation-a/icons": "0.2.0"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^3",

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

@@ -1,4 +0,0 @@
-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/contexts/index.d.ts

@@ -1 +0,0 @@
-export {};