@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
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Accordion.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Accordion/Accordion.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAc3D,OAAO,EACL,SAAS,EAKV,MAAM,aAAa,CAAA;AAEpB,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,SAAS,CAuEhC,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,SAAS,CAAC,CAAA;AAEvC,eAAO,MAAM,OAAO,EAAE,KAsDrB,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KAmEpB,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAiCtB,CAAA;
|
|
1
|
+
{"version":3,"file":"Accordion.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Accordion/Accordion.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAc3D,OAAO,EACL,SAAS,EAKV,MAAM,aAAa,CAAA;AAEpB,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,SAAS,CAuEhC,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,SAAS,CAAC,CAAA;AAEvC,eAAO,MAAM,OAAO,EAAE,KAsDrB,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KAmEpB,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAiCtB,CAAA;AAqVD,eAAO,MAAM,QAAQ,EAAE,KAetB,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KA0EpB,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KAiLzB,CAAA;AAED,KAAK,eAAe,GAAG;IACrB,SAAS,EAAE,MAAM,CAAA;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,SAAS,EAAE,MAAM,CAAA;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAED,eAAO,MAAM,kBAAkB,EAAE,QAAQ,CAAC,eAAe,CA4DxD,CAAA;AAED,eAAO,MAAM,gBAAgB,EAAE,QAAQ,CAAC,eAAe,CAyEtD,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.stories.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAW3D,OAAO,EAAE,MAAM,EAAoB,MAAM,UAAU,CAAA;AAoBnD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CAqF7B,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,MAAM,CAAC,CAAA;AAEpC,eAAO,MAAM,OAAO,EAAE,KAarB,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAetB,CAAA;AAED,eAAO,MAAM,eAAe,EAAE,KAe7B,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAoCtB,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KAgBvB,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KAyCzB,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAkDtB,CAAA;AAED,eAAO,MAAM,iBAAiB,EAAE,KAmF/B,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KA8D1B,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,KAgB5B,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAgB3B,CAAA;
|
|
1
|
+
{"version":3,"file":"Button.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.stories.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAW3D,OAAO,EAAE,MAAM,EAAoB,MAAM,UAAU,CAAA;AAoBnD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CAqF7B,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,MAAM,CAAC,CAAA;AAEpC,eAAO,MAAM,OAAO,EAAE,KAarB,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAetB,CAAA;AAED,eAAO,MAAM,eAAe,EAAE,KAe7B,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAoCtB,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KAgBvB,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KAyCzB,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAkDtB,CAAA;AAED,eAAO,MAAM,iBAAiB,EAAE,KAmF/B,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KA8D1B,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,KAgB5B,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAgB3B,CAAA;AAcD,eAAO,MAAM,gBAAgB,EAAE,KAmL9B,CAAA;AAED,eAAO,MAAM,iBAAiB,EAAE,KAgC/B,CAAA"}
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
import { FlexProps } from '../Flex/Flex';
|
|
2
|
+
import * as React from 'react';
|
|
3
|
+
declare const cardVariants: (props?: ({
|
|
4
|
+
variant?: "default" | "market" | "checkout" | null | undefined;
|
|
5
|
+
gap?: "none" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "3xs" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | "10xl" | null | undefined;
|
|
6
|
+
gapX?: "none" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "3xs" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | "10xl" | null | undefined;
|
|
7
|
+
gapY?: "none" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "3xs" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | "10xl" | null | undefined;
|
|
8
|
+
p?: "none" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "3xs" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | "10xl" | null | undefined;
|
|
9
|
+
px?: "none" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "3xs" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | "10xl" | null | undefined;
|
|
10
|
+
py?: "none" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "3xs" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | "10xl" | null | undefined;
|
|
11
|
+
pt?: "none" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "3xs" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | "10xl" | null | undefined;
|
|
12
|
+
pr?: "none" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "3xs" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | "10xl" | null | undefined;
|
|
13
|
+
pb?: "none" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "3xs" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | "10xl" | null | undefined;
|
|
14
|
+
pl?: "none" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "3xs" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | "10xl" | null | undefined;
|
|
15
|
+
m?: "none" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "3xs" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | "10xl" | null | undefined;
|
|
16
|
+
mx?: "none" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "3xs" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | "10xl" | null | undefined;
|
|
17
|
+
my?: "none" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "3xs" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | "10xl" | null | undefined;
|
|
18
|
+
mt?: "none" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "3xs" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | "10xl" | null | undefined;
|
|
19
|
+
mr?: "none" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "3xs" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | "10xl" | null | undefined;
|
|
20
|
+
mb?: "none" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "3xs" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | "10xl" | null | undefined;
|
|
21
|
+
ml?: "none" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "3xs" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | "10xl" | null | undefined;
|
|
22
|
+
direction?: "row" | "column" | "row-reverse" | "column-reverse" | null | undefined;
|
|
23
|
+
wrap?: "wrap" | "nowrap" | "wrap-reverse" | null | undefined;
|
|
24
|
+
justify?: "end" | "start" | "center" | "stretch" | "between" | "around" | "evenly" | null | undefined;
|
|
25
|
+
align?: "end" | "start" | "center" | "baseline" | "stretch" | null | undefined;
|
|
26
|
+
flex?: 1 | "none" | "auto" | "initial" | null | undefined;
|
|
27
|
+
} & import('class-variance-authority/types').ClassProp) | undefined) => string;
|
|
28
|
+
/**
|
|
29
|
+
* Props for the Card component.
|
|
30
|
+
*
|
|
31
|
+
* Extends `FlexProps` so the card surface exposes the same layout API as
|
|
32
|
+
* `Flex` (direction, alignment, gap, padding, margin, polymorphic
|
|
33
|
+
* `component`). Adds a visual `variant` for the Figma-defined card styles
|
|
34
|
+
* and an `asChild` escape hatch for polymorphic rendering via Radix Slot.
|
|
35
|
+
*/
|
|
36
|
+
export interface CardProps extends FlexProps, Omit<React.HTMLAttributes<HTMLElement>, 'color'> {
|
|
37
|
+
/**
|
|
38
|
+
* Visual style variant.
|
|
39
|
+
*
|
|
40
|
+
* - `default` — primary card layout used across the app (Múza-IN). Smaller width with vertical padding.
|
|
41
|
+
* - `market` — wider container used for Múza Market account cards.
|
|
42
|
+
* - `checkout` — checkout-flow card with the same radius family as `default` but a distinct stroke/fill.
|
|
43
|
+
*
|
|
44
|
+
* @default 'default'
|
|
45
|
+
*/
|
|
46
|
+
variant?: 'default' | 'market' | 'checkout';
|
|
47
|
+
/**
|
|
48
|
+
* Renders the single child as the root element via Radix `Slot`, merging
|
|
49
|
+
* Card's props, styles, ref, and event handlers onto it. Use for
|
|
50
|
+
* polymorphic rendering — e.g. an `<a>` link wrapper, a `<button>` for a
|
|
51
|
+
* clickable card, or a router `Link`. Takes precedence over `component`.
|
|
52
|
+
*
|
|
53
|
+
* @default false
|
|
54
|
+
* @example
|
|
55
|
+
* <Card asChild>
|
|
56
|
+
* <a href="/account">Open account</a>
|
|
57
|
+
* </Card>
|
|
58
|
+
*/
|
|
59
|
+
asChild?: boolean;
|
|
60
|
+
}
|
|
61
|
+
declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLElement>>;
|
|
62
|
+
export { Card, cardVariants };
|
|
63
|
+
//# sourceMappingURL=Card.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../src/components/Card/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B,OAAO,EACL,KAAK,SAAS,EAGf,MAAM,cAAc,CAAA;AAErB,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;8EAiBhB,CAAA;AAEF;;;;;;;GAOG;AACH,MAAM,WAAW,SACf,SAAQ,SAAS,EACf,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC;IAClD;;;;;;;;OAQG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,QAAQ,GAAG,UAAU,CAAA;IAC3C;;;;;;;;;;;OAWG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB;AAED,QAAA,MAAM,IAAI,+EA+CT,CAAA;AAGD,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,CAAA"}
|
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
import * as r from "react";
|
|
2
|
+
import { Slot as g } from "@radix-ui/react-slot";
|
|
3
|
+
import { cva as x } from "class-variance-authority";
|
|
4
|
+
import { getSpacingVariants as y } from "../../utils/spacing.js";
|
|
5
|
+
import { flexLayoutDefaults as V, flexLayoutVariants as C } from "../Flex/Flex.js";
|
|
6
|
+
import { cn as z } from "../../utils/cn.js";
|
|
7
|
+
const L = x("flex border border-solid", {
|
|
8
|
+
variants: {
|
|
9
|
+
...C,
|
|
10
|
+
variant: {
|
|
11
|
+
default: "rounded-comp-card-default-radius border-comp-card-muzain-stroke bg-comp-card-muzain-bg px-comp-card-default-p-hor py-comp-card-default-p-ver",
|
|
12
|
+
market: "rounded-comp-card-account-radius border-comp-card-account-stroke bg-comp-card-account-fill px-comp-card-account-p-hor py-comp-card-account-p-ver-def",
|
|
13
|
+
checkout: "rounded-comp-card-checkout-radius border-comp-card-checkout-stroke bg-comp-card-checkout-fill px-comp-card-checkout-p-hor py-comp-card-checkout-p-ver"
|
|
14
|
+
}
|
|
15
|
+
},
|
|
16
|
+
defaultVariants: {
|
|
17
|
+
...V,
|
|
18
|
+
direction: "column",
|
|
19
|
+
variant: "default"
|
|
20
|
+
}
|
|
21
|
+
}), N = r.forwardRef(
|
|
22
|
+
({
|
|
23
|
+
className: a,
|
|
24
|
+
style: c,
|
|
25
|
+
variant: o,
|
|
26
|
+
direction: t,
|
|
27
|
+
wrap: e,
|
|
28
|
+
justify: d,
|
|
29
|
+
align: p,
|
|
30
|
+
flex: m,
|
|
31
|
+
gap: u,
|
|
32
|
+
padding: n,
|
|
33
|
+
margin: i,
|
|
34
|
+
component: s = "div",
|
|
35
|
+
asChild: f = !1,
|
|
36
|
+
children: l,
|
|
37
|
+
...k
|
|
38
|
+
}, b) => {
|
|
39
|
+
const h = f ? g : s, v = y({ gap: u, padding: n, margin: i });
|
|
40
|
+
return r.createElement(
|
|
41
|
+
h,
|
|
42
|
+
{
|
|
43
|
+
ref: b,
|
|
44
|
+
className: z(
|
|
45
|
+
L({
|
|
46
|
+
variant: o,
|
|
47
|
+
direction: t,
|
|
48
|
+
wrap: e,
|
|
49
|
+
justify: d,
|
|
50
|
+
align: p,
|
|
51
|
+
flex: m,
|
|
52
|
+
...v
|
|
53
|
+
}),
|
|
54
|
+
a
|
|
55
|
+
),
|
|
56
|
+
style: c,
|
|
57
|
+
...k
|
|
58
|
+
},
|
|
59
|
+
l
|
|
60
|
+
);
|
|
61
|
+
}
|
|
62
|
+
);
|
|
63
|
+
N.displayName = "Card";
|
|
64
|
+
export {
|
|
65
|
+
N as Card,
|
|
66
|
+
L as cardVariants
|
|
67
|
+
};
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { Meta, StoryObj } from '@storybook/react-vite';
|
|
2
|
+
import { Card } from './Card';
|
|
3
|
+
declare const meta: Meta<typeof Card>;
|
|
4
|
+
export default meta;
|
|
5
|
+
type Story = StoryObj<typeof Card>;
|
|
6
|
+
export declare const Default: Story;
|
|
7
|
+
export declare const Market: Story;
|
|
8
|
+
export declare const Checkout: Story;
|
|
9
|
+
export declare const AllVariants: Story;
|
|
10
|
+
export declare const FlexLayout: Story;
|
|
11
|
+
export declare const AsChild: Story;
|
|
12
|
+
export declare const SemanticElement: Story;
|
|
13
|
+
//# sourceMappingURL=Card.stories.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Card.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Card/Card.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAG3D,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAE7B,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,IAAI,CA4E3B,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AA4BlC,eAAO,MAAM,OAAO,EAAE,KAgBrB,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KAgBpB,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAgBtB,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KAsBzB,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAuBxB,CAAA;AAED,eAAO,MAAM,OAAO,EAAE,KAuBrB,CAAA;AAED,eAAO,MAAM,eAAe,EAAE,KAgB7B,CAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Card/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAA"}
|
|
@@ -0,0 +1,140 @@
|
|
|
1
|
+
import { default as useEmblaCarousel, UseEmblaCarouselType } from 'embla-carousel-react';
|
|
2
|
+
import { ButtonArrow } from '../ButtonArrow';
|
|
3
|
+
import * as React from 'react';
|
|
4
|
+
/**
|
|
5
|
+
* Imperative Embla API exposed via the {@link CarouselProps.setApi} callback.
|
|
6
|
+
* Use it to scroll programmatically, query state, or subscribe to events.
|
|
7
|
+
*
|
|
8
|
+
* @example
|
|
9
|
+
* const [api, setApi] = React.useState<CarouselApi>()
|
|
10
|
+
*
|
|
11
|
+
* React.useEffect(() => {
|
|
12
|
+
* if (!api) return
|
|
13
|
+
* api.on('select', () => console.log(api.selectedScrollSnap()))
|
|
14
|
+
* }, [api])
|
|
15
|
+
*
|
|
16
|
+
* <Carousel setApi={setApi}>...</Carousel>
|
|
17
|
+
*/
|
|
18
|
+
export type CarouselApi = UseEmblaCarouselType[1];
|
|
19
|
+
type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
|
|
20
|
+
/**
|
|
21
|
+
* Embla options object forwarded as the first argument to `useEmblaCarousel`.
|
|
22
|
+
* Controls behaviour like looping, alignment, drag thresholds, etc.
|
|
23
|
+
*
|
|
24
|
+
* @see https://www.embla-carousel.com/api/options/
|
|
25
|
+
*/
|
|
26
|
+
export type CarouselOptions = UseCarouselParameters[0];
|
|
27
|
+
/**
|
|
28
|
+
* Embla plugin array forwarded as the second argument to `useEmblaCarousel`.
|
|
29
|
+
* Use it to add autoplay, classnames, fade, and other Embla plugins.
|
|
30
|
+
*
|
|
31
|
+
* @see https://www.embla-carousel.com/api/plugins/
|
|
32
|
+
*/
|
|
33
|
+
export type CarouselPlugin = UseCarouselParameters[1];
|
|
34
|
+
/**
|
|
35
|
+
* Props for the Carousel root component. Sets orientation, configures the
|
|
36
|
+
* underlying Embla instance, and exposes its API.
|
|
37
|
+
*/
|
|
38
|
+
export interface CarouselProps {
|
|
39
|
+
/**
|
|
40
|
+
* Embla configuration forwarded as the first argument to `useEmblaCarousel`.
|
|
41
|
+
* Controls behaviour like looping, alignment, or drag thresholds.
|
|
42
|
+
*
|
|
43
|
+
* @example
|
|
44
|
+
* <Carousel opts={{ loop: true, align: 'start' }}>...</Carousel>
|
|
45
|
+
*
|
|
46
|
+
* @see CarouselOptions
|
|
47
|
+
*/
|
|
48
|
+
opts?: CarouselOptions;
|
|
49
|
+
/**
|
|
50
|
+
* Embla plugins forwarded as the second argument to `useEmblaCarousel`
|
|
51
|
+
* (autoplay, classnames, fade, etc.).
|
|
52
|
+
*
|
|
53
|
+
* @example
|
|
54
|
+
* import Autoplay from 'embla-carousel-autoplay'
|
|
55
|
+
* <Carousel plugins={[Autoplay({ delay: 4000 })]}>...</Carousel>
|
|
56
|
+
*
|
|
57
|
+
* @see CarouselPlugin
|
|
58
|
+
*/
|
|
59
|
+
plugins?: CarouselPlugin;
|
|
60
|
+
/**
|
|
61
|
+
* Controls scroll direction. Also drives keyboard navigation
|
|
62
|
+
* (←/→ for horizontal, ↑/↓ for vertical).
|
|
63
|
+
*
|
|
64
|
+
* @default 'horizontal'
|
|
65
|
+
*/
|
|
66
|
+
orientation?: 'horizontal' | 'vertical';
|
|
67
|
+
/**
|
|
68
|
+
* Receives the Embla API once initialised. Use it for imperative control —
|
|
69
|
+
* scroll to a specific slide, subscribe to events, or query state.
|
|
70
|
+
*
|
|
71
|
+
* @example
|
|
72
|
+
* const [api, setApi] = React.useState<CarouselApi>()
|
|
73
|
+
* <Carousel setApi={setApi}>...</Carousel>
|
|
74
|
+
*
|
|
75
|
+
* @see CarouselApi
|
|
76
|
+
*/
|
|
77
|
+
setApi?: (api: CarouselApi) => void;
|
|
78
|
+
}
|
|
79
|
+
declare const Carousel: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & CarouselProps & React.RefAttributes<HTMLDivElement>>;
|
|
80
|
+
/**
|
|
81
|
+
* Props for the CarouselContent component. Wraps the scrolling track and
|
|
82
|
+
* lays out its `CarouselItem` children along the active orientation axis.
|
|
83
|
+
*
|
|
84
|
+
* Accepts all standard `<div>` attributes.
|
|
85
|
+
*/
|
|
86
|
+
export type CarouselContentProps = React.HTMLAttributes<HTMLDivElement>;
|
|
87
|
+
declare const CarouselContent: React.ForwardRefExoticComponent<CarouselContentProps & React.RefAttributes<HTMLDivElement>>;
|
|
88
|
+
/**
|
|
89
|
+
* Props for the CarouselItem component. Renders a single slide that occupies
|
|
90
|
+
* the full track by default — override `basis-*` to show multiple slides at once.
|
|
91
|
+
*
|
|
92
|
+
* Accepts all standard `<div>` attributes.
|
|
93
|
+
*
|
|
94
|
+
* @example
|
|
95
|
+
* // Show three slides per view
|
|
96
|
+
* <CarouselItem className="basis-1/3">...</CarouselItem>
|
|
97
|
+
*/
|
|
98
|
+
export type CarouselItemProps = React.HTMLAttributes<HTMLDivElement>;
|
|
99
|
+
declare const CarouselItem: React.ForwardRefExoticComponent<CarouselItemProps & React.RefAttributes<HTMLDivElement>>;
|
|
100
|
+
/**
|
|
101
|
+
* Props shared by `CarouselPrevious` and `CarouselNext`. Forwards all
|
|
102
|
+
* `ButtonArrow` props (`size`, `disabled`, `onClick`, `className`, etc.)
|
|
103
|
+
* except `direction` (set internally based on which button is rendered) and
|
|
104
|
+
* `aria-label` (use {@link CarouselNavButtonProps.ariaLabel} instead).
|
|
105
|
+
*
|
|
106
|
+
* @see ButtonArrowProps
|
|
107
|
+
*/
|
|
108
|
+
export interface CarouselNavButtonProps extends Omit<React.ComponentPropsWithoutRef<typeof ButtonArrow>, 'direction' | 'aria-label'> {
|
|
109
|
+
/**
|
|
110
|
+
* Accessible label for the nav button. Falls back to the translation value
|
|
111
|
+
* (`carousel.previousAriaLabel` / `carousel.nextAriaLabel`).
|
|
112
|
+
*/
|
|
113
|
+
ariaLabel?: string;
|
|
114
|
+
}
|
|
115
|
+
declare const CarouselPrevious: React.ForwardRefExoticComponent<CarouselNavButtonProps & React.RefAttributes<HTMLButtonElement>>;
|
|
116
|
+
declare const CarouselNext: React.ForwardRefExoticComponent<CarouselNavButtonProps & React.RefAttributes<HTMLButtonElement>>;
|
|
117
|
+
/**
|
|
118
|
+
* Props for the CarouselDots component. Renders pagination indicators bound
|
|
119
|
+
* to the carousel state — clicking a dot scrolls to that slide.
|
|
120
|
+
*
|
|
121
|
+
* Backed by {@link SliderIndicatorsProps}.
|
|
122
|
+
*/
|
|
123
|
+
export interface CarouselDotsProps {
|
|
124
|
+
/** Additional CSS classes for the indicator container. */
|
|
125
|
+
className?: string;
|
|
126
|
+
/**
|
|
127
|
+
* Accessible label for the indicator list. Falls back to the translation
|
|
128
|
+
* value (`carousel.dotsAriaLabel`).
|
|
129
|
+
*/
|
|
130
|
+
ariaLabel?: string;
|
|
131
|
+
/**
|
|
132
|
+
* Base accessible label for individual dot buttons. The slide index is
|
|
133
|
+
* appended automatically by `SliderIndicators`. Falls back to the
|
|
134
|
+
* translation value (`carousel.dotAriaLabel`).
|
|
135
|
+
*/
|
|
136
|
+
buttonAriaLabel?: string;
|
|
137
|
+
}
|
|
138
|
+
declare const CarouselDots: React.FC<CarouselDotsProps>;
|
|
139
|
+
export { Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext, CarouselDots, };
|
|
140
|
+
//# sourceMappingURL=Carousel.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Carousel.d.ts","sourceRoot":"","sources":["../../../src/components/Carousel/Carousel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,gBAAgB,EAAE,EACvB,KAAK,oBAAoB,EAC1B,MAAM,sBAAsB,CAAA;AAG7B,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAI5C;;;;;;;;;;;;;GAaG;AACH,MAAM,MAAM,WAAW,GAAG,oBAAoB,CAAC,CAAC,CAAC,CAAA;AAEjD,KAAK,qBAAqB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAA;AAEhE;;;;;GAKG;AACH,MAAM,MAAM,eAAe,GAAG,qBAAqB,CAAC,CAAC,CAAC,CAAA;AAEtD;;;;;GAKG;AACH,MAAM,MAAM,cAAc,GAAG,qBAAqB,CAAC,CAAC,CAAC,CAAA;AAErD;;;GAGG;AACH,MAAM,WAAW,aAAa;IAC5B;;;;;;;;OAQG;IACH,IAAI,CAAC,EAAE,eAAe,CAAA;IACtB;;;;;;;;;OASG;IACH,OAAO,CAAC,EAAE,cAAc,CAAA;IACxB;;;;;OAKG;IACH,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAA;IACvC;;;;;;;;;OASG;IACH,MAAM,CAAC,EAAE,CAAC,GAAG,EAAE,WAAW,KAAK,IAAI,CAAA;CACpC;AAwBD,QAAA,MAAM,QAAQ,6HAmIb,CAAA;AAGD;;;;;GAKG;AACH,MAAM,MAAM,oBAAoB,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAA;AAEvE,QAAA,MAAM,eAAe,6FAkBpB,CAAA;AAGD;;;;;;;;;GASG;AACH,MAAM,MAAM,iBAAiB,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAA;AAEpE,QAAA,MAAM,YAAY,0FAoBjB,CAAA;AAGD;;;;;;;GAOG;AACH,MAAM,WAAW,sBACf,SAAQ,IAAI,CACV,KAAK,CAAC,wBAAwB,CAAC,OAAO,WAAW,CAAC,EAClD,WAAW,GAAG,YAAY,CAC3B;IACD;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,QAAA,MAAM,gBAAgB,kGA+CrB,CAAA;AAGD,QAAA,MAAM,YAAY,kGA+CjB,CAAA;AAGD;;;;;GAKG;AACH,MAAM,WAAW,iBAAiB;IAChC,0DAA0D;IAC1D,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;;OAIG;IACH,eAAe,CAAC,EAAE,MAAM,CAAA;CACzB;AAED,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAuB7C,CAAA;AAED,OAAO,EACL,QAAQ,EACR,eAAe,EACf,YAAY,EACZ,gBAAgB,EAChB,YAAY,EACZ,YAAY,GACb,CAAA"}
|
|
@@ -0,0 +1,241 @@
|
|
|
1
|
+
import { jsx as m, jsxs as H } from "react/jsx-runtime";
|
|
2
|
+
import * as o from "react";
|
|
3
|
+
import j from "embla-carousel-react";
|
|
4
|
+
import { Flex as B } from "../Flex/Flex.js";
|
|
5
|
+
import { useMuzaTranslations as y } from "../../translations/TranslationContext.js";
|
|
6
|
+
import { ButtonArrow as z } from "../ButtonArrow/ButtonArrow.js";
|
|
7
|
+
import { SliderIndicators as F } from "../SliderIndicators/SliderIndicators.js";
|
|
8
|
+
import { cn as b } from "../../utils/cn.js";
|
|
9
|
+
const P = o.createContext(null), x = () => {
|
|
10
|
+
const t = o.useContext(P);
|
|
11
|
+
if (!t)
|
|
12
|
+
throw new Error("useCarousel must be used within a <Carousel />");
|
|
13
|
+
return t;
|
|
14
|
+
}, M = o.forwardRef(
|
|
15
|
+
({
|
|
16
|
+
orientation: t = "horizontal",
|
|
17
|
+
opts: l,
|
|
18
|
+
setApi: n,
|
|
19
|
+
plugins: a,
|
|
20
|
+
className: u,
|
|
21
|
+
children: c,
|
|
22
|
+
...f
|
|
23
|
+
}, p) => {
|
|
24
|
+
const [C, e] = j(
|
|
25
|
+
{
|
|
26
|
+
...l,
|
|
27
|
+
axis: t === "horizontal" ? "x" : "y"
|
|
28
|
+
},
|
|
29
|
+
a
|
|
30
|
+
), [h, s] = o.useState(!1), [i, w] = o.useState(!1), [R, D] = o.useState(0), [E, L] = o.useState(0), d = o.useCallback((r) => {
|
|
31
|
+
r && (D(r.selectedScrollSnap()), s(r.canScrollPrev()), w(r.canScrollNext()));
|
|
32
|
+
}, []), v = o.useCallback((r) => {
|
|
33
|
+
r && L(r.scrollSnapList().length);
|
|
34
|
+
}, []), S = o.useCallback(() => {
|
|
35
|
+
e == null || e.scrollPrev();
|
|
36
|
+
}, [e]), N = o.useCallback(() => {
|
|
37
|
+
e == null || e.scrollNext();
|
|
38
|
+
}, [e]), A = o.useCallback(
|
|
39
|
+
(r) => {
|
|
40
|
+
e == null || e.scrollTo(r);
|
|
41
|
+
},
|
|
42
|
+
[e]
|
|
43
|
+
), k = o.useCallback(
|
|
44
|
+
(r) => {
|
|
45
|
+
const K = t === "horizontal" ? "ArrowLeft" : "ArrowUp", T = t === "horizontal" ? "ArrowRight" : "ArrowDown";
|
|
46
|
+
r.key === K ? (r.preventDefault(), S()) : r.key === T && (r.preventDefault(), N());
|
|
47
|
+
},
|
|
48
|
+
[t, S, N]
|
|
49
|
+
);
|
|
50
|
+
o.useEffect(() => {
|
|
51
|
+
!e || !n || n(e);
|
|
52
|
+
}, [e, n]), o.useEffect(() => {
|
|
53
|
+
if (e)
|
|
54
|
+
return L(e.scrollSnapList().length), d(e), e.on("select", d), e.on("reInit", d), e.on("reInit", v), () => {
|
|
55
|
+
e.off("select", d), e.off("reInit", d), e.off("reInit", v);
|
|
56
|
+
};
|
|
57
|
+
}, [e, d, v]);
|
|
58
|
+
const g = [], I = [];
|
|
59
|
+
return o.Children.forEach(c, (r) => {
|
|
60
|
+
o.isValidElement(r) && r.type === J ? g.push(r) : I.push(r);
|
|
61
|
+
}), /* @__PURE__ */ m(
|
|
62
|
+
P.Provider,
|
|
63
|
+
{
|
|
64
|
+
value: {
|
|
65
|
+
carouselRef: C,
|
|
66
|
+
api: e,
|
|
67
|
+
opts: l,
|
|
68
|
+
orientation: t,
|
|
69
|
+
plugins: a,
|
|
70
|
+
scrollPrev: S,
|
|
71
|
+
scrollNext: N,
|
|
72
|
+
canScrollPrev: h,
|
|
73
|
+
canScrollNext: i,
|
|
74
|
+
selectedIndex: R,
|
|
75
|
+
scrollTo: A,
|
|
76
|
+
slidesCount: E
|
|
77
|
+
},
|
|
78
|
+
children: /* @__PURE__ */ H(
|
|
79
|
+
"div",
|
|
80
|
+
{
|
|
81
|
+
ref: p,
|
|
82
|
+
onKeyDownCapture: k,
|
|
83
|
+
className: u,
|
|
84
|
+
role: "region",
|
|
85
|
+
"aria-roledescription": "carousel",
|
|
86
|
+
...f,
|
|
87
|
+
children: [
|
|
88
|
+
/* @__PURE__ */ m("div", { className: "relative", children: I }),
|
|
89
|
+
g
|
|
90
|
+
]
|
|
91
|
+
}
|
|
92
|
+
)
|
|
93
|
+
}
|
|
94
|
+
);
|
|
95
|
+
}
|
|
96
|
+
);
|
|
97
|
+
M.displayName = "Carousel";
|
|
98
|
+
const U = o.forwardRef(
|
|
99
|
+
({ className: t, ...l }, n) => {
|
|
100
|
+
const { carouselRef: a, orientation: u } = x(), c = u === "horizontal";
|
|
101
|
+
return /* @__PURE__ */ m("div", { ref: a, className: "overflow-hidden", children: /* @__PURE__ */ m(
|
|
102
|
+
B,
|
|
103
|
+
{
|
|
104
|
+
ref: n,
|
|
105
|
+
direction: c ? "row" : "column",
|
|
106
|
+
className: b(
|
|
107
|
+
c ? "-ml-comp-carousel-gap" : "-mt-comp-carousel-gap",
|
|
108
|
+
t
|
|
109
|
+
),
|
|
110
|
+
...l
|
|
111
|
+
}
|
|
112
|
+
) });
|
|
113
|
+
}
|
|
114
|
+
);
|
|
115
|
+
U.displayName = "CarouselContent";
|
|
116
|
+
const V = o.forwardRef(
|
|
117
|
+
({ className: t, ...l }, n) => {
|
|
118
|
+
const { orientation: a } = x();
|
|
119
|
+
return /* @__PURE__ */ m(
|
|
120
|
+
"div",
|
|
121
|
+
{
|
|
122
|
+
ref: n,
|
|
123
|
+
role: "group",
|
|
124
|
+
"aria-roledescription": "slide",
|
|
125
|
+
className: b(
|
|
126
|
+
"min-w-0 shrink-0 grow-0 basis-full",
|
|
127
|
+
{
|
|
128
|
+
"pl-comp-carousel-gap": a === "horizontal",
|
|
129
|
+
"pt-comp-carousel-gap": a !== "horizontal"
|
|
130
|
+
},
|
|
131
|
+
t
|
|
132
|
+
),
|
|
133
|
+
...l
|
|
134
|
+
}
|
|
135
|
+
);
|
|
136
|
+
}
|
|
137
|
+
);
|
|
138
|
+
V.displayName = "CarouselItem";
|
|
139
|
+
const q = o.forwardRef(
|
|
140
|
+
({
|
|
141
|
+
className: t,
|
|
142
|
+
size: l = "default",
|
|
143
|
+
ariaLabel: n,
|
|
144
|
+
onClick: a,
|
|
145
|
+
...u
|
|
146
|
+
}, c) => {
|
|
147
|
+
const { orientation: f, scrollPrev: p, canScrollPrev: C } = x(), e = y(), h = n ?? e.carousel.previousAriaLabel, s = f === "horizontal", i = l === "sm";
|
|
148
|
+
return /* @__PURE__ */ m(
|
|
149
|
+
z,
|
|
150
|
+
{
|
|
151
|
+
ref: c,
|
|
152
|
+
direction: "left",
|
|
153
|
+
size: l,
|
|
154
|
+
disabled: !C,
|
|
155
|
+
"aria-label": h,
|
|
156
|
+
onClick: (w) => {
|
|
157
|
+
p(), a == null || a(w);
|
|
158
|
+
},
|
|
159
|
+
className: b(
|
|
160
|
+
"absolute",
|
|
161
|
+
{
|
|
162
|
+
"top-1/2 -translate-y-1/2": s,
|
|
163
|
+
"left-1/2 -translate-x-1/2 rotate-90": !s,
|
|
164
|
+
"-left-comp-carousel-arrow-offset-sm": s && i,
|
|
165
|
+
"-left-comp-carousel-arrow-offset": s && !i,
|
|
166
|
+
"-top-comp-carousel-arrow-offset-v-sm": !s && i,
|
|
167
|
+
"-top-comp-carousel-arrow-offset-v": !s && !i
|
|
168
|
+
},
|
|
169
|
+
t
|
|
170
|
+
),
|
|
171
|
+
...u
|
|
172
|
+
}
|
|
173
|
+
);
|
|
174
|
+
}
|
|
175
|
+
);
|
|
176
|
+
q.displayName = "CarouselPrevious";
|
|
177
|
+
const G = o.forwardRef(
|
|
178
|
+
({
|
|
179
|
+
className: t,
|
|
180
|
+
size: l = "default",
|
|
181
|
+
ariaLabel: n,
|
|
182
|
+
onClick: a,
|
|
183
|
+
...u
|
|
184
|
+
}, c) => {
|
|
185
|
+
const { orientation: f, scrollNext: p, canScrollNext: C } = x(), e = y(), h = n ?? e.carousel.nextAriaLabel, s = f === "horizontal", i = l === "sm";
|
|
186
|
+
return /* @__PURE__ */ m(
|
|
187
|
+
z,
|
|
188
|
+
{
|
|
189
|
+
ref: c,
|
|
190
|
+
direction: "right",
|
|
191
|
+
size: l,
|
|
192
|
+
disabled: !C,
|
|
193
|
+
"aria-label": h,
|
|
194
|
+
onClick: (w) => {
|
|
195
|
+
p(), a == null || a(w);
|
|
196
|
+
},
|
|
197
|
+
className: b(
|
|
198
|
+
"absolute",
|
|
199
|
+
{
|
|
200
|
+
"top-1/2 -translate-y-1/2": s,
|
|
201
|
+
"left-1/2 -translate-x-1/2 rotate-90": !s,
|
|
202
|
+
"-right-comp-carousel-arrow-offset-sm": s && i,
|
|
203
|
+
"-right-comp-carousel-arrow-offset": s && !i,
|
|
204
|
+
"-bottom-comp-carousel-arrow-offset-v-sm": !s && i,
|
|
205
|
+
"-bottom-comp-carousel-arrow-offset-v": !s && !i
|
|
206
|
+
},
|
|
207
|
+
t
|
|
208
|
+
),
|
|
209
|
+
...u
|
|
210
|
+
}
|
|
211
|
+
);
|
|
212
|
+
}
|
|
213
|
+
);
|
|
214
|
+
G.displayName = "CarouselNext";
|
|
215
|
+
const J = ({
|
|
216
|
+
className: t,
|
|
217
|
+
ariaLabel: l,
|
|
218
|
+
buttonAriaLabel: n
|
|
219
|
+
}) => {
|
|
220
|
+
const { selectedIndex: a, scrollTo: u, slidesCount: c } = x(), f = y();
|
|
221
|
+
return c <= 1 ? null : /* @__PURE__ */ m(
|
|
222
|
+
F,
|
|
223
|
+
{
|
|
224
|
+
count: c,
|
|
225
|
+
activeIndex: a,
|
|
226
|
+
onDotClick: u,
|
|
227
|
+
interactive: !0,
|
|
228
|
+
className: b("mt-comp-carousel-dots-gap", t),
|
|
229
|
+
ariaLabel: l ?? f.carousel.dotsAriaLabel,
|
|
230
|
+
buttonAriaLabel: n ?? f.carousel.dotAriaLabel
|
|
231
|
+
}
|
|
232
|
+
);
|
|
233
|
+
};
|
|
234
|
+
export {
|
|
235
|
+
M as Carousel,
|
|
236
|
+
U as CarouselContent,
|
|
237
|
+
J as CarouselDots,
|
|
238
|
+
V as CarouselItem,
|
|
239
|
+
G as CarouselNext,
|
|
240
|
+
q as CarouselPrevious
|
|
241
|
+
};
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { Meta, StoryObj } from '@storybook/react-vite';
|
|
2
|
+
import { Carousel } from './Carousel';
|
|
3
|
+
declare const meta: Meta<typeof Carousel>;
|
|
4
|
+
export default meta;
|
|
5
|
+
type Story = StoryObj<typeof Carousel>;
|
|
6
|
+
export declare const Default: Story;
|
|
7
|
+
export declare const Vertical: Story;
|
|
8
|
+
export declare const MultipleVisible: Story;
|
|
9
|
+
export declare const WithLinks: Story;
|
|
10
|
+
export declare const Looping: Story;
|
|
11
|
+
export declare const SmallArrows: Story;
|
|
12
|
+
export declare const NoDots: Story;
|
|
13
|
+
//# sourceMappingURL=Carousel.stories.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Carousel.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Carousel/Carousel.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAG3D,OAAO,EACL,QAAQ,EAMT,MAAM,YAAY,CAAA;AAEnB,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,QAAQ,CAuC/B,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,QAAQ,CAAC,CAAA;AAiCtC,eAAO,MAAM,OAAO,EAAE,KA4BrB,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAiCtB,CAAA;AAED,eAAO,MAAM,eAAe,EAAE,KA4B7B,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KAyCvB,CAAA;AAED,eAAO,MAAM,OAAO,EAAE,KA8BrB,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KA6BzB,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KA2BpB,CAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Carousel/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataTable.stories.d.ts","sourceRoot":"","sources":["../../../src/components/DataTable/DataTable.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAQ3D,QAAA,MAAM,IAAI,EAAE,IAkDX,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAA;
|
|
1
|
+
{"version":3,"file":"DataTable.stories.d.ts","sourceRoot":"","sources":["../../../src/components/DataTable/DataTable.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAQ3D,QAAA,MAAM,IAAI,EAAE,IAkDX,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAA;AA+FrB,eAAO,MAAM,OAAO,EAAE,KAUrB,CAAA;AAaD,eAAO,MAAM,WAAW,EAAE,KAazB,CAAA;AA0CD,eAAO,MAAM,iBAAiB,EAAE,KAa/B,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KAgB1B,CAAA;AAUD,eAAO,MAAM,kBAAkB,EAAE,KAwIhC,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KAwJ1B,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KAgB1B,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KActB,CAAA;AAED,eAAO,MAAM,oBAAoB,EAAE,KAclC,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KAqEzB,CAAA"}
|
|
@@ -3,9 +3,9 @@ import * as m from "react";
|
|
|
3
3
|
import * as a from "@radix-ui/react-dropdown-menu";
|
|
4
4
|
import { cva as N } from "class-variance-authority";
|
|
5
5
|
import { Button as I } from "../Button/Button.js";
|
|
6
|
-
import { Flex as D } from "../Flex/Flex.js";
|
|
7
6
|
import { cn as s } from "../../utils/cn.js";
|
|
8
7
|
import { UnreadOutline as x } from "@solar-icons/react-perf";
|
|
8
|
+
import { Flex as D } from "../Flex/Flex.js";
|
|
9
9
|
import { Typography as f } from "../Typography/Typography.js";
|
|
10
10
|
const g = m.createContext(null), M = () => m.useContext(g), B = ({ ...o }) => /* @__PURE__ */ e(a.Root, { "data-slot": "dropdown-menu", ...o }), F = ({ ...o }) => /* @__PURE__ */ e(a.Portal, { "data-slot": "dropdown-menu-portal", ...o }), H = ({ ...o }) => /* @__PURE__ */ e(
|
|
11
11
|
a.Trigger,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EdgeButton.stories.d.ts","sourceRoot":"","sources":["../../../src/components/EdgeButton/EdgeButton.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAI3D,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAIzC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,UAAU,CAkGjC,CAAA;AAED,eAAe,IAAI,CAAA;AAEnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,UAAU,CAAC,CAAA;AAExC,eAAO,MAAM,OAAO,EAAE,KAYrB,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KActB,CAAA;AAED,eAAO,MAAM,iBAAiB,EAAE,KAqD/B,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAmD3B,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAexB,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAe3B,CAAA;
|
|
1
|
+
{"version":3,"file":"EdgeButton.stories.d.ts","sourceRoot":"","sources":["../../../src/components/EdgeButton/EdgeButton.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAI3D,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAIzC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,UAAU,CAkGjC,CAAA;AAED,eAAe,IAAI,CAAA;AAEnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,UAAU,CAAC,CAAA;AAExC,eAAO,MAAM,OAAO,EAAE,KAYrB,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KActB,CAAA;AAED,eAAO,MAAM,iBAAiB,EAAE,KAqD/B,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAmD3B,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAexB,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAe3B,CAAA;AAcD,eAAO,MAAM,gBAAgB,EAAE,KA+H9B,CAAA"}
|