@vkzstudio/muza-ui 1.0.45 → 1.0.46
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.
- package/dist/components/Accordion/Accordion.stories.d.ts.map +1 -1
- package/dist/components/Button/Button.stories.d.ts.map +1 -1
- package/dist/components/Card/Card.d.ts +63 -0
- package/dist/components/Card/Card.d.ts.map +1 -0
- package/dist/components/Card/Card.js +67 -0
- package/dist/components/Card/Card.stories.d.ts +13 -0
- package/dist/components/Card/Card.stories.d.ts.map +1 -0
- package/dist/components/Card/index.d.ts +2 -0
- package/dist/components/Card/index.d.ts.map +1 -0
- package/dist/components/Carousel/Carousel.d.ts +140 -0
- package/dist/components/Carousel/Carousel.d.ts.map +1 -0
- package/dist/components/Carousel/Carousel.js +241 -0
- package/dist/components/Carousel/Carousel.stories.d.ts +13 -0
- package/dist/components/Carousel/Carousel.stories.d.ts.map +1 -0
- package/dist/components/Carousel/index.d.ts +2 -0
- package/dist/components/Carousel/index.d.ts.map +1 -0
- package/dist/components/DataTable/DataTable.stories.d.ts.map +1 -1
- package/dist/components/DropdownMenu/DropdownMenu.js +1 -1
- package/dist/components/EdgeButton/EdgeButton.stories.d.ts.map +1 -1
- package/dist/components/Flex/Flex.d.ts +372 -1
- package/dist/components/Flex/Flex.d.ts.map +1 -1
- package/dist/components/Flex/Flex.js +61 -63
- package/dist/components/Flex/Flex.stories.d.ts.map +1 -1
- package/dist/components/Icons/Icons.stories.d.ts.map +1 -1
- package/dist/components/Icons/LogosAndBadges.stories.d.ts.map +1 -1
- package/dist/components/MultiSelect/MultiSelect.stories.d.ts.map +1 -1
- package/dist/components/MuzaUIProvider/MuzaUIProvider.stories.d.ts.map +1 -1
- package/dist/components/Pagination/Pagination.js +1 -1
- package/dist/components/Pagination/Pagination.stories.d.ts.map +1 -1
- package/dist/components/Progress/Progress.d.ts +49 -0
- package/dist/components/Progress/Progress.d.ts.map +1 -0
- package/dist/components/Progress/Progress.js +64 -0
- package/dist/components/Progress/Progress.stories.d.ts +13 -0
- package/dist/components/Progress/Progress.stories.d.ts.map +1 -0
- package/dist/components/Progress/index.d.ts +2 -0
- package/dist/components/Progress/index.d.ts.map +1 -0
- package/dist/components/Reorderable/Reorderable.stories.d.ts.map +1 -1
- package/dist/components/Sheet/Sheet.d.ts +89 -0
- package/dist/components/Sheet/Sheet.d.ts.map +1 -0
- package/dist/components/Sheet/Sheet.js +189 -0
- package/dist/components/Sheet/Sheet.stories.d.ts +20 -0
- package/dist/components/Sheet/Sheet.stories.d.ts.map +1 -0
- package/dist/components/Sheet/index.d.ts +2 -0
- package/dist/components/Sheet/index.d.ts.map +1 -0
- package/dist/components/Slider/Slider.d.ts +65 -0
- package/dist/components/Slider/Slider.d.ts.map +1 -0
- package/dist/components/Slider/Slider.js +134 -0
- package/dist/components/Slider/Slider.stories.d.ts +12 -0
- package/dist/components/Slider/Slider.stories.d.ts.map +1 -0
- package/dist/components/Slider/index.d.ts +2 -0
- package/dist/components/Slider/index.d.ts.map +1 -0
- package/dist/components/TextEditor/TextEditor.stories.d.ts.map +1 -1
- package/dist/components/Typography/Typography.stories.d.ts.map +1 -1
- package/dist/components/index.d.ts +5 -0
- package/dist/components/index.d.ts.map +1 -1
- package/dist/globals.css +1 -0
- package/dist/index.js +310 -277
- package/dist/muza-ui.css +1 -1
- package/dist/styles/primitives.css +5 -1
- package/dist/styles/token-colors.css +175 -27
- package/dist/styles/token-sizes.css +594 -257
- package/dist/styles/typography.css +36 -7
- package/dist/translations/locales/cs.d.ts.map +1 -1
- package/dist/translations/locales/cs.js +17 -0
- package/dist/translations/locales/en.d.ts.map +1 -1
- package/dist/translations/locales/en.js +17 -0
- package/dist/translations/locales/sk.d.ts.map +1 -1
- package/dist/translations/locales/sk.js +19 -2
- package/dist/translations/types.d.ts +42 -0
- package/dist/translations/types.d.ts.map +1 -1
- package/dist/utils/cn.d.ts.map +1 -1
- package/dist/utils/cn.js +8 -2
- package/package.json +6 -3
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
import { jsx as e } from "react/jsx-runtime";
|
|
2
|
+
import { forwardRef as b } from "react";
|
|
3
|
+
import * as t from "@radix-ui/react-progress";
|
|
4
|
+
import { cva as u } from "class-variance-authority";
|
|
5
|
+
import { useMuzaTranslations as h } from "../../translations/TranslationContext.js";
|
|
6
|
+
import { cn as i } from "../../utils/cn.js";
|
|
7
|
+
const v = u(
|
|
8
|
+
[
|
|
9
|
+
"group relative w-full overflow-hidden rounded-comp-progress-radius",
|
|
10
|
+
"bg-comp-progress-bg-track-def",
|
|
11
|
+
"data-[disabled]:bg-comp-progress-bg-track-disabled"
|
|
12
|
+
],
|
|
13
|
+
{
|
|
14
|
+
variants: {
|
|
15
|
+
size: {
|
|
16
|
+
sm: "h-comp-progress-h-sm",
|
|
17
|
+
md: "h-comp-progress-h-md",
|
|
18
|
+
lg: "h-comp-progress-h-lg"
|
|
19
|
+
}
|
|
20
|
+
},
|
|
21
|
+
defaultVariants: { size: "md" }
|
|
22
|
+
}
|
|
23
|
+
), w = i(
|
|
24
|
+
"h-full w-full flex-1 rounded-comp-progress-radius transition-transform duration-500 ease-out",
|
|
25
|
+
"bg-comp-progress-bg-fill-def",
|
|
26
|
+
"group-data-[disabled]:bg-comp-progress-bg-fill-disabled"
|
|
27
|
+
), P = b(
|
|
28
|
+
({
|
|
29
|
+
className: l,
|
|
30
|
+
value: r,
|
|
31
|
+
max: s = 100,
|
|
32
|
+
size: d = "md",
|
|
33
|
+
ariaLabel: m,
|
|
34
|
+
disabled: o = !1,
|
|
35
|
+
...p
|
|
36
|
+
}, n) => {
|
|
37
|
+
const c = h(), g = m ?? c.progress.ariaLabel, a = typeof r == "number" ? Math.min(Math.max(r, 0), s) : null, f = a == null ? 0 : a / s * 100;
|
|
38
|
+
return /* @__PURE__ */ e(
|
|
39
|
+
t.Root,
|
|
40
|
+
{
|
|
41
|
+
ref: n,
|
|
42
|
+
value: r ?? void 0,
|
|
43
|
+
max: s,
|
|
44
|
+
"aria-label": g,
|
|
45
|
+
"aria-disabled": o || void 0,
|
|
46
|
+
"data-disabled": o ? "" : void 0,
|
|
47
|
+
className: i(v({ size: d }), l),
|
|
48
|
+
...p,
|
|
49
|
+
children: /* @__PURE__ */ e(
|
|
50
|
+
t.Indicator,
|
|
51
|
+
{
|
|
52
|
+
className: w,
|
|
53
|
+
style: { transform: `translateX(-${100 - f}%)` }
|
|
54
|
+
}
|
|
55
|
+
)
|
|
56
|
+
}
|
|
57
|
+
);
|
|
58
|
+
}
|
|
59
|
+
);
|
|
60
|
+
P.displayName = "Progress";
|
|
61
|
+
export {
|
|
62
|
+
P as Progress,
|
|
63
|
+
v as progressVariants
|
|
64
|
+
};
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { Meta, StoryObj } from '@storybook/react-vite';
|
|
2
|
+
import { Progress } from './Progress';
|
|
3
|
+
declare const meta: Meta<typeof Progress>;
|
|
4
|
+
export default meta;
|
|
5
|
+
type Story = StoryObj<typeof Progress>;
|
|
6
|
+
export declare const Default: Story;
|
|
7
|
+
export declare const AllSizes: Story;
|
|
8
|
+
export declare const AllStates: Story;
|
|
9
|
+
export declare const Disabled: Story;
|
|
10
|
+
export declare const Animated: Story;
|
|
11
|
+
export declare const SizeSmall: Story;
|
|
12
|
+
export declare const SizeLarge: Story;
|
|
13
|
+
//# sourceMappingURL=Progress.stories.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Progress.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Progress/Progress.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAE3D,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAErC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,QAAQ,CAoC/B,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,QAAQ,CAAC,CAAA;AAMtC,eAAO,MAAM,OAAO,EAAE,KAiBrB,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAiBtB,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KAoBvB,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAWtB,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAwBtB,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KAOvB,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KAOvB,CAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Progress/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Reorderable.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Reorderable/Reorderable.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAY3D,OAAO,EACL,gBAAgB,EAIjB,MAAM,eAAe,CAAA;
|
|
1
|
+
{"version":3,"file":"Reorderable.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Reorderable/Reorderable.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAY3D,OAAO,EACL,gBAAgB,EAIjB,MAAM,eAAe,CAAA;AAyFtB,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,gBAAgB,CAsFvC,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,gBAAgB,CAAC,CAAA;AAU9C,eAAO,MAAM,OAAO,EAAE,KAiCrB,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAsCxB,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAuCtB,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,KAmC5B,CAAA;AASD,eAAO,MAAM,SAAS,EAAE,KA2FvB,CAAA;AAgBD,eAAO,MAAM,cAAc,EAAE,KAsC5B,CAAA;AAmBD,eAAO,MAAM,aAAa,EAAE,KAgD3B,CAAA;AAGD,eAAO,MAAM,aAAa,EAAE,KA+E3B,CAAA;AA4BD,eAAO,MAAM,UAAU,EAAE,KAkDxB,CAAA;AA+GD,eAAO,MAAM,QAAQ,EAAE,KAsFtB,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAsC3B,CAAA"}
|
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
import { ComponentPropsWithoutRef, ReactNode } from 'react';
|
|
2
|
+
import { VariantProps } from 'class-variance-authority';
|
|
3
|
+
import * as SheetPrimitive from '@radix-ui/react-dialog';
|
|
4
|
+
/**
|
|
5
|
+
* Props for the Sheet root component. Controls open state and modality.
|
|
6
|
+
* Extends Radix Dialog Root props.
|
|
7
|
+
*/
|
|
8
|
+
export interface SheetProps extends React.ComponentProps<typeof SheetPrimitive.Root> {
|
|
9
|
+
/** Controlled open state of the sheet. Pair with `onOpenChange` for controlled usage. */
|
|
10
|
+
open?: boolean;
|
|
11
|
+
/** Initial open state for uncontrolled usage. @default false */
|
|
12
|
+
defaultOpen?: boolean;
|
|
13
|
+
/** Fires when the open state changes. Receives the new open state. */
|
|
14
|
+
onOpenChange?: (open: boolean) => void;
|
|
15
|
+
/**
|
|
16
|
+
* Controls whether the sheet blocks interaction with page content behind it.
|
|
17
|
+
* When `true`, renders a backdrop overlay and traps focus inside the sheet.
|
|
18
|
+
* @default true
|
|
19
|
+
*/
|
|
20
|
+
modal?: boolean;
|
|
21
|
+
}
|
|
22
|
+
declare const Sheet: React.FC<SheetProps>;
|
|
23
|
+
declare const SheetTrigger: import('react').ForwardRefExoticComponent<SheetPrimitive.DialogTriggerProps & import('react').RefAttributes<HTMLButtonElement>>;
|
|
24
|
+
declare const SheetPortal: import('react').FC<SheetPrimitive.DialogPortalProps>;
|
|
25
|
+
declare const SheetClose: import('react').ForwardRefExoticComponent<SheetPrimitive.DialogCloseProps & import('react').RefAttributes<HTMLButtonElement>>;
|
|
26
|
+
declare const SheetTitle: import('react').ForwardRefExoticComponent<SheetPrimitive.DialogTitleProps & import('react').RefAttributes<HTMLHeadingElement>>;
|
|
27
|
+
declare const SheetDescription: import('react').ForwardRefExoticComponent<SheetPrimitive.DialogDescriptionProps & import('react').RefAttributes<HTMLParagraphElement>>;
|
|
28
|
+
declare const SheetOverlay: import('react').ForwardRefExoticComponent<Omit<SheetPrimitive.DialogOverlayProps & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
|
|
29
|
+
export declare const sheetContentVariants: (props?: ({
|
|
30
|
+
side?: "bottom" | "left" | "right" | "top" | null | undefined;
|
|
31
|
+
size?: "small" | "medium" | "large" | null | undefined;
|
|
32
|
+
} & import('class-variance-authority/types').ClassProp) | undefined) => string;
|
|
33
|
+
/**
|
|
34
|
+
* Props for the SheetContent component. Renders the slide-out panel with
|
|
35
|
+
* backdrop and side-aware slide-in/out animations.
|
|
36
|
+
*/
|
|
37
|
+
export interface SheetContentProps extends ComponentPropsWithoutRef<typeof SheetPrimitive.Content>, Omit<VariantProps<typeof sheetContentVariants>, 'side' | 'size'> {
|
|
38
|
+
/**
|
|
39
|
+
* Edge of the viewport the sheet slides in from. Determines the slide
|
|
40
|
+
* direction and which corners are rounded.
|
|
41
|
+
* @default 'right'
|
|
42
|
+
*/
|
|
43
|
+
side?: 'top' | 'right' | 'bottom' | 'left';
|
|
44
|
+
/**
|
|
45
|
+
* Controls panel size — width for `left`/`right` sides, height for
|
|
46
|
+
* `top`/`bottom` sides.
|
|
47
|
+
* @default 'medium'
|
|
48
|
+
*/
|
|
49
|
+
size?: 'small' | 'medium' | 'large';
|
|
50
|
+
}
|
|
51
|
+
declare const SheetContent: import('react').ForwardRefExoticComponent<SheetContentProps & import('react').RefAttributes<HTMLDivElement>>;
|
|
52
|
+
/**
|
|
53
|
+
* Props for the SheetHeader component. Renders a styled header with an
|
|
54
|
+
* optional icon, an accessible title (rendered via Radix `Dialog.Title`), and
|
|
55
|
+
* a close button. Extends `<div>` attributes (without `title`, which is
|
|
56
|
+
* repurposed for the sheet title content).
|
|
57
|
+
*/
|
|
58
|
+
export interface SheetHeaderProps extends Omit<ComponentPropsWithoutRef<'div'>, 'title'> {
|
|
59
|
+
/** Optional icon element displayed before the title. */
|
|
60
|
+
icon?: ReactNode;
|
|
61
|
+
/**
|
|
62
|
+
* Sheet title content. Falls back to `children` when not provided so the
|
|
63
|
+
* common case of `<SheetHeader>Title</SheetHeader>` keeps working.
|
|
64
|
+
*/
|
|
65
|
+
title?: ReactNode;
|
|
66
|
+
/** Hides the close button in the header. @default false */
|
|
67
|
+
hideCloseButton?: boolean;
|
|
68
|
+
/**
|
|
69
|
+
* Accessible label for the close button. Falls back to the
|
|
70
|
+
* `sheet.closeAriaLabel` translation (English default: `'Close'`).
|
|
71
|
+
*/
|
|
72
|
+
closeAriaLabel?: string;
|
|
73
|
+
}
|
|
74
|
+
declare const SheetHeader: import('react').ForwardRefExoticComponent<SheetHeaderProps & import('react').RefAttributes<HTMLDivElement>>;
|
|
75
|
+
/**
|
|
76
|
+
* Props for the SheetBody component. Scrollable main content area rendered
|
|
77
|
+
* between `SheetHeader` and `SheetFooter`. Extends standard `<div>` attributes.
|
|
78
|
+
*/
|
|
79
|
+
export type SheetBodyProps = ComponentPropsWithoutRef<'div'>;
|
|
80
|
+
declare const SheetBody: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
|
|
81
|
+
/**
|
|
82
|
+
* Props for the SheetFooter component. Renders a fixed footer area for action
|
|
83
|
+
* buttons with a top border separating it from `SheetBody`. Extends standard
|
|
84
|
+
* `<div>` attributes.
|
|
85
|
+
*/
|
|
86
|
+
export type SheetFooterProps = ComponentPropsWithoutRef<'div'>;
|
|
87
|
+
declare const SheetFooter: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
|
|
88
|
+
export { Sheet, SheetPortal, SheetOverlay, SheetClose, SheetTrigger, SheetContent, SheetHeader, SheetBody, SheetFooter, SheetTitle, SheetDescription, };
|
|
89
|
+
//# sourceMappingURL=Sheet.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Sheet.d.ts","sourceRoot":"","sources":["../../../src/components/Sheet/Sheet.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,wBAAwB,EAE7B,KAAK,SAAS,EAEf,MAAM,OAAO,CAAA;AACd,OAAO,KAAK,cAAc,MAAM,wBAAwB,CAAA;AACxD,OAAO,EAAE,KAAK,YAAY,EAAO,MAAM,0BAA0B,CAAA;AAOjE;;;GAGG;AACH,MAAM,WAAW,UACf,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,IAAI,CAAC;IACxD,yFAAyF;IACzF,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,gEAAgE;IAChE,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,sEAAsE;IACtE,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACtC;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB;AAED,QAAA,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAAuB,CAAA;AACvD,QAAA,MAAM,YAAY,iIAAyB,CAAA;AAC3C,QAAA,MAAM,WAAW,sDAAwB,CAAA;AACzC,QAAA,MAAM,UAAU,+HAAuB,CAAA;AACvC,QAAA,MAAM,UAAU,gIAAuB,CAAA;AACvC,QAAA,MAAM,gBAAgB,wIAA6B,CAAA;AAEnD,QAAA,MAAM,YAAY,2LAYhB,CAAA;AAGF,eAAO,MAAM,oBAAoB;;;8EAuDhC,CAAA;AAED;;;GAGG;AACH,MAAM,WAAW,iBACf,SAAQ,wBAAwB,CAAC,OAAO,cAAc,CAAC,OAAO,CAAC,EAC7D,IAAI,CAAC,YAAY,CAAC,OAAO,oBAAoB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAClE;;;;OAIG;IACH,IAAI,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAA;IAC1C;;;;OAIG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;CACpC;AAED,QAAA,MAAM,YAAY,8GAchB,CAAA;AAGF;;;;;GAKG;AACH,MAAM,WAAW,gBACf,SAAQ,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC;IACtD,wDAAwD;IACxD,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,2DAA2D;IAC3D,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAA;CACxB;AAED,QAAA,MAAM,WAAW,6GAyDhB,CAAA;AAGD;;;GAGG;AACH,MAAM,MAAM,cAAc,GAAG,wBAAwB,CAAC,KAAK,CAAC,CAAA;AAE5D,QAAA,MAAM,SAAS,2MAed,CAAA;AAGD;;;;GAIG;AACH,MAAM,MAAM,gBAAgB,GAAG,wBAAwB,CAAC,KAAK,CAAC,CAAA;AAE9D,QAAA,MAAM,WAAW,2MAgBhB,CAAA;AAGD,OAAO,EACL,KAAK,EACL,WAAW,EACX,YAAY,EACZ,UAAU,EACV,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,SAAS,EACT,WAAW,EACX,UAAU,EACV,gBAAgB,GACjB,CAAA"}
|
|
@@ -0,0 +1,189 @@
|
|
|
1
|
+
import { jsx as o, jsxs as p } from "react/jsx-runtime";
|
|
2
|
+
import { forwardRef as l } from "react";
|
|
3
|
+
import * as e from "@radix-ui/react-dialog";
|
|
4
|
+
import { cva as g } from "class-variance-authority";
|
|
5
|
+
import { typographyVariants as y } from "../Typography/Typography.js";
|
|
6
|
+
import { useMuzaTranslations as x } from "../../translations/TranslationContext.js";
|
|
7
|
+
import { cn as i } from "../../utils/cn.js";
|
|
8
|
+
import { Flex as n } from "../Flex/Flex.js";
|
|
9
|
+
import { XClose as N } from "../Icons/CustomIcons.js";
|
|
10
|
+
const P = e.Root, B = e.Trigger, v = e.Portal, H = e.Close, R = e.Title, M = e.Description, c = l(({ className: a, ...t }, s) => /* @__PURE__ */ o(
|
|
11
|
+
e.Overlay,
|
|
12
|
+
{
|
|
13
|
+
ref: s,
|
|
14
|
+
className: i(
|
|
15
|
+
"fixed inset-0 z-50 bg-surface-base-overlay data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0",
|
|
16
|
+
a
|
|
17
|
+
),
|
|
18
|
+
...t
|
|
19
|
+
}
|
|
20
|
+
));
|
|
21
|
+
c.displayName = e.Overlay.displayName;
|
|
22
|
+
const w = g(
|
|
23
|
+
"fixed z-50 flex flex-col bg-comp-sheet-bg-def text-comp-sheet-text-def shadow-lg transition ease-in-out outline-none data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:animate-in data-[state=open]:duration-500",
|
|
24
|
+
{
|
|
25
|
+
variants: {
|
|
26
|
+
side: {
|
|
27
|
+
top: "inset-x-0 top-0 rounded-b-comp-sheet-radius border-b border-stroke-base-primary data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
|
|
28
|
+
bottom: "inset-x-0 bottom-0 rounded-t-comp-sheet-radius border-t border-stroke-base-primary data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
|
|
29
|
+
left: "inset-y-0 left-0 h-full rounded-r-comp-sheet-radius border-r border-stroke-base-primary data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left",
|
|
30
|
+
right: "inset-y-0 right-0 h-full rounded-l-comp-sheet-radius border-l border-stroke-base-primary data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right"
|
|
31
|
+
},
|
|
32
|
+
size: {
|
|
33
|
+
small: "",
|
|
34
|
+
medium: "",
|
|
35
|
+
large: ""
|
|
36
|
+
}
|
|
37
|
+
},
|
|
38
|
+
compoundVariants: [
|
|
39
|
+
{
|
|
40
|
+
side: ["left", "right"],
|
|
41
|
+
size: "small",
|
|
42
|
+
className: "w-full max-w-comp-sheet-w-sm"
|
|
43
|
+
},
|
|
44
|
+
{
|
|
45
|
+
side: ["left", "right"],
|
|
46
|
+
size: "medium",
|
|
47
|
+
className: "w-full max-w-comp-sheet-w-md"
|
|
48
|
+
},
|
|
49
|
+
{
|
|
50
|
+
side: ["left", "right"],
|
|
51
|
+
size: "large",
|
|
52
|
+
className: "w-full max-w-comp-sheet-w-lg"
|
|
53
|
+
},
|
|
54
|
+
{
|
|
55
|
+
side: ["top", "bottom"],
|
|
56
|
+
size: "small",
|
|
57
|
+
className: "h-comp-sheet-h-sm"
|
|
58
|
+
},
|
|
59
|
+
{
|
|
60
|
+
side: ["top", "bottom"],
|
|
61
|
+
size: "medium",
|
|
62
|
+
className: "h-comp-sheet-h-md"
|
|
63
|
+
},
|
|
64
|
+
{
|
|
65
|
+
side: ["top", "bottom"],
|
|
66
|
+
size: "large",
|
|
67
|
+
className: "h-comp-sheet-h-lg"
|
|
68
|
+
}
|
|
69
|
+
],
|
|
70
|
+
defaultVariants: {
|
|
71
|
+
side: "right",
|
|
72
|
+
size: "medium"
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
), z = l(({ className: a, children: t, side: s = "right", size: r = "medium", ...m }, d) => /* @__PURE__ */ p(v, { children: [
|
|
76
|
+
/* @__PURE__ */ o(c, {}),
|
|
77
|
+
/* @__PURE__ */ o(
|
|
78
|
+
e.Content,
|
|
79
|
+
{
|
|
80
|
+
ref: d,
|
|
81
|
+
className: i(w({ side: s, size: r }), a),
|
|
82
|
+
...m,
|
|
83
|
+
children: t
|
|
84
|
+
}
|
|
85
|
+
)
|
|
86
|
+
] }));
|
|
87
|
+
z.displayName = e.Content.displayName;
|
|
88
|
+
const S = l(
|
|
89
|
+
({
|
|
90
|
+
className: a,
|
|
91
|
+
icon: t,
|
|
92
|
+
children: s,
|
|
93
|
+
title: r,
|
|
94
|
+
hideCloseButton: m = !1,
|
|
95
|
+
closeAriaLabel: d,
|
|
96
|
+
...h
|
|
97
|
+
}, f) => {
|
|
98
|
+
const u = x(), b = d ?? u.sheet.closeAriaLabel;
|
|
99
|
+
return /* @__PURE__ */ p(
|
|
100
|
+
n,
|
|
101
|
+
{
|
|
102
|
+
ref: f,
|
|
103
|
+
align: "center",
|
|
104
|
+
gap: "lg",
|
|
105
|
+
className: i(
|
|
106
|
+
"border-b border-stroke-base-primary px-comp-sheet-p py-comp-sheet-p-ver-def",
|
|
107
|
+
a
|
|
108
|
+
),
|
|
109
|
+
...h,
|
|
110
|
+
children: [
|
|
111
|
+
t && /* @__PURE__ */ o("span", { className: "text-surface-brand-primary [&>svg]:size-icon-medium", children: t }),
|
|
112
|
+
/* @__PURE__ */ o(
|
|
113
|
+
e.Title,
|
|
114
|
+
{
|
|
115
|
+
className: i(
|
|
116
|
+
"text-text-primary min-w-0 flex-1",
|
|
117
|
+
y({
|
|
118
|
+
variant: "title",
|
|
119
|
+
size: "md",
|
|
120
|
+
weight: "medium",
|
|
121
|
+
fixY: !0
|
|
122
|
+
})
|
|
123
|
+
),
|
|
124
|
+
children: r ?? s
|
|
125
|
+
}
|
|
126
|
+
),
|
|
127
|
+
!m && /* @__PURE__ */ o(
|
|
128
|
+
e.Close,
|
|
129
|
+
{
|
|
130
|
+
className: "shrink-0 cursor-pointer transition-opacity focus-visible:focus-default disabled:pointer-events-none",
|
|
131
|
+
"aria-label": b,
|
|
132
|
+
children: /* @__PURE__ */ o(N, { className: "size-icon-medium" })
|
|
133
|
+
}
|
|
134
|
+
)
|
|
135
|
+
]
|
|
136
|
+
}
|
|
137
|
+
);
|
|
138
|
+
}
|
|
139
|
+
);
|
|
140
|
+
S.displayName = "SheetHeader";
|
|
141
|
+
const C = l(
|
|
142
|
+
({ className: a, children: t, ...s }, r) => /* @__PURE__ */ o(
|
|
143
|
+
n,
|
|
144
|
+
{
|
|
145
|
+
ref: r,
|
|
146
|
+
direction: "column",
|
|
147
|
+
flex: 1,
|
|
148
|
+
className: i(
|
|
149
|
+
"min-h-0 gap-comp-sheet-gap overflow-y-auto p-comp-sheet-p",
|
|
150
|
+
a
|
|
151
|
+
),
|
|
152
|
+
...s,
|
|
153
|
+
children: t
|
|
154
|
+
}
|
|
155
|
+
)
|
|
156
|
+
);
|
|
157
|
+
C.displayName = "SheetBody";
|
|
158
|
+
const k = l(
|
|
159
|
+
({ className: a, children: t, ...s }, r) => /* @__PURE__ */ o(
|
|
160
|
+
n,
|
|
161
|
+
{
|
|
162
|
+
ref: r,
|
|
163
|
+
align: "center",
|
|
164
|
+
justify: "end",
|
|
165
|
+
gap: "sm",
|
|
166
|
+
className: i(
|
|
167
|
+
"border-t border-stroke-base-primary px-comp-sheet-p py-comp-sheet-p-ver-sm",
|
|
168
|
+
a
|
|
169
|
+
),
|
|
170
|
+
...s,
|
|
171
|
+
children: t
|
|
172
|
+
}
|
|
173
|
+
)
|
|
174
|
+
);
|
|
175
|
+
k.displayName = "SheetFooter";
|
|
176
|
+
export {
|
|
177
|
+
P as Sheet,
|
|
178
|
+
C as SheetBody,
|
|
179
|
+
H as SheetClose,
|
|
180
|
+
z as SheetContent,
|
|
181
|
+
M as SheetDescription,
|
|
182
|
+
k as SheetFooter,
|
|
183
|
+
S as SheetHeader,
|
|
184
|
+
c as SheetOverlay,
|
|
185
|
+
v as SheetPortal,
|
|
186
|
+
R as SheetTitle,
|
|
187
|
+
B as SheetTrigger,
|
|
188
|
+
w as sheetContentVariants
|
|
189
|
+
};
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { Meta, StoryObj } from '@storybook/react-vite';
|
|
2
|
+
import { Sheet } from './Sheet';
|
|
3
|
+
declare const meta: Meta<typeof Sheet>;
|
|
4
|
+
export default meta;
|
|
5
|
+
type Story = StoryObj<PlaygroundProps>;
|
|
6
|
+
type PlaygroundProps = {
|
|
7
|
+
side: 'top' | 'right' | 'bottom' | 'left';
|
|
8
|
+
size: 'small' | 'medium' | 'large';
|
|
9
|
+
textButton?: string;
|
|
10
|
+
closeAriaLabel?: string;
|
|
11
|
+
};
|
|
12
|
+
export declare const Default: Story;
|
|
13
|
+
export declare const SideLeft: Story;
|
|
14
|
+
export declare const SideTop: Story;
|
|
15
|
+
export declare const SideBottom: Story;
|
|
16
|
+
export declare const SizeSmall: Story;
|
|
17
|
+
export declare const SizeLarge: Story;
|
|
18
|
+
export declare const Scrollable: Story;
|
|
19
|
+
export declare const MinimalNoHeaderFooter: Story;
|
|
20
|
+
//# sourceMappingURL=Sheet.stories.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Sheet.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Sheet/Sheet.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAG3D,OAAO,EACL,KAAK,EASN,MAAM,SAAS,CAAA;AAEhB,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,KAAK,CAoD5B,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,eAAe,CAAC,CAAA;AAEtC,KAAK,eAAe,GAAG;IACrB,IAAI,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAA;IACzC,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;IAClC,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,cAAc,CAAC,EAAE,MAAM,CAAA;CACxB,CAAA;AAED,eAAO,MAAM,OAAO,EAAE,KAmErB,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAiBtB,CAAA;AAED,eAAO,MAAM,OAAO,EAAE,KAiBrB,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAiBxB,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KAgBvB,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KAiBvB,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KA6CxB,CAAA;AAED,eAAO,MAAM,qBAAqB,EAAE,KAgCnC,CAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Sheet/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAA"}
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
import { VariantProps } from 'class-variance-authority';
|
|
2
|
+
import * as React from 'react';
|
|
3
|
+
import * as SliderPrimitive from '@radix-ui/react-slider';
|
|
4
|
+
declare const sliderVariants: (props?: ({
|
|
5
|
+
size?: "sm" | "md" | "lg" | null | undefined;
|
|
6
|
+
} & import('class-variance-authority/types').ClassProp) | undefined) => string;
|
|
7
|
+
declare const sliderTrackVariants: (props?: ({
|
|
8
|
+
size?: "sm" | "md" | "lg" | null | undefined;
|
|
9
|
+
} & import('class-variance-authority/types').ClassProp) | undefined) => string;
|
|
10
|
+
declare const sliderThumbVariants: (props?: ({
|
|
11
|
+
size?: "sm" | "md" | "lg" | null | undefined;
|
|
12
|
+
} & import('class-variance-authority/types').ClassProp) | undefined) => string;
|
|
13
|
+
/**
|
|
14
|
+
* Props for the Slider component.
|
|
15
|
+
* Extends [Radix Slider](https://www.radix-ui.com/primitives/docs/components/slider)
|
|
16
|
+
* root primitive with a size variant, horizontal/vertical orientation, and per-thumb
|
|
17
|
+
* aria-label overrides backed by the translation system.
|
|
18
|
+
*/
|
|
19
|
+
export interface SliderProps extends Omit<React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>, 'orientation'>, VariantProps<typeof sliderVariants> {
|
|
20
|
+
/** Track height and thumb diameter. @default 'md' */
|
|
21
|
+
size?: 'sm' | 'md' | 'lg';
|
|
22
|
+
/** Slider orientation. Vertical sliders fill their container's height. @default 'horizontal' */
|
|
23
|
+
orientation?: 'horizontal' | 'vertical';
|
|
24
|
+
/**
|
|
25
|
+
* Accessible label per thumb (one entry per thumb in `value` / `defaultValue`).
|
|
26
|
+
* Falls back to translation defaults: a single thumb uses `slider.thumbAriaLabel`;
|
|
27
|
+
* a range slider uses `slider.minThumbAriaLabel` and `slider.maxThumbAriaLabel`.
|
|
28
|
+
*
|
|
29
|
+
* @example
|
|
30
|
+
* <Slider defaultValue={[20, 80]} thumbAriaLabels={['Min price', 'Max price']} />
|
|
31
|
+
*/
|
|
32
|
+
thumbAriaLabels?: string[];
|
|
33
|
+
/** Controlled value array. Single-element for one thumb, multi-element for a range. */
|
|
34
|
+
value?: number[];
|
|
35
|
+
/**
|
|
36
|
+
* Initial value array for uncontrolled usage.
|
|
37
|
+
* Pass `[n]` for a single-thumb slider or `[a, b]` for a range slider.
|
|
38
|
+
*
|
|
39
|
+
* @default [min]
|
|
40
|
+
*/
|
|
41
|
+
defaultValue?: number[];
|
|
42
|
+
/** Fires continuously while dragging. Receives the current value array. */
|
|
43
|
+
onValueChange?: (value: number[]) => void;
|
|
44
|
+
/** Fires when the user finishes dragging (releases the thumb). Receives the committed value array. */
|
|
45
|
+
onValueCommit?: (value: number[]) => void;
|
|
46
|
+
/** Minimum allowed value. @default 0 */
|
|
47
|
+
min?: number;
|
|
48
|
+
/** Maximum allowed value. @default 100 */
|
|
49
|
+
max?: number;
|
|
50
|
+
/** Step increment between selectable values. @default 1 */
|
|
51
|
+
step?: number;
|
|
52
|
+
/** Minimum number of steps separating thumbs in a range slider. @default 0 */
|
|
53
|
+
minStepsBetweenThumbs?: number;
|
|
54
|
+
/** Prevents interaction and applies disabled styling. @default false */
|
|
55
|
+
disabled?: boolean;
|
|
56
|
+
/** Form field name for native form submission. */
|
|
57
|
+
name?: string;
|
|
58
|
+
/** Visually inverts the slider direction (the filled side flips). @default false */
|
|
59
|
+
inverted?: boolean;
|
|
60
|
+
/** Reading direction. Affects keyboard navigation and visual order. */
|
|
61
|
+
dir?: 'ltr' | 'rtl';
|
|
62
|
+
}
|
|
63
|
+
declare const Slider: React.ForwardRefExoticComponent<SliderProps & React.RefAttributes<HTMLSpanElement>>;
|
|
64
|
+
export { Slider, sliderVariants, sliderTrackVariants, sliderThumbVariants };
|
|
65
|
+
//# sourceMappingURL=Slider.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Slider.d.ts","sourceRoot":"","sources":["../../../src/components/Slider/Slider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAA;AACzD,OAAO,EAAE,KAAK,YAAY,EAAO,MAAM,0BAA0B,CAAA;AAIjE,QAAA,MAAM,cAAc;;8EAiBnB,CAAA;AAED,QAAA,MAAM,mBAAmB;;8EAkBxB,CAAA;AAED,QAAA,MAAM,mBAAmB;;8EAsBxB,CAAA;AAED;;;;;GAKG;AACH,MAAM,WAAW,WACf,SAAQ,IAAI,CACR,KAAK,CAAC,wBAAwB,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,EAC3D,aAAa,CACd,EACD,YAAY,CAAC,OAAO,cAAc,CAAC;IACrC,qDAAqD;IACrD,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;IACzB,gGAAgG;IAChG,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAA;IACvC;;;;;;;OAOG;IACH,eAAe,CAAC,EAAE,MAAM,EAAE,CAAA;IAC1B,uFAAuF;IACvF,KAAK,CAAC,EAAE,MAAM,EAAE,CAAA;IAChB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,MAAM,EAAE,CAAA;IACvB,2EAA2E;IAC3E,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;IACzC,sGAAsG;IACtG,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;IACzC,wCAAwC;IACxC,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,0CAA0C;IAC1C,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,2DAA2D;IAC3D,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,8EAA8E;IAC9E,qBAAqB,CAAC,EAAE,MAAM,CAAA;IAC9B,wEAAwE;IACxE,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,kDAAkD;IAClD,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,oFAAoF;IACpF,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,uEAAuE;IACvE,GAAG,CAAC,EAAE,KAAK,GAAG,KAAK,CAAA;CACpB;AAED,QAAA,MAAM,MAAM,qFA6EX,CAAA;AAGD,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,CAAA"}
|
|
@@ -0,0 +1,134 @@
|
|
|
1
|
+
import { jsxs as k, jsx as n } from "react/jsx-runtime";
|
|
2
|
+
import * as h from "react";
|
|
3
|
+
import * as s from "@radix-ui/react-slider";
|
|
4
|
+
import { cva as m } from "class-variance-authority";
|
|
5
|
+
import { useMuzaTranslations as w } from "../../translations/TranslationContext.js";
|
|
6
|
+
import { cn as u } from "../../utils/cn.js";
|
|
7
|
+
const T = m(
|
|
8
|
+
[
|
|
9
|
+
"group relative flex touch-none items-center select-none",
|
|
10
|
+
"data-[disabled]:pointer-events-none",
|
|
11
|
+
"data-[orientation=horizontal]:w-full",
|
|
12
|
+
"data-[orientation=vertical]:h-full data-[orientation=vertical]:flex-col"
|
|
13
|
+
],
|
|
14
|
+
{
|
|
15
|
+
variants: {
|
|
16
|
+
size: {
|
|
17
|
+
sm: "data-[orientation=horizontal]:h-comp-slider-thumb-size-sm data-[orientation=vertical]:w-comp-slider-thumb-size-sm",
|
|
18
|
+
md: "data-[orientation=horizontal]:h-comp-slider-thumb-size-md data-[orientation=vertical]:w-comp-slider-thumb-size-md",
|
|
19
|
+
lg: "data-[orientation=horizontal]:h-comp-slider-thumb-size-lg data-[orientation=vertical]:w-comp-slider-thumb-size-lg"
|
|
20
|
+
}
|
|
21
|
+
},
|
|
22
|
+
defaultVariants: { size: "md" }
|
|
23
|
+
}
|
|
24
|
+
), y = m(
|
|
25
|
+
[
|
|
26
|
+
"relative overflow-hidden rounded-comp-slider-radius-track",
|
|
27
|
+
"bg-comp-slider-track-bg-def",
|
|
28
|
+
"group-data-[disabled]:bg-comp-slider-track-bg-disabled",
|
|
29
|
+
"data-[orientation=horizontal]:w-full",
|
|
30
|
+
"data-[orientation=vertical]:h-full"
|
|
31
|
+
],
|
|
32
|
+
{
|
|
33
|
+
variants: {
|
|
34
|
+
size: {
|
|
35
|
+
sm: "data-[orientation=horizontal]:h-comp-slider-track-h-sm data-[orientation=vertical]:w-comp-slider-track-h-sm",
|
|
36
|
+
md: "data-[orientation=horizontal]:h-comp-slider-track-h-md data-[orientation=vertical]:w-comp-slider-track-h-md",
|
|
37
|
+
lg: "data-[orientation=horizontal]:h-comp-slider-track-h-lg data-[orientation=vertical]:w-comp-slider-track-h-lg"
|
|
38
|
+
}
|
|
39
|
+
},
|
|
40
|
+
defaultVariants: { size: "md" }
|
|
41
|
+
}
|
|
42
|
+
), N = m(
|
|
43
|
+
[
|
|
44
|
+
"block rounded-full transition-colors",
|
|
45
|
+
"bg-comp-slider-thumb-bg-def",
|
|
46
|
+
"border border-comp-slider-thumb-stroke-def",
|
|
47
|
+
"cursor-grab active:cursor-grabbing",
|
|
48
|
+
"hover:border-comp-slider-thumb-stroke-hover",
|
|
49
|
+
"focus-visible-default focus-visible:border-comp-slider-thumb-stroke-focused",
|
|
50
|
+
"group-data-[disabled]:cursor-not-allowed",
|
|
51
|
+
"group-data-[disabled]:bg-comp-slider-thumb-bg-disabled",
|
|
52
|
+
"group-data-[disabled]:border-comp-slider-thumb-stroke-disabled"
|
|
53
|
+
],
|
|
54
|
+
{
|
|
55
|
+
variants: {
|
|
56
|
+
size: {
|
|
57
|
+
sm: "size-comp-slider-thumb-size-sm",
|
|
58
|
+
md: "size-comp-slider-thumb-size-md",
|
|
59
|
+
lg: "size-comp-slider-thumb-size-lg"
|
|
60
|
+
}
|
|
61
|
+
},
|
|
62
|
+
defaultVariants: { size: "md" }
|
|
63
|
+
}
|
|
64
|
+
), R = h.forwardRef(
|
|
65
|
+
({
|
|
66
|
+
className: p,
|
|
67
|
+
size: d = "md",
|
|
68
|
+
orientation: g = "horizontal",
|
|
69
|
+
defaultValue: t,
|
|
70
|
+
value: i,
|
|
71
|
+
min: l = 0,
|
|
72
|
+
max: c = 100,
|
|
73
|
+
thumbAriaLabels: o,
|
|
74
|
+
...f
|
|
75
|
+
}, z) => {
|
|
76
|
+
const e = w(), b = h.useMemo(
|
|
77
|
+
() => Array.isArray(i) ? i : Array.isArray(t) ? t : [l],
|
|
78
|
+
[i, t, l, c]
|
|
79
|
+
), v = (r, a) => o != null && o[r] ? o[r] : a === 1 ? e.slider.thumbAriaLabel : r === 0 ? e.slider.minThumbAriaLabel : r === a - 1 ? e.slider.maxThumbAriaLabel : e.slider.thumbAriaLabel;
|
|
80
|
+
return /* @__PURE__ */ k(
|
|
81
|
+
s.Root,
|
|
82
|
+
{
|
|
83
|
+
ref: z,
|
|
84
|
+
"data-slot": "slider",
|
|
85
|
+
defaultValue: t,
|
|
86
|
+
value: i,
|
|
87
|
+
min: l,
|
|
88
|
+
max: c,
|
|
89
|
+
orientation: g,
|
|
90
|
+
className: u(T({ size: d }), p),
|
|
91
|
+
...f,
|
|
92
|
+
children: [
|
|
93
|
+
/* @__PURE__ */ n(
|
|
94
|
+
s.Track,
|
|
95
|
+
{
|
|
96
|
+
"data-slot": "slider-track",
|
|
97
|
+
className: y({ size: d }),
|
|
98
|
+
children: /* @__PURE__ */ n(
|
|
99
|
+
s.Range,
|
|
100
|
+
{
|
|
101
|
+
"data-slot": "slider-range",
|
|
102
|
+
className: u(
|
|
103
|
+
"absolute",
|
|
104
|
+
"bg-comp-slider-range-bg-def transition-colors",
|
|
105
|
+
"group-hover:bg-comp-slider-range-bg-hover",
|
|
106
|
+
"group-data-[disabled]:bg-comp-slider-range-bg-disabled",
|
|
107
|
+
"data-[orientation=horizontal]:h-full",
|
|
108
|
+
"data-[orientation=vertical]:w-full"
|
|
109
|
+
)
|
|
110
|
+
}
|
|
111
|
+
)
|
|
112
|
+
}
|
|
113
|
+
),
|
|
114
|
+
b.map((r, a) => /* @__PURE__ */ n(
|
|
115
|
+
s.Thumb,
|
|
116
|
+
{
|
|
117
|
+
"data-slot": "slider-thumb",
|
|
118
|
+
"aria-label": v(a, b.length),
|
|
119
|
+
className: N({ size: d })
|
|
120
|
+
},
|
|
121
|
+
a
|
|
122
|
+
))
|
|
123
|
+
]
|
|
124
|
+
}
|
|
125
|
+
);
|
|
126
|
+
}
|
|
127
|
+
);
|
|
128
|
+
R.displayName = "Slider";
|
|
129
|
+
export {
|
|
130
|
+
R as Slider,
|
|
131
|
+
N as sliderThumbVariants,
|
|
132
|
+
y as sliderTrackVariants,
|
|
133
|
+
T as sliderVariants
|
|
134
|
+
};
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { Meta, StoryObj } from '@storybook/react-vite';
|
|
2
|
+
import { Slider } from './Slider';
|
|
3
|
+
declare const meta: Meta<typeof Slider>;
|
|
4
|
+
export default meta;
|
|
5
|
+
type Story = StoryObj<typeof Slider>;
|
|
6
|
+
export declare const Default: Story;
|
|
7
|
+
export declare const Range: Story;
|
|
8
|
+
export declare const Sizes: Story;
|
|
9
|
+
export declare const Vertical: Story;
|
|
10
|
+
export declare const Disabled: Story;
|
|
11
|
+
export declare const Playground: Story;
|
|
12
|
+
//# sourceMappingURL=Slider.stories.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Slider.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Slider/Slider.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAG3D,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AAEjC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CAqC7B,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,MAAM,CAAC,CAAA;AAEpC,eAAO,MAAM,OAAO,EAAE,KAqBrB,CAAA;AAED,eAAO,MAAM,KAAK,EAAE,KAoBnB,CAAA;AAED,eAAO,MAAM,KAAK,EAAE,KA2CnB,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAmBtB,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAkBtB,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAoCxB,CAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Slider/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextEditor.stories.d.ts","sourceRoot":"","sources":["../../../src/components/TextEditor/TextEditor.stories.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAO3D,OAAO,EACL,UAAU,EAIX,MAAM,SAAS,CAAA;AAEhB,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,UAAU,CA0JjC,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,UAAU,CAAC,CAAA;AAGxC,eAAO,MAAM,OAAO,EAAE,KAerB,CAAA;AAED,eAAO,MAAM,oBAAoB,EAAE,KAgBlC,CAAA;AAGD,eAAO,MAAM,UAAU,EAAE,KA4BxB,CAAA;AAGD,eAAO,MAAM,mBAAmB,EAAE,KAmCjC,CAAA;AAGD,eAAO,MAAM,SAAS,EAAE,KA6DvB,CAAA;AAGD,eAAO,MAAM,kBAAkB,EAAE,KAsBhC,CAAA;AAGD,eAAO,MAAM,cAAc,EAAE,KAsB5B,CAAA;AAGD,eAAO,MAAM,gBAAgB,EAAE,
|
|
1
|
+
{"version":3,"file":"TextEditor.stories.d.ts","sourceRoot":"","sources":["../../../src/components/TextEditor/TextEditor.stories.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAO3D,OAAO,EACL,UAAU,EAIX,MAAM,SAAS,CAAA;AAEhB,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,UAAU,CA0JjC,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,UAAU,CAAC,CAAA;AAGxC,eAAO,MAAM,OAAO,EAAE,KAerB,CAAA;AAED,eAAO,MAAM,oBAAoB,EAAE,KAgBlC,CAAA;AAGD,eAAO,MAAM,UAAU,EAAE,KA4BxB,CAAA;AAGD,eAAO,MAAM,mBAAmB,EAAE,KAmCjC,CAAA;AAGD,eAAO,MAAM,SAAS,EAAE,KA6DvB,CAAA;AAGD,eAAO,MAAM,kBAAkB,EAAE,KAsBhC,CAAA;AAGD,eAAO,MAAM,cAAc,EAAE,KAsB5B,CAAA;AAGD,eAAO,MAAM,gBAAgB,EAAE,KAuC9B,CAAA;AAGD,eAAO,MAAM,YAAY,EAAE,KAmC1B,CAAA;AAGD,eAAO,MAAM,mBAAmB,EAAE,KAsCjC,CAAA;AAqKD;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,YAAY,EAAE,KAwD1B,CAAA;AAMD;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,mBAAmB,EAAE,KA0DjC,CAAA;AAGD,eAAO,MAAM,QAAQ,EAAE,KA6CtB,CAAA;AAGD,eAAO,MAAM,mBAAmB,EAAE,KA0CjC,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Typography.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Typography/Typography.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAE3D,OAAO,EAAE,UAAU,EAAwB,MAAM,cAAc,CAAA;AAgC/D,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,UAAU,CAgFjC,CAAA;AAED,eAAe,IAAI,CAAA;AAEnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,UAAU,CAAC,CAAA;
|
|
1
|
+
{"version":3,"file":"Typography.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Typography/Typography.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAE3D,OAAO,EAAE,UAAU,EAAwB,MAAM,cAAc,CAAA;AAgC/D,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,UAAU,CAgFjC,CAAA;AAED,eAAe,IAAI,CAAA;AAEnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,UAAU,CAAC,CAAA;AAuCxC,eAAO,MAAM,OAAO,EAAE,KAkBrB,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAwEtB,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAsEtB,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAuE3B,CAAA;AAED,eAAO,MAAM,OAAO,EAAE,KAsErB,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,KAgC5B,CAAA;AAED,eAAO,MAAM,gBAAgB,EAAE,KAuC9B,CAAA;AAED,eAAO,MAAM,gBAAgB,EAAE,KAyC9B,CAAA;AAED,eAAO,MAAM,iBAAiB,EAAE,KAwD/B,CAAA;AAED,eAAO,MAAM,gBAAgB,EAAE,KA4H9B,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAkBxB,CAAA"}
|