@nation-a/ui 0.14.0 → 0.15.0

package/dist/styled-system/styles.css

@@ -1213,6 +1213,18 @@ html:not(#\#),body:not(#\#) {
   background: var(--colors-background-heybee-primary-default);
 }
 
+.bg_background\.static\.blackAlpha\.default:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+  background: var(--colors-background-static-black-alpha-default);
+}
+
+.c_content\.neutral\.default:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+  color: var(--colors-content-neutral-default);
+}
+
+.bg_background\.static\.whiteAlpha\.default:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+  background: var(--colors-background-static-white-alpha-default);
+}
+
 .bg_background\.neutral\.default:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
   background: var(--colors-background-neutral-default);
 }
@@ -1249,10 +1261,6 @@ html:not(#\#),body:not(#\#) {
   color: var(--colors-content-heybee-primary-default);
 }
 
-.c_content\.neutral\.default:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
-  color: var(--colors-content-neutral-default);
-}
-
 .c_content\.danger\.default:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
   color: var(--colors-content-danger-default);
 }
@@ -1354,6 +1362,18 @@ html:not(#\#),body:not(#\#) {
   padding-block: var(--spacing-4);
 }
 
+.h_14:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+  height: var(--sizes-14);
+}
+
+.w_14:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+  width: var(--sizes-14);
+}
+
+.bx-sh_overlay:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+  box-shadow: var(--shadows-overlay);
+}
+
 .w_7:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
   width: var(--sizes-7);
 }
@@ -1538,10 +1558,6 @@ html:not(#\#),body: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);
 }
@@ -1640,10 +1656,6 @@ html:not(#\#),body:not(#\#) {
   color: var(--colors-content-static-black-default);
 }
 
-.bg_background\.static\.blackAlpha\.default:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
-  background: var(--colors-background-static-black-alpha-default);
-}
-
 .c_content\.static\.white\.default:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
   color: var(--colors-content-static-white-default);
 }
@@ -1668,10 +1680,6 @@ html:not(#\#),body:not(#\#) {
   padding-inline: var(--spacing-3);
 }
 
-.bx-sh_overlay:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
-  box-shadow: var(--shadows-overlay);
-}
-
 .trs_opacity_0\.2s_ease:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
   transition: opacity 0.2s ease;
 }
@@ -2960,6 +2968,18 @@ html:not(#\#),body:not(#\#) {
 }
 }
 
+@media (hover: hover) and (pointer: fine) {
+  .hover\:bg_background\.static\.blackAlpha\.selected:is(:hover, [data-hover]):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+    background: var(--colors-background-static-black-alpha-selected);
+}
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .hover\:bg_background\.static\.whiteAlpha\.selected:is(:hover, [data-hover]):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
+    background: var(--colors-background-static-white-alpha-selected);
+}
+}
+
 @media (hover: hover) and (pointer: fine) {
   .hover\:bg_background\.neutral\.selected:is(:hover, [data-hover]):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
     background: var(--colors-background-neutral-selected);

package/dist/types/components/Button/button.recipe.d.ts

@@ -41,6 +41,8 @@ export declare const buttonRecipe: import('../../../styled-system/types').Recipe
         heyd_primary: {};
         heyd_secondary: {};
         heybee_primary: {};
+        blackAlpha: {};
+        whiteAlpha: {};
         neutral: {};
         danger: {};
         warning: {};

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

@@ -289,7 +289,7 @@ declare const _default: import('react').MemoExoticComponent<(<C extends "symbol"
     ref?: import('react').Ref<HTMLButtonElement> | undefined;
 } & import('../../../styled-system/types').WithCss & {
     variant?: "outline" | "solid" | "light" | undefined;
-    color?: "neutral" | "neuroid_primary" | "neuroid_secondary" | "zoltarina_primary" | "zoltarina_secondary" | "heyd_primary" | "heyd_secondary" | "heybee_primary" | "danger" | "warning" | "success" | "informative" | undefined;
+    color?: "neutral" | "neuroid_primary" | "neuroid_secondary" | "zoltarina_primary" | "zoltarina_secondary" | "heyd_primary" | "heyd_secondary" | "heybee_primary" | "blackAlpha" | "whiteAlpha" | "danger" | "warning" | "success" | "informative" | undefined;
     size?: "sm" | "md" | "lg" | "xs" | undefined;
     radius?: "md" | "lg" | "full" | undefined;
     fullWidth?: boolean | undefined;

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

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

package/dist/types/components/Fab/fab.recipe.d.ts

@@ -0,0 +1,55 @@
+import { RecipeVariantProps } from '../../../styled-system/css';
+export type FabVariantProps = RecipeVariantProps<typeof fabRecipe>;
+export declare const fabRecipe: import('../../../styled-system/types').RecipeRuntimeFn<{
+    color: {
+        neuroid_primary: {
+            background: "background.neuroidPrimary.default";
+            color: "content.neutral.bold";
+            _hover: {
+                background: "background.neuroidPrimary.selected";
+            };
+        };
+        zoltarina_primary: {
+            background: "background.zoltarinaPrimary.default";
+            color: "content.static.black.bold";
+            _hover: {
+                background: "background.zoltarinaPrimary.selected";
+            };
+        };
+        heyd_primary: {
+            background: "background.heydPrimary.default";
+            color: "content.static.black.bold";
+            _hover: {
+                background: "background.heydPrimary.selected";
+            };
+        };
+        heybee_primary: {
+            background: "background.heybeePrimary.default";
+            color: "content.static.black.bold";
+            _hover: {
+                background: "background.heybeePrimary.selected";
+            };
+        };
+        blackAlpha: {
+            background: "background.static.blackAlpha.default";
+            color: "content.neutral.default";
+            _hover: {
+                background: "background.static.blackAlpha.selected";
+            };
+        };
+        whiteAlpha: {
+            background: "background.static.whiteAlpha.default";
+            color: "content.neutral.default";
+            _hover: {
+                background: "background.static.whiteAlpha.selected";
+            };
+        };
+        neutral: {
+            background: "background.neutral.default";
+            color: "content.neutral.bold";
+            _hover: {
+                background: "background.neutral.selected";
+            };
+        };
+    };
+}>;

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

@@ -0,0 +1,11 @@
+import { HTMLStyledProps } from '../../../styled-system/jsx';
+import { FabVariantProps } from './fab.recipe';
+export type FabProps = HTMLStyledProps<'button'> & FabVariantProps & {
+    loading?: boolean;
+};
+declare const _default: import('react').MemoExoticComponent<(<C extends "symbol" | "object" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "center" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "search" | "slot" | "script" | "section" | "select" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "template" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "set" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | import('react').ComponentType<any> = "button">(props: {
+    as?: C | undefined;
+} & Omit<Omit<FabProps, "ref"> & import('react').RefAttributes<HTMLButtonElement>, "ref"> & Omit<import('react').PropsWithoutRef<import('react').ComponentProps<C>>, "as" | "key" | keyof import('react').ButtonHTMLAttributes<HTMLButtonElement> | "loading" | "css"> & {
+    ref?: import('react').Ref<import('react').ElementRef<C>> | undefined;
+}) => React.ReactElement)>;
+export default _default;

package/dist/types/components/IconButton/icon-button.recipe.d.ts

@@ -46,6 +46,8 @@ export declare const iconButtonRecipe: import('../../../styled-system/types').Re
         zoltarina_primary: {};
         heyd_primary: {};
         heybee_primary: {};
+        blackAlpha: {};
+        whiteAlpha: {};
         neutral: {};
     };
     size: {

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

@@ -15,4 +15,5 @@ export { default as Select, type SelectProps, createListCollection } from './Sel
 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 { default as Fab, type FabProps } from './Fab';
 export * from './Layout';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nation-a/ui",
-  "version": "0.14.0",
+  "version": "0.15.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/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",