@max-ts/svelte 1.13.0 → 1.14.0

package/dist/assets/styles.css

@@ -277,7 +277,7 @@ img, picture, video, canvas {
   justify-content: center;
   gap: var(--spacing-1);
   overflow: hidden;
-  border-radius: 9999px;
+  border-radius: var(--radius-small);
   border: 1px solid transparent;
   padding: 2px var(--spacing-2);
   font-size: var(--fontSize-xs);
@@ -303,7 +303,7 @@ img, picture, video, canvas {
   background-color: color-mix(in oklch, var(--colors-primary) 90%, transparent);
 }
 .styles_badgeVariants_secondary__l5k2ok2 {
-  background-color: var(--colors-secondary);
+  background-color: var(--colors-background-elementHover);
   color: var(--colors-foreground-secondary);
 }
 .styles_badgeVariants_secondary__l5k2ok2[href]:hover {
@@ -2603,6 +2603,92 @@ img, picture, video, canvas {
   opacity: 0.5;
   cursor: not-allowed;
 }
+@keyframes styles_caretBlink__oe9d1a5 {
+  0%, 70%, 100% {
+    opacity: 1;
+  }
+  20%, 50% {
+    opacity: 0;
+  }
+}
+.styles_root__oe9d1a0 {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+}
+.styles_root__oe9d1a0:has(input:disabled) {
+  opacity: 0.5;
+}
+.styles_root__oe9d1a0 input:disabled {
+  cursor: not-allowed;
+}
+.styles_group__oe9d1a1 {
+  display: flex;
+  align-items: center;
+}
+.styles_slot__oe9d1a2 {
+  position: relative;
+  z-index: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--spacing-9);
+  height: var(--spacing-9);
+  border-color: var(--colors-border);
+  border-style: solid;
+  border-width: 1px 1px 1px 0;
+  background-color: var(--colors-background-paper);
+  color: var(--colors-text-primary);
+  font-size: var(--fontSize-sm);
+  line-height: var(--lineHeight-none);
+  outline: none;
+  transition: border-color 0.2s, box-shadow 0.2s, color 0.2s;
+}
+.styles_slot__oe9d1a2:first-child {
+  border-inline-start-width: 1px;
+  border-start-start-radius: var(--radius-medium);
+  border-end-start-radius: var(--radius-medium);
+}
+.styles_slot__oe9d1a2:last-child {
+  border-start-end-radius: var(--radius-medium);
+  border-end-end-radius: var(--radius-medium);
+}
+.styles_slot__oe9d1a2[aria-invalid="true"] {
+  border-color: var(--colors-error);
+}
+.styles_slotActive__oe9d1a3 {
+  z-index: 1;
+  border-color: var(--colors-primary);
+  box-shadow: 0 0 0 3px color-mix(in oklch, var(--colors-primary) 20%, transparent);
+}
+.styles_slotActive__oe9d1a3[aria-invalid="true"] {
+  border-color: var(--colors-error);
+  box-shadow: 0 0 0 3px color-mix(in oklch, var(--colors-error) 20%, transparent);
+}
+.styles_caretWrapper__oe9d1a4 {
+  pointer-events: none;
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.styles_caret__oe9d1a6 {
+  width: 1px;
+  height: var(--spacing-4);
+  background-color: var(--colors-text-primary);
+  animation: styles_caretBlink__oe9d1a5 1s ease-in-out infinite;
+}
+.styles_separator__oe9d1a7 {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--colors-text-secondary);
+}
+.styles_separator__oe9d1a7 svg {
+  width: var(--spacing-4);
+  height: var(--spacing-4);
+}
 .styles_item__b9ajag0 {
   display: flex;
   flex-wrap: wrap;

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

@@ -1,18 +1,17 @@
 import { DrawerCloseProps, DrawerContentProps, DrawerDescriptionProps, DrawerFooterProps, DrawerHeaderProps, DrawerOverlayProps, DrawerPortalProps, DrawerProps, DrawerTitleProps, DrawerTriggerProps } from "./types.js";
-import * as _$svelte_legacy0 from "svelte/legacy";
 
 //#region src/components/Drawer/index.d.ts
 declare const Drawer: {
-  Root: _$svelte_legacy0.LegacyComponentType;
-  Trigger: _$svelte_legacy0.LegacyComponentType;
-  Close: _$svelte_legacy0.LegacyComponentType;
-  Content: _$svelte_legacy0.LegacyComponentType;
-  Overlay: _$svelte_legacy0.LegacyComponentType;
-  Portal: _$svelte_legacy0.LegacyComponentType;
-  Header: _$svelte_legacy0.LegacyComponentType;
-  Footer: _$svelte_legacy0.LegacyComponentType;
-  Title: _$svelte_legacy0.LegacyComponentType;
-  Description: _$svelte_legacy0.LegacyComponentType;
+  Root: import("svelte/legacy").LegacyComponentType;
+  Trigger: import("svelte/legacy").LegacyComponentType;
+  Close: import("svelte/legacy").LegacyComponentType;
+  Content: import("svelte/legacy").LegacyComponentType;
+  Overlay: import("svelte/legacy").LegacyComponentType;
+  Portal: import("svelte/legacy").LegacyComponentType;
+  Header: import("svelte/legacy").LegacyComponentType;
+  Footer: import("svelte/legacy").LegacyComponentType;
+  Title: import("svelte/legacy").LegacyComponentType;
+  Description: import("svelte/legacy").LegacyComponentType;
 };
 //#endregion
 export { Drawer };

package/dist/components/InputOTP/Group/Group.js

@@ -0,0 +1,31 @@
+import __default__ from "../styles.css.js";
+import "svelte/internal/disclose-version";
+import * as $ from "svelte/internal/client";
+//#region src/components/InputOTP/Group/Group.svelte
+var root = $.from_html(`<div><!></div>`);
+function Group($$anchor, $$props) {
+	$.push($$props, true);
+	let ref = $.prop($$props, "ref", 15, null), dataSlot = $.prop($$props, "data-slot", 3, "input-otp-group"), restProps = $.rest_props($$props, [
+		"$$slots",
+		"$$events",
+		"$$legacy",
+		"ref",
+		"class",
+		"children",
+		"data-slot"
+	]);
+	var div = root();
+	$.attribute_effect(div, () => ({
+		"data-slot": dataSlot(),
+		class: [__default__.group, $$props.class],
+		...restProps
+	}));
+	var node = $.child(div);
+	$.snippet(node, () => $$props.children ?? $.noop);
+	$.reset(div);
+	$.bind_this(div, ($$value) => ref($$value), () => ref());
+	$.append($$anchor, div);
+	$.pop();
+}
+//#endregion
+export { Group as default };

package/dist/components/InputOTP/Group/Group.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { InputOTPGroupProps } from '../types';
+declare const Group: import("svelte").Component<InputOTPGroupProps, {}, "ref">;
+type Group = ReturnType<typeof Group>;
+export default Group;

package/dist/components/InputOTP/Group/index.d.ts

@@ -0,0 +1 @@
+export { default as Group } from './Group.svelte';

package/dist/components/InputOTP/InputOTP.js

@@ -0,0 +1,49 @@
+import __default__ from "./styles.css.js";
+import "svelte/internal/disclose-version";
+import * as $ from "svelte/internal/client";
+import { PinInput } from "bits-ui";
+//#region src/components/InputOTP/InputOTP.svelte
+function InputOTP($$anchor, $$props) {
+	$.push($$props, true);
+	let ref = $.prop($$props, "ref", 15, null), value = $.prop($$props, "value", 15, ""), dataSlot = $.prop($$props, "data-slot", 3, "input-otp"), restProps = $.rest_props($$props, [
+		"$$slots",
+		"$$events",
+		"$$legacy",
+		"ref",
+		"value",
+		"class",
+		"data-slot"
+	]);
+	var fragment = $.comment();
+	var node = $.first_child(fragment);
+	{
+		let $0 = $.derived(() => [__default__.root, $$props.class]);
+		$.component(node, () => PinInput.Root, ($$anchor, InputOTPPrimitive_Root) => {
+			InputOTPPrimitive_Root($$anchor, $.spread_props({
+				get "data-slot"() {
+					return dataSlot();
+				},
+				get class() {
+					return $.get($0);
+				}
+			}, () => restProps, {
+				get ref() {
+					return ref();
+				},
+				set ref($$value) {
+					ref($$value);
+				},
+				get value() {
+					return value();
+				},
+				set value($$value) {
+					value($$value);
+				}
+			}));
+		});
+	}
+	$.append($$anchor, fragment);
+	$.pop();
+}
+//#endregion
+export { InputOTP as default };

package/dist/components/InputOTP/InputOTP.svelte.d.ts

@@ -0,0 +1,4 @@
+import { PinInput as InputOTPPrimitive } from 'bits-ui';
+declare const InputOTP: import("svelte").Component<InputOTPPrimitive.RootProps, {}, "value" | "ref">;
+type InputOTP = ReturnType<typeof InputOTP>;
+export default InputOTP;

package/dist/components/InputOTP/Separator/Separator.js

@@ -0,0 +1,44 @@
+import __default__ from "../styles.css.js";
+import "svelte/internal/disclose-version";
+import * as $ from "svelte/internal/client";
+import MinusIcon from "@lucide/svelte/icons/minus";
+//#region src/components/InputOTP/Separator/Separator.svelte
+var root = $.from_html(`<div><!></div>`);
+function Separator($$anchor, $$props) {
+	$.push($$props, true);
+	let ref = $.prop($$props, "ref", 15, null), dataSlot = $.prop($$props, "data-slot", 3, "input-otp-separator"), restProps = $.rest_props($$props, [
+		"$$slots",
+		"$$events",
+		"$$legacy",
+		"ref",
+		"class",
+		"children",
+		"data-slot"
+	]);
+	var div = root();
+	$.attribute_effect(div, () => ({
+		"data-slot": dataSlot(),
+		class: [__default__.separator, $$props.class],
+		...restProps
+	}));
+	var node = $.child(div);
+	var consequent = ($$anchor) => {
+		var fragment = $.comment();
+		var node_1 = $.first_child(fragment);
+		$.snippet(node_1, () => $$props.children ?? $.noop);
+		$.append($$anchor, fragment);
+	};
+	var alternate = ($$anchor) => {
+		MinusIcon($$anchor, {});
+	};
+	$.if(node, ($$render) => {
+		if ($$props.children) $$render(consequent);
+		else $$render(alternate, -1);
+	});
+	$.reset(div);
+	$.bind_this(div, ($$value) => ref($$value), () => ref());
+	$.append($$anchor, div);
+	$.pop();
+}
+//#endregion
+export { Separator as default };

package/dist/components/InputOTP/Separator/Separator.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { InputOTPSeparatorProps } from '../types';
+declare const Separator: import("svelte").Component<InputOTPSeparatorProps, {}, "ref">;
+type Separator = ReturnType<typeof Separator>;
+export default Separator;

package/dist/components/InputOTP/Separator/index.d.ts

@@ -0,0 +1 @@
+export { default as Separator } from './Separator.svelte';

package/dist/components/InputOTP/Slot/Slot.js

@@ -0,0 +1,74 @@
+import __default__ from "../styles.css.js";
+import "svelte/internal/disclose-version";
+import * as $ from "svelte/internal/client";
+import { PinInput } from "bits-ui";
+//#region src/components/InputOTP/Slot/Slot.svelte
+var root_2 = $.from_html(`<div><div></div></div>`);
+var root_1 = $.from_html(` <!>`, 1);
+function Slot($$anchor, $$props) {
+	$.push($$props, true);
+	let ref = $.prop($$props, "ref", 15, null), dataSlot = $.prop($$props, "data-slot", 3, "input-otp-slot"), restProps = $.rest_props($$props, [
+		"$$slots",
+		"$$events",
+		"$$legacy",
+		"ref",
+		"cell",
+		"class",
+		"data-slot"
+	]);
+	var fragment = $.comment();
+	var node = $.first_child(fragment);
+	{
+		let $0 = $.derived(() => [
+			__default__.slot,
+			$$props.cell.isActive && __default__.slotActive,
+			$$props.class
+		]);
+		$.component(node, () => PinInput.Cell, ($$anchor, InputOTPPrimitive_Cell) => {
+			InputOTPPrimitive_Cell($$anchor, $.spread_props({
+				get cell() {
+					return $$props.cell;
+				},
+				get "data-slot"() {
+					return dataSlot();
+				},
+				get class() {
+					return $.get($0);
+				}
+			}, () => restProps, {
+				get ref() {
+					return ref();
+				},
+				set ref($$value) {
+					ref($$value);
+				},
+				children: ($$anchor, $$slotProps) => {
+					$.next();
+					var fragment_1 = root_1();
+					var text = $.first_child(fragment_1);
+					var node_1 = $.sibling(text);
+					var consequent = ($$anchor) => {
+						var div = root_2();
+						var div_1 = $.child(div);
+						$.reset(div);
+						$.template_effect(() => {
+							$.set_class(div, 1, $.clsx(__default__.caretWrapper));
+							$.set_class(div_1, 1, $.clsx(__default__.caret));
+						});
+						$.append($$anchor, div);
+					};
+					$.if(node_1, ($$render) => {
+						if ($$props.cell.hasFakeCaret) $$render(consequent);
+					});
+					$.template_effect(() => $.set_text(text, `${$$props.cell.char ?? ""} `));
+					$.append($$anchor, fragment_1);
+				},
+				$$slots: { default: true }
+			}));
+		});
+	}
+	$.append($$anchor, fragment);
+	$.pop();
+}
+//#endregion
+export { Slot as default };

package/dist/components/InputOTP/Slot/Slot.svelte.d.ts

@@ -0,0 +1,4 @@
+import { PinInput as InputOTPPrimitive } from 'bits-ui';
+declare const Slot: import("svelte").Component<InputOTPPrimitive.CellProps, {}, "ref">;
+type Slot = ReturnType<typeof Slot>;
+export default Slot;

package/dist/components/InputOTP/Slot/index.d.ts

@@ -0,0 +1 @@
+export { default as Slot } from './Slot.svelte';

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

@@ -0,0 +1,11 @@
+import { Group } from './Group';
+import Root from './InputOTP.svelte';
+import { Separator } from './Separator';
+import { Slot } from './Slot';
+export declare const InputOTP: {
+    Root: typeof Root;
+    Group: typeof Group;
+    Slot: typeof Slot;
+    Separator: typeof Separator;
+};
+export type * from './types';

package/dist/components/InputOTP/index.js

@@ -0,0 +1,13 @@
+import Group from "./Group/Group.js";
+import InputOTP$1 from "./InputOTP.js";
+import Separator from "./Separator/Separator.js";
+import Slot from "./Slot/Slot.js";
+//#region src/components/InputOTP/index.ts
+const InputOTP = {
+	Root: InputOTP$1,
+	Group,
+	Slot,
+	Separator
+};
+//#endregion
+export { InputOTP };

package/dist/components/InputOTP/styles.css.d.ts

@@ -0,0 +1,10 @@
+declare const _default: {
+    caret: string;
+    caretWrapper: string;
+    group: string;
+    root: string;
+    separator: string;
+    slot: string;
+    slotActive: string;
+};
+export default _default;

package/dist/components/InputOTP/styles.css.js

@@ -0,0 +1,12 @@
+//#region src/components/InputOTP/styles.css.ts
+var __default__ = {
+	caret: "styles_caret__oe9d1a6",
+	caretWrapper: "styles_caretWrapper__oe9d1a4",
+	group: "styles_group__oe9d1a1",
+	root: "styles_root__oe9d1a0",
+	separator: "styles_separator__oe9d1a7",
+	slot: "styles_slot__oe9d1a2",
+	slotActive: "styles_slotActive__oe9d1a3"
+};
+//#endregion
+export { __default__ as default };

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

@@ -0,0 +1,7 @@
+import type { PinInput as InputOTPPrimitive } from 'bits-ui';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { WithElementRef } from '../../types';
+export type InputOTPProps = InputOTPPrimitive.RootProps;
+export type InputOTPSlotProps = InputOTPPrimitive.CellProps;
+export type InputOTPGroupProps = WithElementRef<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
+export type InputOTPSeparatorProps = WithElementRef<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;

package/dist/components/index.d.ts

@@ -20,6 +20,7 @@ export { Empty, type EmptyMediaVariant } from './Empty';
 export { Field, type FieldOrientation, type FieldVariants, } from './Field';
 export { Input, type InputProps, type InputType, } from './Input';
 export { InputGroup, type InputGroupAddonAlign, type InputGroupButtonSize, } from './InputGroup';
+export { InputOTP, type InputOTPGroupProps, type InputOTPProps, type InputOTPSeparatorProps, type InputOTPSlotProps, } from './InputOTP';
 export { Item, type ItemProps, type ItemSize, type ItemVariant, } from './Item';
 export { Label } from './Label';
 export { OverflowTypography, type OverflowTypographyProps, type OverflowTypographyTooltipProps, } from './OverflowTypography';

package/dist/components/index.js

@@ -26,6 +26,7 @@ import Label_1 from "./Label/Label.js";
 import { Field } from "./Field/index.js";
 import Input from "./Input/Input.js";
 import { InputGroup } from "./InputGroup/index.js";
+import { InputOTP } from "./InputOTP/index.js";
 import { Item } from "./Item/index.js";
 import Portal from "./Portal/Portal.js";
 import Tooltip from "./Tooltip/Tooltip.js";
@@ -37,4 +38,4 @@ import ScalableContainer from "./ScalableContainer/ScalableContainer.js";
 import { Select } from "./Select/index.js";
 import SliderInput from "./SliderInput/SliderInput.js";
 import { Tabs } from "./Tabs/index.js";
-export { Accordion, Alert, Badge, Button, ButtonGroup, Calendar, Card, Carousel, Checkbox, CircularProgress, ContentState, DataGrid, DataGridSortHeader, Description, Dialog, Drawer, DropdownMenu_exports as DropdownMenu, Empty, Field, Input, InputGroup, Item, Label_1 as Label, OverflowTypography, Placeholder, Popover, Portal, RangeInput, ScalableContainer, Select, Separator, Slider, SliderInput, Spinner, Tabs, Tooltip, Typography, badgeVariants, buttonVariants };
+export { Accordion, Alert, Badge, Button, ButtonGroup, Calendar, Card, Carousel, Checkbox, CircularProgress, ContentState, DataGrid, DataGridSortHeader, Description, Dialog, Drawer, DropdownMenu_exports as DropdownMenu, Empty, Field, Input, InputGroup, InputOTP, Item, Label_1 as Label, OverflowTypography, Placeholder, Popover, Portal, RangeInput, ScalableContainer, Select, Separator, Slider, SliderInput, Spinner, Tabs, Tooltip, Typography, badgeVariants, buttonVariants };

package/dist/node_modules/.pnpm/@vanilla-extract_css@1.20.1/node_modules/@vanilla-extract/css/dist/vanilla-extract-css.cjs.d.ts

@@ -156,4 +156,4 @@ type StyleRule = WithQueries<StyleWithSelectors>;
 type ClassNames = string | Array<ClassNames>;
 type ComplexStyleRule = StyleRule | Array<StyleRule | ClassNames>;
 //#endregion
-export { type ComplexStyleRule };
+export type { ComplexStyleRule };

package/dist/stories/InputOTP.stories.svelte.d.ts

@@ -0,0 +1,19 @@
+import { InputOTP } from '../components';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const InputOTP: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type InputOTP = InstanceType<typeof InputOTP>;
+export default InputOTP;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@max-ts/svelte",
-  "version": "1.13.0",
+  "version": "1.14.0",
   "type": "module",
   "description": "Svelte component library.",
   "author": "Tsepelev Maksim",
@@ -36,39 +36,39 @@
     "svelte": "^5.53.5"
   },
   "devDependencies": {
-    "@biomejs/biome": "^2.4.14",
+    "@biomejs/biome": "^2.4.15",
     "@changesets/cli": "^2.31.0",
-    "@chromatic-com/storybook": "^5.1.2",
+    "@chromatic-com/storybook": "^5.2.1",
     "@internationalized/date": "^3.12.1",
-    "@storybook/addon-a11y": "^10.3.6",
-    "@storybook/addon-docs": "^10.3.6",
+    "@storybook/addon-a11y": "^10.4.1",
+    "@storybook/addon-docs": "^10.4.1",
     "@storybook/addon-svelte-csf": "^5.1.2",
-    "@storybook/addon-vitest": "^10.3.6",
-    "@storybook/sveltekit": "^10.3.6",
-    "@sveltejs/vite-plugin-svelte": "^7.0.0",
+    "@storybook/addon-vitest": "^10.4.1",
+    "@storybook/sveltekit": "^10.4.1",
+    "@sveltejs/vite-plugin-svelte": "^7.1.2",
     "@tsconfig/svelte": "^5.0.8",
-    "@tsdown/css": "^0.21.10",
-    "@types/node": "^25.6.0",
+    "@tsdown/css": "^0.22.0",
+    "@types/node": "^25.9.1",
     "@vanilla-extract/css": "^1.20.1",
     "@vanilla-extract/rollup-plugin": "^1.5.3",
     "@vanilla-extract/vite-plugin": "^5.2.2",
-    "@vitest/browser-playwright": "^4.1.5",
-    "bumpp": "^11.0.1",
+    "@vitest/browser-playwright": "^4.1.7",
+    "bumpp": "^11.1.0",
     "rollup-plugin-svelte": "^7.2.3",
-    "storybook": "^10.3.6",
-    "svelte": "^5.55.5",
-    "svelte-check": "^4.4.7",
-    "svelte2tsx": "^0.7.54",
-    "tsdown": "0.21.10",
+    "storybook": "^10.4.1",
+    "svelte": "^5.55.9",
+    "svelte-check": "^4.4.8",
+    "svelte2tsx": "^0.7.55",
+    "tsdown": "0.22.0",
     "typescript": "^6.0.3",
-    "vite": "^8.0.10",
+    "vite": "^8.0.14",
     "vite-tsconfig-paths": "^6.1.1",
-    "vitest": "^4.1.5",
+    "vitest": "^4.1.7",
     "vitest-browser-svelte": "^2.1.1"
   },
   "dependencies": {
     "@floating-ui/dom": "^1.7.6",
-    "@lucide/svelte": "^1.14.0",
+    "@lucide/svelte": "^1.16.0",
     "bits-ui": "^2.18.1"
   },
   "scripts": {