@nattstack/ui 0.0.107 → 0.1.0

package/dist/components/tooltip/tooltip-popup.stylex.d.ts

@@ -0,0 +1,30 @@
+import * as stylex from "@stylexjs/stylex";
+//#region src/components/tooltip/tooltip-popup.stylex.d.ts
+declare const tooltipPopupStyles: Readonly<{
+  readonly base: Readonly<{
+    readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", "var(--color-tooltip-bg)">;
+    readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", 8>;
+    readonly boxShadow: stylex.StyleXClassNameFor<"boxShadow", "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)">;
+    readonly color: stylex.StyleXClassNameFor<"color", "var(--color-tooltip)">;
+    readonly fontSize: stylex.StyleXClassNameFor<"fontSize", 13>;
+    readonly fontWeight: stylex.StyleXClassNameFor<"fontWeight", 450>;
+    readonly opacity: stylex.StyleXClassNameFor<"opacity", 0 | 1>;
+    readonly paddingBlock: stylex.StyleXClassNameFor<"paddingBlock", 4>;
+    readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", 8>;
+    readonly scale: stylex.StyleXClassNameFor<"scale", 1 | 0.975>;
+    readonly transformOrigin: stylex.StyleXClassNameFor<"transformOrigin", "var(--transform-origin)">;
+    readonly transitionDuration: stylex.StyleXClassNameFor<"transitionDuration", "150ms" | "0ms">;
+    readonly transitionProperty: stylex.StyleXClassNameFor<"transitionProperty", "none" | "opacity, scale">;
+  }>;
+  readonly portal: Readonly<{
+    readonly isolation: stylex.StyleXClassNameFor<"isolation", "isolate">;
+    readonly position: stylex.StyleXClassNameFor<"position", "relative">;
+    readonly zIndex: stylex.StyleXClassNameFor<"zIndex", 50>;
+  }>;
+  readonly positioner: Readonly<{
+    readonly isolation: stylex.StyleXClassNameFor<"isolation", "isolate">;
+    readonly zIndex: stylex.StyleXClassNameFor<"zIndex", 50>;
+  }>;
+}>;
+//#endregion
+export { tooltipPopupStyles };

package/dist/components/tooltip/tooltip-popup.stylex.js

@@ -0,0 +1,32 @@
+//#region src/components/tooltip/tooltip-popup.stylex.ts
+const tooltipPopupStyles = {
+	base: {
+		kWkggS: "x191mfzf",
+		kaIpWk: "xur7f20",
+		kGVxlE: "x1bbn379",
+		kMwMTN: "x1x01sck",
+		kGuDYH: "x4z9k3i",
+		k63SB2: "x10p5zqr",
+		kSiTet: "x1pimrze x1hc1fzr",
+		k8WAf4: "x12ulsxz",
+		kg3NbH: "xdqyycr",
+		km0Bbg: "xx6l7ed x1hsy5kr",
+		k3nNDw: "xctpfpq",
+		kIyJzY: "xuik8z1 xx6bhzk",
+		k1ekBW: "xfm2kp x1h615f9",
+		$$css: true
+	},
+	portal: {
+		kHBbk8: "xc8icb0",
+		kVAEAm: "x1n2onr6",
+		kY2c9j: "xa9119d",
+		$$css: true
+	},
+	positioner: {
+		kHBbk8: "xc8icb0",
+		kY2c9j: "xa9119d",
+		$$css: true
+	}
+};
+//#endregion
+export { tooltipPopupStyles };

package/dist/components/tooltip/tooltip.d.ts

@@ -1,10 +1,7 @@
 import { Tooltip } from "@base-ui/react";
 import { JSX } from "react";
 //#region src/components/tooltip/tooltip.d.ts
-interface TooltipProps extends Omit<Tooltip.Root.Props, "disabled"> {
-  isDisabled?: Tooltip.Root.Props["disabled"];
-  isDisableHoverablePopup?: Tooltip.Root.Props["disableHoverablePopup"];
-}
+interface TooltipProps extends Tooltip.Root.Props {}
 declare function Tooltip$1(props: TooltipProps): JSX.Element;
 //#endregion
 export { Tooltip$1 as Tooltip, TooltipProps };

package/dist/components/tooltip/tooltip.js

@@ -2,12 +2,10 @@ import { jsx } from "react/jsx-runtime";
 import { Tooltip } from "@base-ui/react";
 //#region src/components/tooltip/tooltip.tsx
 function Tooltip$1(props) {
-	const { isDisabled = false, isDisableHoverablePopup = true, ...rest } = props;
 	return /* @__PURE__ */ jsx(Tooltip.Root, {
 		"data-slot": "tooltip",
-		disabled: isDisabled,
-		disableHoverablePopup: isDisableHoverablePopup,
-		...rest
+		disableHoverablePopup: true,
+		...props
 	});
 }
 //#endregion

package/dist/tailwind-colors/root.css

@@ -16,9 +16,19 @@
   --color-success: var(--color-primitive-green-9);
   --color-warning: var(--color-primitive-yellow-9);
   --color-error: var(--color-primitive-red-9);
+
+  --color-tooltip: var(--color-gray-dark-12);
+  --color-tooltip-bg: var(--color-gray-dark-1);
+
+  --opacity-dialog-backdrop: 0.25;
+  --opacity-picker-disabled: 0.5;
 }
 
 .dark {
   --color-bg-shell-outer: var(--color-gray-1);
   --color-bg-shell-inner: var(--color-gray-2);
+  --color-tooltip: var(--color-gray-light-12);
+  --color-tooltip-bg: var(--color-gray-light-1);
+  --opacity-dialog-backdrop: 0.75;
+  --opacity-picker-disabled: 0.25;
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nattstack/ui",
-  "version": "0.0.107",
-  "description": "A collection of reusable React components built with Base UI, TypeScript, and CSS Modules",
+  "version": "0.1.0",
+  "description": "A collection of reusable React components built with Base UI and StyleX",
   "keywords": [
     "base-ui",
     "components",
@@ -49,9 +49,10 @@
   },
   "dependencies": {
     "@base-ui/react": "1.7.0",
-    "class-variance-authority": "0.7.1"
+    "@stylexjs/stylex": "0.19.0"
   },
   "devDependencies": {
+    "@stylexjs/unplugin": "0.19.0",
     "@tsdown/css": "0.22.14",
     "@types/bun": "1.3.14",
     "tsdown": "0.22.14",

package/dist/components/button/button-spinner.css

@@ -1,97 +0,0 @@
-@layer components {
-  .button-spinner-module_base_UApLZa {
-    height: var(--size);
-    width: var(--size);
-    animation: 1s steps(12, end) infinite button-spinner-module_spinner_UApLZa;
-    position: absolute;
-    scale: -1 1;
-  }
-
-  @keyframes button-spinner-module_spinner_UApLZa {
-    to {
-      rotate: 1turn;
-    }
-  }
-
-  .button-spinner-module_base_UApLZa > div {
-    height: calc(var(--size) / 12);
-    pointer-events: none;
-    transform-origin: 0;
-    width: calc(var(--size) / 2);
-    transition: all .15s;
-    position: absolute;
-    top: 50%;
-    right: 0;
-    translate: 0 -50%;
-  }
-
-  .button-spinner-module_base_UApLZa > div:after {
-    content: "";
-    background-color: currentColor;
-    border-radius: 9999px;
-    width: 50%;
-    height: 100%;
-    position: absolute;
-    right: 0;
-  }
-
-  .button-spinner-module_base_UApLZa > div:first-child {
-    opacity: 1;
-    rotate: 0deg;
-  }
-
-  .button-spinner-module_base_UApLZa > div:nth-child(2) {
-    opacity: .925;
-    rotate: 30deg;
-  }
-
-  .button-spinner-module_base_UApLZa > div:nth-child(3) {
-    opacity: .85;
-    rotate: 60deg;
-  }
-
-  .button-spinner-module_base_UApLZa > div:nth-child(4) {
-    opacity: .775;
-    rotate: 90deg;
-  }
-
-  .button-spinner-module_base_UApLZa > div:nth-child(5) {
-    opacity: .7;
-    rotate: 120deg;
-  }
-
-  .button-spinner-module_base_UApLZa > div:nth-child(6) {
-    opacity: .625;
-    rotate: 150deg;
-  }
-
-  .button-spinner-module_base_UApLZa > div:nth-child(7) {
-    opacity: .55;
-    rotate: 180deg;
-  }
-
-  .button-spinner-module_base_UApLZa > div:nth-child(8) {
-    opacity: .475;
-    rotate: 210deg;
-  }
-
-  .button-spinner-module_base_UApLZa > div:nth-child(9) {
-    opacity: .4;
-    rotate: 240deg;
-  }
-
-  .button-spinner-module_base_UApLZa > div:nth-child(10) {
-    opacity: .325;
-    rotate: 270deg;
-  }
-
-  .button-spinner-module_base_UApLZa > div:nth-child(11) {
-    opacity: .25;
-    rotate: 300deg;
-  }
-
-  .button-spinner-module_base_UApLZa > div:nth-child(12) {
-    opacity: .15;
-    rotate: 330deg;
-  }
-}

package/dist/components/button/button-spinner.module.js

@@ -1,8 +0,0 @@
-import './button-spinner.css';
-//#region src/components/button/button-spinner.module.css
-var button_spinner_module_default = {
-	"base": "button-spinner-module_base_UApLZa",
-	"spinner": "button-spinner-module_spinner_UApLZa"
-};
-//#endregion
-export { button_spinner_module_default as default };

package/dist/components/button/button.css

@@ -1,157 +0,0 @@
-@layer components {
-  .button-module_base_4nLWdW {
-    cursor: pointer;
-    outline-offset: 2px;
-    user-select: none;
-    outline: 2px solid #0000;
-    justify-content: center;
-    align-items: center;
-    column-gap: 8px;
-    font-size: 14px;
-    font-weight: 450;
-    transition-property: background-color, box-shadow, translate;
-    transition-duration: .15s;
-    display: inline-flex;
-    position: relative;
-    overflow: hidden;
-  }
-
-  .button-module_base_4nLWdW:active:not(:disabled) {
-    translate: 0 1px;
-  }
-
-  .button-module_base_4nLWdW:focus-visible {
-    outline-color: var(--color-outline);
-  }
-
-  .button-module_disabled_4nLWdW, .button-module_loading_4nLWdW {
-    cursor: not-allowed;
-    opacity: .5;
-  }
-
-  .button-module_loading_4nLWdW > :not([data-slot="button-spinner"]) {
-    color: #0000;
-    text-shadow: none;
-  }
-
-  .button-module_rounded_base_4nLWdW.button-module_size_32_4nLWdW {
-    border-radius: 8px;
-    padding: 0 12px;
-  }
-
-  .button-module_rounded_base_4nLWdW.button-module_size_36_4nLWdW {
-    border-radius: 9px;
-    padding: 0 14px;
-  }
-
-  .button-module_rounded_base_4nLWdW.button-module_size_40_4nLWdW {
-    border-radius: 10px;
-    padding: 0 16px;
-  }
-
-  .button-module_rounded_base_4nLWdW.button-module_size_44_4nLWdW {
-    border-radius: 11px;
-    padding: 0 18px;
-  }
-
-  .button-module_rounded_base_4nLWdW.button-module_size_48_4nLWdW {
-    border-radius: 12px;
-    padding: 0 20px;
-  }
-
-  .button-module_rounded_full_4nLWdW.button-module_size_32_4nLWdW {
-    border-radius: 16px;
-    padding: 0 12px;
-  }
-
-  .button-module_rounded_full_4nLWdW.button-module_size_36_4nLWdW {
-    border-radius: 18px;
-    padding: 0 17px;
-  }
-
-  .button-module_rounded_full_4nLWdW.button-module_size_40_4nLWdW {
-    border-radius: 20px;
-    padding: 0 20px;
-  }
-
-  .button-module_rounded_full_4nLWdW.button-module_size_44_4nLWdW {
-    border-radius: 22px;
-    padding: 0 23px;
-  }
-
-  .button-module_rounded_full_4nLWdW.button-module_size_48_4nLWdW {
-    border-radius: 24px;
-    padding: 0 28px;
-  }
-
-  .button-module_size_32_4nLWdW {
-    height: 32px;
-  }
-
-  .button-module_size_36_4nLWdW {
-    height: 36px;
-  }
-
-  .button-module_size_40_4nLWdW {
-    height: 40px;
-  }
-
-  .button-module_size_44_4nLWdW {
-    height: 44px;
-  }
-
-  .button-module_size_48_4nLWdW {
-    height: 48px;
-  }
-
-  .button-module_variant_ghost_4nLWdW {
-    color: #000;
-    background-color: #0000;
-  }
-
-  .button-module_variant_ghost_4nLWdW:hover:not(:disabled) {
-    background-color: var(--color-gray-4);
-  }
-
-  .dark .button-module_variant_ghost_4nLWdW {
-    color: #fff;
-  }
-
-  .button-module_variant_primary_4nLWdW {
-    --color: #fff;
-    background-color: var(--color-gray-12);
-    color: var(--color);
-  }
-
-  .button-module_variant_primary_4nLWdW:hover:not(:disabled) {
-    background-color: color-mix(in oklab, var(--color-gray-12) 100%, var(--color) 25%);
-  }
-
-  .dark .button-module_variant_primary_4nLWdW {
-    --color: #000;
-  }
-
-  .button-module_variant_secondary_4nLWdW {
-    --color-text: #000;
-    background-color: var(--color-bg-shell-inner);
-    box-shadow: inset 0 0 0 1px var(--color-border);
-    color: var(--color-text);
-  }
-
-  .dark .button-module_variant_secondary_4nLWdW {
-    --color-text: #fff;
-  }
-
-  .button-module_variant_secondary_4nLWdW:hover:not(:disabled) {
-    background-color: var(--color-gray-4);
-    box-shadow: none;
-  }
-
-  .button-module_width_base_4nLWdW {
-    width: fit-content;
-  }
-
-  .button-module_width_full_4nLWdW {
-    width: stretch;
-  }
-}

package/dist/components/button/button.module.js

@@ -1,21 +0,0 @@
-import './button.css';
-//#region src/components/button/button.module.css
-var button_module_default = {
-	"base": "button-module_base_4nLWdW",
-	"disabled": "button-module_disabled_4nLWdW",
-	"loading": "button-module_loading_4nLWdW",
-	"rounded_base": "button-module_rounded_base_4nLWdW",
-	"rounded_full": "button-module_rounded_full_4nLWdW",
-	"size_32": "button-module_size_32_4nLWdW",
-	"size_36": "button-module_size_36_4nLWdW",
-	"size_40": "button-module_size_40_4nLWdW",
-	"size_44": "button-module_size_44_4nLWdW",
-	"size_48": "button-module_size_48_4nLWdW",
-	"variant_ghost": "button-module_variant_ghost_4nLWdW",
-	"variant_primary": "button-module_variant_primary_4nLWdW",
-	"variant_secondary": "button-module_variant_secondary_4nLWdW",
-	"width_base": "button-module_width_base_4nLWdW",
-	"width_full": "button-module_width_full_4nLWdW"
-};
-//#endregion
-export { button_module_default as default };

package/dist/components/checkbox/checkbox.css

@@ -1,55 +0,0 @@
-@layer components {
-  .checkbox-module_base_tQ0i7W {
-    --size: 16px;
-    background-color: var(--color-bg-shell-inner);
-    border: 1px solid var(--color-border);
-    cursor: pointer;
-    height: var(--size);
-    outline-color: var(--color-primary);
-    outline-offset: 2px;
-    width: var(--size);
-    border-radius: 4px;
-    outline-width: 0;
-    outline-style: solid;
-    justify-content: center;
-    align-items: center;
-    transition-property: background-color, border-color;
-    transition-duration: .15s;
-    display: flex;
-  }
-
-  .checkbox-module_base_tQ0i7W:focus-visible {
-    outline-width: 2px;
-  }
-
-  .checkbox-module_base_tQ0i7W:hover {
-    background-color: var(--color-gray-3);
-    border-color: var(--color-gray-6);
-  }
-
-  .checkbox-module_base_tQ0i7W[data-checked] {
-    background-color: var(--color-primary);
-    border-color: #0000;
-  }
-
-  .checkbox-module_indicator_tQ0i7W {
-    opacity: 0;
-    transition-property: opacity;
-    transition-duration: .15s;
-  }
-
-  .checkbox-module_indicator_tQ0i7W[data-checked] {
-    opacity: 1;
-  }
-
-  .checkbox-module_icon_tQ0i7W {
-    --size: 12px;
-    height: var(--size);
-    width: var(--size);
-
-    & > path {
-      stroke-width: 3px;
-      stroke: #fff;
-    }
-  }
-}

package/dist/components/checkbox/checkbox.module.js

@@ -1,9 +0,0 @@
-import './checkbox.css';
-//#region src/components/checkbox/checkbox.module.css
-var checkbox_module_default = {
-	"base": "checkbox-module_base_tQ0i7W",
-	"icon": "checkbox-module_icon_tQ0i7W",
-	"indicator": "checkbox-module_indicator_tQ0i7W"
-};
-//#endregion
-export { checkbox_module_default as default };

package/dist/components/column/column.css

@@ -1,6 +0,0 @@
-@layer components {
-  .column-module_base_CgFaGG {
-    flex-direction: column;
-    display: flex;
-  }
-}

package/dist/components/column/column.module.js

@@ -1,5 +0,0 @@
-import './column.css';
-//#region src/components/column/column.module.css
-var column_module_default = { "base": "column-module_base_CgFaGG" };
-//#endregion
-export { column_module_default as default };

package/dist/components/combobox/combobox-empty.css

@@ -1,9 +0,0 @@
-@layer components {
-  .combobox-empty-module_base_i-Uoxq:not(:empty) {
-    color: var(--color-text-secondary);
-    text-align: center;
-    padding: 8px 12px;
-    font-size: 14px;
-    font-weight: 450;
-  }
-}

package/dist/components/combobox/combobox-empty.module.js

@@ -1,5 +0,0 @@
-import './combobox-empty.css';
-//#region src/components/combobox/combobox-empty.module.css
-var combobox_empty_module_default = { "base": "combobox-empty-module_base_i-Uoxq" };
-//#endregion
-export { combobox_empty_module_default as default };

package/dist/components/combobox/combobox-input.css

@@ -1,121 +0,0 @@
-@layer components {
-  .combobox-input-module_base_eAQxaq {
-    background-color: var(--color-bg-shell-inner);
-    box-shadow: inset 0 0 0 1px var(--color-border);
-    cursor: text;
-    outline-offset: 2px;
-    outline: 2px solid #0000;
-    flex-shrink: 0;
-    align-items: center;
-    column-gap: 8px;
-    width: stretch;
-    padding: 0 16px;
-    transition-property: background-color, box-shadow;
-    transition-duration: .15s;
-    display: inline-flex;
-    overflow: hidden;
-  }
-
-  .combobox-input-module_base_eAQxaq[data-disabled], .combobox-input-module_base_eAQxaq:has(.combobox-input-module_input_eAQxaq:disabled) {
-    cursor: not-allowed;
-    opacity: .5;
-    background-color: var(--color-gray-3);
-  }
-
-  .combobox-input-module_base_eAQxaq:focus-within {
-    outline-color: var(--color-primary);
-  }
-
-  .combobox-input-module_base_eAQxaq:hover:not([data-disabled], :has(.combobox-input-module_input_eAQxaq:disabled)) {
-    box-shadow: inset 0 0 0 1px var(--color-gray-6);
-  }
-
-  .combobox-input-module_base_eAQxaq[data-popup-open] {
-    background-color: var(--color-gray-3);
-  }
-
-  .combobox-input-module_size_32_eAQxaq {
-    border-radius: 8px;
-    height: 32px;
-  }
-
-  .combobox-input-module_size_36_eAQxaq {
-    border-radius: 9px;
-    height: 36px;
-  }
-
-  .combobox-input-module_size_40_eAQxaq {
-    border-radius: 10px;
-    height: 40px;
-  }
-
-  .combobox-input-module_size_44_eAQxaq {
-    border-radius: 11px;
-    height: 44px;
-  }
-
-  .combobox-input-module_size_48_eAQxaq {
-    border-radius: 12px;
-    height: 48px;
-  }
-
-  .combobox-input-module_rounded_full_eAQxaq {
-    border-radius: 9999px;
-  }
-
-  .combobox-input-module_input_eAQxaq {
-    appearance: none;
-    color: var(--color-text-primary);
-    background-color: #0000;
-    border-style: none;
-    outline: none;
-    flex: 1;
-    min-width: 0;
-    height: 100%;
-    padding: 0;
-    font-size: 14px;
-    font-weight: 450;
-  }
-
-  .combobox-input-module_input_eAQxaq::placeholder {
-    color: var(--color-gray-9);
-    user-select: none;
-  }
-
-  .combobox-input-module_input_eAQxaq:disabled {
-    cursor: not-allowed;
-  }
-
-  .combobox-input-module_trigger_eAQxaq {
-    color: inherit;
-    cursor: pointer;
-    background-color: #0000;
-    border-style: none;
-    flex-shrink: 0;
-    justify-content: center;
-    align-items: center;
-    width: 16px;
-    height: 100%;
-    margin-left: auto;
-    padding: 0;
-    display: flex;
-  }
-
-  .combobox-input-module_trigger_eAQxaq:disabled {
-    cursor: not-allowed;
-  }
-
-  .combobox-input-module_icon_eAQxaq {
-    justify-content: center;
-    align-items: center;
-    width: 16px;
-    height: 16px;
-    transition-property: rotate;
-    transition-duration: .15s;
-    display: flex;
-  }
-
-  .combobox-input-module_base_eAQxaq[data-popup-open] .combobox-input-module_icon_eAQxaq {
-    rotate: 180deg;
-  }
-}

package/dist/components/combobox/combobox-input.module.js

@@ -1,16 +0,0 @@
-import './combobox-input.css';
-//#region src/components/combobox/combobox-input.module.css
-var combobox_input_module_default = {
-	"base": "combobox-input-module_base_eAQxaq",
-	"icon": "combobox-input-module_icon_eAQxaq",
-	"input": "combobox-input-module_input_eAQxaq",
-	"rounded_full": "combobox-input-module_rounded_full_eAQxaq",
-	"size_32": "combobox-input-module_size_32_eAQxaq",
-	"size_36": "combobox-input-module_size_36_eAQxaq",
-	"size_40": "combobox-input-module_size_40_eAQxaq",
-	"size_44": "combobox-input-module_size_44_eAQxaq",
-	"size_48": "combobox-input-module_size_48_eAQxaq",
-	"trigger": "combobox-input-module_trigger_eAQxaq"
-};
-//#endregion
-export { combobox_input_module_default as default };