@max-ts/svelte 1.12.6 → 1.14.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (39) hide show
  1. package/dist/assets/styles.css +123 -4
  2. package/dist/components/Drawer/index.d.ts +10 -11
  3. package/dist/components/InputOTP/Group/Group.js +31 -0
  4. package/dist/components/InputOTP/Group/Group.svelte.d.ts +4 -0
  5. package/dist/components/InputOTP/Group/index.d.ts +1 -0
  6. package/dist/components/InputOTP/InputOTP.js +49 -0
  7. package/dist/components/InputOTP/InputOTP.svelte.d.ts +4 -0
  8. package/dist/components/InputOTP/Separator/Separator.js +44 -0
  9. package/dist/components/InputOTP/Separator/Separator.svelte.d.ts +4 -0
  10. package/dist/components/InputOTP/Separator/index.d.ts +1 -0
  11. package/dist/components/InputOTP/Slot/Slot.js +74 -0
  12. package/dist/components/InputOTP/Slot/Slot.svelte.d.ts +4 -0
  13. package/dist/components/InputOTP/Slot/index.d.ts +1 -0
  14. package/dist/components/InputOTP/index.d.ts +11 -0
  15. package/dist/components/InputOTP/index.js +13 -0
  16. package/dist/components/InputOTP/styles.css.d.ts +10 -0
  17. package/dist/components/InputOTP/styles.css.js +12 -0
  18. package/dist/components/InputOTP/types.d.ts +7 -0
  19. package/dist/components/OverflowTypography/OverflowTypography.js +175 -0
  20. package/dist/components/OverflowTypography/OverflowTypography.svelte.d.ts +4 -0
  21. package/dist/components/OverflowTypography/index.d.ts +2 -0
  22. package/dist/components/OverflowTypography/store.svelte.d.ts +22 -0
  23. package/dist/components/OverflowTypography/store.svelte.js +84 -0
  24. package/dist/components/OverflowTypography/styles.css.d.ts +5 -0
  25. package/dist/components/OverflowTypography/styles.css.js +12 -0
  26. package/dist/components/OverflowTypography/types.d.ts +18 -0
  27. package/dist/components/Tooltip/Tooltip.js +9 -6
  28. package/dist/components/Tooltip/store.svelte.d.ts +5 -2
  29. package/dist/components/Tooltip/store.svelte.js +18 -16
  30. package/dist/components/Tooltip/styles.css.d.ts +2 -5
  31. package/dist/components/Tooltip/styles.css.js +3 -5
  32. package/dist/components/Tooltip/types.d.ts +1 -0
  33. package/dist/components/Typography/Typography.js +2 -2
  34. package/dist/components/index.d.ts +2 -0
  35. package/dist/components/index.js +5 -3
  36. package/dist/node_modules/.pnpm/@vanilla-extract_css@1.20.1/node_modules/@vanilla-extract/css/dist/vanilla-extract-css.cjs.d.ts +1 -1
  37. package/dist/stories/InputOTP.stories.svelte.d.ts +19 -0
  38. package/dist/stories/OverflowTypography.stories.svelte.d.ts +19 -0
  39. package/package.json +20 -20
@@ -277,7 +277,7 @@ img, picture, video, canvas {
277
277
  justify-content: center;
278
278
  gap: var(--spacing-1);
279
279
  overflow: hidden;
280
- border-radius: 9999px;
280
+ border-radius: var(--radius-small);
281
281
  border: 1px solid transparent;
282
282
  padding: 2px var(--spacing-2);
283
283
  font-size: var(--fontSize-xs);
@@ -303,7 +303,7 @@ img, picture, video, canvas {
303
303
  background-color: color-mix(in oklch, var(--colors-primary) 90%, transparent);
304
304
  }
305
305
  .styles_badgeVariants_secondary__l5k2ok2 {
306
- background-color: var(--colors-secondary);
306
+ background-color: var(--colors-background-elementHover);
307
307
  color: var(--colors-foreground-secondary);
308
308
  }
309
309
  .styles_badgeVariants_secondary__l5k2ok2[href]:hover {
@@ -2603,6 +2603,92 @@ img, picture, video, canvas {
2603
2603
  opacity: 0.5;
2604
2604
  cursor: not-allowed;
2605
2605
  }
2606
+ @keyframes styles_caretBlink__oe9d1a5 {
2607
+ 0%, 70%, 100% {
2608
+ opacity: 1;
2609
+ }
2610
+ 20%, 50% {
2611
+ opacity: 0;
2612
+ }
2613
+ }
2614
+ .styles_root__oe9d1a0 {
2615
+ display: flex;
2616
+ align-items: center;
2617
+ gap: var(--spacing-2);
2618
+ }
2619
+ .styles_root__oe9d1a0:has(input:disabled) {
2620
+ opacity: 0.5;
2621
+ }
2622
+ .styles_root__oe9d1a0 input:disabled {
2623
+ cursor: not-allowed;
2624
+ }
2625
+ .styles_group__oe9d1a1 {
2626
+ display: flex;
2627
+ align-items: center;
2628
+ }
2629
+ .styles_slot__oe9d1a2 {
2630
+ position: relative;
2631
+ z-index: 0;
2632
+ display: flex;
2633
+ align-items: center;
2634
+ justify-content: center;
2635
+ width: var(--spacing-9);
2636
+ height: var(--spacing-9);
2637
+ border-color: var(--colors-border);
2638
+ border-style: solid;
2639
+ border-width: 1px 1px 1px 0;
2640
+ background-color: var(--colors-background-paper);
2641
+ color: var(--colors-text-primary);
2642
+ font-size: var(--fontSize-sm);
2643
+ line-height: var(--lineHeight-none);
2644
+ outline: none;
2645
+ transition: border-color 0.2s, box-shadow 0.2s, color 0.2s;
2646
+ }
2647
+ .styles_slot__oe9d1a2:first-child {
2648
+ border-inline-start-width: 1px;
2649
+ border-start-start-radius: var(--radius-medium);
2650
+ border-end-start-radius: var(--radius-medium);
2651
+ }
2652
+ .styles_slot__oe9d1a2:last-child {
2653
+ border-start-end-radius: var(--radius-medium);
2654
+ border-end-end-radius: var(--radius-medium);
2655
+ }
2656
+ .styles_slot__oe9d1a2[aria-invalid="true"] {
2657
+ border-color: var(--colors-error);
2658
+ }
2659
+ .styles_slotActive__oe9d1a3 {
2660
+ z-index: 1;
2661
+ border-color: var(--colors-primary);
2662
+ box-shadow: 0 0 0 3px color-mix(in oklch, var(--colors-primary) 20%, transparent);
2663
+ }
2664
+ .styles_slotActive__oe9d1a3[aria-invalid="true"] {
2665
+ border-color: var(--colors-error);
2666
+ box-shadow: 0 0 0 3px color-mix(in oklch, var(--colors-error) 20%, transparent);
2667
+ }
2668
+ .styles_caretWrapper__oe9d1a4 {
2669
+ pointer-events: none;
2670
+ position: absolute;
2671
+ inset: 0;
2672
+ display: flex;
2673
+ align-items: center;
2674
+ justify-content: center;
2675
+ }
2676
+ .styles_caret__oe9d1a6 {
2677
+ width: 1px;
2678
+ height: var(--spacing-4);
2679
+ background-color: var(--colors-text-primary);
2680
+ animation: styles_caretBlink__oe9d1a5 1s ease-in-out infinite;
2681
+ }
2682
+ .styles_separator__oe9d1a7 {
2683
+ display: flex;
2684
+ align-items: center;
2685
+ justify-content: center;
2686
+ color: var(--colors-text-secondary);
2687
+ }
2688
+ .styles_separator__oe9d1a7 svg {
2689
+ width: var(--spacing-4);
2690
+ height: var(--spacing-4);
2691
+ }
2606
2692
  .styles_item__b9ajag0 {
2607
2693
  display: flex;
2608
2694
  flex-wrap: wrap;
@@ -2754,6 +2840,37 @@ img, picture, video, canvas {
2754
2840
  cursor: not-allowed;
2755
2841
  opacity: 0.5;
2756
2842
  }
2843
+ .styles_truncate__dpgi0n0 {
2844
+ overflow: hidden;
2845
+ max-width: 100%;
2846
+ min-width: 0;
2847
+ text-overflow: ellipsis;
2848
+ white-space: nowrap;
2849
+ }
2850
+ .styles_multipleRows__dpgi0n1 {
2851
+ display: -webkit-box;
2852
+ white-space: initial;
2853
+ -webkit-box-orient: vertical;
2854
+ -webkit-line-clamp: var(--rows-count);
2855
+ }
2856
+ .styles_wrapper__dpgi0n2 {
2857
+ display: flex;
2858
+ min-width: 0;
2859
+ width: 100%;
2860
+ white-space: nowrap;
2861
+ }
2862
+ .styles_wrapperAlignments_left__dpgi0n3 {
2863
+ justify-content: flex-start;
2864
+ }
2865
+ .styles_wrapperAlignments_center__dpgi0n4 {
2866
+ justify-content: center;
2867
+ }
2868
+ .styles_wrapperAlignments_right__dpgi0n5 {
2869
+ justify-content: flex-end;
2870
+ }
2871
+ .styles_wrapperAlignments_justify__dpgi0n6 {
2872
+ justify-content: space-between;
2873
+ }
2757
2874
  .styles_wrapper__rub3490 {
2758
2875
  display: block;
2759
2876
  max-width: 100%;
@@ -3516,13 +3633,15 @@ img, picture, video, canvas {
3516
3633
  background-color: var(--colors-background-tooltip);
3517
3634
  color: var(--colors-background-paper);
3518
3635
  border-radius: var(--radius-small);
3519
- padding: var(--spacing-2) var(--spacing-3);
3636
+ padding: var(--spacing-2);
3520
3637
  font-size: var(--fontSize-xs);
3521
3638
  font-weight: var(--fontWeight-semibold);
3522
3639
  text-align: center;
3523
3640
  width: fit-content;
3641
+ max-width: min(320px, calc(100vw - 32px));
3524
3642
  animation: styles_fadeIn__1ovcrev0 150ms ease-out, styles_zoomIn__1ovcrev2 150ms ease-out;
3525
- text-wrap: balance;
3643
+ white-space: normal;
3644
+ overflow-wrap: break-word;
3526
3645
  line-height: var(--lineHeight-none);
3527
3646
  }
3528
3647
  .styles_content__1ovcrev8[data-state="closed"] {
@@ -1,18 +1,17 @@
1
1
  import { DrawerCloseProps, DrawerContentProps, DrawerDescriptionProps, DrawerFooterProps, DrawerHeaderProps, DrawerOverlayProps, DrawerPortalProps, DrawerProps, DrawerTitleProps, DrawerTriggerProps } from "./types.js";
2
- import * as _$svelte_legacy0 from "svelte/legacy";
3
2
 
4
3
  //#region src/components/Drawer/index.d.ts
5
4
  declare const Drawer: {
6
- Root: _$svelte_legacy0.LegacyComponentType;
7
- Trigger: _$svelte_legacy0.LegacyComponentType;
8
- Close: _$svelte_legacy0.LegacyComponentType;
9
- Content: _$svelte_legacy0.LegacyComponentType;
10
- Overlay: _$svelte_legacy0.LegacyComponentType;
11
- Portal: _$svelte_legacy0.LegacyComponentType;
12
- Header: _$svelte_legacy0.LegacyComponentType;
13
- Footer: _$svelte_legacy0.LegacyComponentType;
14
- Title: _$svelte_legacy0.LegacyComponentType;
15
- Description: _$svelte_legacy0.LegacyComponentType;
5
+ Root: import("svelte/legacy").LegacyComponentType;
6
+ Trigger: import("svelte/legacy").LegacyComponentType;
7
+ Close: import("svelte/legacy").LegacyComponentType;
8
+ Content: import("svelte/legacy").LegacyComponentType;
9
+ Overlay: import("svelte/legacy").LegacyComponentType;
10
+ Portal: import("svelte/legacy").LegacyComponentType;
11
+ Header: import("svelte/legacy").LegacyComponentType;
12
+ Footer: import("svelte/legacy").LegacyComponentType;
13
+ Title: import("svelte/legacy").LegacyComponentType;
14
+ Description: import("svelte/legacy").LegacyComponentType;
16
15
  };
17
16
  //#endregion
18
17
  export { Drawer };
@@ -0,0 +1,31 @@
1
+ import __default__ from "../styles.css.js";
2
+ import "svelte/internal/disclose-version";
3
+ import * as $ from "svelte/internal/client";
4
+ //#region src/components/InputOTP/Group/Group.svelte
5
+ var root = $.from_html(`<div><!></div>`);
6
+ function Group($$anchor, $$props) {
7
+ $.push($$props, true);
8
+ let ref = $.prop($$props, "ref", 15, null), dataSlot = $.prop($$props, "data-slot", 3, "input-otp-group"), restProps = $.rest_props($$props, [
9
+ "$$slots",
10
+ "$$events",
11
+ "$$legacy",
12
+ "ref",
13
+ "class",
14
+ "children",
15
+ "data-slot"
16
+ ]);
17
+ var div = root();
18
+ $.attribute_effect(div, () => ({
19
+ "data-slot": dataSlot(),
20
+ class: [__default__.group, $$props.class],
21
+ ...restProps
22
+ }));
23
+ var node = $.child(div);
24
+ $.snippet(node, () => $$props.children ?? $.noop);
25
+ $.reset(div);
26
+ $.bind_this(div, ($$value) => ref($$value), () => ref());
27
+ $.append($$anchor, div);
28
+ $.pop();
29
+ }
30
+ //#endregion
31
+ export { Group as default };
@@ -0,0 +1,4 @@
1
+ import type { InputOTPGroupProps } from '../types';
2
+ declare const Group: import("svelte").Component<InputOTPGroupProps, {}, "ref">;
3
+ type Group = ReturnType<typeof Group>;
4
+ export default Group;
@@ -0,0 +1 @@
1
+ export { default as Group } from './Group.svelte';
@@ -0,0 +1,49 @@
1
+ import __default__ from "./styles.css.js";
2
+ import "svelte/internal/disclose-version";
3
+ import * as $ from "svelte/internal/client";
4
+ import { PinInput } from "bits-ui";
5
+ //#region src/components/InputOTP/InputOTP.svelte
6
+ function InputOTP($$anchor, $$props) {
7
+ $.push($$props, true);
8
+ let ref = $.prop($$props, "ref", 15, null), value = $.prop($$props, "value", 15, ""), dataSlot = $.prop($$props, "data-slot", 3, "input-otp"), restProps = $.rest_props($$props, [
9
+ "$$slots",
10
+ "$$events",
11
+ "$$legacy",
12
+ "ref",
13
+ "value",
14
+ "class",
15
+ "data-slot"
16
+ ]);
17
+ var fragment = $.comment();
18
+ var node = $.first_child(fragment);
19
+ {
20
+ let $0 = $.derived(() => [__default__.root, $$props.class]);
21
+ $.component(node, () => PinInput.Root, ($$anchor, InputOTPPrimitive_Root) => {
22
+ InputOTPPrimitive_Root($$anchor, $.spread_props({
23
+ get "data-slot"() {
24
+ return dataSlot();
25
+ },
26
+ get class() {
27
+ return $.get($0);
28
+ }
29
+ }, () => restProps, {
30
+ get ref() {
31
+ return ref();
32
+ },
33
+ set ref($$value) {
34
+ ref($$value);
35
+ },
36
+ get value() {
37
+ return value();
38
+ },
39
+ set value($$value) {
40
+ value($$value);
41
+ }
42
+ }));
43
+ });
44
+ }
45
+ $.append($$anchor, fragment);
46
+ $.pop();
47
+ }
48
+ //#endregion
49
+ export { InputOTP as default };
@@ -0,0 +1,4 @@
1
+ import { PinInput as InputOTPPrimitive } from 'bits-ui';
2
+ declare const InputOTP: import("svelte").Component<InputOTPPrimitive.RootProps, {}, "value" | "ref">;
3
+ type InputOTP = ReturnType<typeof InputOTP>;
4
+ export default InputOTP;
@@ -0,0 +1,44 @@
1
+ import __default__ from "../styles.css.js";
2
+ import "svelte/internal/disclose-version";
3
+ import * as $ from "svelte/internal/client";
4
+ import MinusIcon from "@lucide/svelte/icons/minus";
5
+ //#region src/components/InputOTP/Separator/Separator.svelte
6
+ var root = $.from_html(`<div><!></div>`);
7
+ function Separator($$anchor, $$props) {
8
+ $.push($$props, true);
9
+ let ref = $.prop($$props, "ref", 15, null), dataSlot = $.prop($$props, "data-slot", 3, "input-otp-separator"), restProps = $.rest_props($$props, [
10
+ "$$slots",
11
+ "$$events",
12
+ "$$legacy",
13
+ "ref",
14
+ "class",
15
+ "children",
16
+ "data-slot"
17
+ ]);
18
+ var div = root();
19
+ $.attribute_effect(div, () => ({
20
+ "data-slot": dataSlot(),
21
+ class: [__default__.separator, $$props.class],
22
+ ...restProps
23
+ }));
24
+ var node = $.child(div);
25
+ var consequent = ($$anchor) => {
26
+ var fragment = $.comment();
27
+ var node_1 = $.first_child(fragment);
28
+ $.snippet(node_1, () => $$props.children ?? $.noop);
29
+ $.append($$anchor, fragment);
30
+ };
31
+ var alternate = ($$anchor) => {
32
+ MinusIcon($$anchor, {});
33
+ };
34
+ $.if(node, ($$render) => {
35
+ if ($$props.children) $$render(consequent);
36
+ else $$render(alternate, -1);
37
+ });
38
+ $.reset(div);
39
+ $.bind_this(div, ($$value) => ref($$value), () => ref());
40
+ $.append($$anchor, div);
41
+ $.pop();
42
+ }
43
+ //#endregion
44
+ export { Separator as default };
@@ -0,0 +1,4 @@
1
+ import type { InputOTPSeparatorProps } from '../types';
2
+ declare const Separator: import("svelte").Component<InputOTPSeparatorProps, {}, "ref">;
3
+ type Separator = ReturnType<typeof Separator>;
4
+ export default Separator;
@@ -0,0 +1 @@
1
+ export { default as Separator } from './Separator.svelte';
@@ -0,0 +1,74 @@
1
+ import __default__ from "../styles.css.js";
2
+ import "svelte/internal/disclose-version";
3
+ import * as $ from "svelte/internal/client";
4
+ import { PinInput } from "bits-ui";
5
+ //#region src/components/InputOTP/Slot/Slot.svelte
6
+ var root_2 = $.from_html(`<div><div></div></div>`);
7
+ var root_1 = $.from_html(` <!>`, 1);
8
+ function Slot($$anchor, $$props) {
9
+ $.push($$props, true);
10
+ let ref = $.prop($$props, "ref", 15, null), dataSlot = $.prop($$props, "data-slot", 3, "input-otp-slot"), restProps = $.rest_props($$props, [
11
+ "$$slots",
12
+ "$$events",
13
+ "$$legacy",
14
+ "ref",
15
+ "cell",
16
+ "class",
17
+ "data-slot"
18
+ ]);
19
+ var fragment = $.comment();
20
+ var node = $.first_child(fragment);
21
+ {
22
+ let $0 = $.derived(() => [
23
+ __default__.slot,
24
+ $$props.cell.isActive && __default__.slotActive,
25
+ $$props.class
26
+ ]);
27
+ $.component(node, () => PinInput.Cell, ($$anchor, InputOTPPrimitive_Cell) => {
28
+ InputOTPPrimitive_Cell($$anchor, $.spread_props({
29
+ get cell() {
30
+ return $$props.cell;
31
+ },
32
+ get "data-slot"() {
33
+ return dataSlot();
34
+ },
35
+ get class() {
36
+ return $.get($0);
37
+ }
38
+ }, () => restProps, {
39
+ get ref() {
40
+ return ref();
41
+ },
42
+ set ref($$value) {
43
+ ref($$value);
44
+ },
45
+ children: ($$anchor, $$slotProps) => {
46
+ $.next();
47
+ var fragment_1 = root_1();
48
+ var text = $.first_child(fragment_1);
49
+ var node_1 = $.sibling(text);
50
+ var consequent = ($$anchor) => {
51
+ var div = root_2();
52
+ var div_1 = $.child(div);
53
+ $.reset(div);
54
+ $.template_effect(() => {
55
+ $.set_class(div, 1, $.clsx(__default__.caretWrapper));
56
+ $.set_class(div_1, 1, $.clsx(__default__.caret));
57
+ });
58
+ $.append($$anchor, div);
59
+ };
60
+ $.if(node_1, ($$render) => {
61
+ if ($$props.cell.hasFakeCaret) $$render(consequent);
62
+ });
63
+ $.template_effect(() => $.set_text(text, `${$$props.cell.char ?? ""} `));
64
+ $.append($$anchor, fragment_1);
65
+ },
66
+ $$slots: { default: true }
67
+ }));
68
+ });
69
+ }
70
+ $.append($$anchor, fragment);
71
+ $.pop();
72
+ }
73
+ //#endregion
74
+ export { Slot as default };
@@ -0,0 +1,4 @@
1
+ import { PinInput as InputOTPPrimitive } from 'bits-ui';
2
+ declare const Slot: import("svelte").Component<InputOTPPrimitive.CellProps, {}, "ref">;
3
+ type Slot = ReturnType<typeof Slot>;
4
+ export default Slot;
@@ -0,0 +1 @@
1
+ export { default as Slot } from './Slot.svelte';
@@ -0,0 +1,11 @@
1
+ import { Group } from './Group';
2
+ import Root from './InputOTP.svelte';
3
+ import { Separator } from './Separator';
4
+ import { Slot } from './Slot';
5
+ export declare const InputOTP: {
6
+ Root: typeof Root;
7
+ Group: typeof Group;
8
+ Slot: typeof Slot;
9
+ Separator: typeof Separator;
10
+ };
11
+ export type * from './types';
@@ -0,0 +1,13 @@
1
+ import Group from "./Group/Group.js";
2
+ import InputOTP$1 from "./InputOTP.js";
3
+ import Separator from "./Separator/Separator.js";
4
+ import Slot from "./Slot/Slot.js";
5
+ //#region src/components/InputOTP/index.ts
6
+ const InputOTP = {
7
+ Root: InputOTP$1,
8
+ Group,
9
+ Slot,
10
+ Separator
11
+ };
12
+ //#endregion
13
+ export { InputOTP };
@@ -0,0 +1,10 @@
1
+ declare const _default: {
2
+ caret: string;
3
+ caretWrapper: string;
4
+ group: string;
5
+ root: string;
6
+ separator: string;
7
+ slot: string;
8
+ slotActive: string;
9
+ };
10
+ export default _default;
@@ -0,0 +1,12 @@
1
+ //#region src/components/InputOTP/styles.css.ts
2
+ var __default__ = {
3
+ caret: "styles_caret__oe9d1a6",
4
+ caretWrapper: "styles_caretWrapper__oe9d1a4",
5
+ group: "styles_group__oe9d1a1",
6
+ root: "styles_root__oe9d1a0",
7
+ separator: "styles_separator__oe9d1a7",
8
+ slot: "styles_slot__oe9d1a2",
9
+ slotActive: "styles_slotActive__oe9d1a3"
10
+ };
11
+ //#endregion
12
+ export { __default__ as default };
@@ -0,0 +1,7 @@
1
+ import type { PinInput as InputOTPPrimitive } from 'bits-ui';
2
+ import type { HTMLAttributes } from 'svelte/elements';
3
+ import type { WithElementRef } from '../../types';
4
+ export type InputOTPProps = InputOTPPrimitive.RootProps;
5
+ export type InputOTPSlotProps = InputOTPPrimitive.CellProps;
6
+ export type InputOTPGroupProps = WithElementRef<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
7
+ export type InputOTPSeparatorProps = WithElementRef<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
@@ -0,0 +1,175 @@
1
+ import Typography from "../Typography/Typography.js";
2
+ import Tooltip from "../Tooltip/Tooltip.js";
3
+ import { OverflowTypographyStore } from "./store.svelte.js";
4
+ import { truncate, wrapper, wrapperAlignments } from "./styles.css.js";
5
+ import "svelte/internal/disclose-version";
6
+ import * as $ from "svelte/internal/client";
7
+ //#region src/components/OverflowTypography/OverflowTypography.svelte
8
+ var root_2 = $.from_html(`<div><!> <!></div>`);
9
+ function OverflowTypography($$anchor, $$props) {
10
+ $.push($$props, true);
11
+ const typography = ($$anchor) => {
12
+ var fragment = $.comment();
13
+ var node = $.first_child(fragment);
14
+ var consequent = ($$anchor) => {
15
+ var div = root_2();
16
+ var node_1 = $.child(div);
17
+ Typography(node_1, $.spread_props(() => restProps, {
18
+ get align() {
19
+ return align();
20
+ },
21
+ get class() {
22
+ return $.get(truncateClass);
23
+ },
24
+ component: "span",
25
+ display: "block",
26
+ get style() {
27
+ return $$props.style;
28
+ },
29
+ get ref() {
30
+ return ref();
31
+ },
32
+ set ref($$value) {
33
+ ref($$value);
34
+ },
35
+ children: ($$anchor, $$slotProps) => {
36
+ $.next();
37
+ var text_1 = $.text();
38
+ $.template_effect(() => $.set_text(text_1, store.firstPartLabel));
39
+ $.append($$anchor, text_1);
40
+ },
41
+ $$slots: { default: true }
42
+ }));
43
+ Typography($.sibling(node_1, 2), $.spread_props(() => restProps, {
44
+ get align() {
45
+ return align();
46
+ },
47
+ get class() {
48
+ return $$props.class;
49
+ },
50
+ component: "span",
51
+ get style() {
52
+ return $$props.style;
53
+ },
54
+ children: ($$anchor, $$slotProps) => {
55
+ $.next();
56
+ var text_2 = $.text();
57
+ $.template_effect(() => $.set_text(text_2, store.secondPartLabel));
58
+ $.append($$anchor, text_2);
59
+ },
60
+ $$slots: { default: true }
61
+ }));
62
+ $.reset(div);
63
+ $.template_effect(() => $.set_class(div, 1, $.clsx($.get(wrapperClass))));
64
+ $.append($$anchor, div);
65
+ };
66
+ var alternate = ($$anchor) => {
67
+ Typography($$anchor, $.spread_props(() => restProps, {
68
+ get align() {
69
+ return align();
70
+ },
71
+ get class() {
72
+ return $.get(contentClass);
73
+ },
74
+ display: "block",
75
+ get style() {
76
+ return $.get(contentStyle);
77
+ },
78
+ get ref() {
79
+ return ref();
80
+ },
81
+ set ref($$value) {
82
+ ref($$value);
83
+ },
84
+ children: ($$anchor, $$slotProps) => {
85
+ var fragment_4 = $.comment();
86
+ var node_3 = $.first_child(fragment_4);
87
+ var consequent_1 = ($$anchor) => {
88
+ var text_3 = $.text();
89
+ $.template_effect(() => $.set_text(text_3, $.get(label)));
90
+ $.append($$anchor, text_3);
91
+ };
92
+ var consequent_2 = ($$anchor) => {
93
+ var fragment_6 = $.comment();
94
+ var node_4 = $.first_child(fragment_6);
95
+ $.snippet(node_4, () => $$props.children);
96
+ $.append($$anchor, fragment_6);
97
+ };
98
+ $.if(node_3, ($$render) => {
99
+ if ($.get(label)) $$render(consequent_1);
100
+ else if (typeof $$props.children === "function") $$render(consequent_2, 1);
101
+ });
102
+ $.append($$anchor, fragment_4);
103
+ },
104
+ $$slots: { default: true }
105
+ }));
106
+ };
107
+ $.if(node, ($$render) => {
108
+ if (store.hasVisibleLastSymbols) $$render(consequent);
109
+ else $$render(alternate, -1);
110
+ });
111
+ $.append($$anchor, fragment);
112
+ };
113
+ let ref = $.prop($$props, "ref", 15, null), align = $.prop($$props, "align", 3, "left"), rowsCount = $.prop($$props, "rowsCount", 3, 1), visibleLastSymbolsCount = $.prop($$props, "visibleLastSymbolsCount", 3, 0), restProps = $.rest_props($$props, [
114
+ "$$slots",
115
+ "$$events",
116
+ "$$legacy",
117
+ "ref",
118
+ "align",
119
+ "children",
120
+ "class",
121
+ "style",
122
+ "rowsCount",
123
+ "text",
124
+ "tooltipProps",
125
+ "visibleLastSymbolsCount"
126
+ ]);
127
+ const label = $.derived(() => $$props.text ?? (typeof $$props.children === "string" ? $$props.children : void 0));
128
+ const store = new OverflowTypographyStore({
129
+ get text() {
130
+ return $.get(label);
131
+ },
132
+ get rowsCount() {
133
+ return rowsCount();
134
+ },
135
+ get visibleLastSymbolsCount() {
136
+ return visibleLastSymbolsCount();
137
+ }
138
+ });
139
+ const joinClasses = (...classes) => classes.filter(Boolean).join(" ");
140
+ const wrapperClass = $.derived(() => joinClasses(wrapper, wrapperAlignments[align()]));
141
+ const truncateClass = $.derived(() => joinClasses(truncate, $$props.class));
142
+ const contentClass = $.derived(() => joinClasses(truncate, store.hasMultipleRows && "styles_multipleRows__dpgi0n1", $$props.class));
143
+ const contentStyle = $.derived(() => [$$props.style, `--rows-count: ${store.rowsCount}`].filter(Boolean).join("; "));
144
+ const tooltipContent = $.derived(() => $$props.tooltipProps?.content ?? (store.isOverflowed ? $.get(label) : void 0));
145
+ const tooltipConfig = $.derived(() => ({
146
+ ...$$props.tooltipProps,
147
+ content: $.get(tooltipContent),
148
+ open: store.isOverflowed
149
+ }));
150
+ let cleanup;
151
+ $.user_effect(() => {
152
+ if (!ref()) return;
153
+ cleanup?.();
154
+ cleanup = store.attach(ref());
155
+ return () => {
156
+ cleanup?.();
157
+ cleanup = void 0;
158
+ };
159
+ });
160
+ $.user_effect(() => {
161
+ $.get(label);
162
+ rowsCount();
163
+ visibleLastSymbolsCount();
164
+ store.check();
165
+ });
166
+ Tooltip($$anchor, $.spread_props(() => $.get(tooltipConfig), {
167
+ children: ($$anchor, $$slotProps) => {
168
+ typography($$anchor);
169
+ },
170
+ $$slots: { default: true }
171
+ }));
172
+ $.pop();
173
+ }
174
+ //#endregion
175
+ export { OverflowTypography as default };
@@ -0,0 +1,4 @@
1
+ import type { OverflowTypographyProps } from './types';
2
+ declare const OverflowTypography: import("svelte").Component<OverflowTypographyProps, {}, "ref">;
3
+ type OverflowTypography = ReturnType<typeof OverflowTypography>;
4
+ export default OverflowTypography;
@@ -0,0 +1,2 @@
1
+ export { default as OverflowTypography } from './OverflowTypography.svelte';
2
+ export type { OverflowTypographyProps, OverflowTypographyTooltipProps, } from './types';
@@ -0,0 +1,22 @@
1
+ type Options = {
2
+ text?: string;
3
+ rowsCount?: number;
4
+ visibleLastSymbolsCount?: number;
5
+ };
6
+ export declare class OverflowTypographyStore {
7
+ #private;
8
+ isOverflowed: boolean;
9
+ constructor(options: Options);
10
+ get rowsCount(): number;
11
+ get hasVisibleLastSymbols(): boolean;
12
+ get hasMultipleRows(): boolean;
13
+ get firstPartLabel(): string;
14
+ get secondPartLabel(): string;
15
+ attach: (node: HTMLElement) => () => void;
16
+ check: () => void;
17
+ destroy(): void;
18
+ private get visibleLastSymbolsCount();
19
+ private get truncatedLabel();
20
+ private checkOverflow;
21
+ }
22
+ export {};
@@ -0,0 +1,84 @@
1
+ //#region src/components/OverflowTypography/store.svelte.ts
2
+ const DEFAULT_ROWS_COUNT = 1;
3
+ const RESIZE_DEBOUNCE_MS = 500;
4
+ const truncateString = (visibleLastSymbolsCount, label) => {
5
+ return {
6
+ firstPartLabel: label.slice(0, -visibleLastSymbolsCount),
7
+ secondPartLabel: label.slice(-visibleLastSymbolsCount)
8
+ };
9
+ };
10
+ var OverflowTypographyStore = class {
11
+ isOverflowed = $state(false);
12
+ #options;
13
+ #node;
14
+ #resizeObserver;
15
+ #resizeTimer;
16
+ constructor(options) {
17
+ this.#options = options;
18
+ }
19
+ get rowsCount() {
20
+ return this.#options.rowsCount ?? DEFAULT_ROWS_COUNT;
21
+ }
22
+ get hasVisibleLastSymbols() {
23
+ return Boolean(this.#options.text && this.visibleLastSymbolsCount > 0);
24
+ }
25
+ get hasMultipleRows() {
26
+ return this.hasVisibleLastSymbols ? false : this.rowsCount > 1;
27
+ }
28
+ get firstPartLabel() {
29
+ return this.truncatedLabel.firstPartLabel;
30
+ }
31
+ get secondPartLabel() {
32
+ return this.truncatedLabel.secondPartLabel;
33
+ }
34
+ attach = (node) => {
35
+ this.#node = node;
36
+ this.checkOverflow([{
37
+ target: node,
38
+ contentRect: node.getBoundingClientRect()
39
+ }]);
40
+ this.#resizeObserver = new ResizeObserver((entries) => {
41
+ clearTimeout(this.#resizeTimer);
42
+ this.#resizeTimer = setTimeout(() => {
43
+ this.checkOverflow(entries);
44
+ }, RESIZE_DEBOUNCE_MS);
45
+ });
46
+ this.#resizeObserver.observe(node);
47
+ return () => {
48
+ this.#resizeObserver?.unobserve(node);
49
+ this.destroy();
50
+ };
51
+ };
52
+ check = () => {
53
+ if (!this.#node) return;
54
+ this.checkOverflow([{
55
+ target: this.#node,
56
+ contentRect: this.#node.getBoundingClientRect()
57
+ }]);
58
+ };
59
+ destroy() {
60
+ clearTimeout(this.#resizeTimer);
61
+ this.#resizeObserver?.disconnect();
62
+ this.#resizeObserver = void 0;
63
+ this.#node = void 0;
64
+ }
65
+ get visibleLastSymbolsCount() {
66
+ return this.#options.visibleLastSymbolsCount ?? 0;
67
+ }
68
+ get truncatedLabel() {
69
+ if (!this.hasVisibleLastSymbols || !this.#options.text) return {
70
+ firstPartLabel: "",
71
+ secondPartLabel: ""
72
+ };
73
+ return truncateString(this.visibleLastSymbolsCount, this.#options.text);
74
+ }
75
+ checkOverflow(entries) {
76
+ const [{ target, contentRect }] = entries;
77
+ const isScrollHeightBigger = target.scrollHeight > Math.round(contentRect.height);
78
+ const isScrollWidthBigger = target.scrollWidth > Math.round(contentRect.width);
79
+ const isOverflowed = this.hasMultipleRows ? isScrollWidthBigger || isScrollHeightBigger : isScrollWidthBigger;
80
+ if (this.isOverflowed !== isOverflowed) this.isOverflowed = isOverflowed;
81
+ }
82
+ };
83
+ //#endregion
84
+ export { OverflowTypographyStore };
@@ -0,0 +1,5 @@
1
+ import type { TypographyAlign } from '../Typography';
2
+ export declare const truncate: string;
3
+ export declare const multipleRows: string;
4
+ export declare const wrapper: string;
5
+ export declare const wrapperAlignments: Record<TypographyAlign, string>;
@@ -0,0 +1,12 @@
1
+ //#region src/components/OverflowTypography/styles.css.ts
2
+ var multipleRows = "styles_multipleRows__dpgi0n1";
3
+ var truncate = "styles_truncate__dpgi0n0";
4
+ var wrapper = "styles_wrapper__dpgi0n2";
5
+ var wrapperAlignments = {
6
+ left: "styles_wrapperAlignments_left__dpgi0n3",
7
+ center: "styles_wrapperAlignments_center__dpgi0n4",
8
+ right: "styles_wrapperAlignments_right__dpgi0n5",
9
+ justify: "styles_wrapperAlignments_justify__dpgi0n6"
10
+ };
11
+ //#endregion
12
+ export { multipleRows, truncate, wrapper, wrapperAlignments };
@@ -0,0 +1,18 @@
1
+ import type { Snippet } from 'svelte';
2
+ import type { TooltipProps } from '../Tooltip';
3
+ import type { TypographyProps } from '../Typography';
4
+ export type OverflowTypographyTooltipProps = Omit<TooltipProps, 'children' | 'content'> & {
5
+ content?: TooltipProps['content'];
6
+ };
7
+ export type OverflowTypographyProps = Omit<TypographyProps, 'children' | 'ref'> & {
8
+ /** Максимальное количество отображаемых строк. */
9
+ rowsCount?: number;
10
+ /** Количество видимых символов в конце обрезанной строки. */
11
+ visibleLastSymbolsCount?: number;
12
+ /** Текст для обрезки и дефолтного содержимого tooltip. */
13
+ text?: string;
14
+ /** Пропсы для кастомизации tooltip. */
15
+ tooltipProps?: OverflowTypographyTooltipProps;
16
+ children?: Snippet<[]> | string;
17
+ ref?: HTMLElement | null;
18
+ };
@@ -1,6 +1,6 @@
1
1
  import Portal from "../Portal/Portal.js";
2
2
  import { TooltipStore } from "./store.svelte.js";
3
- import __default__ from "./styles.css.js";
3
+ import { arrow, content } from "./styles.css.js";
4
4
  import "svelte/internal/disclose-version";
5
5
  import * as $ from "svelte/internal/client";
6
6
  //#region src/components/Tooltip/Tooltip.svelte
@@ -9,7 +9,7 @@ var root_2 = $.from_html(`<div role="tooltip" data-slot="tooltip-content"><!> <!
9
9
  var root = $.from_html(`<span style="display: contents;" data-slot="tooltip-trigger"><!></span> <!>`, 1);
10
10
  function Tooltip($$anchor, $$props) {
11
11
  $.push($$props, true);
12
- let offset = $.prop($$props, "offset", 3, 10), placement = $.prop($$props, "placement", 3, "top"), arrow = $.prop($$props, "arrow", 3, false), delayDuration = $.prop($$props, "delayDuration", 3, 100);
12
+ let offset = $.prop($$props, "offset", 3, 10), placement = $.prop($$props, "placement", 3, "top"), arrow$1 = $.prop($$props, "arrow", 3, false), delayDuration = $.prop($$props, "delayDuration", 3, 100);
13
13
  const store = new TooltipStore({
14
14
  get placement() {
15
15
  return placement();
@@ -17,6 +17,9 @@ function Tooltip($$anchor, $$props) {
17
17
  get offset() {
18
18
  return offset();
19
19
  },
20
+ get open() {
21
+ return $$props.open;
22
+ },
20
23
  get delayDuration() {
21
24
  return delayDuration();
22
25
  }
@@ -55,13 +58,13 @@ function Tooltip($$anchor, $$props) {
55
58
  var consequent_1 = ($$anchor) => {
56
59
  var svg = root_5();
57
60
  $.template_effect(() => {
58
- $.set_class(svg, 0, $.clsx([__default__.arrow, $$props.arrowClass]));
61
+ $.set_class(svg, 0, $.clsx([arrow, $$props.arrowClass]));
59
62
  $.set_attribute(svg, "data-side", store.placement);
60
63
  });
61
64
  $.append($$anchor, svg);
62
65
  };
63
66
  $.if(node_4, ($$render) => {
64
- if (arrow()) $$render(consequent_1);
67
+ if (arrow$1()) $$render(consequent_1);
65
68
  });
66
69
  $.reset(div);
67
70
  $.attach(div, () => store.attachContent);
@@ -69,7 +72,7 @@ function Tooltip($$anchor, $$props) {
69
72
  $.set_attribute(div, "id", store.tooltipId);
70
73
  $.set_attribute(div, "data-state", store.open ? "open" : "closed");
71
74
  $.set_attribute(div, "data-side", store.placement);
72
- $.set_class(div, 1, $.clsx([__default__.content, $$props.contentClass]));
75
+ $.set_class(div, 1, $.clsx([content, $$props.contentClass]));
73
76
  styles_1 = $.set_style(div, "", styles_1, {
74
77
  position: "fixed",
75
78
  top: `${store.y ?? ""}px`,
@@ -88,7 +91,7 @@ function Tooltip($$anchor, $$props) {
88
91
  });
89
92
  };
90
93
  $.if(node_1, ($$render) => {
91
- if (store.visible) $$render(consequent_2);
94
+ if (store.visible && $$props.content != null && $$props.open !== false) $$render(consequent_2);
92
95
  });
93
96
  $.append($$anchor, fragment);
94
97
  $.pop();
@@ -1,11 +1,12 @@
1
1
  import type { TooltipProps } from './types';
2
- type Options = Pick<TooltipProps, 'delayDuration' | 'placement' | 'offset'>;
2
+ type Options = Pick<TooltipProps, 'delayDuration' | 'placement' | 'offset' | 'open'>;
3
3
  export declare class TooltipStore {
4
4
  #private;
5
5
  open: boolean;
6
6
  visible: boolean;
7
7
  x: number;
8
8
  y: number;
9
+ placement: NonNullable<import("@floating-ui/dom").Placement | undefined>;
9
10
  readonly tooltipId: string;
10
11
  private static active;
11
12
  private static readonly CLOSE_DURATION;
@@ -14,7 +15,6 @@ export declare class TooltipStore {
14
15
  private delayTimer;
15
16
  private closeTimer;
16
17
  constructor(options: Options);
17
- get placement(): import("@floating-ui/dom").Placement | undefined;
18
18
  show: () => void;
19
19
  hide: () => void;
20
20
  keepOpen: () => void;
@@ -22,5 +22,8 @@ export declare class TooltipStore {
22
22
  attachContent: (node: HTMLElement) => (() => void) | undefined;
23
23
  destroy(): void;
24
24
  private forceClose;
25
+ private get delayDuration();
26
+ private get offset();
27
+ private get preferredPlacement();
25
28
  }
26
29
  export {};
@@ -5,11 +5,8 @@ var TooltipStore = class TooltipStore {
5
5
  visible = $state(false);
6
6
  x = $state(0);
7
7
  y = $state(0);
8
- #options = $state({
9
- delayDuration: 300,
10
- placement: "top",
11
- offset: 8
12
- });
8
+ placement = $state("top");
9
+ #options;
13
10
  tooltipId = `tooltip-${Math.random().toString(36).slice(2, 11)}`;
14
11
  static active = null;
15
12
  static CLOSE_DURATION = 150;
@@ -18,15 +15,11 @@ var TooltipStore = class TooltipStore {
18
15
  delayTimer;
19
16
  closeTimer;
20
17
  constructor(options) {
21
- this.#options = {
22
- ...this.#options,
23
- ...options
24
- };
25
- }
26
- get placement() {
27
- return this.#options.placement;
18
+ this.#options = options;
19
+ this.placement = this.preferredPlacement;
28
20
  }
29
21
  show = () => {
22
+ if (this.#options.open === false) return;
30
23
  if (TooltipStore.active && TooltipStore.active !== this) TooltipStore.active.forceClose();
31
24
  clearTimeout(this.closeTimer);
32
25
  clearTimeout(this.delayTimer);
@@ -34,7 +27,7 @@ var TooltipStore = class TooltipStore {
34
27
  this.delayTimer = setTimeout(() => {
35
28
  this.visible = true;
36
29
  this.open = true;
37
- }, this.#options.delayDuration);
30
+ }, this.delayDuration);
38
31
  };
39
32
  hide = () => {
40
33
  clearTimeout(this.delayTimer);
@@ -73,17 +66,17 @@ var TooltipStore = class TooltipStore {
73
66
  this.cleanupAutoUpdate = autoUpdate(this.triggerEl, node, () => {
74
67
  if (!this.triggerEl) return;
75
68
  computePosition(this.triggerEl, node, {
76
- placement: this.#options.placement,
69
+ placement: this.preferredPlacement,
77
70
  strategy: "fixed",
78
71
  middleware: [
79
- offset({ mainAxis: this.#options.offset }),
72
+ offset({ mainAxis: this.offset }),
80
73
  flip(),
81
74
  shift({ padding: 8 })
82
75
  ]
83
76
  }).then(({ x, y, placement }) => {
84
77
  this.x = x;
85
78
  this.y = y;
86
- this.#options.placement = placement;
79
+ this.placement = placement;
87
80
  });
88
81
  });
89
82
  return () => {
@@ -103,6 +96,15 @@ var TooltipStore = class TooltipStore {
103
96
  this.cleanupAutoUpdate?.();
104
97
  this.cleanupAutoUpdate = void 0;
105
98
  }
99
+ get delayDuration() {
100
+ return this.#options.delayDuration ?? 300;
101
+ }
102
+ get offset() {
103
+ return this.#options.offset ?? 8;
104
+ }
105
+ get preferredPlacement() {
106
+ return this.#options.placement ?? "top";
107
+ }
106
108
  };
107
109
  //#endregion
108
110
  export { TooltipStore };
@@ -1,5 +1,2 @@
1
- declare const _default: {
2
- content: string;
3
- arrow: string;
4
- };
5
- export default _default;
1
+ export declare const content: string;
2
+ export declare const arrow: string;
@@ -1,7 +1,5 @@
1
1
  //#region src/components/Tooltip/styles.css.ts
2
- var __default__ = {
3
- content: "styles_content__1ovcrev8",
4
- arrow: "styles_arrow__1ovcrev9"
5
- };
2
+ var arrow = "styles_arrow__1ovcrev9";
3
+ var content = "styles_content__1ovcrev8";
6
4
  //#endregion
7
- export { __default__ as default };
5
+ export { arrow, content };
@@ -6,6 +6,7 @@ export type TooltipProps = {
6
6
  children?: Snippet<[]>;
7
7
  arrow?: boolean;
8
8
  offset?: number;
9
+ open?: boolean;
9
10
  arrowClass?: string;
10
11
  contentClass?: string;
11
12
  placement?: Placement;
@@ -4,7 +4,7 @@ import * as $ from "svelte/internal/client";
4
4
  //#region src/components/Typography/Typography.svelte
5
5
  function Typography($$anchor, $$props) {
6
6
  $.push($$props, true);
7
- let ref = $.prop($$props, "ref", 11, null), align = $.prop($$props, "align", 3, "left"), color = $.prop($$props, "color", 3, "primary"), decoration = $.prop($$props, "decoration", 3, "none"), display = $.prop($$props, "display", 3, "inline"), variant = $.prop($$props, "variant", 3, "body1"), weight = $.prop($$props, "weight", 3, "normal"), restProps = $.rest_props($$props, [
7
+ let ref = $.prop($$props, "ref", 15, null), align = $.prop($$props, "align", 3, "left"), color = $.prop($$props, "color", 3, "primary"), decoration = $.prop($$props, "decoration", 3, "none"), display = $.prop($$props, "display", 3, "inline"), variant = $.prop($$props, "variant", 3, "body1"), weight = $.prop($$props, "weight", 3, "normal"), restProps = $.rest_props($$props, [
8
8
  "$$slots",
9
9
  "$$events",
10
10
  "$$legacy",
@@ -38,7 +38,6 @@ function Typography($$anchor, $$props) {
38
38
  const TagComponent = $.derived(() => $$props.component || VARIANT_COMPONENT_MAP[variant()]);
39
39
  const mergedProps = $.derived(() => ({
40
40
  ...restProps,
41
- ref: ref(),
42
41
  class: [
43
42
  decorations[decoration()],
44
43
  variants[variant()],
@@ -54,6 +53,7 @@ function Typography($$anchor, $$props) {
54
53
  var fragment = $.comment();
55
54
  var node = $.first_child(fragment);
56
55
  $.element(node, () => $.get(TagComponent), false, ($$element, $$anchor) => {
56
+ $.bind_this($$element, ($$value) => ref($$value), () => ref());
57
57
  $.attribute_effect($$element, () => ({ ...$.get(mergedProps) }));
58
58
  var fragment_1 = $.comment();
59
59
  var node_1 = $.first_child(fragment_1);
@@ -20,8 +20,10 @@ export { Empty, type EmptyMediaVariant } from './Empty';
20
20
  export { Field, type FieldOrientation, type FieldVariants, } from './Field';
21
21
  export { Input, type InputProps, type InputType, } from './Input';
22
22
  export { InputGroup, type InputGroupAddonAlign, type InputGroupButtonSize, } from './InputGroup';
23
+ export { InputOTP, type InputOTPGroupProps, type InputOTPProps, type InputOTPSeparatorProps, type InputOTPSlotProps, } from './InputOTP';
23
24
  export { Item, type ItemProps, type ItemSize, type ItemVariant, } from './Item';
24
25
  export { Label } from './Label';
26
+ export { OverflowTypography, type OverflowTypographyProps, type OverflowTypographyTooltipProps, } from './OverflowTypography';
25
27
  export { Placeholder, type PlaceholderProps, type PlaceholderSize, } from './Placeholder';
26
28
  export { Popover, type PopoverProps } from './Popover';
27
29
  export { Portal } from './Portal';
@@ -26,14 +26,16 @@ import Label_1 from "./Label/Label.js";
26
26
  import { Field } from "./Field/index.js";
27
27
  import Input from "./Input/Input.js";
28
28
  import { InputGroup } from "./InputGroup/index.js";
29
+ import { InputOTP } from "./InputOTP/index.js";
29
30
  import { Item } from "./Item/index.js";
30
- import { Popover } from "./Popover/index.js";
31
31
  import Portal from "./Portal/Portal.js";
32
+ import Tooltip from "./Tooltip/Tooltip.js";
33
+ import OverflowTypography from "./OverflowTypography/OverflowTypography.js";
34
+ import { Popover } from "./Popover/index.js";
32
35
  import Slider from "./Slider/Slider.js";
33
36
  import RangeInput from "./RangeInput/RangeInput.js";
34
37
  import ScalableContainer from "./ScalableContainer/ScalableContainer.js";
35
38
  import { Select } from "./Select/index.js";
36
39
  import SliderInput from "./SliderInput/SliderInput.js";
37
40
  import { Tabs } from "./Tabs/index.js";
38
- import Tooltip from "./Tooltip/Tooltip.js";
39
- 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, Placeholder, Popover, Portal, RangeInput, ScalableContainer, Select, Separator, Slider, SliderInput, Spinner, Tabs, Tooltip, Typography, badgeVariants, buttonVariants };
41
+ 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 };
@@ -156,4 +156,4 @@ type StyleRule = WithQueries<StyleWithSelectors>;
156
156
  type ClassNames = string | Array<ClassNames>;
157
157
  type ComplexStyleRule = StyleRule | Array<StyleRule | ClassNames>;
158
158
  //#endregion
159
- export { type ComplexStyleRule };
159
+ export type { ComplexStyleRule };
@@ -0,0 +1,19 @@
1
+ import { InputOTP } from '../components';
2
+ 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> {
3
+ new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
4
+ $$bindings?: Bindings;
5
+ } & Exports;
6
+ (internal: unknown, props: {
7
+ $$events?: Events;
8
+ $$slots?: Slots;
9
+ }): Exports & {
10
+ $set?: any;
11
+ $on?: any;
12
+ };
13
+ z_$$bindings?: Bindings;
14
+ }
15
+ declare const InputOTP: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
16
+ [evt: string]: CustomEvent<any>;
17
+ }, {}, {}, string>;
18
+ type InputOTP = InstanceType<typeof InputOTP>;
19
+ export default InputOTP;
@@ -0,0 +1,19 @@
1
+ import { OverflowTypography } from '../components';
2
+ 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> {
3
+ new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
4
+ $$bindings?: Bindings;
5
+ } & Exports;
6
+ (internal: unknown, props: {
7
+ $$events?: Events;
8
+ $$slots?: Slots;
9
+ }): Exports & {
10
+ $set?: any;
11
+ $on?: any;
12
+ };
13
+ z_$$bindings?: Bindings;
14
+ }
15
+ declare const OverflowTypography: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
16
+ [evt: string]: CustomEvent<any>;
17
+ }, {}, {}, string>;
18
+ type OverflowTypography = InstanceType<typeof OverflowTypography>;
19
+ export default OverflowTypography;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@max-ts/svelte",
3
- "version": "1.12.6",
3
+ "version": "1.14.0",
4
4
  "type": "module",
5
5
  "description": "Svelte component library.",
6
6
  "author": "Tsepelev Maksim",
@@ -36,39 +36,39 @@
36
36
  "svelte": "^5.53.5"
37
37
  },
38
38
  "devDependencies": {
39
- "@biomejs/biome": "^2.4.14",
39
+ "@biomejs/biome": "^2.4.15",
40
40
  "@changesets/cli": "^2.31.0",
41
- "@chromatic-com/storybook": "^5.1.2",
41
+ "@chromatic-com/storybook": "^5.2.1",
42
42
  "@internationalized/date": "^3.12.1",
43
- "@storybook/addon-a11y": "^10.3.6",
44
- "@storybook/addon-docs": "^10.3.6",
43
+ "@storybook/addon-a11y": "^10.4.1",
44
+ "@storybook/addon-docs": "^10.4.1",
45
45
  "@storybook/addon-svelte-csf": "^5.1.2",
46
- "@storybook/addon-vitest": "^10.3.6",
47
- "@storybook/sveltekit": "^10.3.6",
48
- "@sveltejs/vite-plugin-svelte": "^7.0.0",
46
+ "@storybook/addon-vitest": "^10.4.1",
47
+ "@storybook/sveltekit": "^10.4.1",
48
+ "@sveltejs/vite-plugin-svelte": "^7.1.2",
49
49
  "@tsconfig/svelte": "^5.0.8",
50
- "@tsdown/css": "^0.21.10",
51
- "@types/node": "^25.6.0",
50
+ "@tsdown/css": "^0.22.0",
51
+ "@types/node": "^25.9.1",
52
52
  "@vanilla-extract/css": "^1.20.1",
53
53
  "@vanilla-extract/rollup-plugin": "^1.5.3",
54
54
  "@vanilla-extract/vite-plugin": "^5.2.2",
55
- "@vitest/browser-playwright": "^4.1.5",
56
- "bumpp": "^11.0.1",
55
+ "@vitest/browser-playwright": "^4.1.7",
56
+ "bumpp": "^11.1.0",
57
57
  "rollup-plugin-svelte": "^7.2.3",
58
- "storybook": "^10.3.6",
59
- "svelte": "^5.55.5",
60
- "svelte-check": "^4.4.7",
61
- "svelte2tsx": "^0.7.54",
62
- "tsdown": "0.21.10",
58
+ "storybook": "^10.4.1",
59
+ "svelte": "^5.55.9",
60
+ "svelte-check": "^4.4.8",
61
+ "svelte2tsx": "^0.7.55",
62
+ "tsdown": "0.22.0",
63
63
  "typescript": "^6.0.3",
64
- "vite": "^8.0.10",
64
+ "vite": "^8.0.14",
65
65
  "vite-tsconfig-paths": "^6.1.1",
66
- "vitest": "^4.1.5",
66
+ "vitest": "^4.1.7",
67
67
  "vitest-browser-svelte": "^2.1.1"
68
68
  },
69
69
  "dependencies": {
70
70
  "@floating-ui/dom": "^1.7.6",
71
- "@lucide/svelte": "^1.14.0",
71
+ "@lucide/svelte": "^1.16.0",
72
72
  "bits-ui": "^2.18.1"
73
73
  },
74
74
  "scripts": {