@nattstack/ui 0.0.84 → 0.0.86

package/dist/components/menu/menu-trigger.d.ts

@@ -0,0 +1,7 @@
+import { Menu } from "@base-ui/react";
+import { JSX } from "react";
+//#region src/components/menu/menu-trigger.d.ts
+interface MenuTriggerProps extends Menu.Trigger.Props {}
+declare function MenuTrigger(props: MenuTriggerProps): JSX.Element;
+//#endregion
+export { MenuTrigger, MenuTriggerProps };

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

@@ -0,0 +1,12 @@
+import { jsx } from "react/jsx-runtime";
+import { Menu } from "@base-ui/react";
+//#region src/components/menu/menu-trigger.tsx
+function MenuTrigger(props) {
+	const { ...rest } = props;
+	return /* @__PURE__ */ jsx(Menu.Trigger, {
+		"data-slot": "menu-trigger",
+		...rest
+	});
+}
+//#endregion
+export { MenuTrigger };

package/dist/components/menu/menu-viewport.d.ts

@@ -0,0 +1,9 @@
+import { Menu } from "@base-ui/react";
+import { JSX } from "react";
+//#region src/components/menu/menu-viewport.d.ts
+interface MenuViewportProps extends Omit<Menu.Viewport.Props, "className"> {
+  className?: string;
+}
+declare function MenuViewport(props: MenuViewportProps): JSX.Element;
+//#endregion
+export { MenuViewport, MenuViewportProps };

package/dist/components/menu/menu-viewport.js

@@ -0,0 +1,16 @@
+import { MENU_CLASS_NAME } from "./menu-class-names.js";
+import { cx } from "class-variance-authority";
+import { jsx } from "react/jsx-runtime";
+import { Menu } from "@base-ui/react";
+//#region src/components/menu/menu-viewport.tsx
+function MenuViewport(props) {
+	const { className: customClassName = "", ...rest } = props;
+	const combinedClassName = cx(MENU_CLASS_NAME.VIEWPORT, customClassName);
+	return /* @__PURE__ */ jsx(Menu.Viewport, {
+		className: combinedClassName,
+		"data-slot": "menu-viewport",
+		...rest
+	});
+}
+//#endregion
+export { MenuViewport };

package/dist/components/menu/menu.css

@@ -0,0 +1,209 @@
+@layer components {
+  .menu-module_menu_trigger_7pJHya {
+    background-color: var(--color-gray-2);
+    box-shadow: 0 0 0 1px var(--color-gray-4) inset;
+    color: var(--color-text-primary);
+    cursor: pointer;
+    font-family: var(--font-body);
+    outline-color: var(--color-primary-9);
+    outline-offset: 2px;
+    user-select: none;
+    background-image: linear-gradient(oklab(0% none none / 0) 50%, oklab(0% none none / .0196078) 50%);
+    border-style: none;
+    border-radius: 10px;
+    outline-width: 0;
+    outline-style: solid;
+    flex-shrink: 0;
+    justify-content: safe center;
+    align-items: safe center;
+    column-gap: 8px;
+    width: max-content;
+    height: 40px;
+    padding: 0 14px;
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 1.5;
+    transition-property: background-color, opacity, translate;
+    transition-duration: .15s;
+    display: inline-flex;
+    overflow: hidden;
+  }
+
+  .menu-module_menu_trigger_7pJHya:hover:not(:disabled), .menu-module_menu_trigger_7pJHya[data-popup-open] {
+    background-color: var(--color-gray-3);
+  }
+
+  .menu-module_menu_trigger_7pJHya:active:not(:disabled), .menu-module_menu_trigger_7pJHya[data-pressed] {
+    translate: 0 1px;
+  }
+
+  .menu-module_menu_trigger_7pJHya:disabled {
+    cursor: not-allowed;
+    opacity: .5;
+  }
+
+  .menu-module_menu_trigger_7pJHya:focus-visible {
+    outline-width: 2px;
+  }
+
+  .menu-module_menu_trigger_7pJHya > svg {
+    --size-icon: 16px;
+    height: var(--size-icon);
+    width: var(--size-icon);
+  }
+
+  .dark .menu-module_menu_trigger_7pJHya {
+    background-image: linear-gradient(oklab(100% 0 5.96046e-8 / .00990099) 50%, oklab(0% 0 0 / 0) 50%);
+  }
+
+  .menu-module_menu_content_positioner_7pJHya {
+    isolation: isolate;
+    z-index: 50;
+  }
+
+  .menu-module_menu_content_7pJHya {
+    background-color: var(--color-bg-shell-inner);
+    box-shadow: 0 0 0 1px var(--color-border) inset,
+      0 16px 32px oklab(0% none none / .16);
+    color: var(--color-text-primary);
+    font-family: var(--font-body);
+    max-height: min(var(--available-height), 480px);
+    max-width: min(var(--available-width), 320px);
+    outline-color: var(--color-primary-9);
+    outline-offset: -2px;
+    min-width: 180px;
+    transform-origin: var(--transform-origin);
+    will-change: opacity, transform;
+    border-radius: 12px;
+    outline-width: 0;
+    outline-style: solid;
+    flex-direction: column;
+    padding: 4px;
+    transition-property: opacity, transform;
+    transition-duration: .15s;
+    display: flex;
+    overflow: auto;
+  }
+
+  .menu-module_menu_content_7pJHya:focus-visible {
+    outline-width: 2px;
+  }
+
+  .menu-module_menu_content_7pJHya[data-ending-style], .menu-module_menu_content_7pJHya[data-starting-style] {
+    opacity: 0;
+    transform: scale(.975);
+  }
+
+  .menu-module_menu_content_7pJHya[data-side="top"][data-ending-style], .menu-module_menu_content_7pJHya[data-side="top"][data-starting-style] {
+    transform: scale(.975) translateY(4px);
+  }
+
+  .menu-module_menu_content_7pJHya[data-side="bottom"][data-ending-style], .menu-module_menu_content_7pJHya[data-side="bottom"][data-starting-style] {
+    transform: scale(.975) translateY(-4px);
+  }
+
+  .menu-module_menu_content_7pJHya[data-side="left"][data-ending-style], .menu-module_menu_content_7pJHya[data-side="left"][data-starting-style], .menu-module_menu_content_7pJHya[data-side="inline-start"][data-ending-style], .menu-module_menu_content_7pJHya[data-side="inline-start"][data-starting-style] {
+    transform: scale(.975) translateX(4px);
+  }
+
+  .menu-module_menu_content_7pJHya[data-side="right"][data-ending-style], .menu-module_menu_content_7pJHya[data-side="right"][data-starting-style], .menu-module_menu_content_7pJHya[data-side="inline-end"][data-ending-style], .menu-module_menu_content_7pJHya[data-side="inline-end"][data-starting-style] {
+    transform: scale(.975) translateX(-4px);
+  }
+
+  .menu-module_menu_content_arrow_7pJHya {
+    color: var(--color-bg-primary);
+    display: flex;
+  }
+
+  .menu-module_menu_content_arrow__icon_7pJHya {
+    fill: currentColor;
+    filter: drop-shadow(0 -1px 0 var(--color-border));
+    display: block;
+  }
+
+  .menu-module_menu_content_arrow_7pJHya[data-side="top"] {
+    rotate: 180deg;
+  }
+
+  .menu-module_menu_content_arrow_7pJHya[data-side="left"], .menu-module_menu_content_arrow_7pJHya[data-side="inline-start"] {
+    rotate: 90deg;
+  }
+
+  .menu-module_menu_content_arrow_7pJHya[data-side="right"], .menu-module_menu_content_arrow_7pJHya[data-side="inline-end"] {
+    rotate: -90deg;
+  }
+
+  .menu-module_menu_checkbox_item_7pJHya, .menu-module_menu_item_7pJHya, .menu-module_menu_link_item_7pJHya, .menu-module_menu_radio_item_7pJHya, .menu-module_menu_submenu_trigger_7pJHya {
+    color: var(--color-text-primary);
+    cursor: pointer;
+    user-select: none;
+    border-radius: 8px;
+    outline: none;
+    align-items: safe center;
+    column-gap: 8px;
+    min-height: 32px;
+    padding: 0 8px;
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 1.5;
+    text-decoration: none;
+    display: flex;
+    position: relative;
+  }
+
+  .menu-module_menu_checkbox_item_7pJHya[data-highlighted], .menu-module_menu_item_7pJHya[data-highlighted], .menu-module_menu_link_item_7pJHya[data-highlighted], .menu-module_menu_radio_item_7pJHya[data-highlighted], .menu-module_menu_submenu_trigger_7pJHya[data-highlighted], .menu-module_menu_submenu_trigger_7pJHya[data-popup-open] {
+    background-color: var(--color-gray-3);
+  }
+
+  .menu-module_menu_checkbox_item_7pJHya[data-disabled], .menu-module_menu_item_7pJHya[data-disabled], .menu-module_menu_radio_item_7pJHya[data-disabled], .menu-module_menu_submenu_trigger_7pJHya[data-disabled] {
+    cursor: not-allowed;
+    opacity: .5;
+  }
+
+  .menu-module_menu_item__icon_7pJHya, .menu-module_menu_item__indicator_7pJHya {
+    color: var(--color-text-secondary);
+    flex-shrink: 0;
+    justify-content: safe center;
+    align-items: safe center;
+    width: 16px;
+    height: 16px;
+    display: flex;
+  }
+
+  .menu-module_menu_item__indicator_7pJHya {
+    color: var(--color-primary-9);
+  }
+
+  .menu-module_menu_item__icon_7pJHya > svg, .menu-module_menu_item__indicator_7pJHya > svg {
+    width: 16px;
+    height: 16px;
+  }
+
+  .menu-module_menu_item__label_7pJHya {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    flex: auto;
+    min-width: 0;
+    overflow: hidden;
+  }
+
+  .menu-module_menu_group_7pJHya, .menu-module_menu_radio_group_7pJHya, .menu-module_menu_viewport_7pJHya {
+    flex-direction: column;
+    display: flex;
+  }
+
+  .menu-module_menu_group_label_7pJHya {
+    color: var(--color-text-secondary);
+    padding: 6px 8px 4px;
+    font-size: 12px;
+    font-weight: 600;
+    line-height: 1.5;
+  }
+
+  .menu-module_menu_separator_7pJHya {
+    background-color: var(--color-border);
+    flex-shrink: 0;
+    height: 1px;
+    margin: 4px;
+  }
+}

package/dist/components/menu/menu.d.ts

@@ -0,0 +1,12 @@
+import { Menu } from "@base-ui/react";
+import { JSX } from "react";
+//#region src/components/menu/menu.d.ts
+interface MenuProps extends Omit<Menu.Root.Props, "disabled" | "onOpenChange" | "open"> {
+  isDisabled?: Menu.Root.Props["disabled"];
+  isOpen?: Menu.Root.Props["open"];
+  onIsOpenChange?: Menu.Root.Props["onOpenChange"];
+}
+declare function Menu$1(props: MenuProps): JSX.Element;
+declare const createMenuHandle: typeof Menu.createHandle;
+//#endregion
+export { Menu$1 as Menu, MenuProps, createMenuHandle };

package/dist/components/menu/menu.js

@@ -0,0 +1,16 @@
+import { jsx } from "react/jsx-runtime";
+import { Menu } from "@base-ui/react";
+//#region src/components/menu/menu.tsx
+function Menu$1(props) {
+	const { isDisabled = false, isOpen = void 0, onIsOpenChange = void 0, ...rest } = props;
+	return /* @__PURE__ */ jsx(Menu.Root, {
+		"data-slot": "menu",
+		disabled: isDisabled,
+		onOpenChange: onIsOpenChange,
+		open: isOpen,
+		...rest
+	});
+}
+const createMenuHandle = Menu.createHandle;
+//#endregion
+export { Menu$1 as Menu, createMenuHandle };

package/dist/components/menu/menu.module.js

@@ -0,0 +1,24 @@
+import './menu.css';
+//#region src/components/menu/menu.module.css
+var menu_module_default = {
+	"menu_checkbox_item": "menu-module_menu_checkbox_item_7pJHya",
+	"menu_content": "menu-module_menu_content_7pJHya",
+	"menu_content_arrow": "menu-module_menu_content_arrow_7pJHya",
+	"menu_content_arrow__icon": "menu-module_menu_content_arrow__icon_7pJHya",
+	"menu_content_positioner": "menu-module_menu_content_positioner_7pJHya",
+	"menu_group": "menu-module_menu_group_7pJHya",
+	"menu_group_label": "menu-module_menu_group_label_7pJHya",
+	"menu_item": "menu-module_menu_item_7pJHya",
+	"menu_item__icon": "menu-module_menu_item__icon_7pJHya",
+	"menu_item__indicator": "menu-module_menu_item__indicator_7pJHya",
+	"menu_item__label": "menu-module_menu_item__label_7pJHya",
+	"menu_link_item": "menu-module_menu_link_item_7pJHya",
+	"menu_radio_group": "menu-module_menu_radio_group_7pJHya",
+	"menu_radio_item": "menu-module_menu_radio_item_7pJHya",
+	"menu_separator": "menu-module_menu_separator_7pJHya",
+	"menu_submenu_trigger": "menu-module_menu_submenu_trigger_7pJHya",
+	"menu_trigger": "menu-module_menu_trigger_7pJHya",
+	"menu_viewport": "menu-module_menu_viewport_7pJHya"
+};
+//#endregion
+export { menu_module_default as default };

package/dist/components/otp-field/otp-field-input.css

@@ -0,0 +1,33 @@
+@layer components {
+  .otp-field-input-module_otp_field_input_7VaNVa {
+    background-color: var(--color-gray-3);
+    box-shadow: 0 0 0 1px var(--color-border) inset;
+    color: var(--color-text-primary);
+    font-family: var(--font-body);
+    outline-color: var(--color-outline);
+    outline-offset: -2px;
+    text-align: center;
+    border-radius: 14px;
+    outline-width: 0;
+    outline-style: solid;
+    width: 40px;
+    height: 48px;
+    font-size: 14px;
+    font-weight: 500;
+    transition-property: box-shadow;
+    transition-duration: .15s;
+  }
+
+  .otp-field-input-module_otp_field_input_7VaNVa:enabled:hover {
+    box-shadow: 0 0 0 1px var(--color-gray-6) inset;
+  }
+
+  .otp-field-input-module_otp_field_input_7VaNVa:disabled {
+    cursor: not-allowed;
+    opacity: .5;
+  }
+
+  .otp-field-input-module_otp_field_input_7VaNVa:focus-visible {
+    outline-width: 2px;
+  }
+}

package/dist/components/otp-field/otp-field-input.d.ts

@@ -0,0 +1,8 @@
+import { OTPField } from "@base-ui/react";
+import { JSX } from "react";
+//#region src/components/otp-field/otp-field-input.d.ts
+interface OTPFieldInputProps extends OTPField.Input.Props {}
+declare function OTPFieldInput(props: OTPFieldInputProps): JSX.Element;
+declare const otpFieldInputVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+//#endregion
+export { OTPFieldInput, otpFieldInputVariants };

package/dist/components/otp-field/otp-field-input.js

@@ -0,0 +1,16 @@
+import otp_field_input_module_default from "./otp-field-input.module.js";
+import { cva } from "class-variance-authority";
+import { jsx } from "react/jsx-runtime";
+import { OTPField } from "@base-ui/react";
+//#region src/components/otp-field/otp-field-input.tsx
+function OTPFieldInput(props) {
+	const { className: customClassName = "", ...rest } = props;
+	const combinedClassName = otpFieldInputVariants({ className: customClassName });
+	return /* @__PURE__ */ jsx(OTPField.Input, {
+		className: combinedClassName,
+		...rest
+	});
+}
+const otpFieldInputVariants = cva(otp_field_input_module_default.otp_field_input);
+//#endregion
+export { OTPFieldInput, otpFieldInputVariants };

package/dist/components/otp-field/otp-field-input.module.js

@@ -0,0 +1,5 @@
+import './otp-field-input.css';
+//#region src/components/otp-field/otp-field-input.module.css
+var otp_field_input_module_default = { "otp_field_input": "otp-field-input-module_otp_field_input_7VaNVa" };
+//#endregion
+export { otp_field_input_module_default as default };

package/dist/components/otp-field/otp-field.css

@@ -0,0 +1,13 @@
+@layer components {
+  .otp-field-module_otp_field_6ylpka {
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 8px;
+    width: fit-content;
+    display: flex;
+  }
+
+  .otp-field-module_otp_field__masked_6ylpka > input {
+    font-family: var(--font-code);
+  }
+}

package/dist/components/otp-field/otp-field.d.ts

@@ -0,0 +1,13 @@
+import { OTPField } from "@base-ui/react";
+import { JSX } from "react";
+//#region src/components/otp-field/otp-field.d.ts
+interface OTPFieldProps extends Omit<OTPField.Root.Props, "disabled"> {
+  isDisabled?: OTPField.Root.Props["disabled"];
+  isMasked?: OTPField.Root.Props["mask"];
+}
+declare function OTPField$1(props: OTPFieldProps): JSX.Element;
+declare const otpFieldVariants: (props?: ({
+  isMasked?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+//#endregion
+export { OTPField$1 as OTPField, otpFieldVariants };

package/dist/components/otp-field/otp-field.js

@@ -0,0 +1,27 @@
+import otp_field_module_default from "./otp-field.module.js";
+import { cva } from "class-variance-authority";
+import { jsx } from "react/jsx-runtime";
+import { OTPField } from "@base-ui/react";
+//#region src/components/otp-field/otp-field.tsx
+function OTPField$1(props) {
+	const { className: customClassName = "", isDisabled = false, isMasked = false, ...rest } = props;
+	const combinedClassName = otpFieldVariants({
+		className: customClassName,
+		isMasked
+	});
+	return /* @__PURE__ */ jsx(OTPField.Root, {
+		className: combinedClassName,
+		disabled: isDisabled,
+		mask: isMasked,
+		...rest
+	});
+}
+const otpFieldVariants = cva(otp_field_module_default.otp_field, {
+	defaultVariants: { isMasked: false },
+	variants: { isMasked: {
+		false: "",
+		true: otp_field_module_default.otp_field__masked
+	} }
+});
+//#endregion
+export { OTPField$1 as OTPField, otpFieldVariants };

package/dist/components/otp-field/otp-field.module.js

@@ -0,0 +1,8 @@
+import './otp-field.css';
+//#region src/components/otp-field/otp-field.module.css
+var otp_field_module_default = {
+	"otp_field": "otp-field-module_otp_field_6ylpka",
+	"otp_field__masked": "otp-field-module_otp_field__masked_6ylpka"
+};
+//#endregion
+export { otp_field_module_default as default };

package/dist/components/row/row.css

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

package/dist/components/row/row.d.ts

@@ -0,0 +1,16 @@
+import { CSSProperties, ComponentProps, ElementType, JSX } from "react";
+//#region src/components/row/row.d.ts
+type RowProps<ComponentType extends ElementType = "div"> = ComponentProps<ComponentType> & RowInternalProps;
+interface RowInternalProps {
+  alignItems?: CSSProperties["alignItems"];
+  as?: keyof JSX.IntrinsicElements;
+  flexWrap?: CSSProperties["flexWrap"];
+  gap?: CSSProperties["gap"];
+  gapX?: CSSProperties["columnGap"];
+  gapY?: CSSProperties["rowGap"];
+  justifyContent?: CSSProperties["justifyContent"];
+}
+declare function Row(props: RowProps): JSX.Element;
+declare const rowVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+//#endregion
+export { Row, RowProps, rowVariants };

package/dist/components/row/row.js

@@ -0,0 +1,23 @@
+import row_module_default from "./row.module.js";
+import { cva } from "class-variance-authority";
+import { createElement } from "react";
+//#region src/components/row/row.tsx
+function Row(props) {
+	const { alignItems = void 0, as = "div", className: customClassName = "", flexWrap = void 0, gap = void 0, gapX = void 0, gapY = void 0, justifyContent = void 0, style: customStyle, ...rest } = props;
+	return createElement(as, {
+		className: rowVariants({ className: customClassName }),
+		style: {
+			...customStyle,
+			...gap === void 0 ? {} : { gap },
+			...gapX === void 0 ? {} : { columnGap: gapX },
+			...gapY === void 0 ? {} : { rowGap: gapY },
+			...flexWrap === void 0 ? {} : { flexWrap },
+			...alignItems === void 0 ? {} : { alignItems },
+			...justifyContent === void 0 ? {} : { justifyContent }
+		},
+		...rest
+	});
+}
+const rowVariants = cva(row_module_default.row);
+//#endregion
+export { Row, rowVariants };

package/dist/components/row/row.module.js

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

package/dist/components/spacer/spacer.css

@@ -0,0 +1,5 @@
+@layer components {
+  .spacer-module_spacer_liXYKW {
+    flex-shrink: 0;
+  }
+}

package/dist/components/spacer/spacer.d.ts

@@ -0,0 +1,10 @@
+import { CSSProperties, ComponentProps, JSX } from "react";
+//#region src/components/spacer/spacer.d.ts
+interface SpacerProps extends Omit<ComponentProps<"div">, "children"> {
+  height?: CSSProperties["height"];
+  width?: CSSProperties["width"];
+}
+declare function Spacer(props: SpacerProps): JSX.Element;
+declare const spacerVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+//#endregion
+export { Spacer, SpacerProps, spacerVariants };

package/dist/components/spacer/spacer.js

@@ -0,0 +1,19 @@
+import spacer_module_default from "./spacer.module.js";
+import { cva } from "class-variance-authority";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/spacer/spacer.tsx
+function Spacer(props) {
+	const { className: customClassName = "", height, style: customStyle, width, ...rest } = props;
+	return /* @__PURE__ */ jsx("div", {
+		className: spacerVariants({ className: customClassName }),
+		style: {
+			...customStyle,
+			...width === void 0 ? {} : { width },
+			...height === void 0 ? {} : { height }
+		},
+		...rest
+	});
+}
+const spacerVariants = cva(spacer_module_default.spacer);
+//#endregion
+export { Spacer, spacerVariants };

package/dist/components/spacer/spacer.module.js

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

package/dist/components/switch/switch.css

@@ -0,0 +1,54 @@
+@layer components {
+  .switch-module_switch_K0d9Sa {
+    background-color: var(--color-gray-6);
+    cursor: pointer;
+    outline-color: var(--color-primary-9);
+    outline-offset: 2px;
+    border-radius: 9999px;
+    outline-width: 0;
+    outline-style: solid;
+    padding: 2px;
+    transition-property: background-color;
+    transition-duration: .15s;
+    display: flex;
+    overflow: hidden;
+  }
+
+  .switch-module_switch_K0d9Sa:focus-visible {
+    outline-width: 2px;
+  }
+
+  .switch-module_switch_K0d9Sa[data-checked] {
+    background-color: var(--color-primary-9);
+  }
+
+  .switch-module_switch_K0d9Sa[data-disabled] {
+    cursor: not-allowed;
+    opacity: .5;
+  }
+
+  .switch-module_switch__thumb_K0d9Sa {
+    aspect-ratio: 1;
+    background-color: #fff;
+    border-radius: 9999px;
+    height: 100%;
+    transition-property: transform;
+    transition-duration: .15s;
+  }
+
+  .switch-module_switch__thumb_K0d9Sa[data-checked] {
+    transform: translateX(var(--translateX));
+  }
+
+  .switch-module_switch__size_18_K0d9Sa {
+    --translateX: 12px;
+    width: 30px;
+    height: 18px;
+  }
+
+  .switch-module_switch__size_24_K0d9Sa {
+    --translateX: 16px;
+    width: 40px;
+    height: 24px;
+  }
+}

package/dist/components/switch/switch.d.ts

@@ -0,0 +1,19 @@
+import { VariantProps } from "class-variance-authority";
+import { Switch } from "@base-ui/react";
+import { ComponentProps, JSX } from "react";
+//#region src/components/switch/switch.d.ts
+interface SwitchProps extends Omit<ComponentProps<typeof Switch.Root>, "checked" | "defaultChecked" | "disabled" | "nativeButton" | "readOnly" | "required"> {
+  isChecked?: boolean;
+  isDefaultChecked?: boolean;
+  isDisabled?: boolean;
+  isReadOnly?: boolean;
+  isRequired?: boolean;
+  size?: SwitchSize;
+}
+type SwitchSize = NonNullable<VariantProps<typeof switchVariants>["size"]>;
+declare function Switch$1(props: SwitchProps): JSX.Element;
+declare const switchVariants: (props?: ({
+  size?: 18 | 24 | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+//#endregion
+export { Switch$1 as Switch, SwitchProps, switchVariants };

package/dist/components/switch/switch.js

@@ -0,0 +1,31 @@
+import switch_module_default from "./switch.module.js";
+import { cva } from "class-variance-authority";
+import { jsx } from "react/jsx-runtime";
+import { Switch } from "@base-ui/react";
+//#region src/components/switch/switch.tsx
+function Switch$1(props) {
+	const { className: customClassName = "", isChecked = void 0, isDefaultChecked = false, isDisabled = false, isReadOnly = false, isRequired = false, size = 24, ...rest } = props;
+	const combinedClassName = switchVariants({
+		className: customClassName,
+		size
+	});
+	return /* @__PURE__ */ jsx(Switch.Root, {
+		checked: isChecked,
+		className: combinedClassName,
+		defaultChecked: isDefaultChecked,
+		disabled: isDisabled,
+		readOnly: isReadOnly,
+		required: isRequired,
+		...rest,
+		children: /* @__PURE__ */ jsx(Switch.Thumb, { className: switch_module_default.switch__thumb })
+	});
+}
+const switchVariants = cva(switch_module_default.switch, {
+	defaultVariants: { size: 24 },
+	variants: { size: {
+		18: switch_module_default.switch__size_18,
+		24: switch_module_default.switch__size_24
+	} }
+});
+//#endregion
+export { Switch$1 as Switch, switchVariants };