@nattstack/ui 0.0.107 → 0.1.1

package/dist/components/tabs-underline/tabs-underline-list.stylex.js

@@ -0,0 +1,12 @@
+//#region src/components/tabs-underline/tabs-underline-list.stylex.ts
+const tabsUnderlineListStyles = { base: {
+	kL6WhQ: "x1s77fqg",
+	kfdmCh: "x1q0q8m5",
+	kt9PQ7: "xso031l",
+	k1xSpc: "x78zum5",
+	kXHlph: "xw2csxc",
+	kVAEAm: "x1n2onr6",
+	$$css: true
+} };
+//#endregion
+export { tabsUnderlineListStyles };

package/dist/components/tabs-underline/tabs-underline-tab.d.ts

@@ -1,10 +1,7 @@
 import { Tabs } from "@base-ui/react";
 import { JSX } from "react";
 //#region src/components/tabs-underline/tabs-underline-tab.d.ts
-interface TabsUnderlineTabProps extends Omit<Tabs.Tab.Props, "nativeButton"> {
-  isNativeButton?: Tabs.Tab.Props["nativeButton"];
-}
+interface TabsUnderlineTabProps extends Tabs.Tab.Props {}
 declare function TabsUnderlineTab(props: TabsUnderlineTabProps): JSX.Element;
-declare const tabsUnderlineTabVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 //#endregion
-export { TabsUnderlineTab, TabsUnderlineTabProps, tabsUnderlineTabVariants };
+export { TabsUnderlineTab, TabsUnderlineTabProps };

package/dist/components/tabs-underline/tabs-underline-tab.js

@@ -1,18 +1,17 @@
-import tabs_underline_tab_module_default from "./tabs-underline-tab.module.js";
-import { cva } from "class-variance-authority";
+import { cn } from "../cn.js";
+import { tabsUnderlineTabStyles } from "./tabs-underline-tab.stylex.js";
 import { jsx } from "react/jsx-runtime";
 import { Tabs } from "@base-ui/react";
 //#region src/components/tabs-underline/tabs-underline-tab.tsx
 function TabsUnderlineTab(props) {
-	const { className: customClassName = "", isNativeButton = true, ...rest } = props;
-	const combinedClassName = tabsUnderlineTabVariants({ className: customClassName });
+	const { className = "", ...rest } = props;
+	const combinedClassName = cn(tabsUnderlineTabStyles.base, className);
 	return /* @__PURE__ */ jsx(Tabs.Tab, {
 		className: combinedClassName,
-		"data-slot": "tabs-underline-tab",
-		nativeButton: isNativeButton,
+		"data-component": "tabs-underline-tab",
+		nativeButton: true,
 		...rest
 	});
 }
-const tabsUnderlineTabVariants = cva(tabs_underline_tab_module_default.base);
 //#endregion
-export { TabsUnderlineTab, tabsUnderlineTabVariants };
+export { TabsUnderlineTab };

package/dist/components/tabs-underline/tabs-underline-tab.stylex.js

@@ -0,0 +1,25 @@
+//#region src/components/tabs-underline/tabs-underline-tab.stylex.ts
+const tabsUnderlineTabStyles = { base: {
+	kGNEyG: "x6s0dn4",
+	kaIpWk: "xur7f20",
+	kMwMTN: "x1srrrpr x58zf59 x1dtbpl2",
+	k1C7PZ: "xfex06f",
+	kkrTdU: "x1ypdohk",
+	k1xSpc: "x78zum5",
+	kmuXW: "x2lah0s",
+	kGuDYH: "xif65rj",
+	k63SB2: "x10p5zqr",
+	k1K539: "xzueoph",
+	kjBf7l: "x1luwoo2",
+	kInvED: "x2ssjo2",
+	k3XXqK: "xaatb59",
+	kMeerF: "x784prv x1k57tk5",
+	k8WAf4: "x1t0vds8",
+	kg3NbH: "xaope02",
+	kIyJzY: "xx6bhzk",
+	k1ekBW: "xt3l3uh",
+	khDVqt: "xuxw1ft",
+	$$css: true
+} };
+//#endregion
+export { tabsUnderlineTabStyles };

package/dist/components/textarea/textarea.d.ts

@@ -1,17 +1,11 @@
 import { ComponentProps, JSX } from "react";
 //#region src/components/textarea/textarea.d.ts
-interface TextareaProps extends Omit<ComponentProps<"textarea">, "aria-pressed" | "disabled" | "readOnly" | "required"> {
-  isActive?: boolean;
-  isDisabled?: boolean;
-  isInvalid?: boolean;
-  isReadOnly?: boolean;
-  isRequired?: boolean;
-  isRounded?: boolean;
-  isValid?: boolean;
+interface TextareaProps extends Omit<ComponentProps<"textarea">, "aria-pressed"> {
+  active?: boolean;
+  invalid?: boolean;
+  rounded?: boolean;
+  valid?: boolean;
 }
 declare function Textarea(props: TextareaProps): JSX.Element;
-declare const textareaVariants: (props?: ({
-  isRounded?: boolean | null | undefined;
-} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 //#endregion
-export { Textarea, TextareaProps, textareaVariants };
+export { Textarea, TextareaProps };

package/dist/components/textarea/textarea.js

@@ -1,33 +1,20 @@
-import input_module_default from "../input/input.module.js";
-import textarea_module_default from "./textarea.module.js";
-import { cva } from "class-variance-authority";
+import { cn } from "../cn.js";
+import { inputStyles, inputStylesBy } from "../input/input.stylex.js";
+import { textareaStyles } from "./textarea.stylex.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/textarea/textarea.tsx
 function Textarea(props) {
-	const { className: customClassName = "", isActive = false, isDisabled = false, isInvalid = void 0, isReadOnly = false, isRequired = false, isRounded = false, isValid = void 0, rows = 2, ...rest } = props;
-	const combinedClassName = textareaVariants({
-		className: customClassName,
-		isRounded
-	});
+	const { className = "", active = false, invalid = void 0, rounded = false, valid = void 0, ...rest } = props;
+	const combinedClassName = cn(inputStyles.base, textareaStyles.base, inputStylesBy.rounded[rounded ? "full" : "base"], className);
 	return /* @__PURE__ */ jsx("textarea", {
 		className: combinedClassName,
-		"data-is-active": isActive,
-		"data-is-invalid": isInvalid,
-		"data-is-valid": isValid,
-		"data-slot": "textarea",
-		disabled: isDisabled,
-		readOnly: isReadOnly,
-		required: isRequired,
-		rows,
+		"data-component": "textarea",
+		"data-is-active": active,
+		"data-is-invalid": invalid,
+		"data-is-valid": valid,
+		rows: 2,
 		...rest
 	});
 }
-const textareaVariants = cva([input_module_default.base, textarea_module_default.base], {
-	defaultVariants: { isRounded: false },
-	variants: { isRounded: {
-		false: input_module_default.rounded_base,
-		true: input_module_default.rounded_full
-	} }
-});
 //#endregion
-export { Textarea, textareaVariants };
+export { Textarea };

package/dist/components/textarea/textarea.stylex.js

@@ -0,0 +1,11 @@
+//#region src/components/textarea/textarea.stylex.ts
+const textareaStyles = { base: {
+	kZKoxP: "xt7dq6l",
+	kskxy: "x7ab17h",
+	kAzted: "xcr9lap",
+	kmVPX3: "xc7ga6q",
+	kHenm0: "x288g5",
+	$$css: true
+} };
+//#endregion
+export { textareaStyles };

package/dist/components/toggle-group/toggle-group-item.d.ts

@@ -1,11 +1,7 @@
 import { Toggle } from "@base-ui/react";
 import { JSX } from "react";
 //#region src/components/toggle-group/toggle-group-item.d.ts
-interface ToggleGroupItemProps extends Omit<Toggle.Props, "disabled" | "nativeButton"> {
-  isDisabled?: Toggle.Props["disabled"];
-  isNativeButton?: Toggle.Props["nativeButton"];
-}
+interface ToggleGroupItemProps extends Toggle.Props {}
 declare function ToggleGroupItem(props: ToggleGroupItemProps): JSX.Element;
-declare const toggleGroupItemVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 //#endregion
-export { ToggleGroupItem, ToggleGroupItemProps, toggleGroupItemVariants };
+export { ToggleGroupItem, ToggleGroupItemProps };

package/dist/components/toggle-group/toggle-group-item.js

@@ -1,19 +1,17 @@
-import toggle_group_item_module_default from "./toggle-group-item.module.js";
-import { cva } from "class-variance-authority";
+import { cn } from "../cn.js";
+import { toggleGroupItemStyles } from "./toggle-group-item.stylex.js";
 import { jsx } from "react/jsx-runtime";
 import { Toggle } from "@base-ui/react";
 //#region src/components/toggle-group/toggle-group-item.tsx
 function ToggleGroupItem(props) {
-	const { className: customClassName = "", isDisabled = false, isNativeButton = true, ...rest } = props;
-	const combinedClassName = toggleGroupItemVariants({ className: customClassName });
+	const { className = "", ...rest } = props;
+	const combinedClassName = cn(toggleGroupItemStyles.base, className);
 	return /* @__PURE__ */ jsx(Toggle, {
 		className: combinedClassName,
-		"data-slot": "toggle-group-item",
-		disabled: isDisabled,
-		nativeButton: isNativeButton,
+		"data-component": "toggle-group-item",
+		nativeButton: true,
 		...rest
 	});
 }
-const toggleGroupItemVariants = cva(toggle_group_item_module_default.base);
 //#endregion
-export { ToggleGroupItem, toggleGroupItemVariants };
+export { ToggleGroupItem };

package/dist/components/toggle-group/toggle-group-item.stylex.js

@@ -0,0 +1,34 @@
+//#region src/components/toggle-group/toggle-group-item.stylex.ts
+const toggleGroupItemStyles = {
+	base: {
+		kGNEyG: "x6s0dn4",
+		kWkggS: "x1pflddp xhsv7s5 xjbqb8w",
+		kaIpWk: "x1q4ynmn",
+		kGVxlE: "x11uh7ir x1gnnqk1",
+		kMwMTN: "xp9l56k xv1l7n4",
+		k1C7PZ: "xfex06f",
+		kkrTdU: "x1s07b3s x1ypdohk",
+		k1xSpc: "x78zum5",
+		kGuDYH: "xif65rj",
+		k63SB2: "x10p5zqr",
+		kjj79g: "xl56j7k",
+		kSiTet: "xijokvz x1hc1fzr",
+		kjBf7l: "x43yjvr",
+		kInvED: "x1hl8ikr",
+		k3XXqK: "xaatb59",
+		kMeerF: "x784prv x1k57tk5",
+		k8WAf4: "x1vvogim",
+		kg3NbH: "xaope02",
+		kIyJzY: "xx6bhzk",
+		k1ekBW: "x1koyr57",
+		kfSwDN: "x87ps6o",
+		$$css: true
+	},
+	icon: {
+		kZKoxP: "xlup9mm",
+		kzqmXN: "x1kky2od",
+		$$css: true
+	}
+};
+//#endregion
+export { toggleGroupItemStyles };

package/dist/components/toggle-group/toggle-group.d.ts

@@ -1,12 +1,7 @@
 import { ToggleGroup } from "@base-ui/react";
 import { JSX } from "react";
 //#region src/components/toggle-group/toggle-group.d.ts
-interface ToggleGroupProps extends Omit<ToggleGroup.Props, "disabled" | "loopFocus" | "multiple"> {
-  isDisabled?: ToggleGroup.Props["disabled"];
-  isLoopFocus?: ToggleGroup.Props["loopFocus"];
-  isMultiple?: ToggleGroup.Props["multiple"];
-}
+interface ToggleGroupProps extends ToggleGroup.Props {}
 declare function ToggleGroup$1(props: ToggleGroupProps): JSX.Element;
-declare const toggleGroupVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 //#endregion
-export { ToggleGroup$1 as ToggleGroup, ToggleGroupProps, toggleGroupVariants };
+export { ToggleGroup$1 as ToggleGroup, ToggleGroupProps };

package/dist/components/toggle-group/toggle-group.js

@@ -1,20 +1,17 @@
-import toggle_group_module_default from "./toggle-group.module.js";
-import { cva } from "class-variance-authority";
+import { cn } from "../cn.js";
+import { toggleGroupStyles } from "./toggle-group.stylex.js";
 import { jsx } from "react/jsx-runtime";
 import { ToggleGroup } from "@base-ui/react";
 //#region src/components/toggle-group/toggle-group.tsx
 function ToggleGroup$1(props) {
-	const { className: customClassName = "", isDisabled = false, isLoopFocus = true, isMultiple = false, ...rest } = props;
-	const combinedClassName = toggleGroupVariants({ className: customClassName });
+	const { className = "", ...rest } = props;
+	const combinedClassName = cn(toggleGroupStyles.base, className);
 	return /* @__PURE__ */ jsx(ToggleGroup, {
 		className: combinedClassName,
-		"data-slot": "toggle-group",
-		disabled: isDisabled,
-		loopFocus: isLoopFocus,
-		multiple: isMultiple,
+		"data-component": "toggle-group",
+		loopFocus: true,
 		...rest
 	});
 }
-const toggleGroupVariants = cva(toggle_group_module_default.base);
 //#endregion
-export { ToggleGroup$1 as ToggleGroup, toggleGroupVariants };
+export { ToggleGroup$1 as ToggleGroup };

package/dist/components/toggle-group/toggle-group.stylex.js

@@ -0,0 +1,9 @@
+//#region src/components/toggle-group/toggle-group.stylex.ts
+const toggleGroupStyles = { base: {
+	k1xSpc: "x78zum5",
+	kwnvtZ: "x1a02dak",
+	kOIVth: "x167g77z",
+	$$css: true
+} };
+//#endregion
+export { toggleGroupStyles };

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

@@ -3,6 +3,5 @@ import { JSX } from "react";
 //#region src/components/tooltip/tooltip-popup.d.ts
 interface TooltipPopupProps extends Pick<Tooltip.Positioner.Props, "side" | "sideOffset">, Tooltip.Popup.Props {}
 declare function TooltipPopup(props: TooltipPopupProps): JSX.Element;
-declare const tooltipPopupVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 //#endregion
-export { TooltipPopup, TooltipPopupProps, tooltipPopupVariants };
+export { TooltipPopup, TooltipPopupProps };

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

@@ -1,25 +1,25 @@
-import tooltip_popup_module_default from "./tooltip-popup.module.js";
-import { cva } from "class-variance-authority";
+import { cn } from "../cn.js";
+import { tooltipPopupStyles } from "./tooltip-popup.stylex.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Tooltip } from "@base-ui/react";
 //#region src/components/tooltip/tooltip-popup.tsx
 function TooltipPopup(props) {
-	const { children = void 0, className: customClassName = "", side = "top", sideOffset = 4, ...rest } = props;
-	const combinedClassName = tooltipPopupVariants({ className: customClassName });
+	const { children = void 0, className = "", side = "top", sideOffset = 4, ...rest } = props;
+	const combinedClassName = cn(tooltipPopupStyles.base, className);
 	return /* @__PURE__ */ jsx(Tooltip.Portal, {
-		className: tooltip_popup_module_default.portal,
+		className: cn(tooltipPopupStyles.portal),
 		children: /* @__PURE__ */ jsxs(Tooltip.Positioner, {
+			className: cn(tooltipPopupStyles.positioner),
 			side,
 			sideOffset,
 			children: [/* @__PURE__ */ jsx(Tooltip.Popup, {
 				className: combinedClassName,
-				"data-slot": "tooltip-popup",
+				"data-component": "tooltip-popup",
 				...rest,
 				children
 			}), /* @__PURE__ */ jsx(Tooltip.Arrow, {})]
 		})
 	});
 }
-const tooltipPopupVariants = cva(tooltip_popup_module_default.base);
 //#endregion
-export { TooltipPopup, tooltipPopupVariants };
+export { TooltipPopup };

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-provider.js

@@ -4,7 +4,7 @@ import { Tooltip } from "@base-ui/react";
 function TooltipProvider(props) {
 	const { ...rest } = props;
 	return /* @__PURE__ */ jsx(Tooltip.Provider, {
-		"data-slot": "tooltip-provider",
+		"data-component": "tooltip-provider",
 		...rest
 	});
 }

package/dist/components/tooltip/tooltip-trigger.js

@@ -4,7 +4,7 @@ import { Tooltip } from "@base-ui/react";
 function TooltipTrigger(props) {
 	const { ...rest } = props;
 	return /* @__PURE__ */ jsx(Tooltip.Trigger, {
-		"data-slot": "tooltip-trigger",
+		"data-component": "tooltip-trigger",
 		...rest
 	});
 }

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,11 +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;
+	const { ...rest } = props;
 	return /* @__PURE__ */ jsx(Tooltip.Root, {
-		"data-slot": "tooltip",
-		disabled: isDisabled,
-		disableHoverablePopup: isDisableHoverablePopup,
+		"data-component": "tooltip",
+		disableHoverablePopup: true,
 		...rest
 	});
 }

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.1",
+  "description": "A collection of reusable React components built with Base UI and StyleX",
   "keywords": [
     "base-ui",
     "components",
@@ -24,7 +24,8 @@
   ],
   "type": "module",
   "sideEffects": [
-    "**/*.css"
+    "**/*.css",
+    "./dist/components/index.js"
   ],
   "exports": {
     ".": {
@@ -49,9 +50,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 };