@zayne-labs/ui-react 0.10.17 → 0.10.19
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/esm/common/await/index.d.ts +4 -4
- package/dist/esm/common/await/index.js +2 -2
- package/dist/esm/common/error-boundary/index.d.ts +1 -1
- package/dist/esm/common/for/index.d.ts +2 -2
- package/dist/esm/common/show/index.js +1 -1
- package/dist/esm/common/slot/index.d.ts +2 -2
- package/dist/esm/common/slot/index.js +1 -1
- package/dist/esm/common/suspense-with-boundary/index.d.ts +2 -2
- package/dist/esm/common/switch/index.js +1 -1
- package/dist/esm/{index-B0pltiMx.d.ts → index-D6hJZOUb.d.ts} +3 -3
- package/dist/esm/{index-BrthGc3V.d.ts → index-Jh0m0Bft.d.ts} +4 -4
- package/dist/esm/{show-N1ZXBhoA.js → show-CDY_D1V0.js} +2 -2
- package/dist/esm/{show-N1ZXBhoA.js.map → show-CDY_D1V0.js.map} +1 -1
- package/dist/esm/{slot-WVWfOlr3.js → slot-BqT2dZGT.js} +2 -2
- package/dist/esm/{slot-WVWfOlr3.js.map → slot-BqT2dZGT.js.map} +1 -1
- package/dist/esm/ui/card/index.d.ts +8 -8
- package/dist/esm/ui/card/index.js +2 -2
- package/dist/esm/ui/carousel/index.d.ts +1 -1
- package/dist/esm/ui/carousel/index.js +4 -4
- package/dist/esm/ui/carousel/index.js.map +1 -1
- package/dist/esm/ui/drop-zone/index.d.ts +13 -14
- package/dist/esm/ui/drop-zone/index.js +10 -9
- package/dist/esm/ui/drop-zone/index.js.map +1 -1
- package/dist/esm/ui/form/index.d.ts +18 -18
- package/dist/esm/ui/form/index.js +4 -4
- package/dist/esm/ui/form/index.js.map +1 -1
- package/package.json +9 -9
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import { ErrorBoundaryProps } from "../../index-
|
|
2
|
-
import { SuspenseWithBoundaryProps } from "../../index-
|
|
1
|
+
import { ErrorBoundaryProps } from "../../index-D6hJZOUb.js";
|
|
2
|
+
import { SuspenseWithBoundaryProps } from "../../index-Jh0m0Bft.js";
|
|
3
3
|
import { GetSlotComponentProps } from "@zayne-labs/toolkit-react/utils";
|
|
4
4
|
import * as React from "react";
|
|
5
|
-
import * as
|
|
5
|
+
import * as react_jsx_runtime0 from "react/jsx-runtime";
|
|
6
6
|
|
|
7
7
|
//#region src/components/common/await/await.d.ts
|
|
8
8
|
type RenderPropFn<TValue> = (result: TValue) => React.ReactNode;
|
|
@@ -14,7 +14,7 @@ type AwaitRootProps<TValue> = Pick<SuspenseWithBoundaryProps, "errorFallback" |
|
|
|
14
14
|
withErrorBoundary?: boolean;
|
|
15
15
|
withSuspense?: boolean;
|
|
16
16
|
};
|
|
17
|
-
declare function AwaitRoot<TValue>(props: AwaitRootProps<TValue>):
|
|
17
|
+
declare function AwaitRoot<TValue>(props: AwaitRootProps<TValue>): react_jsx_runtime0.JSX.Element;
|
|
18
18
|
type AwaitSuccessProps<TValue = unknown> = GetSlotComponentProps<"default", ChildrenType<TValue>>;
|
|
19
19
|
declare function AwaitSuccess<TPromiseOrValue, TValue = Awaited<TPromiseOrValue>>(props: Pick<AwaitSuccessProps<TValue>, "children">): React.ReactNode;
|
|
20
20
|
type AwaitErrorProps = GetSlotComponentProps<"error", ErrorBoundaryProps["fallback"]>;
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
|
|
4
4
|
import { __export } from "../../chunk-CTAAG5j7.js";
|
|
5
5
|
import { ErrorBoundary, useErrorBoundaryContext } from "../../error-boundary-y9Samt_s.js";
|
|
6
|
-
import { SlotRoot } from "../../slot-
|
|
6
|
+
import { SlotRoot } from "../../slot-BqT2dZGT.js";
|
|
7
7
|
import { getSlotMap, withSlotNameAndSymbol } from "@zayne-labs/toolkit-react/utils";
|
|
8
8
|
import { isFunction } from "@zayne-labs/toolkit-type-helpers";
|
|
9
9
|
import { Fragment, Suspense, use, useMemo } from "react";
|
|
@@ -78,7 +78,7 @@ const AwaitPending = withSlotNameAndSymbol("pending");
|
|
|
78
78
|
|
|
79
79
|
//#endregion
|
|
80
80
|
//#region src/components/common/await/await-parts.ts
|
|
81
|
-
var await_parts_exports = __export({
|
|
81
|
+
var await_parts_exports = /* @__PURE__ */ __export({
|
|
82
82
|
Error: () => AwaitError,
|
|
83
83
|
Pending: () => AwaitPending,
|
|
84
84
|
Root: () => AwaitRoot,
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { ErrorBoundary, ErrorBoundaryContextType, ErrorBoundaryProps, FallbackProps, useErrorBoundary, useErrorBoundaryContext } from "../../index-
|
|
1
|
+
import { ErrorBoundary, ErrorBoundaryContextType, ErrorBoundaryProps, FallbackProps, useErrorBoundary, useErrorBoundaryContext } from "../../index-D6hJZOUb.js";
|
|
2
2
|
export { ErrorBoundary, ErrorBoundaryContextType, ErrorBoundaryProps, FallbackProps, useErrorBoundary, useErrorBoundaryContext };
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { DiscriminatedRenderItemProps, PolymorphicPropsStrict } from "@zayne-labs/toolkit-react/utils";
|
|
2
2
|
import { Prettify } from "@zayne-labs/toolkit-type-helpers";
|
|
3
3
|
import * as React from "react";
|
|
4
|
-
import * as
|
|
4
|
+
import * as react_jsx_runtime1 from "react/jsx-runtime";
|
|
5
5
|
|
|
6
6
|
//#region src/components/common/for/for.d.ts
|
|
7
7
|
type ArrayOrNumber = number | readonly unknown[];
|
|
@@ -13,7 +13,7 @@ type ForProps<TArray extends ArrayOrNumber> = Prettify<{
|
|
|
13
13
|
fallback?: React.ReactNode;
|
|
14
14
|
} & ForRenderProps<TArray>>;
|
|
15
15
|
declare function For<const TArray extends ArrayOrNumber>(props: ForProps<TArray>): string | number | bigint | boolean | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | null;
|
|
16
|
-
declare function ForWithWrapper<const TArray extends ArrayOrNumber, TElement extends React.ElementType = "ul">(props: PolymorphicPropsStrict<TElement, ForProps<TArray>>):
|
|
16
|
+
declare function ForWithWrapper<const TArray extends ArrayOrNumber, TElement extends React.ElementType = "ul">(props: PolymorphicPropsStrict<TElement, ForProps<TArray>>): react_jsx_runtime1.JSX.Element;
|
|
17
17
|
//#endregion
|
|
18
18
|
//#region src/components/common/for/getElementList.d.ts
|
|
19
19
|
type GetElementListResult<TVariant extends "base" | "withWrapper"> = TVariant extends "base" ? [typeof For] : [typeof ForWithWrapper];
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
|
|
3
3
|
|
|
4
|
-
import { ShowContent, ShowFallback, ShowRoot, show_parts_exports } from "../../show-
|
|
4
|
+
import { ShowContent, ShowFallback, ShowRoot, show_parts_exports } from "../../show-CDY_D1V0.js";
|
|
5
5
|
|
|
6
6
|
export { show_parts_exports as Show, ShowContent, ShowFallback, ShowRoot };
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { InferProps } from "@zayne-labs/toolkit-react/utils";
|
|
2
2
|
import * as React from "react";
|
|
3
|
-
import * as
|
|
3
|
+
import * as react_jsx_runtime3 from "react/jsx-runtime";
|
|
4
4
|
|
|
5
5
|
//#region src/components/common/slot/slot.d.ts
|
|
6
6
|
type SlotProps = InferProps<HTMLElement>;
|
|
7
|
-
declare function SlotRoot(props: SlotProps):
|
|
7
|
+
declare function SlotRoot(props: SlotProps): react_jsx_runtime3.JSX.Element | null;
|
|
8
8
|
declare function SlotSlottable({
|
|
9
9
|
children
|
|
10
10
|
}: Pick<SlotProps, "children">): React.ReactNode;
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import "../../index-
|
|
2
|
-
import { SuspenseWithBoundary, SuspenseWithBoundaryProps } from "../../index-
|
|
1
|
+
import "../../index-D6hJZOUb.js";
|
|
2
|
+
import { SuspenseWithBoundary, SuspenseWithBoundaryProps } from "../../index-Jh0m0Bft.js";
|
|
3
3
|
export { SuspenseWithBoundary, SuspenseWithBoundaryProps };
|
|
@@ -30,7 +30,7 @@ SwitchDefault.slotSymbol = Symbol("switch-default");
|
|
|
30
30
|
|
|
31
31
|
//#endregion
|
|
32
32
|
//#region src/components/common/switch/switch-parts.ts
|
|
33
|
-
var switch_parts_exports = __export({
|
|
33
|
+
var switch_parts_exports = /* @__PURE__ */ __export({
|
|
34
34
|
Default: () => SwitchDefault,
|
|
35
35
|
Match: () => SwitchMatch,
|
|
36
36
|
Root: () => SwitchRoot
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as React$1 from "react";
|
|
2
2
|
import { Component } from "react";
|
|
3
3
|
import "@zayne-labs/toolkit-react";
|
|
4
|
-
import * as
|
|
4
|
+
import * as react_jsx_runtime2 from "react/jsx-runtime";
|
|
5
5
|
|
|
6
6
|
//#region src/components/common/error-boundary/types.d.ts
|
|
7
7
|
type FallbackProps = {
|
|
@@ -49,7 +49,7 @@ declare class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryS
|
|
|
49
49
|
};
|
|
50
50
|
componentDidCatch(error: Error, info: React$1.ErrorInfo): void;
|
|
51
51
|
componentDidUpdate(prevProps: ErrorBoundaryProps, prevState: ErrorBoundaryState): void;
|
|
52
|
-
render():
|
|
52
|
+
render(): react_jsx_runtime2.JSX.Element;
|
|
53
53
|
}
|
|
54
54
|
//#endregion
|
|
55
55
|
//#region src/components/common/error-boundary/error-boundary-context.d.ts
|
|
@@ -66,4 +66,4 @@ declare const useErrorBoundary: <TError extends Error>() => {
|
|
|
66
66
|
};
|
|
67
67
|
//#endregion
|
|
68
68
|
export { ErrorBoundary, type ErrorBoundaryContextType, ErrorBoundaryProps, FallbackProps, useErrorBoundary, useErrorBoundaryContext };
|
|
69
|
-
//# sourceMappingURL=index-
|
|
69
|
+
//# sourceMappingURL=index-D6hJZOUb.d.ts.map
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { ErrorBoundaryProps } from "./index-
|
|
1
|
+
import { ErrorBoundaryProps } from "./index-D6hJZOUb.js";
|
|
2
2
|
import * as React from "react";
|
|
3
|
-
import * as
|
|
3
|
+
import * as react_jsx_runtime0 from "react/jsx-runtime";
|
|
4
4
|
|
|
5
5
|
//#region src/components/common/suspense-with-boundary/suspense-with-boundary.d.ts
|
|
6
6
|
type SuspenseWithBoundaryProps = {
|
|
@@ -8,7 +8,7 @@ type SuspenseWithBoundaryProps = {
|
|
|
8
8
|
errorFallback?: ErrorBoundaryProps["fallback"];
|
|
9
9
|
fallback?: React.ReactNode;
|
|
10
10
|
};
|
|
11
|
-
declare function SuspenseWithBoundary(props: SuspenseWithBoundaryProps):
|
|
11
|
+
declare function SuspenseWithBoundary(props: SuspenseWithBoundaryProps): react_jsx_runtime0.JSX.Element;
|
|
12
12
|
//#endregion
|
|
13
13
|
export { SuspenseWithBoundary, SuspenseWithBoundaryProps };
|
|
14
|
-
//# sourceMappingURL=index-
|
|
14
|
+
//# sourceMappingURL=index-Jh0m0Bft.d.ts.map
|
|
@@ -38,7 +38,7 @@ ShowFallback.slotSymbol = Symbol("show-fallback");
|
|
|
38
38
|
|
|
39
39
|
//#endregion
|
|
40
40
|
//#region src/components/common/show/show-parts.ts
|
|
41
|
-
var show_parts_exports = __export({
|
|
41
|
+
var show_parts_exports = /* @__PURE__ */ __export({
|
|
42
42
|
Content: () => ShowContent,
|
|
43
43
|
Fallback: () => ShowFallback,
|
|
44
44
|
Otherwise: () => ShowFallback,
|
|
@@ -47,4 +47,4 @@ var show_parts_exports = __export({
|
|
|
47
47
|
|
|
48
48
|
//#endregion
|
|
49
49
|
export { ShowContent, ShowFallback, ShowRoot, show_parts_exports };
|
|
50
|
-
//# sourceMappingURL=show-
|
|
50
|
+
//# sourceMappingURL=show-CDY_D1V0.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"show-
|
|
1
|
+
{"version":3,"file":"show-CDY_D1V0.js","names":["fallBackSlot"],"sources":["../../src/components/common/show/show.tsx","../../src/components/common/show/show-parts.ts"],"sourcesContent":["\"use client\";\n\nimport { toArray } from \"@zayne-labs/toolkit-core\";\nimport { getMultipleSlots, getSingleSlot } from \"@zayne-labs/toolkit-react/utils\";\nimport { assert, isFunction } from \"@zayne-labs/toolkit-type-helpers\";\nimport * as React from \"react\";\n\ntype ShowProps<TWhen> =\n\t| {\n\t\t\tchildren: React.ReactNode;\n\t\t\tcontrol: \"content\";\n\t\t\tfallback?: React.ReactNode;\n\t\t\twhen?: never;\n\t }\n\t| {\n\t\t\tchildren: React.ReactNode | ((value: TWhen) => React.ReactNode);\n\t\t\tcontrol?: \"root\";\n\t\t\tfallback?: React.ReactNode;\n\t\t\twhen: false | TWhen | null | undefined;\n\t };\n\nexport function ShowRoot<TWhen>(props: ShowProps<TWhen>) {\n\tconst { children, control = \"root\", fallback = null, when } = props;\n\n\tif (control === \"content\" && !isFunction(children)) {\n\t\tconst childrenArray = toArray(children) as Array<React.ReactElement<ShowContentProps<TWhen>>>;\n\n\t\tconst foundContentSlot = childrenArray.find((child) => Boolean(child.props.when));\n\n\t\tconst fallBackSlot = getSingleSlot(childrenArray, ShowFallback);\n\n\t\tassert(\n\t\t\t!(fallBackSlot && fallback),\n\t\t\t\"The fallback prop and <Show.Fallback> cannot be used at the same time.\"\n\t\t);\n\n\t\treturn foundContentSlot ?? fallBackSlot ?? fallback;\n\t}\n\n\tconst resolvedChildren = isFunction(children) ? children(when as TWhen) : children;\n\n\tconst {\n\t\tregularChildren,\n\t\tslots: [contentSlot, fallBackSlot],\n\t} = getMultipleSlots(resolvedChildren, [ShowContent, ShowFallback], {\n\t\terrorMessage: [\n\t\t\t\"Only one <Show.Content> component is allowed\",\n\t\t\t\"Only one <Show.Fallback> or <Show.OtherWise> component is allowed\",\n\t\t],\n\t\tthrowOnMultipleSlotMatch: true,\n\t});\n\n\tif (!when) {\n\t\tassert(\n\t\t\t!(fallBackSlot && fallback),\n\t\t\t\"The fallback prop and <Show.Fallback> cannot be used at the same time.\"\n\t\t);\n\n\t\treturn fallBackSlot ?? fallback;\n\t}\n\n\treturn contentSlot ?? regularChildren;\n}\n\ntype ShowContentProps<TWhen> = Pick<ShowProps<TWhen>, \"children\" | \"when\">;\n\nexport function ShowContent<TWhen>(props: ShowContentProps<TWhen>) {\n\tconst { children, when } = props;\n\n\tconst resolvedChildren = isFunction(children) ? children(when as TWhen) : children;\n\n\treturn resolvedChildren;\n}\n\nShowContent.slotSymbol = Symbol(\"show-content\");\n\nexport function ShowFallback(props: { children: React.ReactNode }) {\n\tconst { children } = props;\n\n\treturn children;\n}\nShowFallback.slotSymbol = Symbol(\"show-fallback\");\n","export {\n\tShowContent as Content,\n\tShowFallback as Fallback,\n\tShowFallback as Otherwise,\n\tShowRoot as Root,\n} from \"./show\";\n"],"mappings":";;;;;;;AAqBA,SAAgB,SAAgB,OAAyB;CACxD,MAAM,EAAE,UAAU,UAAU,QAAQ,WAAW,MAAM,SAAS;AAE9D,KAAI,YAAY,aAAa,CAAC,WAAW,SAAS,EAAE;EACnD,MAAM,gBAAgB,QAAQ,SAAS;EAEvC,MAAM,mBAAmB,cAAc,MAAM,UAAU,QAAQ,MAAM,MAAM,KAAK,CAAC;EAEjF,MAAMA,iBAAe,cAAc,eAAe,aAAa;AAE/D,SACC,EAAEA,kBAAgB,WAClB,yEACA;AAED,SAAO,oBAAoBA,kBAAgB;;CAG5C,MAAM,mBAAmB,WAAW,SAAS,GAAG,SAAS,KAAc,GAAG;CAE1E,MAAM,EACL,iBACA,OAAO,CAAC,aAAa,kBAClB,iBAAiB,kBAAkB,CAAC,aAAa,aAAa,EAAE;EACnE,cAAc,CACb,gDACA,oEACA;EACD,0BAA0B;EAC1B,CAAC;AAEF,KAAI,CAAC,MAAM;AACV,SACC,EAAE,gBAAgB,WAClB,yEACA;AAED,SAAO,gBAAgB;;AAGxB,QAAO,eAAe;;AAKvB,SAAgB,YAAmB,OAAgC;CAClE,MAAM,EAAE,UAAU,SAAS;AAI3B,QAFyB,WAAW,SAAS,GAAG,SAAS,KAAc,GAAG;;AAK3E,YAAY,aAAa,OAAO,eAAe;AAE/C,SAAgB,aAAa,OAAsC;CAClE,MAAM,EAAE,aAAa;AAErB,QAAO;;AAER,aAAa,aAAa,OAAO,gBAAgB"}
|
|
@@ -48,11 +48,11 @@ function SlotClone(props) {
|
|
|
48
48
|
|
|
49
49
|
//#endregion
|
|
50
50
|
//#region src/components/common/slot/slot-parts.ts
|
|
51
|
-
var slot_parts_exports = __export({
|
|
51
|
+
var slot_parts_exports = /* @__PURE__ */ __export({
|
|
52
52
|
Root: () => SlotRoot,
|
|
53
53
|
Slottable: () => SlotSlottable
|
|
54
54
|
});
|
|
55
55
|
|
|
56
56
|
//#endregion
|
|
57
57
|
export { SlotRoot, SlotSlottable, slot_parts_exports };
|
|
58
|
-
//# sourceMappingURL=slot-
|
|
58
|
+
//# sourceMappingURL=slot-BqT2dZGT.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"slot-
|
|
1
|
+
{"version":3,"file":"slot-BqT2dZGT.js","names":["ReactFragment"],"sources":["../../src/components/common/slot/slot.tsx","../../src/components/common/slot/slot-parts.ts"],"sourcesContent":["import { composeRefs, type InferProps, mergeProps } from \"@zayne-labs/toolkit-react/utils\";\nimport { isArray, type UnknownObject } from \"@zayne-labs/toolkit-type-helpers\";\nimport * as React from \"react\";\nimport { Children, cloneElement, isValidElement, Fragment as ReactFragment } from \"react\";\n\ntype SlotProps = InferProps<HTMLElement>;\n\n/* -------------------------------------------------------------------------------------------------\n * Slot\n * ----------------------------------------------------------------------------------------------- */\n\nexport function SlotRoot(props: SlotProps) {\n\tconst { children, ...restOfSlotProps } = props;\n\n\tconst childrenArray = isArray<React.ReactNode>(children) ? children : [children];\n\n\tconst slottable = childrenArray.find((element) => isSlottable(element));\n\n\tif (!slottable) {\n\t\treturn <SlotClone {...restOfSlotProps}>{children}</SlotClone>;\n\t}\n\n\tif (!isValidElement<SlotProps>(slottable)) {\n\t\treturn null;\n\t}\n\n\t// == The new element to render is the one passed as a child of `Slot.Slottable`\n\tconst newElement = slottable.props.children;\n\n\tif (!isValidElement(newElement)) {\n\t\treturn null;\n\t}\n\n\tif (Children.count(newElement) > 1) {\n\t\treturn Children.only(null);\n\t}\n\n\tconst newChildren = childrenArray.map((child) => {\n\t\tif (child === slottable) {\n\t\t\t// == Because the new element will be the one rendered, we are only interested in grabbing its children (`newElement.props.children`)\n\t\t\treturn (newElement.props as SlotProps).children;\n\t\t}\n\n\t\treturn child;\n\t});\n\n\treturn <SlotClone {...restOfSlotProps}>{cloneElement(newElement, undefined, newChildren)}</SlotClone>;\n}\n\n/* -------------------------------------------------------------------------------------------------\n * Slottable\n * ----------------------------------------------------------------------------------------------- */\n\nexport function SlotSlottable({ children }: Pick<SlotProps, \"children\">) {\n\treturn children;\n}\n\nconst isSlottable = (child: React.ReactNode): child is React.ReactElement => {\n\treturn isValidElement(child) && child.type === SlotSlottable;\n};\n\n/* -------------------------------------------------------------------------------------------------\n * SlotClone\n * ----------------------------------------------------------------------------------------------- */\ntype SlotCloneProps = {\n\tchildren: React.ReactNode;\n\tref?: React.RefObject<HTMLElement>;\n};\n\nfunction SlotClone(props: SlotCloneProps) {\n\tconst { children, ref: forwardedRef, ...restOfSlotProps } = props;\n\n\tconst resolvedChild = Children.only(children);\n\n\tif (!isValidElement<UnknownObject>(resolvedChild)) {\n\t\treturn null;\n\t}\n\n\tif (Children.count(resolvedChild) > 1) {\n\t\treturn Children.only(null);\n\t}\n\n\tconst childRef = (resolvedChild.props.ref\n\t\t?? (resolvedChild as unknown as UnknownObject).ref) as React.Ref<HTMLElement>;\n\n\tconst ref = forwardedRef ? composeRefs(forwardedRef, childRef) : childRef;\n\n\tconst clonedProps = {\n\t\t...mergeProps(restOfSlotProps, resolvedChild.props),\n\t\t...(resolvedChild.type !== ReactFragment && { ref }),\n\t};\n\n\treturn cloneElement(resolvedChild, clonedProps);\n}\n","export { SlotRoot as Root, SlotSlottable as Slottable } from \"./slot\";\n"],"mappings":";;;;;;;AAWA,SAAgB,SAAS,OAAkB;CAC1C,MAAM,EAAE,SAAU,GAAG,oBAAoB;CAEzC,MAAM,gBAAgB,QAAyB,SAAS,GAAG,WAAW,CAAC,SAAS;CAEhF,MAAM,YAAY,cAAc,MAAM,YAAY,YAAY,QAAQ,CAAC;AAEvE,KAAI,CAAC,UACJ,QAAO,oBAAC;EAAU,GAAI;EAAkB;GAAqB;AAG9D,KAAI,CAAC,eAA0B,UAAU,CACxC,QAAO;CAIR,MAAM,aAAa,UAAU,MAAM;AAEnC,KAAI,CAAC,eAAe,WAAW,CAC9B,QAAO;AAGR,KAAI,SAAS,MAAM,WAAW,GAAG,EAChC,QAAO,SAAS,KAAK,KAAK;CAG3B,MAAM,cAAc,cAAc,KAAK,UAAU;AAChD,MAAI,UAAU,UAEb,QAAQ,WAAW,MAAoB;AAGxC,SAAO;GACN;AAEF,QAAO,oBAAC;EAAU,GAAI;YAAkB,aAAa,YAAY,QAAW,YAAY;GAAa;;AAOtG,SAAgB,cAAc,EAAE,YAAyC;AACxE,QAAO;;AAGR,MAAM,eAAe,UAAwD;AAC5E,QAAO,eAAe,MAAM,IAAI,MAAM,SAAS;;AAWhD,SAAS,UAAU,OAAuB;CACzC,MAAM,EAAE,UAAU,KAAK,aAAc,GAAG,oBAAoB;CAE5D,MAAM,gBAAgB,SAAS,KAAK,SAAS;AAE7C,KAAI,CAAC,eAA8B,cAAc,CAChD,QAAO;AAGR,KAAI,SAAS,MAAM,cAAc,GAAG,EACnC,QAAO,SAAS,KAAK,KAAK;CAG3B,MAAM,WAAY,cAAc,MAAM,OACjC,cAA2C;CAEhD,MAAM,MAAM,eAAe,YAAY,cAAc,SAAS,GAAG;CAEjE,MAAM,cAAc;EACnB,GAAG,WAAW,iBAAiB,cAAc,MAAM;EACnD,GAAI,cAAc,SAASA,YAAiB,EAAE,KAAK;EACnD;AAED,QAAO,aAAa,eAAe,YAAY"}
|
|
@@ -1,17 +1,17 @@
|
|
|
1
1
|
import { PolymorphicProps } from "@zayne-labs/toolkit-react/utils";
|
|
2
2
|
import * as React from "react";
|
|
3
|
-
import * as
|
|
3
|
+
import * as react_jsx_runtime21 from "react/jsx-runtime";
|
|
4
4
|
|
|
5
5
|
//#region src/components/ui/card/card.d.ts
|
|
6
|
-
declare function CardRoot<TElement extends React.ElementType = "article">(props: PolymorphicProps<TElement>):
|
|
7
|
-
declare function CardHeader<TElement extends React.ElementType = "header">(props: PolymorphicProps<TElement>):
|
|
8
|
-
declare function CardTitle<TElement extends React.ElementType = "h3">(props: PolymorphicProps<TElement>):
|
|
9
|
-
declare function CardDescription<TElement extends React.ElementType = "p">(props: PolymorphicProps<TElement>):
|
|
10
|
-
declare function CardContent<TElement extends React.ElementType = "div">(props: PolymorphicProps<TElement>):
|
|
11
|
-
declare function CardAction<TElement extends React.ElementType = "div">(props: PolymorphicProps<TElement>):
|
|
6
|
+
declare function CardRoot<TElement extends React.ElementType = "article">(props: PolymorphicProps<TElement>): react_jsx_runtime21.JSX.Element;
|
|
7
|
+
declare function CardHeader<TElement extends React.ElementType = "header">(props: PolymorphicProps<TElement>): react_jsx_runtime21.JSX.Element;
|
|
8
|
+
declare function CardTitle<TElement extends React.ElementType = "h3">(props: PolymorphicProps<TElement>): react_jsx_runtime21.JSX.Element;
|
|
9
|
+
declare function CardDescription<TElement extends React.ElementType = "p">(props: PolymorphicProps<TElement>): react_jsx_runtime21.JSX.Element;
|
|
10
|
+
declare function CardContent<TElement extends React.ElementType = "div">(props: PolymorphicProps<TElement>): react_jsx_runtime21.JSX.Element;
|
|
11
|
+
declare function CardAction<TElement extends React.ElementType = "div">(props: PolymorphicProps<TElement>): react_jsx_runtime21.JSX.Element;
|
|
12
12
|
declare function CardFooter<TElement extends React.ElementType = "footer">(props: PolymorphicProps<TElement, {
|
|
13
13
|
asChild?: boolean;
|
|
14
|
-
}>):
|
|
14
|
+
}>): react_jsx_runtime21.JSX.Element;
|
|
15
15
|
declare namespace card_parts_d_exports {
|
|
16
16
|
export { CardAction as Action, CardContent as Content, CardDescription as Description, CardFooter as Footer, CardHeader as Header, CardRoot as Root, CardTitle as Title };
|
|
17
17
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { __export } from "../../chunk-CTAAG5j7.js";
|
|
2
|
-
import { SlotRoot } from "../../slot-
|
|
2
|
+
import { SlotRoot } from "../../slot-BqT2dZGT.js";
|
|
3
3
|
import { cnMerge } from "../../cn-DdD3uYxA.js";
|
|
4
4
|
import "react";
|
|
5
5
|
import { jsx } from "react/jsx-runtime";
|
|
@@ -80,7 +80,7 @@ function CardFooter(props) {
|
|
|
80
80
|
|
|
81
81
|
//#endregion
|
|
82
82
|
//#region src/components/ui/card/card-parts.ts
|
|
83
|
-
var card_parts_exports = __export({
|
|
83
|
+
var card_parts_exports = /* @__PURE__ */ __export({
|
|
84
84
|
Action: () => CardAction,
|
|
85
85
|
Content: () => CardContent,
|
|
86
86
|
Description: () => CardDescription,
|
|
@@ -88,7 +88,7 @@ declare function CarouselCaption<TElement extends React$1.ElementType = "div">(p
|
|
|
88
88
|
declare function CarouselIndicatorList<TArrayItem>(props: CarouselWrapperProps<TArrayItem>): react_jsx_runtime28.JSX.Element;
|
|
89
89
|
declare function CarouselIndicator(props: CarouselIndicatorProps): react_jsx_runtime28.JSX.Element;
|
|
90
90
|
declare namespace carousel_parts_d_exports {
|
|
91
|
-
export { CarouselButton as Button, CarouselCaption as Caption, CarouselControls as Controls, CarouselIndicator as Indicator, CarouselIndicatorList as
|
|
91
|
+
export { CarouselButton as Button, CarouselCaption as Caption, CarouselControls as Controls, CarouselIndicator as Indicator, CarouselIndicatorList as IndicatorList, CarouselItem as Item, CarouselItemList as ItemList, CarouselRoot as Root };
|
|
92
92
|
}
|
|
93
93
|
//#endregion
|
|
94
94
|
export { carousel_parts_d_exports as Carousel, CarouselButton, CarouselButtonsProps, CarouselCaption, CarouselControlProps, CarouselControls, CarouselIndicator, CarouselIndicatorList, CarouselIndicatorProps, CarouselItem, CarouselItemList, CarouselRoot, CarouselRootProps, CarouselStore, CarouselStoreApi, CarouselWrapperProps, ImagesType, OtherCarouselProps };
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
|
|
4
4
|
import { __export } from "../../chunk-CTAAG5j7.js";
|
|
5
5
|
import { For } from "../../for-BYsFEk3R.js";
|
|
6
|
-
import { ShowContent, ShowFallback, ShowRoot } from "../../show-
|
|
6
|
+
import { ShowContent, ShowFallback, ShowRoot } from "../../show-CDY_D1V0.js";
|
|
7
7
|
import { cnMerge } from "../../cn-DdD3uYxA.js";
|
|
8
8
|
import { isFunction } from "@zayne-labs/toolkit-type-helpers";
|
|
9
9
|
import { useMemo, useState } from "react";
|
|
@@ -272,14 +272,14 @@ function CarouselIndicator(props) {
|
|
|
272
272
|
|
|
273
273
|
//#endregion
|
|
274
274
|
//#region src/components/ui/carousel/carousel-parts.ts
|
|
275
|
-
var carousel_parts_exports = __export({
|
|
275
|
+
var carousel_parts_exports = /* @__PURE__ */ __export({
|
|
276
276
|
Button: () => CarouselButton,
|
|
277
277
|
Caption: () => CarouselCaption,
|
|
278
278
|
Controls: () => CarouselControls,
|
|
279
279
|
Indicator: () => CarouselIndicator,
|
|
280
|
-
|
|
280
|
+
IndicatorList: () => CarouselIndicatorList,
|
|
281
281
|
Item: () => CarouselItem,
|
|
282
|
-
|
|
282
|
+
ItemList: () => CarouselItemList,
|
|
283
283
|
Root: () => CarouselRoot
|
|
284
284
|
});
|
|
285
285
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["useCarouselStore: typeof useCarouselStoreContext","Show.Root","Show.Content","Show.Fallback"],"sources":["../../../../src/components/ui/carousel/carousel-store-context.ts","../../../../src/components/ui/carousel/icons.tsx","../../../../src/components/ui/carousel/useCarouselOptions.ts","../../../../src/components/ui/carousel/carousel.tsx","../../../../src/components/ui/carousel/carousel-parts.ts"],"sourcesContent":["import { createStore } from \"@zayne-labs/toolkit-core\";\nimport { useCallbackRef, useStore } from \"@zayne-labs/toolkit-react\";\nimport { createZustandContext } from \"@zayne-labs/toolkit-react/zustand\";\nimport type { PrettyOmit } from \"@zayne-labs/toolkit-type-helpers\";\nimport { useMemo } from \"react\";\nimport type { CarouselRootProps, CarouselStore, ImagesType } from \"./types\";\n\nconst [CarouselStoreContextProvider, useCarouselStoreContext] = createZustandContext<CarouselStore>({\n\thookName: \"useCarouselStore\",\n\tname: \"CarouselStoreContext\",\n\tproviderName: \"CarouselRoot\",\n});\n\n// CarouselStore Creation\nconst createCarouselStore = <TImages extends ImagesType>(\n\tstoreValues: PrettyOmit<CarouselRootProps<TImages>, \"children\">\n) => {\n\tconst { images, onSlideBtnClick } = storeValues;\n\n\tconst carouselStore = createStore<CarouselStore<TImages>>((set, get) => ({\n\t\tcurrentSlide: 0,\n\t\timages,\n\t\tmaxSlide: images.length - 1,\n\n\t\t/* eslint-disable perfectionist/sort-objects -- actions should be last */\n\t\tactions: {\n\t\t\t/* eslint-enable perfectionist/sort-objects -- actions should be last */\n\n\t\t\tgoToNextSlide: () => {\n\t\t\t\tconst { currentSlide, maxSlide } = get();\n\t\t\t\tconst { goToSlide } = get().actions;\n\n\t\t\t\tif (currentSlide === maxSlide) {\n\t\t\t\t\tgoToSlide(0);\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tgoToSlide(currentSlide + 1);\n\t\t\t},\n\n\t\t\tgoToPreviousSlide: () => {\n\t\t\t\tconst { currentSlide, maxSlide } = get();\n\t\t\t\tconst { goToSlide } = get().actions;\n\n\t\t\t\tif (currentSlide === 0) {\n\t\t\t\t\tgoToSlide(maxSlide);\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tgoToSlide(currentSlide - 1);\n\t\t\t},\n\n\t\t\tgoToSlide: (newValue) => {\n\t\t\t\tonSlideBtnClick?.();\n\n\t\t\t\tset({ currentSlide: newValue });\n\t\t\t},\n\t\t},\n\t}));\n\n\treturn carouselStore;\n};\n\nconst useCarousel = <TImages extends ImagesType>(props: Omit<CarouselRootProps<TImages>, \"children\">) => {\n\tconst { images, onSlideBtnClick } = props;\n\n\tconst savedOnSlideBtnClick = useCallbackRef(onSlideBtnClick);\n\n\tconst carouselStore = useMemo(\n\t\t() => createCarouselStore({ images, onSlideBtnClick: savedOnSlideBtnClick }),\n\t\t[images, savedOnSlideBtnClick]\n\t);\n\n\tconst useCarouselStore: typeof useCarouselStoreContext = (selector) => {\n\t\treturn useStore(carouselStore, selector);\n\t};\n\n\tconst savedUseCarouselStore = useCallbackRef(useCarouselStore);\n\n\treturn useMemo(\n\t\t() => ({ carouselStore, useCarouselStore: savedUseCarouselStore }),\n\t\t[carouselStore, savedUseCarouselStore]\n\t);\n};\n\nexport { CarouselStoreContextProvider, useCarousel, useCarouselStoreContext };\n","import * as React from \"react\";\n\nexport const ChevronLeftIcon = (props: React.SVGProps<SVGSVGElement>) => (\n\t<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\" {...props}>\n\t\t<g fill=\"none\" stroke=\"currentColor\" strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth=\"2\">\n\t\t\t<circle cx=\"12\" cy=\"12\" r=\"10\" />\n\t\t\t<path d=\"m14 16l-4-4l4-4\" />\n\t\t</g>\n\t</svg>\n);\n","import { useAnimationInterval, useCallbackRef } from \"@zayne-labs/toolkit-react\";\nimport { useState } from \"react\";\nimport type { CarouselStore } from \"./types\";\n\ntype CarouselOptions = {\n\tactions: CarouselStore[\"actions\"];\n\tautoSlideInterval?: number;\n\thasAutoSlide?: boolean;\n\tshouldPauseOnHover?: boolean;\n};\n\nconst useCarouselOptions = (options: CarouselOptions) => {\n\tconst { actions, autoSlideInterval = 5000, hasAutoSlide = false, shouldPauseOnHover = false } = options;\n\n\tconst [isPaused, setIsPaused] = useState(false);\n\n\tconst shouldAutoSlide = hasAutoSlide && !isPaused;\n\n\tuseAnimationInterval({\n\t\tintervalDuration: shouldAutoSlide ? autoSlideInterval : null,\n\t\tonAnimation: actions.goToNextSlide,\n\t});\n\n\tconst pauseAutoSlide = useCallbackRef(() => shouldPauseOnHover && setIsPaused(true));\n\n\tconst resumeAutoSlide = useCallbackRef(() => shouldPauseOnHover && setIsPaused(false));\n\n\treturn { pauseAutoSlide, resumeAutoSlide };\n};\n\nexport { useCarouselOptions };\n","\"use client\";\n\nimport type { CssWithCustomProperties, PolymorphicPropsStrict } from \"@zayne-labs/toolkit-react/utils\";\nimport { isFunction } from \"@zayne-labs/toolkit-type-helpers\";\nimport * as React from \"react\";\nimport { Show } from \"@/components/common/show\";\nimport { For } from \"@/components/common/for\";\nimport { cnMerge } from \"@/lib/utils/cn\";\nimport {\n\tCarouselStoreContextProvider,\n\tuseCarousel,\n\tuseCarouselStoreContext,\n} from \"./carousel-store-context\";\nimport { ChevronLeftIcon } from \"./icons\";\nimport type {\n\tCarouselButtonsProps,\n\tCarouselControlProps,\n\tCarouselIndicatorProps,\n\tCarouselRootProps,\n\tCarouselWrapperProps,\n\tImagesType,\n\tOtherCarouselProps,\n} from \"./types\";\nimport { useCarouselOptions } from \"./useCarouselOptions\";\n\n// TODO - Add dragging and swiping support\nexport function CarouselRoot<TImages extends ImagesType, TElement extends React.ElementType = \"div\">(\n\tprops: PolymorphicPropsStrict<TElement, CarouselRootProps<TImages>>\n) {\n\tconst {\n\t\tas: Element = \"div\",\n\t\tautoSlideInterval,\n\t\tchildren,\n\t\tclassNames,\n\t\thasAutoSlide,\n\t\timages,\n\t\tonSlideBtnClick,\n\t\tshouldPauseOnHover,\n\t} = props;\n\n\tconst { carouselStore } = useCarousel({ images, onSlideBtnClick });\n\n\tconst actions = carouselStore.getState().actions;\n\n\tconst { pauseAutoSlide, resumeAutoSlide } = useCarouselOptions({\n\t\tactions,\n\t\tautoSlideInterval,\n\t\thasAutoSlide,\n\t\tshouldPauseOnHover,\n\t});\n\n\treturn (\n\t\t<CarouselStoreContextProvider store={carouselStore}>\n\t\t\t<Element\n\t\t\t\tdata-scope=\"carousel\"\n\t\t\t\tdata-part=\"content\"\n\t\t\t\tdata-slot=\"carousel-content\"\n\t\t\t\tclassName={cnMerge(\"relative select-none\", classNames?.base)}\n\t\t\t\tonMouseEnter={pauseAutoSlide}\n\t\t\t\tonMouseLeave={resumeAutoSlide}\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tclassName={cnMerge(\n\t\t\t\t\t\t\"flex size-full overflow-x-scroll [scrollbar-width:none] [&::-webkit-scrollbar]:hidden\",\n\t\t\t\t\t\tclassNames?.scrollContainer\n\t\t\t\t\t)}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t</div>\n\t\t\t</Element>\n\t\t</CarouselStoreContextProvider>\n\t);\n}\n\nexport function CarouselButton(props: CarouselButtonsProps) {\n\tconst { classNames, icon, variant } = props;\n\n\tconst { goToNextSlide, goToPreviousSlide } = useCarouselStoreContext((state) => state.actions);\n\n\treturn (\n\t\t<button\n\t\t\tdata-scope=\"carousel\"\n\t\t\tdata-part=\"button\"\n\t\t\tdata-slot=\"carousel-button\"\n\t\t\ttype=\"button\"\n\t\t\tclassName={cnMerge(\n\t\t\t\t\"z-30 flex h-full w-fit items-center\",\n\t\t\t\tvariant === \"prev\" ? \"justify-start\" : \"justify-end\",\n\t\t\t\tclassNames?.base\n\t\t\t)}\n\t\t\tonClick={variant === \"prev\" ? goToPreviousSlide : goToNextSlide}\n\t\t>\n\t\t\t<span className={cnMerge(\"transition-transform active:scale-[1.06]\", classNames?.iconContainer)}>\n\t\t\t\t{icon ?? (\n\t\t\t\t\t<ChevronLeftIcon\n\t\t\t\t\t\tclassName={cnMerge(variant === \"next\" && \"rotate-180\", classNames?.defaultIcon)}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</span>\n\t\t</button>\n\t);\n}\n\nexport function CarouselControls(props: CarouselControlProps) {\n\tconst { classNames, icon } = props;\n\n\treturn (\n\t\t<div\n\t\t\tdata-scope=\"carousel\"\n\t\t\tdata-part=\"controls\"\n\t\t\tdata-slot=\"carousel-controls\"\n\t\t\tclassName={cnMerge(\"absolute inset-0 flex justify-between\", classNames?.base)}\n\t\t>\n\t\t\t<Show.Root when={icon?.iconType}>\n\t\t\t\t<Show.Content>\n\t\t\t\t\t<CarouselButton\n\t\t\t\t\t\tvariant=\"prev\"\n\t\t\t\t\t\tclassNames={{\n\t\t\t\t\t\t\tdefaultIcon: classNames?.defaultIcon,\n\t\t\t\t\t\t\ticonContainer: cnMerge(\n\t\t\t\t\t\t\t\ticon?.iconType === \"nextIcon\" && \"rotate-180\",\n\t\t\t\t\t\t\t\tclassNames?.iconContainer\n\t\t\t\t\t\t\t),\n\t\t\t\t\t\t}}\n\t\t\t\t\t\ticon={icon?.icon}\n\t\t\t\t\t/>\n\n\t\t\t\t\t<CarouselButton\n\t\t\t\t\t\tvariant=\"next\"\n\t\t\t\t\t\tclassNames={{\n\t\t\t\t\t\t\tdefaultIcon: classNames?.defaultIcon,\n\t\t\t\t\t\t\ticonContainer: cnMerge(\n\t\t\t\t\t\t\t\ticon?.iconType === \"prevIcon\" && \"rotate-180\",\n\t\t\t\t\t\t\t\tclassNames?.iconContainer\n\t\t\t\t\t\t\t),\n\t\t\t\t\t\t}}\n\t\t\t\t\t\ticon={icon?.icon}\n\t\t\t\t\t/>\n\t\t\t\t</Show.Content>\n\n\t\t\t\t<Show.Fallback>\n\t\t\t\t\t<CarouselButton\n\t\t\t\t\t\tvariant=\"prev\"\n\t\t\t\t\t\tclassNames={{\n\t\t\t\t\t\t\tdefaultIcon: classNames?.defaultIcon,\n\t\t\t\t\t\t\ticonContainer: classNames?.iconContainer,\n\t\t\t\t\t\t}}\n\t\t\t\t\t\ticon={icon?.prev}\n\t\t\t\t\t/>\n\n\t\t\t\t\t<CarouselButton\n\t\t\t\t\t\tvariant=\"next\"\n\t\t\t\t\t\tclassNames={{\n\t\t\t\t\t\t\tdefaultIcon: classNames?.defaultIcon,\n\t\t\t\t\t\t\ticonContainer: classNames?.iconContainer,\n\t\t\t\t\t\t}}\n\t\t\t\t\t\ticon={icon?.next}\n\t\t\t\t\t/>\n\t\t\t\t</Show.Fallback>\n\t\t\t</Show.Root>\n\t\t</div>\n\t);\n}\n\nexport function CarouselItemList<TArrayItem>(props: CarouselWrapperProps<TArrayItem>) {\n\tconst { children, className, each } = props;\n\n\tconst currentSlide = useCarouselStoreContext((state) => state.currentSlide);\n\tconst images = useCarouselStoreContext((state) => each ?? (state.images as TArrayItem[]));\n\n\treturn (\n\t\t<ul\n\t\t\tdata-scope=\"carousel\"\n\t\t\tdata-part=\"item-list\"\n\t\t\tdata-slot=\"carousel-item-list\"\n\t\t\tclassName={cnMerge(\n\t\t\t\t`flex w-full shrink-0 transform-[translate3d(var(--translate-distance),0,0)] snap-center\n\t\t\t\ttransition-transform duration-800`,\n\t\t\t\tclassName\n\t\t\t)}\n\t\t\tstyle={\n\t\t\t\t{\n\t\t\t\t\t\"--translate-distance\": `-${currentSlide * 100}%`,\n\t\t\t\t} satisfies CssWithCustomProperties as CssWithCustomProperties\n\t\t\t}\n\t\t>\n\t\t\t{isFunction(children) ?\n\t\t\t\t<For each={images} renderItem={(image, index, array) => children({ array, image, index })} />\n\t\t\t:\tchildren}\n\t\t</ul>\n\t);\n}\n\nexport function CarouselItem(props: OtherCarouselProps) {\n\tconst { children, className, ...restOfProps } = props;\n\n\treturn (\n\t\t<li\n\t\t\tdata-scope=\"carousel\"\n\t\t\tdata-part=\"item\"\n\t\t\tdata-slot=\"carousel-item\"\n\t\t\tclassName={cnMerge(\"flex w-full shrink-0 snap-center justify-center\", className)}\n\t\t\t{...restOfProps}\n\t\t>\n\t\t\t{children}\n\t\t</li>\n\t);\n}\n\nexport function CarouselCaption<TElement extends React.ElementType = \"div\">(\n\tprops: PolymorphicPropsStrict<TElement, OtherCarouselProps>\n) {\n\tconst { as: HtmlElement = \"div\", children, className } = props;\n\n\treturn (\n\t\t<HtmlElement\n\t\t\tdata-scope=\"carousel\"\n\t\t\tdata-part=\"caption\"\n\t\t\tdata-slot=\"carousel-caption\"\n\t\t\tclassName={cnMerge(\"absolute z-10\", className)}\n\t\t>\n\t\t\t{children}\n\t\t</HtmlElement>\n\t);\n}\n\nexport function CarouselIndicatorList<TArrayItem>(props: CarouselWrapperProps<TArrayItem>) {\n\tconst { children, className, each } = props;\n\n\tconst images = useCarouselStoreContext((state) => each ?? (state.images as TArrayItem[]));\n\n\treturn (\n\t\t<ul\n\t\t\tdata-scope=\"carousel\"\n\t\t\tdata-part=\"indicator-list\"\n\t\t\tdata-slot=\"carousel-indicator-list\"\n\t\t\tclassName={cnMerge(\n\t\t\t\t\"absolute bottom-[25px] z-[2] flex w-full items-center justify-center gap-[15px]\",\n\t\t\t\tclassName\n\t\t\t)}\n\t\t>\n\t\t\t{isFunction(children) ?\n\t\t\t\t<For each={images} renderItem={(image, index, array) => children({ array, image, index })} />\n\t\t\t:\tchildren}\n\t\t</ul>\n\t);\n}\n\nexport function CarouselIndicator(props: CarouselIndicatorProps) {\n\tconst { classNames, currentIndex } = props;\n\n\tconst {\n\t\tactions: { goToSlide },\n\t\tcurrentSlide,\n\t} = useCarouselStoreContext((state) => state);\n\n\treturn (\n\t\t<li\n\t\t\tdata-scope=\"carousel\"\n\t\t\tdata-part=\"indicator\"\n\t\t\tdata-slot=\"carousel-indicator\"\n\t\t\tclassName={cnMerge(\"inline-flex\", classNames?.base)}\n\t\t>\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\tonClick={() => goToSlide(currentIndex)}\n\t\t\t\tclassName={cnMerge(\n\t\t\t\t\t\"size-[6px] rounded-[50%]\",\n\t\t\t\t\tclassNames?.base,\n\t\t\t\t\tcurrentIndex === currentSlide && [\"w-[35px] rounded-[5px]\", classNames?.isActive]\n\t\t\t\t)}\n\t\t\t/>\n\t\t</li>\n\t);\n}\n","export {\n\tCarouselButton as Button,\n\tCarouselCaption as Caption,\n\tCarouselControls as Controls,\n\tCarouselIndicator as Indicator,\n\tCarouselIndicatorList as IndicatorGroup,\n\tCarouselItem as Item,\n\tCarouselItemList as ItemGroup,\n\tCarouselRoot as Root,\n} from \"./carousel\";\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.js","names":["useCarouselStore: typeof useCarouselStoreContext","Show.Root","Show.Content","Show.Fallback"],"sources":["../../../../src/components/ui/carousel/carousel-store-context.ts","../../../../src/components/ui/carousel/icons.tsx","../../../../src/components/ui/carousel/useCarouselOptions.ts","../../../../src/components/ui/carousel/carousel.tsx","../../../../src/components/ui/carousel/carousel-parts.ts"],"sourcesContent":["import { createStore } from \"@zayne-labs/toolkit-core\";\nimport { useCallbackRef, useStore } from \"@zayne-labs/toolkit-react\";\nimport { createZustandContext } from \"@zayne-labs/toolkit-react/zustand\";\nimport type { PrettyOmit } from \"@zayne-labs/toolkit-type-helpers\";\nimport { useMemo } from \"react\";\nimport type { CarouselRootProps, CarouselStore, ImagesType } from \"./types\";\n\nconst [CarouselStoreContextProvider, useCarouselStoreContext] = createZustandContext<CarouselStore>({\n\thookName: \"useCarouselStore\",\n\tname: \"CarouselStoreContext\",\n\tproviderName: \"CarouselRoot\",\n});\n\n// CarouselStore Creation\nconst createCarouselStore = <TImages extends ImagesType>(\n\tstoreValues: PrettyOmit<CarouselRootProps<TImages>, \"children\">\n) => {\n\tconst { images, onSlideBtnClick } = storeValues;\n\n\tconst carouselStore = createStore<CarouselStore<TImages>>((set, get) => ({\n\t\tcurrentSlide: 0,\n\t\timages,\n\t\tmaxSlide: images.length - 1,\n\n\t\t/* eslint-disable perfectionist/sort-objects -- actions should be last */\n\t\tactions: {\n\t\t\t/* eslint-enable perfectionist/sort-objects -- actions should be last */\n\n\t\t\tgoToNextSlide: () => {\n\t\t\t\tconst { currentSlide, maxSlide } = get();\n\t\t\t\tconst { goToSlide } = get().actions;\n\n\t\t\t\tif (currentSlide === maxSlide) {\n\t\t\t\t\tgoToSlide(0);\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tgoToSlide(currentSlide + 1);\n\t\t\t},\n\n\t\t\tgoToPreviousSlide: () => {\n\t\t\t\tconst { currentSlide, maxSlide } = get();\n\t\t\t\tconst { goToSlide } = get().actions;\n\n\t\t\t\tif (currentSlide === 0) {\n\t\t\t\t\tgoToSlide(maxSlide);\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tgoToSlide(currentSlide - 1);\n\t\t\t},\n\n\t\t\tgoToSlide: (newValue) => {\n\t\t\t\tonSlideBtnClick?.();\n\n\t\t\t\tset({ currentSlide: newValue });\n\t\t\t},\n\t\t},\n\t}));\n\n\treturn carouselStore;\n};\n\nconst useCarousel = <TImages extends ImagesType>(props: Omit<CarouselRootProps<TImages>, \"children\">) => {\n\tconst { images, onSlideBtnClick } = props;\n\n\tconst savedOnSlideBtnClick = useCallbackRef(onSlideBtnClick);\n\n\tconst carouselStore = useMemo(\n\t\t() => createCarouselStore({ images, onSlideBtnClick: savedOnSlideBtnClick }),\n\t\t[images, savedOnSlideBtnClick]\n\t);\n\n\tconst useCarouselStore: typeof useCarouselStoreContext = (selector) => {\n\t\treturn useStore(carouselStore, selector);\n\t};\n\n\tconst savedUseCarouselStore = useCallbackRef(useCarouselStore);\n\n\treturn useMemo(\n\t\t() => ({ carouselStore, useCarouselStore: savedUseCarouselStore }),\n\t\t[carouselStore, savedUseCarouselStore]\n\t);\n};\n\nexport { CarouselStoreContextProvider, useCarousel, useCarouselStoreContext };\n","import * as React from \"react\";\n\nexport const ChevronLeftIcon = (props: React.SVGProps<SVGSVGElement>) => (\n\t<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1em\" height=\"1em\" viewBox=\"0 0 24 24\" {...props}>\n\t\t<g fill=\"none\" stroke=\"currentColor\" strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth=\"2\">\n\t\t\t<circle cx=\"12\" cy=\"12\" r=\"10\" />\n\t\t\t<path d=\"m14 16l-4-4l4-4\" />\n\t\t</g>\n\t</svg>\n);\n","import { useAnimationInterval, useCallbackRef } from \"@zayne-labs/toolkit-react\";\nimport { useState } from \"react\";\nimport type { CarouselStore } from \"./types\";\n\ntype CarouselOptions = {\n\tactions: CarouselStore[\"actions\"];\n\tautoSlideInterval?: number;\n\thasAutoSlide?: boolean;\n\tshouldPauseOnHover?: boolean;\n};\n\nconst useCarouselOptions = (options: CarouselOptions) => {\n\tconst { actions, autoSlideInterval = 5000, hasAutoSlide = false, shouldPauseOnHover = false } = options;\n\n\tconst [isPaused, setIsPaused] = useState(false);\n\n\tconst shouldAutoSlide = hasAutoSlide && !isPaused;\n\n\tuseAnimationInterval({\n\t\tintervalDuration: shouldAutoSlide ? autoSlideInterval : null,\n\t\tonAnimation: actions.goToNextSlide,\n\t});\n\n\tconst pauseAutoSlide = useCallbackRef(() => shouldPauseOnHover && setIsPaused(true));\n\n\tconst resumeAutoSlide = useCallbackRef(() => shouldPauseOnHover && setIsPaused(false));\n\n\treturn { pauseAutoSlide, resumeAutoSlide };\n};\n\nexport { useCarouselOptions };\n","\"use client\";\n\nimport type { CssWithCustomProperties, PolymorphicPropsStrict } from \"@zayne-labs/toolkit-react/utils\";\nimport { isFunction } from \"@zayne-labs/toolkit-type-helpers\";\nimport * as React from \"react\";\nimport { For } from \"@/components/common/for\";\nimport { Show } from \"@/components/common/show\";\nimport { cnMerge } from \"@/lib/utils/cn\";\nimport {\n\tCarouselStoreContextProvider,\n\tuseCarousel,\n\tuseCarouselStoreContext,\n} from \"./carousel-store-context\";\nimport { ChevronLeftIcon } from \"./icons\";\nimport type {\n\tCarouselButtonsProps,\n\tCarouselControlProps,\n\tCarouselIndicatorProps,\n\tCarouselRootProps,\n\tCarouselWrapperProps,\n\tImagesType,\n\tOtherCarouselProps,\n} from \"./types\";\nimport { useCarouselOptions } from \"./useCarouselOptions\";\n\n// TODO - Add dragging and swiping support\nexport function CarouselRoot<TImages extends ImagesType, TElement extends React.ElementType = \"div\">(\n\tprops: PolymorphicPropsStrict<TElement, CarouselRootProps<TImages>>\n) {\n\tconst {\n\t\tas: Element = \"div\",\n\t\tautoSlideInterval,\n\t\tchildren,\n\t\tclassNames,\n\t\thasAutoSlide,\n\t\timages,\n\t\tonSlideBtnClick,\n\t\tshouldPauseOnHover,\n\t} = props;\n\n\tconst { carouselStore } = useCarousel({ images, onSlideBtnClick });\n\n\tconst actions = carouselStore.getState().actions;\n\n\tconst { pauseAutoSlide, resumeAutoSlide } = useCarouselOptions({\n\t\tactions,\n\t\tautoSlideInterval,\n\t\thasAutoSlide,\n\t\tshouldPauseOnHover,\n\t});\n\n\treturn (\n\t\t<CarouselStoreContextProvider store={carouselStore}>\n\t\t\t<Element\n\t\t\t\tdata-scope=\"carousel\"\n\t\t\t\tdata-part=\"content\"\n\t\t\t\tdata-slot=\"carousel-content\"\n\t\t\t\tclassName={cnMerge(\"relative select-none\", classNames?.base)}\n\t\t\t\tonMouseEnter={pauseAutoSlide}\n\t\t\t\tonMouseLeave={resumeAutoSlide}\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tclassName={cnMerge(\n\t\t\t\t\t\t\"flex size-full overflow-x-scroll [scrollbar-width:none] [&::-webkit-scrollbar]:hidden\",\n\t\t\t\t\t\tclassNames?.scrollContainer\n\t\t\t\t\t)}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t</div>\n\t\t\t</Element>\n\t\t</CarouselStoreContextProvider>\n\t);\n}\n\nexport function CarouselButton(props: CarouselButtonsProps) {\n\tconst { classNames, icon, variant } = props;\n\n\tconst { goToNextSlide, goToPreviousSlide } = useCarouselStoreContext((state) => state.actions);\n\n\treturn (\n\t\t<button\n\t\t\tdata-scope=\"carousel\"\n\t\t\tdata-part=\"button\"\n\t\t\tdata-slot=\"carousel-button\"\n\t\t\ttype=\"button\"\n\t\t\tclassName={cnMerge(\n\t\t\t\t\"z-30 flex h-full w-fit items-center\",\n\t\t\t\tvariant === \"prev\" ? \"justify-start\" : \"justify-end\",\n\t\t\t\tclassNames?.base\n\t\t\t)}\n\t\t\tonClick={variant === \"prev\" ? goToPreviousSlide : goToNextSlide}\n\t\t>\n\t\t\t<span className={cnMerge(\"transition-transform active:scale-[1.06]\", classNames?.iconContainer)}>\n\t\t\t\t{icon ?? (\n\t\t\t\t\t<ChevronLeftIcon\n\t\t\t\t\t\tclassName={cnMerge(variant === \"next\" && \"rotate-180\", classNames?.defaultIcon)}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</span>\n\t\t</button>\n\t);\n}\n\nexport function CarouselControls(props: CarouselControlProps) {\n\tconst { classNames, icon } = props;\n\n\treturn (\n\t\t<div\n\t\t\tdata-scope=\"carousel\"\n\t\t\tdata-part=\"controls\"\n\t\t\tdata-slot=\"carousel-controls\"\n\t\t\tclassName={cnMerge(\"absolute inset-0 flex justify-between\", classNames?.base)}\n\t\t>\n\t\t\t<Show.Root when={icon?.iconType}>\n\t\t\t\t<Show.Content>\n\t\t\t\t\t<CarouselButton\n\t\t\t\t\t\tvariant=\"prev\"\n\t\t\t\t\t\tclassNames={{\n\t\t\t\t\t\t\tdefaultIcon: classNames?.defaultIcon,\n\t\t\t\t\t\t\ticonContainer: cnMerge(\n\t\t\t\t\t\t\t\ticon?.iconType === \"nextIcon\" && \"rotate-180\",\n\t\t\t\t\t\t\t\tclassNames?.iconContainer\n\t\t\t\t\t\t\t),\n\t\t\t\t\t\t}}\n\t\t\t\t\t\ticon={icon?.icon}\n\t\t\t\t\t/>\n\n\t\t\t\t\t<CarouselButton\n\t\t\t\t\t\tvariant=\"next\"\n\t\t\t\t\t\tclassNames={{\n\t\t\t\t\t\t\tdefaultIcon: classNames?.defaultIcon,\n\t\t\t\t\t\t\ticonContainer: cnMerge(\n\t\t\t\t\t\t\t\ticon?.iconType === \"prevIcon\" && \"rotate-180\",\n\t\t\t\t\t\t\t\tclassNames?.iconContainer\n\t\t\t\t\t\t\t),\n\t\t\t\t\t\t}}\n\t\t\t\t\t\ticon={icon?.icon}\n\t\t\t\t\t/>\n\t\t\t\t</Show.Content>\n\n\t\t\t\t<Show.Fallback>\n\t\t\t\t\t<CarouselButton\n\t\t\t\t\t\tvariant=\"prev\"\n\t\t\t\t\t\tclassNames={{\n\t\t\t\t\t\t\tdefaultIcon: classNames?.defaultIcon,\n\t\t\t\t\t\t\ticonContainer: classNames?.iconContainer,\n\t\t\t\t\t\t}}\n\t\t\t\t\t\ticon={icon?.prev}\n\t\t\t\t\t/>\n\n\t\t\t\t\t<CarouselButton\n\t\t\t\t\t\tvariant=\"next\"\n\t\t\t\t\t\tclassNames={{\n\t\t\t\t\t\t\tdefaultIcon: classNames?.defaultIcon,\n\t\t\t\t\t\t\ticonContainer: classNames?.iconContainer,\n\t\t\t\t\t\t}}\n\t\t\t\t\t\ticon={icon?.next}\n\t\t\t\t\t/>\n\t\t\t\t</Show.Fallback>\n\t\t\t</Show.Root>\n\t\t</div>\n\t);\n}\n\nexport function CarouselItemList<TArrayItem>(props: CarouselWrapperProps<TArrayItem>) {\n\tconst { children, className, each } = props;\n\n\tconst currentSlide = useCarouselStoreContext((state) => state.currentSlide);\n\tconst images = useCarouselStoreContext((state) => each ?? (state.images as TArrayItem[]));\n\n\treturn (\n\t\t<ul\n\t\t\tdata-scope=\"carousel\"\n\t\t\tdata-part=\"item-list\"\n\t\t\tdata-slot=\"carousel-item-list\"\n\t\t\tclassName={cnMerge(\n\t\t\t\t`flex w-full shrink-0 transform-[translate3d(var(--translate-distance),0,0)] snap-center\n\t\t\t\ttransition-transform duration-800`,\n\t\t\t\tclassName\n\t\t\t)}\n\t\t\tstyle={\n\t\t\t\t{\n\t\t\t\t\t\"--translate-distance\": `-${currentSlide * 100}%`,\n\t\t\t\t} satisfies CssWithCustomProperties as CssWithCustomProperties\n\t\t\t}\n\t\t>\n\t\t\t{isFunction(children) ?\n\t\t\t\t<For each={images} renderItem={(image, index, array) => children({ array, image, index })} />\n\t\t\t:\tchildren}\n\t\t</ul>\n\t);\n}\n\nexport function CarouselItem(props: OtherCarouselProps) {\n\tconst { children, className, ...restOfProps } = props;\n\n\treturn (\n\t\t<li\n\t\t\tdata-scope=\"carousel\"\n\t\t\tdata-part=\"item\"\n\t\t\tdata-slot=\"carousel-item\"\n\t\t\tclassName={cnMerge(\"flex w-full shrink-0 snap-center justify-center\", className)}\n\t\t\t{...restOfProps}\n\t\t>\n\t\t\t{children}\n\t\t</li>\n\t);\n}\n\nexport function CarouselCaption<TElement extends React.ElementType = \"div\">(\n\tprops: PolymorphicPropsStrict<TElement, OtherCarouselProps>\n) {\n\tconst { as: HtmlElement = \"div\", children, className } = props;\n\n\treturn (\n\t\t<HtmlElement\n\t\t\tdata-scope=\"carousel\"\n\t\t\tdata-part=\"caption\"\n\t\t\tdata-slot=\"carousel-caption\"\n\t\t\tclassName={cnMerge(\"absolute z-10\", className)}\n\t\t>\n\t\t\t{children}\n\t\t</HtmlElement>\n\t);\n}\n\nexport function CarouselIndicatorList<TArrayItem>(props: CarouselWrapperProps<TArrayItem>) {\n\tconst { children, className, each } = props;\n\n\tconst images = useCarouselStoreContext((state) => each ?? (state.images as TArrayItem[]));\n\n\treturn (\n\t\t<ul\n\t\t\tdata-scope=\"carousel\"\n\t\t\tdata-part=\"indicator-list\"\n\t\t\tdata-slot=\"carousel-indicator-list\"\n\t\t\tclassName={cnMerge(\n\t\t\t\t\"absolute bottom-[25px] z-[2] flex w-full items-center justify-center gap-[15px]\",\n\t\t\t\tclassName\n\t\t\t)}\n\t\t>\n\t\t\t{isFunction(children) ?\n\t\t\t\t<For each={images} renderItem={(image, index, array) => children({ array, image, index })} />\n\t\t\t:\tchildren}\n\t\t</ul>\n\t);\n}\n\nexport function CarouselIndicator(props: CarouselIndicatorProps) {\n\tconst { classNames, currentIndex } = props;\n\n\tconst {\n\t\tactions: { goToSlide },\n\t\tcurrentSlide,\n\t} = useCarouselStoreContext((state) => state);\n\n\treturn (\n\t\t<li\n\t\t\tdata-scope=\"carousel\"\n\t\t\tdata-part=\"indicator\"\n\t\t\tdata-slot=\"carousel-indicator\"\n\t\t\tclassName={cnMerge(\"inline-flex\", classNames?.base)}\n\t\t>\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\tonClick={() => goToSlide(currentIndex)}\n\t\t\t\tclassName={cnMerge(\n\t\t\t\t\t\"size-[6px] rounded-[50%]\",\n\t\t\t\t\tclassNames?.base,\n\t\t\t\t\tcurrentIndex === currentSlide && [\"w-[35px] rounded-[5px]\", classNames?.isActive]\n\t\t\t\t)}\n\t\t\t/>\n\t\t</li>\n\t);\n}\n","export {\n\tCarouselButton as Button,\n\tCarouselCaption as Caption,\n\tCarouselControls as Controls,\n\tCarouselIndicator as Indicator,\n\tCarouselIndicatorList as IndicatorList,\n\tCarouselItem as Item,\n\tCarouselItemList as ItemList,\n\tCarouselRoot as Root,\n} from \"./carousel\";\n"],"mappings":"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"}
|
|
@@ -7,15 +7,21 @@ import * as react_jsx_runtime36 from "react/jsx-runtime";
|
|
|
7
7
|
import * as _zayne_labs_toolkit_core1 from "@zayne-labs/toolkit-core";
|
|
8
8
|
import { FileMeta, FileOrFileMeta, FileValidationErrorContextEach, FileValidationHooksAsync, FileValidationSettingsAsync } from "@zayne-labs/toolkit-core";
|
|
9
9
|
|
|
10
|
+
//#region src/components/ui/drop-zone/drop-zone-store.d.ts
|
|
11
|
+
type RequiredUseDropZoneProps = { [Key in keyof Required<UseDropZoneProps>]: UseDropZoneProps[Key] | undefined };
|
|
12
|
+
type InitStoreValues = Omit<RequiredUseDropZoneProps, "disabled" | "disableFilePickerOpenOnAreaClick" | "disableInternalStateSubscription" | "extraProps"> & {
|
|
13
|
+
inputRef: React.RefObject<HTMLInputElement | null>;
|
|
14
|
+
};
|
|
15
|
+
declare const createDropZoneStore: (initStoreValues: InitStoreValues) => _zayne_labs_toolkit_core1.StoreApi<DropZoneStore>;
|
|
16
|
+
//#endregion
|
|
10
17
|
//#region src/components/ui/drop-zone/utils.d.ts
|
|
11
|
-
|
|
12
18
|
declare class DropZoneError extends Error {
|
|
13
19
|
readonly dropZoneErrorSymbol: symbol;
|
|
14
20
|
file?: FileValidationErrorContextEach["file"];
|
|
15
21
|
name: "DropZoneError";
|
|
16
22
|
constructor(ctx: Pick<FileValidationErrorContextEach, "message"> & {
|
|
17
23
|
file?: FileValidationErrorContextEach["file"];
|
|
18
|
-
});
|
|
24
|
+
}, errorOptions?: ErrorOptions);
|
|
19
25
|
static isError(error: unknown): error is DropZoneError;
|
|
20
26
|
}
|
|
21
27
|
//#endregion
|
|
@@ -39,8 +45,8 @@ interface FileState {
|
|
|
39
45
|
id: string;
|
|
40
46
|
/**
|
|
41
47
|
* Preview URL for the file
|
|
42
|
-
* - Will be
|
|
43
|
-
* - Can also be
|
|
48
|
+
* - Will be null if `disallowPreviewForNonImageFiles` is set to `true` and the file is not an image
|
|
49
|
+
* - Can also be null if `URL.createObjectURL` fails
|
|
44
50
|
*/
|
|
45
51
|
preview: string | undefined;
|
|
46
52
|
/**
|
|
@@ -143,6 +149,7 @@ type DropZoneActions = {
|
|
|
143
149
|
updateFileState: (ctx: FileStateOrIDProp & Partial<Omit<FileState, "file" | "id" | "preview">>) => void;
|
|
144
150
|
};
|
|
145
151
|
};
|
|
152
|
+
type DropZoneStore = DropZoneActions & DropZoneState;
|
|
146
153
|
interface UseDropZoneResult extends Pick<Required<UseDropZoneProps>, "disabled" | "disableInternalStateSubscription"> {
|
|
147
154
|
inputRef: React.RefObject<HTMLInputElement | null>;
|
|
148
155
|
propGetters: DropZonePropGetters;
|
|
@@ -212,14 +219,6 @@ interface UseDropZoneProps extends FileValidationSettingsAsync {
|
|
|
212
219
|
validator?: FileValidationSettingsAsync["validator"];
|
|
213
220
|
}
|
|
214
221
|
//#endregion
|
|
215
|
-
//#region src/components/ui/drop-zone/drop-zone-store.d.ts
|
|
216
|
-
type DropZoneStore = DropZoneActions & DropZoneState;
|
|
217
|
-
type RequiredUseDropZoneProps = { [Key in keyof Required<UseDropZoneProps>]: UseDropZoneProps[Key] | undefined };
|
|
218
|
-
type InitStoreValues = Omit<RequiredUseDropZoneProps, "disabled" | "disableFilePickerOpenOnAreaClick" | "disableInternalStateSubscription" | "extraProps"> & {
|
|
219
|
-
inputRef: React.RefObject<HTMLInputElement | null>;
|
|
220
|
-
};
|
|
221
|
-
declare const createDropZoneStore: (initStoreValues: InitStoreValues) => _zayne_labs_toolkit_core1.StoreApi<DropZoneStore>;
|
|
222
|
-
//#endregion
|
|
223
222
|
//#region src/components/ui/drop-zone/drop-zone-context.d.ts
|
|
224
223
|
declare const DropZoneStoreContextProvider: (props: {
|
|
225
224
|
children: React.ReactNode;
|
|
@@ -247,7 +246,7 @@ type DropZoneInputProps = PartInputProps["input"] & {
|
|
|
247
246
|
asChild?: boolean;
|
|
248
247
|
};
|
|
249
248
|
declare function DropZoneInput(props: DropZoneInputProps): react_jsx_runtime36.JSX.Element;
|
|
250
|
-
type DropZoneAreaProps<TSlice> = DropZoneContextProps<TSlice> & {
|
|
249
|
+
type DropZoneAreaProps<TSlice> = DropZoneContextProps<TSlice> & PartInputProps["container"] & {
|
|
251
250
|
classNames?: Partial<Record<Extract<keyof PartInputProps, "container" | "input">, string>>;
|
|
252
251
|
extraProps?: Partial<Pick<PartInputProps, "container" | "input">>;
|
|
253
252
|
};
|
|
@@ -338,5 +337,5 @@ declare namespace drop_zone_parts_d_exports {
|
|
|
338
337
|
//#region src/components/ui/drop-zone/use-drop-zone.d.ts
|
|
339
338
|
declare const useDropZone: (props?: UseDropZoneProps) => UseDropZoneResult;
|
|
340
339
|
//#endregion
|
|
341
|
-
export { drop_zone_parts_d_exports as DropZone, DropZoneArea, DropZoneContainer, DropZoneContext, DropZoneError, DropZoneFileClear, DropZoneFileItem, DropZoneFileItemDelete, DropZoneFileItemMetadata, DropZoneFileItemPreview, DropZoneFileItemProgress, DropZoneFileList, DropZoneInput, DropZoneRoot, DropZoneTrigger, useDropZone, useDropZoneStoreContext };
|
|
340
|
+
export { drop_zone_parts_d_exports as DropZone, type DropZoneActions, DropZoneArea, DropZoneContainer, DropZoneContext, DropZoneError, DropZoneFileClear, DropZoneFileItem, DropZoneFileItemDelete, DropZoneFileItemMetadata, DropZoneFileItemPreview, DropZoneFileItemProgress, DropZoneFileList, DropZoneInput, DropZoneRoot, type DropZoneState, type DropZoneStore, DropZoneTrigger, type FileState, type UseDropZoneProps, type UseDropZoneResult, useDropZone, useDropZoneStoreContext };
|
|
342
341
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
|
|
4
4
|
import { __export } from "../../chunk-CTAAG5j7.js";
|
|
5
|
-
import { SlotRoot } from "../../slot-
|
|
5
|
+
import { SlotRoot } from "../../slot-BqT2dZGT.js";
|
|
6
6
|
import { For } from "../../for-BYsFEk3R.js";
|
|
7
7
|
import { Presence } from "../../presence-CAQElNtY.js";
|
|
8
8
|
import { cnMerge } from "../../cn-DdD3uYxA.js";
|
|
@@ -11,7 +11,7 @@ import { isBoolean, isFile, isFunction, isNumber, isObject, isString } from "@za
|
|
|
11
11
|
import { useCallback, useMemo, useRef } from "react";
|
|
12
12
|
import { createCustomContext, useCallbackRef, useConstant, useShallowCompSelector, useShallowCompValue, useStore, useUnmountEffect } from "@zayne-labs/toolkit-react";
|
|
13
13
|
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
|
|
14
|
-
import {
|
|
14
|
+
import { createFileURL, createStore, dataAttr, formatBytes, generateFileID, handleFileValidationAsync, toArray } from "@zayne-labs/toolkit-core";
|
|
15
15
|
import { createZustandContext } from "@zayne-labs/toolkit-react/zustand";
|
|
16
16
|
|
|
17
17
|
//#region src/components/ui/drop-zone/drop-zone-context.ts
|
|
@@ -162,7 +162,7 @@ const FileIcon = (props) => /* @__PURE__ */ jsx("svg", {
|
|
|
162
162
|
const generateFileID$1 = generateFileID;
|
|
163
163
|
const createObjectURL = (file, disallowPreviewForNonImageFiles) => {
|
|
164
164
|
if (disallowPreviewForNonImageFiles && !file.type?.startsWith("image/")) return;
|
|
165
|
-
return
|
|
165
|
+
return createFileURL(file);
|
|
166
166
|
};
|
|
167
167
|
const clearObjectURL = (fileState, disallowPreviewForNonImageFiles) => {
|
|
168
168
|
if (!isFile(fileState?.file)) return;
|
|
@@ -192,9 +192,9 @@ var DropZoneError = class DropZoneError extends Error {
|
|
|
192
192
|
dropZoneErrorSymbol = dropZoneErrorSymbol;
|
|
193
193
|
file;
|
|
194
194
|
name = "DropZoneError";
|
|
195
|
-
constructor(ctx) {
|
|
195
|
+
constructor(ctx, errorOptions) {
|
|
196
196
|
const { file, message } = ctx;
|
|
197
|
-
super(message);
|
|
197
|
+
super(message, errorOptions);
|
|
198
198
|
this.file = file;
|
|
199
199
|
}
|
|
200
200
|
static isError(error) {
|
|
@@ -234,7 +234,7 @@ const createDropZoneStore = (initStoreValues) => {
|
|
|
234
234
|
const initFileStateArray = initialFileArray.map((fileMeta) => ({
|
|
235
235
|
file: fileMeta,
|
|
236
236
|
id: fileMeta.id,
|
|
237
|
-
preview:
|
|
237
|
+
preview: fileMeta.url,
|
|
238
238
|
progress: 0,
|
|
239
239
|
status: "idle"
|
|
240
240
|
}));
|
|
@@ -738,10 +738,11 @@ function DropZoneInput(props) {
|
|
|
738
738
|
}) });
|
|
739
739
|
}
|
|
740
740
|
function DropZoneArea(props) {
|
|
741
|
-
const { children, classNames, extraProps, selector } = props;
|
|
741
|
+
const { children, className, classNames, extraProps, selector,...restOfProps } = props;
|
|
742
742
|
return /* @__PURE__ */ jsxs(DropZoneContainer, {
|
|
743
743
|
...extraProps?.container,
|
|
744
|
-
|
|
744
|
+
...restOfProps,
|
|
745
|
+
className: cnMerge(extraProps?.container?.className, className, classNames?.container),
|
|
745
746
|
children: [/* @__PURE__ */ jsx(DropZoneInput, {
|
|
746
747
|
...extraProps?.input,
|
|
747
748
|
className: cnMerge(extraProps?.input?.className, classNames?.input)
|
|
@@ -1007,7 +1008,7 @@ function DropZoneFileClear(props) {
|
|
|
1007
1008
|
|
|
1008
1009
|
//#endregion
|
|
1009
1010
|
//#region src/components/ui/drop-zone/drop-zone-parts.ts
|
|
1010
|
-
var drop_zone_parts_exports = __export({
|
|
1011
|
+
var drop_zone_parts_exports = /* @__PURE__ */ __export({
|
|
1011
1012
|
Area: () => DropZoneArea,
|
|
1012
1013
|
Container: () => DropZoneContainer,
|
|
1013
1014
|
Context: () => DropZoneContext,
|