@zayne-labs/ui-react 0.10.4 → 0.10.6
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/css/animation.css +47 -0
- package/css/theme.css +10 -4
- package/dist/esm/{await-fjas2Q-C.js → await-Da5w2vIc.js} +14 -15
- package/dist/esm/await-Da5w2vIc.js.map +1 -0
- package/dist/esm/{card-TD60Xux0.js → card-gWNDcZV0.js} +8 -9
- package/dist/esm/card-gWNDcZV0.js.map +1 -0
- package/dist/esm/{carousel-YXXtZ85s.js → carousel-BY9RvR71.js} +20 -23
- package/dist/esm/carousel-BY9RvR71.js.map +1 -0
- package/dist/esm/{chunk-Cl8Af3a2.js → chunk-CTAAG5j7.js} +3 -1
- package/dist/esm/{cn-_FbtIrlZ.js → cn-s-D7vHW1.js} +1 -1
- package/dist/esm/{cn-_FbtIrlZ.js.map → cn-s-D7vHW1.js.map} +1 -1
- package/dist/esm/common/await/index.d.ts +4 -0
- package/dist/esm/common/await/index.js +8 -0
- package/dist/esm/common/client-gate/index.d.ts +33 -0
- package/dist/esm/common/client-gate/index.js +35 -0
- package/dist/esm/common/client-gate/index.js.map +1 -0
- package/dist/esm/{components/common → common}/error-boundary/index.d.ts +1 -1
- package/dist/esm/{components/common → common}/error-boundary/index.js +1 -1
- package/dist/esm/common/for/index.d.ts +2 -0
- package/dist/esm/common/for/index.js +3 -0
- package/dist/esm/common/index.d.ts +9 -0
- package/dist/esm/common/index.js +11 -0
- package/dist/esm/common/presence/index.d.ts +22 -0
- package/dist/esm/common/presence/index.js +6 -0
- package/dist/esm/{components/common → common}/show/index.d.ts +1 -1
- package/dist/esm/{components/common → common}/show/index.js +1 -2
- package/dist/esm/{components/common → common}/slot/index.d.ts +1 -1
- package/dist/esm/common/slot/index.js +3 -0
- package/dist/esm/common/suspense-with-boundary/index.d.ts +3 -0
- package/dist/esm/common/suspense-with-boundary/index.js +4 -0
- package/dist/esm/{components/common → common}/switch/index.d.ts +1 -1
- package/dist/esm/{components/common → common}/switch/index.js +1 -2
- package/dist/esm/common/teleport/index.d.ts +2 -0
- package/dist/esm/common/teleport/index.js +3 -0
- package/dist/esm/{drag-scroll-De6-soln.js → drag-scroll-Bb1SG4On.js} +9 -12
- package/dist/esm/{drag-scroll-De6-soln.js.map → drag-scroll-Bb1SG4On.js.map} +1 -1
- package/dist/esm/drop-zone-5dDyxv_f.js +987 -0
- package/dist/esm/drop-zone-5dDyxv_f.js.map +1 -0
- package/dist/esm/{error-boundary-xM9An3gz.js → error-boundary-y9Samt_s.js} +1 -1
- package/dist/esm/error-boundary-y9Samt_s.js.map +1 -0
- package/dist/esm/{for-DGs2XZ21.js → for-Dfh7e9Z4.js} +2 -3
- package/dist/esm/{for-DGs2XZ21.js.map → for-Dfh7e9Z4.js.map} +1 -1
- package/dist/esm/{form-BHfmbX32.js → form-DDSlHq5t.js} +61 -73
- package/dist/esm/form-DDSlHq5t.js.map +1 -0
- package/dist/esm/{index-BBJzo-WC.d.ts → index-B53RIFft.d.ts} +4 -3
- package/dist/esm/index-BBHGVe_0.d.ts +336 -0
- package/dist/esm/{index-CnvH74ea.d.ts → index-Bra0UlL_.d.ts} +4 -3
- package/dist/esm/{index-DVr1tbxh.d.ts → index-BsGxDKlt.d.ts} +10 -9
- package/dist/esm/{index-BYhH4Fm0.d.ts → index-C1GPFYKG.d.ts} +1 -1
- package/dist/esm/{index-lKxE9WPi.d.ts → index-CJLZEhIo.d.ts} +4 -2
- package/dist/esm/{index-CWKQ5V4B.d.ts → index-CZjeBSoQ.d.ts} +1 -1
- package/dist/esm/{index-DJjxpXUk.d.ts → index-CffEFE66.d.ts} +1 -1
- package/dist/esm/{index-BaONHZq0.d.ts → index-CvjRPnhb.d.ts} +13 -16
- package/dist/esm/{index-eCX5RJ41.d.ts → index-D259PHNG.d.ts} +5 -4
- package/dist/esm/{index-DqutTJQB.d.ts → index-DoRAzdDN.d.ts} +13 -12
- package/dist/esm/{index-BeDmH7lX.d.ts → index-GHA8HNcd.d.ts} +10 -9
- package/dist/esm/{index-CMwCQ8qR.d.ts → index-RnqeaSJm.d.ts} +22 -21
- package/dist/esm/presence-CRZsP1Jk.js +156 -0
- package/dist/esm/presence-CRZsP1Jk.js.map +1 -0
- package/dist/esm/{show-BabiXbf7.js → show-N1ZXBhoA.js} +18 -9
- package/dist/esm/show-N1ZXBhoA.js.map +1 -0
- package/dist/esm/{slot-D1062oA5.js → slot-WVWfOlr3.js} +5 -6
- package/dist/esm/{slot-D1062oA5.js.map → slot-WVWfOlr3.js.map} +1 -1
- package/dist/esm/{suspense-with-boundary-CEVORL8K.js → suspense-with-boundary-D-1NYDV4.js} +2 -2
- package/dist/esm/suspense-with-boundary-D-1NYDV4.js.map +1 -0
- package/dist/esm/{switch-CCMD01Rs.js → switch-Ch22z21e.js} +7 -11
- package/dist/esm/switch-Ch22z21e.js.map +1 -0
- package/dist/esm/{teleport-DfuYOzsj.js → teleport-C8TzRm4M.js} +1 -1
- package/dist/esm/teleport-C8TzRm4M.js.map +1 -0
- package/dist/esm/{components/ui → ui}/card/index.d.ts +1 -1
- package/dist/esm/{components/ui → ui}/card/index.js +3 -3
- package/dist/esm/ui/carousel/index.d.ts +2 -0
- package/dist/esm/ui/carousel/index.js +16 -0
- package/dist/esm/ui/drag-scroll/index.d.ts +2 -0
- package/dist/esm/ui/drag-scroll/index.js +4 -0
- package/dist/esm/ui/drop-zone/index.d.ts +2 -0
- package/dist/esm/ui/drop-zone/index.js +17 -0
- package/dist/esm/{components/ui → ui}/form/index.d.ts +1 -1
- package/dist/esm/{components/ui → ui}/form/index.js +4 -5
- package/dist/esm/ui/index.d.ts +6 -0
- package/dist/esm/ui/index.js +18 -0
- package/dist/style.css +385 -25
- package/package.json +20 -17
- package/dist/esm/await-fjas2Q-C.js.map +0 -1
- package/dist/esm/card-TD60Xux0.js.map +0 -1
- package/dist/esm/carousel-YXXtZ85s.js.map +0 -1
- package/dist/esm/components/common/await/index.d.ts +0 -5
- package/dist/esm/components/common/await/index.js +0 -10
- package/dist/esm/components/common/for/index.d.ts +0 -2
- package/dist/esm/components/common/for/index.js +0 -3
- package/dist/esm/components/common/index.d.ts +0 -10
- package/dist/esm/components/common/index.js +0 -13
- package/dist/esm/components/common/slot/index.js +0 -3
- package/dist/esm/components/common/suspense-with-boundary/index.d.ts +0 -3
- package/dist/esm/components/common/suspense-with-boundary/index.js +0 -4
- package/dist/esm/components/common/teleport/index.d.ts +0 -2
- package/dist/esm/components/common/teleport/index.js +0 -3
- package/dist/esm/components/ui/carousel/index.d.ts +0 -2
- package/dist/esm/components/ui/carousel/index.js +0 -18
- package/dist/esm/components/ui/drag-scroll/index.d.ts +0 -2
- package/dist/esm/components/ui/drag-scroll/index.js +0 -4
- package/dist/esm/components/ui/drop-zone/index.d.ts +0 -2
- package/dist/esm/components/ui/drop-zone/index.js +0 -18
- package/dist/esm/components/ui/index.d.ts +0 -6
- package/dist/esm/components/ui/index.js +0 -19
- package/dist/esm/drop-zone-BPfSu99L.js +0 -381
- package/dist/esm/drop-zone-BPfSu99L.js.map +0 -1
- package/dist/esm/error-boundary-xM9An3gz.js.map +0 -1
- package/dist/esm/form-BHfmbX32.js.map +0 -1
- package/dist/esm/getSlot-Cf5ON6lE.js +0 -85
- package/dist/esm/getSlot-Cf5ON6lE.js.map +0 -1
- package/dist/esm/index-BNrCAe9Y.d.ts +0 -142
- package/dist/esm/index-D361IX3V.d.ts +0 -183
- package/dist/esm/lib/utils/index.d.ts +0 -2
- package/dist/esm/lib/utils/index.js +0 -4
- package/dist/esm/show-BabiXbf7.js.map +0 -1
- package/dist/esm/suspense-with-boundary-CEVORL8K.js.map +0 -1
- package/dist/esm/switch-CCMD01Rs.js.map +0 -1
- package/dist/esm/teleport-DfuYOzsj.js.map +0 -1
- package/dist/esm/utils-ChjmDoRe.js +0 -89
- package/dist/esm/utils-ChjmDoRe.js.map +0 -1
- /package/dist/esm/{common-BYWy8Q78.js → common-PS3X58Pj.js} +0 -0
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"await-fjas2Q-C.js","names":["ReactFragment","Component"],"sources":["../../src/components/common/await/await-context.ts","../../src/components/common/await/await.tsx","../../src/components/common/await/await-parts.ts"],"sourcesContent":["import { createCustomContext } from \"@zayne-labs/toolkit-react\";\n\nexport type AwaitContextType<TValue = unknown> = {\n\tpromise: Promise<TValue>;\n\tresult: TValue;\n};\n\nexport const [AwaitContextProvider, useAwaitContextImpl] = createCustomContext<AwaitContextType>({\n\thookName: \"useAwaitContext\",\n\tname: \"AwaitContext\",\n\tproviderName: \"AwaitInner\",\n});\n\nexport const useAwaitContext = <TValue>() => useAwaitContextImpl() as AwaitContextType<TValue>;\n","\"use client\";\n\nimport { isFunction } from \"@zayne-labs/toolkit-type-helpers\";\nimport * as React from \"react\";\nimport { Fragment as ReactFragment, Suspense, use, useMemo } from \"react\";\nimport { type GetSlotComponentProps, getSlotMap, withSlotNameAndSymbol } from \"@/lib/utils\";\nimport { ErrorBoundary, type ErrorBoundaryProps, useErrorBoundaryContext } from \"../error-boundary\";\nimport { Slot } from \"../slot\";\nimport type { SuspenseWithBoundaryProps } from \"../suspense-with-boundary\";\nimport { AwaitContextProvider, useAwaitContext } from \"./await-context\";\n\ntype RenderPropFn<TValue> = (result: TValue) => React.ReactNode;\n\ntype ChildrenType<TValue> = React.ReactNode | RenderPropFn<TValue>;\n\ntype AwaitRootProps<TValue> = Pick<SuspenseWithBoundaryProps, \"errorFallback\" | \"fallback\"> & {\n\tasChild?: boolean;\n\tchildren: ChildrenType<TValue>;\n\tpromise: Promise<TValue>;\n\twithErrorBoundary?: boolean;\n\twithSuspense?: boolean;\n};\n\nexport function AwaitRoot<TValue>(props: AwaitRootProps<TValue>) {\n\tconst {\n\t\tchildren,\n\t\terrorFallback,\n\t\tfallback,\n\t\twithErrorBoundary = true,\n\t\twithSuspense = true,\n\t\t...restOfProps\n\t} = props;\n\n\tconst WithErrorBoundary = withErrorBoundary ? ErrorBoundary : ReactFragment;\n\tconst WithSuspense = withSuspense ? Suspense : ReactFragment;\n\n\tconst slots =\n\t\t!isFunction(children) ?\n\t\t\tgetSlotMap<SlotComponentProps>(children)\n\t\t:\t({ default: children } as unknown as ReturnType<typeof getSlotMap<SlotComponentProps>>);\n\n\tconst selectedPendingFallback = slots.pending ?? fallback;\n\tconst selectedErrorFallback = slots.error ?? errorFallback;\n\n\treturn (\n\t\t<WithErrorBoundary {...(Boolean(selectedErrorFallback) && { fallback: selectedErrorFallback })}>\n\t\t\t<WithSuspense {...(Boolean(selectedPendingFallback) && { fallback: selectedPendingFallback })}>\n\t\t\t\t<AwaitRootInner {...restOfProps}>{slots.default}</AwaitRootInner>\n\t\t\t</WithSuspense>\n\t\t</WithErrorBoundary>\n\t);\n}\n\ntype AwaitRootInnerProps<TValue> = Pick<AwaitRootProps<TValue>, \"asChild\" | \"children\" | \"promise\">;\n\nfunction AwaitRootInner<TValue>(props: AwaitRootInnerProps<TValue>) {\n\tconst { asChild, children, promise } = props;\n\n\tconst result = use(promise);\n\n\tconst resolvedChildren = isFunction(children) ? children(result) : children;\n\n\tconst Component = asChild ? Slot.Root : ReactFragment;\n\n\tconst contextValue = useMemo(() => ({ promise, result }), [promise, result]);\n\n\treturn (\n\t\t<AwaitContextProvider value={contextValue}>\n\t\t\t<Component {...(asChild && contextValue)}>{resolvedChildren}</Component>\n\t\t</AwaitContextProvider>\n\t);\n}\n\ntype SlotComponentProps = AwaitErrorProps | AwaitPendingProps | AwaitSuccessProps;\n\ntype AwaitSuccessProps<TValue = unknown> = GetSlotComponentProps<\"default\", ChildrenType<TValue>>;\n\nexport function AwaitSuccess<TPromiseOrValue, TValue = Awaited<TPromiseOrValue>>(\n\tprops: Pick<AwaitSuccessProps<TValue>, \"children\">\n) {\n\tif (isFunction(props.children)) {\n\t\t// eslint-disable-next-line react-hooks/rules-of-hooks -- This hook only uses `use` under the hood so this is safe\n\t\tconst { result } = useAwaitContext<TValue>();\n\n\t\treturn props.children(result);\n\t}\n\n\treturn props.children;\n}\n\nObject.assign(AwaitSuccess, withSlotNameAndSymbol<AwaitSuccessProps>(\"default\"));\n\ntype AwaitPendingProps = GetSlotComponentProps<\"pending\", React.SuspenseProps[\"fallback\"]>;\n\nexport const AwaitPending = withSlotNameAndSymbol<AwaitPendingProps>(\"pending\");\n\ntype AwaitErrorProps = GetSlotComponentProps<\"error\", ErrorBoundaryProps[\"fallback\"]>;\n\nexport const AwaitError = withSlotNameAndSymbol<AwaitErrorProps, { asChild?: boolean }>(\n\t\"error\",\n\t(props) => {\n\t\tconst { asChild, children } = props;\n\n\t\tconst errorBoundaryContext = useErrorBoundaryContext();\n\n\t\tconst Component = asChild ? Slot.Root : ReactFragment;\n\n\t\tconst resolvedChildren = isFunction(children) ? children(errorBoundaryContext) : children;\n\n\t\treturn <Component {...(asChild && errorBoundaryContext)}>{resolvedChildren}</Component>;\n\t}\n);\n","export {\n\tAwaitRoot as Root,\n\tAwaitError as Error,\n\tAwaitPending as Pending,\n\tAwaitSuccess as Success,\n} from \"./await\";\n"],"mappings":";;;;;;;;;;AAOA,MAAa,CAAC,sBAAsB,oBAAoB,GAAG,oBAAsC;CAChG,UAAU;CACV,MAAM;CACN,cAAc;CACd;AAED,MAAa,wBAAgC;;;;ACU7C,SAAgB,UAAkB,OAA+B;CAChE,MAAM,EACL,UACA,eACA,UACA,oBAAoB,MACpB,eAAe,KACf,GAAG,aACH,GAAG;CAEJ,MAAM,oBAAoB,oBAAoB,gBAAgBA;CAC9D,MAAM,eAAe,eAAe,WAAWA;CAE/C,MAAM,QACL,CAAC,WAAW,YACX,WAA+B,YAC7B,EAAE,SAAS,UAAU;CAEzB,MAAM,0BAA0B,MAAM,WAAW;CACjD,MAAM,wBAAwB,MAAM,SAAS;AAE7C,QACC,oBAAC;EAAkB,GAAK,QAAQ,0BAA0B,EAAE,UAAU,uBAAuB;YAC5F,oBAAC;GAAa,GAAK,QAAQ,4BAA4B,EAAE,UAAU,yBAAyB;aAC3F,oBAAC;IAAe,GAAI;cAAc,MAAM;;;;AAI3C;AAID,SAAS,eAAuB,OAAoC;CACnE,MAAM,EAAE,SAAS,UAAU,SAAS,GAAG;CAEvC,MAAM,SAAS,IAAI;CAEnB,MAAM,mBAAmB,WAAW,YAAY,SAAS,UAAU;CAEnE,MAAMC,cAAY,qBAAsBD;CAExC,MAAM,eAAe,eAAe;EAAE;EAAS;EAAQ,GAAG,CAAC,SAAS,OAAO;AAE3E,QACC,oBAAC;EAAqB,OAAO;YAC5B,oBAACC;GAAU,GAAK,WAAW;aAAgB;;;AAG7C;AAMD,SAAgB,aACf,OACC;AACD,KAAI,WAAW,MAAM,WAAW;EAE/B,MAAM,EAAE,QAAQ,GAAG;AAEnB,SAAO,MAAM,SAAS;CACtB;AAED,QAAO,MAAM;AACb;AAED,OAAO,OAAO,cAAc,sBAAyC;AAIrE,MAAa,eAAe,sBAAyC;AAIrE,MAAa,aAAa,sBACzB,UACC,UAAU;CACV,MAAM,EAAE,SAAS,UAAU,GAAG;CAE9B,MAAM,uBAAuB;CAE7B,MAAMA,cAAY,qBAAsBD;CAExC,MAAM,mBAAmB,WAAW,YAAY,SAAS,wBAAwB;AAEjF,QAAO,oBAACC;EAAU,GAAK,WAAW;YAAwB;;AAC1D"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"card-TD60Xux0.js","names":["Component"],"sources":["../../src/components/ui/card/card.tsx","../../src/components/ui/card/card-parts.ts"],"sourcesContent":["import type { PolymorphicProps } from \"@zayne-labs/toolkit-react/utils\";\nimport * as React from \"react\";\nimport { Slot } from \"@/components/common/slot\";\nimport { cnMerge } from \"@/lib/utils/cn\";\n\nexport function CardRoot<TElement extends React.ElementType = \"article\">(\n\tprops: PolymorphicProps<TElement>\n) {\n\tconst { as: Element = \"article\", ...restOfProps } = props;\n\n\treturn (\n\t\t<Element\n\t\t\tdata-scope=\"card\"\n\t\t\tdata-part=\"root\"\n\t\t\tdata-slot=\"card-root\"\n\t\t\tclassName=\"flex flex-col gap-6 rounded-xl border py-6 shadow-sm\"\n\t\t\t{...restOfProps}\n\t\t/>\n\t);\n}\n\nexport function CardHeader<TElement extends React.ElementType = \"header\">(\n\tprops: PolymorphicProps<TElement>\n) {\n\tconst { as: Element = \"header\", ...restOfProps } = props;\n\n\treturn (\n\t\t<Element\n\t\t\tdata-scope=\"card\"\n\t\t\tdata-part=\"header\"\n\t\t\tdata-slot=\"card-header\"\n\t\t\tclassName=\"@container/card-header has-data-[slot=card-action]:grid-cols-[1fr_auto] grid\n\t\t\t\tauto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6\"\n\t\t\t{...restOfProps}\n\t\t/>\n\t);\n}\n\nexport function CardTitle<TElement extends React.ElementType = \"h3\">(props: PolymorphicProps<TElement>) {\n\tconst { as: Element = \"h3\", className, ...restOfProps } = props;\n\n\treturn (\n\t\t<Element\n\t\t\tdata-scope=\"card\"\n\t\t\tdata-part=\"title\"\n\t\t\tdata-slot=\"card-title\"\n\t\t\tclassName={cnMerge(\"font-semibold leading-none\", className)}\n\t\t\t{...restOfProps}\n\t\t/>\n\t);\n}\n\nexport function CardDescription<TElement extends React.ElementType = \"p\">(\n\tprops: PolymorphicProps<TElement>\n) {\n\tconst { as: Element = \"p\", className, ...restOfProps } = props;\n\n\treturn (\n\t\t<Element\n\t\t\tdata-scope=\"card\"\n\t\t\tdata-part=\"description\"\n\t\t\tdata-slot=\"card-description\"\n\t\t\tclassName={cnMerge(\"text-shadcn-muted-foreground text-sm\", className)}\n\t\t\t{...restOfProps}\n\t\t/>\n\t);\n}\n\nexport function CardContent<TElement extends React.ElementType = \"div\">(\n\tprops: PolymorphicProps<TElement>\n) {\n\tconst { as: Element = \"div\", className, ...restOfProps } = props;\n\n\treturn (\n\t\t<Element\n\t\t\tdata-scope=\"card\"\n\t\t\tdata-part=\"content\"\n\t\t\tdata-slot=\"card-content\"\n\t\t\tclassName={cnMerge(\"px-6\", className)}\n\t\t\t{...restOfProps}\n\t\t/>\n\t);\n}\n\nexport function CardAction<TElement extends React.ElementType = \"div\">(props: PolymorphicProps<TElement>) {\n\tconst { as: Element = \"div\", className, ...restOfProps } = props;\n\n\treturn (\n\t\t<Element\n\t\t\tdata-scope=\"card\"\n\t\t\tdata-part=\"action\"\n\t\t\tdata-slot=\"card-action\"\n\t\t\tclassName={cnMerge(\"col-start-2 row-span-2 row-start-1 self-start justify-self-end\", className)}\n\t\t\t{...restOfProps}\n\t\t/>\n\t);\n}\n\nexport function CardFooter<TElement extends React.ElementType = \"footer\">(\n\tprops: PolymorphicProps<TElement, { asChild?: boolean }>\n) {\n\tconst { as: Element = \"footer\", asChild, className, ...restOfProps } = props;\n\n\tconst Component = asChild ? Slot.Root : Element;\n\n\treturn (\n\t\t<Component\n\t\t\tdata-scope=\"card\"\n\t\t\tdata-part=\"footer\"\n\t\t\tdata-slot=\"card-footer\"\n\t\t\tclassName={cnMerge(\"px-6\", className)}\n\t\t\t{...restOfProps}\n\t\t/>\n\t);\n}\n","export {\n\tCardContent as Content,\n\tCardDescription as Description,\n\tCardFooter as Footer,\n\tCardHeader as Header,\n\tCardAction as Action,\n\tCardRoot as Root,\n\tCardTitle as Title,\n} from \"./card\";\n"],"mappings":";;;;;;;AAKA,SAAgB,SACf,OACC;CACD,MAAM,EAAE,IAAI,UAAU,UAAW,GAAG,aAAa,GAAG;AAEpD,QACC,oBAAC;EACA,cAAW;EACX,aAAU;EACV,aAAU;EACV,WAAU;EACV,GAAI;;AAGN;AAED,SAAgB,WACf,OACC;CACD,MAAM,EAAE,IAAI,UAAU,SAAU,GAAG,aAAa,GAAG;AAEnD,QACC,oBAAC;EACA,cAAW;EACX,aAAU;EACV,aAAU;EACV,WAAU;EAEV,GAAI;;AAGN;AAED,SAAgB,UAAqD,OAAmC;CACvG,MAAM,EAAE,IAAI,UAAU,MAAM,UAAW,GAAG,aAAa,GAAG;AAE1D,QACC,oBAAC;EACA,cAAW;EACX,aAAU;EACV,aAAU;EACV,WAAW,QAAQ,8BAA8B;EACjD,GAAI;;AAGN;AAED,SAAgB,gBACf,OACC;CACD,MAAM,EAAE,IAAI,UAAU,KAAK,UAAW,GAAG,aAAa,GAAG;AAEzD,QACC,oBAAC;EACA,cAAW;EACX,aAAU;EACV,aAAU;EACV,WAAW,QAAQ,wCAAwC;EAC3D,GAAI;;AAGN;AAED,SAAgB,YACf,OACC;CACD,MAAM,EAAE,IAAI,UAAU,OAAO,UAAW,GAAG,aAAa,GAAG;AAE3D,QACC,oBAAC;EACA,cAAW;EACX,aAAU;EACV,aAAU;EACV,WAAW,QAAQ,QAAQ;EAC3B,GAAI;;AAGN;AAED,SAAgB,WAAuD,OAAmC;CACzG,MAAM,EAAE,IAAI,UAAU,OAAO,UAAW,GAAG,aAAa,GAAG;AAE3D,QACC,oBAAC;EACA,cAAW;EACX,aAAU;EACV,aAAU;EACV,WAAW,QAAQ,kEAAkE;EACrF,GAAI;;AAGN;AAED,SAAgB,WACf,OACC;CACD,MAAM,EAAE,IAAI,UAAU,UAAU,SAAS,UAAW,GAAG,aAAa,GAAG;CAEvE,MAAMA,cAAY,qBAAsB;AAExC,QACC,oBAACA;EACA,cAAW;EACX,aAAU;EACV,aAAU;EACV,WAAW,QAAQ,QAAQ;EAC3B,GAAI;;AAGN"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"carousel-YXXtZ85s.js","names":["useCarouselStore: typeof useCarouselStoreContext"],"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, PolymorphicProps } from \"@zayne-labs/toolkit-react/utils\";\nimport { isFunction } from \"@zayne-labs/toolkit-type-helpers\";\nimport * as React from \"react\";\nimport { Show } from \"@/components/common\";\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: PolymorphicProps<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.Otherwise>\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.Otherwise>\n\t\t\t</Show.Root>\n\t\t</div>\n\t);\n}\n\nexport function CarouselItemGroup<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-group\"\n\t\t\tdata-slot=\"carousel-item-group\"\n\t\t\tclassName={cnMerge(\n\t\t\t\t`duration-800 transform-[translate3d(var(--translate-distance),0,0)] flex w-full shrink-0\n\t\t\t\tsnap-center transition-transform`,\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: PolymorphicProps<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 CarouselIndicatorGroup<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-group\"\n\t\t\tdata-slot=\"carousel-indicator-group\"\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\tCarouselIndicatorGroup as IndicatorGroup,\n\tCarouselItem as Item,\n\tCarouselItemGroup as ItemGroup,\n\tCarouselRoot as Root,\n} from \"./carousel\";\n"],"mappings":"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"}
|
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
import "../../../index-BNrCAe9Y.js";
|
|
2
|
-
import "../../../index-lKxE9WPi.js";
|
|
3
|
-
import "../../../index-eCX5RJ41.js";
|
|
4
|
-
import { AwaitError, AwaitPending, AwaitRoot, AwaitSuccess, await_parts_d_exports, useAwaitContext } from "../../../index-BaONHZq0.js";
|
|
5
|
-
export { await_parts_d_exports as Await, AwaitError, AwaitPending, AwaitRoot, AwaitSuccess, useAwaitContext };
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
import "../../../utils-ChjmDoRe.js";
|
|
5
|
-
import "../../../getSlot-Cf5ON6lE.js";
|
|
6
|
-
import "../../../error-boundary-xM9An3gz.js";
|
|
7
|
-
import "../../../slot-D1062oA5.js";
|
|
8
|
-
import { AwaitError, AwaitPending, AwaitRoot, AwaitSuccess, await_parts_exports, useAwaitContext } from "../../../await-fjas2Q-C.js";
|
|
9
|
-
|
|
10
|
-
export { await_parts_exports as Await, AwaitError, AwaitPending, AwaitRoot, AwaitSuccess, useAwaitContext };
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import "../../index-BNrCAe9Y.js";
|
|
2
|
-
import { ErrorBoundary } from "../../index-lKxE9WPi.js";
|
|
3
|
-
import { SuspenseWithBoundary } from "../../index-eCX5RJ41.js";
|
|
4
|
-
import { await_parts_d_exports } from "../../index-BaONHZq0.js";
|
|
5
|
-
import { For, ForWithWrapper } from "../../index-CnvH74ea.js";
|
|
6
|
-
import { show_parts_d_exports } from "../../index-DVr1tbxh.js";
|
|
7
|
-
import { slot_parts_d_exports } from "../../index-BBJzo-WC.js";
|
|
8
|
-
import { switch_parts_d_exports } from "../../index-DJjxpXUk.js";
|
|
9
|
-
import { Teleport } from "../../index-CWKQ5V4B.js";
|
|
10
|
-
export { await_parts_d_exports as Await, ErrorBoundary, For, ForWithWrapper, show_parts_d_exports as Show, slot_parts_d_exports as Slot, SuspenseWithBoundary, switch_parts_d_exports as Switch, Teleport };
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import "../../utils-ChjmDoRe.js";
|
|
2
|
-
import "../../getSlot-Cf5ON6lE.js";
|
|
3
|
-
import { ErrorBoundary } from "../../error-boundary-xM9An3gz.js";
|
|
4
|
-
import { slot_parts_exports } from "../../slot-D1062oA5.js";
|
|
5
|
-
import { await_parts_exports } from "../../await-fjas2Q-C.js";
|
|
6
|
-
import { For, ForWithWrapper } from "../../for-DGs2XZ21.js";
|
|
7
|
-
import { show_parts_exports } from "../../show-BabiXbf7.js";
|
|
8
|
-
import { SuspenseWithBoundary } from "../../suspense-with-boundary-CEVORL8K.js";
|
|
9
|
-
import { switch_parts_exports } from "../../switch-CCMD01Rs.js";
|
|
10
|
-
import { Teleport } from "../../teleport-DfuYOzsj.js";
|
|
11
|
-
import "../../common-BYWy8Q78.js";
|
|
12
|
-
|
|
13
|
-
export { await_parts_exports as Await, ErrorBoundary, For, ForWithWrapper, show_parts_exports as Show, slot_parts_exports as Slot, SuspenseWithBoundary, switch_parts_exports as Switch, Teleport };
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import { CarouselButton, CarouselButtonsProps, CarouselCaption, CarouselControlProps, CarouselControls, CarouselIndicator, CarouselIndicatorGroup, CarouselIndicatorProps, CarouselItem, CarouselItemGroup, CarouselRoot, CarouselRootProps, CarouselStore, CarouselStoreApi, CarouselWrapperProps, ImagesType, OtherCarouselProps, carousel_parts_d_exports } from "../../../index-DqutTJQB.js";
|
|
2
|
-
export { carousel_parts_d_exports as Carousel, CarouselButton, CarouselButtonsProps, CarouselCaption, CarouselControlProps, CarouselControls, CarouselIndicator, CarouselIndicatorGroup, CarouselIndicatorProps, CarouselItem, CarouselItemGroup, CarouselRoot, CarouselRootProps, CarouselStore, CarouselStoreApi, CarouselWrapperProps, ImagesType, OtherCarouselProps };
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
import "../../../utils-ChjmDoRe.js";
|
|
5
|
-
import "../../../getSlot-Cf5ON6lE.js";
|
|
6
|
-
import "../../../error-boundary-xM9An3gz.js";
|
|
7
|
-
import "../../../slot-D1062oA5.js";
|
|
8
|
-
import "../../../await-fjas2Q-C.js";
|
|
9
|
-
import "../../../for-DGs2XZ21.js";
|
|
10
|
-
import "../../../show-BabiXbf7.js";
|
|
11
|
-
import "../../../suspense-with-boundary-CEVORL8K.js";
|
|
12
|
-
import "../../../switch-CCMD01Rs.js";
|
|
13
|
-
import "../../../teleport-DfuYOzsj.js";
|
|
14
|
-
import "../../../common-BYWy8Q78.js";
|
|
15
|
-
import "../../../cn-_FbtIrlZ.js";
|
|
16
|
-
import { CarouselButton, CarouselCaption, CarouselControls, CarouselIndicator, CarouselIndicatorGroup, CarouselItem, CarouselItemGroup, CarouselRoot, carousel_parts_exports } from "../../../carousel-YXXtZ85s.js";
|
|
17
|
-
|
|
18
|
-
export { carousel_parts_exports as Carousel, CarouselButton, CarouselCaption, CarouselControls, CarouselIndicator, CarouselIndicatorGroup, CarouselItem, CarouselItemGroup, CarouselRoot };
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import { ClassNames, DropZoneArea, DropZoneContainer, DropZoneContext, DropZoneContextProps, DropZoneErrorPreview, DropZoneFilePreview, DropZoneInput, DropZoneRoot, DropZoneRootProps, DropZoneTrigger, ExtraProps, UseDropZoneProps, UseDropZoneResult, drop_zone_parts_d_exports, useDropZone, useDropZoneStoreContext } from "../../../index-D361IX3V.js";
|
|
2
|
-
export { ClassNames, drop_zone_parts_d_exports as DropZone, DropZoneArea, DropZoneContainer, DropZoneContext, DropZoneContextProps, DropZoneErrorPreview, DropZoneFilePreview, DropZoneInput, DropZoneRoot, DropZoneRootProps, DropZoneTrigger, ExtraProps, UseDropZoneProps, UseDropZoneResult, useDropZone, useDropZoneStoreContext };
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
import "../../../utils-ChjmDoRe.js";
|
|
5
|
-
import "../../../getSlot-Cf5ON6lE.js";
|
|
6
|
-
import "../../../error-boundary-xM9An3gz.js";
|
|
7
|
-
import "../../../slot-D1062oA5.js";
|
|
8
|
-
import "../../../await-fjas2Q-C.js";
|
|
9
|
-
import "../../../for-DGs2XZ21.js";
|
|
10
|
-
import "../../../show-BabiXbf7.js";
|
|
11
|
-
import "../../../suspense-with-boundary-CEVORL8K.js";
|
|
12
|
-
import "../../../switch-CCMD01Rs.js";
|
|
13
|
-
import "../../../teleport-DfuYOzsj.js";
|
|
14
|
-
import "../../../common-BYWy8Q78.js";
|
|
15
|
-
import "../../../cn-_FbtIrlZ.js";
|
|
16
|
-
import { DropZoneArea, DropZoneContainer, DropZoneContext, DropZoneErrorPreview, DropZoneFilePreview, DropZoneInput, DropZoneRoot, DropZoneTrigger, drop_zone_parts_exports, useDropZone, useDropZoneStoreContext } from "../../../drop-zone-BPfSu99L.js";
|
|
17
|
-
|
|
18
|
-
export { drop_zone_parts_exports as DropZone, DropZoneArea, DropZoneContainer, DropZoneContext, DropZoneErrorPreview, DropZoneFilePreview, DropZoneInput, DropZoneRoot, DropZoneTrigger, useDropZone, useDropZoneStoreContext };
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
import { card_parts_d_exports } from "../../index-BeDmH7lX.js";
|
|
2
|
-
import { carousel_parts_d_exports } from "../../index-DqutTJQB.js";
|
|
3
|
-
import { useDragScroll } from "../../index-BYhH4Fm0.js";
|
|
4
|
-
import { drop_zone_parts_d_exports, useDropZone } from "../../index-D361IX3V.js";
|
|
5
|
-
import { form_parts_d_exports } from "../../index-CMwCQ8qR.js";
|
|
6
|
-
export { card_parts_d_exports as Card, carousel_parts_d_exports as Carousel, drop_zone_parts_d_exports as DropZone, form_parts_d_exports as Form, useDragScroll, useDropZone };
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
import "../../utils-ChjmDoRe.js";
|
|
2
|
-
import "../../getSlot-Cf5ON6lE.js";
|
|
3
|
-
import "../../error-boundary-xM9An3gz.js";
|
|
4
|
-
import "../../slot-D1062oA5.js";
|
|
5
|
-
import "../../await-fjas2Q-C.js";
|
|
6
|
-
import "../../for-DGs2XZ21.js";
|
|
7
|
-
import "../../show-BabiXbf7.js";
|
|
8
|
-
import "../../suspense-with-boundary-CEVORL8K.js";
|
|
9
|
-
import "../../switch-CCMD01Rs.js";
|
|
10
|
-
import "../../teleport-DfuYOzsj.js";
|
|
11
|
-
import "../../common-BYWy8Q78.js";
|
|
12
|
-
import "../../cn-_FbtIrlZ.js";
|
|
13
|
-
import { card_parts_exports } from "../../card-TD60Xux0.js";
|
|
14
|
-
import { carousel_parts_exports } from "../../carousel-YXXtZ85s.js";
|
|
15
|
-
import { useDragScroll } from "../../drag-scroll-De6-soln.js";
|
|
16
|
-
import { drop_zone_parts_exports, useDropZone } from "../../drop-zone-BPfSu99L.js";
|
|
17
|
-
import { form_parts_exports } from "../../form-BHfmbX32.js";
|
|
18
|
-
|
|
19
|
-
export { card_parts_exports as Card, carousel_parts_exports as Carousel, drop_zone_parts_exports as DropZone, form_parts_exports as Form, useDragScroll, useDropZone };
|
|
@@ -1,381 +0,0 @@
|
|
|
1
|
-
import { __export } from "./chunk-Cl8Af3a2.js";
|
|
2
|
-
import { SlotRoot } from "./slot-D1062oA5.js";
|
|
3
|
-
import { cnMerge } from "./cn-_FbtIrlZ.js";
|
|
4
|
-
import { isFile, isFunction, isString } from "@zayne-labs/toolkit-type-helpers";
|
|
5
|
-
import { useCallback, useMemo, useRef } from "react";
|
|
6
|
-
import { createImagePreview, createStore, dataAttr, handleFileValidationAsync, toArray } from "@zayne-labs/toolkit-core";
|
|
7
|
-
import { createCustomContext, useCallbackRef, useConstant, useShallowComparedValue, useStore } from "@zayne-labs/toolkit-react";
|
|
8
|
-
import { jsx, jsxs } from "react/jsx-runtime";
|
|
9
|
-
import { composeRefs, composeTwoEventHandlers, mergeTwoProps } from "@zayne-labs/toolkit-react/utils";
|
|
10
|
-
import { createZustandContext } from "@zayne-labs/toolkit-react/zustand";
|
|
11
|
-
|
|
12
|
-
//#region src/components/ui/drop-zone/drop-zone-context.ts
|
|
13
|
-
const [DropZoneStoreContextProvider, useDropZoneStoreContext] = createZustandContext({
|
|
14
|
-
hookName: "useDropZoneStoreContext",
|
|
15
|
-
name: "DropZoneStoreContext",
|
|
16
|
-
providerName: "DropZoneRoot"
|
|
17
|
-
});
|
|
18
|
-
const [DropZonePropGettersContextProvider, usePropGettersContext] = createCustomContext({
|
|
19
|
-
hookName: "usePropGettersContext",
|
|
20
|
-
name: "PropGettersContext",
|
|
21
|
-
providerName: "DropZoneRoot"
|
|
22
|
-
});
|
|
23
|
-
|
|
24
|
-
//#endregion
|
|
25
|
-
//#region src/components/ui/drop-zone/utils.ts
|
|
26
|
-
const generateUniqueId = (file) => {
|
|
27
|
-
if (!isFile(file)) return file.id;
|
|
28
|
-
return `${file.name}-(${Math.round(performance.now())})-${crypto.randomUUID().slice(0, 8)}`;
|
|
29
|
-
};
|
|
30
|
-
const createObjectURL = (file, disallowPreviewForNonImageFiles) => {
|
|
31
|
-
if (disallowPreviewForNonImageFiles && !file.type.startsWith("image/")) return;
|
|
32
|
-
return createImagePreview(file);
|
|
33
|
-
};
|
|
34
|
-
const clearObjectURL = (fileState, disallowPreviewForNonImageFiles) => {
|
|
35
|
-
if (!isFile(fileState?.file)) return;
|
|
36
|
-
if (disallowPreviewForNonImageFiles && !fileState.file.type.startsWith("image/")) return;
|
|
37
|
-
if (!fileState.preview) return;
|
|
38
|
-
URL.revokeObjectURL(fileState.preview);
|
|
39
|
-
};
|
|
40
|
-
|
|
41
|
-
//#endregion
|
|
42
|
-
//#region src/components/ui/drop-zone/drop-zone-store.ts
|
|
43
|
-
const createDropZoneStore = (initStoreValues) => {
|
|
44
|
-
const { allowedFileTypes, disablePreviewForNonImageFiles, initialFiles, inputRef, maxFileCount, maxFileSize, multiple, onFilesChange, onUpload, onUploadError, onUploadErrorCollection, onUploadSuccess, rejectDuplicateFiles, validator } = initStoreValues;
|
|
45
|
-
const initialFileArray = toArray(initialFiles).filter(Boolean);
|
|
46
|
-
const clearInputValue = () => {
|
|
47
|
-
if (!inputRef.current) return;
|
|
48
|
-
inputRef.current.value = "";
|
|
49
|
-
};
|
|
50
|
-
const store = createStore((set, get) => ({
|
|
51
|
-
errors: [],
|
|
52
|
-
fileStateArray: initialFileArray.map((fileMeta) => ({
|
|
53
|
-
file: fileMeta,
|
|
54
|
-
id: fileMeta.id,
|
|
55
|
-
preview: fileMeta.url
|
|
56
|
-
})),
|
|
57
|
-
isDraggingOver: false,
|
|
58
|
-
actions: {
|
|
59
|
-
addFiles: async (files) => {
|
|
60
|
-
if (!files || files.length === 0) {
|
|
61
|
-
console.warn("No file selected!");
|
|
62
|
-
return;
|
|
63
|
-
}
|
|
64
|
-
const { fileStateArray } = get();
|
|
65
|
-
const newFiles = !multiple ? [files[0]] : files;
|
|
66
|
-
const { errors, validFiles } = await handleFileValidationAsync({
|
|
67
|
-
existingFiles: fileStateArray.map((fileWithPreview) => fileWithPreview.file),
|
|
68
|
-
hooks: {
|
|
69
|
-
onError: onUploadError,
|
|
70
|
-
onErrorCollection: onUploadErrorCollection,
|
|
71
|
-
onSuccess: onUploadSuccess
|
|
72
|
-
},
|
|
73
|
-
newFiles,
|
|
74
|
-
settings: {
|
|
75
|
-
allowedFileTypes,
|
|
76
|
-
maxFileCount,
|
|
77
|
-
maxFileSize,
|
|
78
|
-
rejectDuplicateFiles,
|
|
79
|
-
validator
|
|
80
|
-
}
|
|
81
|
-
});
|
|
82
|
-
if (validFiles.length === 0) {
|
|
83
|
-
set({
|
|
84
|
-
errors,
|
|
85
|
-
isDraggingOver: false
|
|
86
|
-
});
|
|
87
|
-
return;
|
|
88
|
-
}
|
|
89
|
-
const newFileStateArray = validFiles.map((file) => ({
|
|
90
|
-
file,
|
|
91
|
-
id: generateUniqueId(file),
|
|
92
|
-
preview: createObjectURL(file, disablePreviewForNonImageFiles)
|
|
93
|
-
}));
|
|
94
|
-
set({
|
|
95
|
-
errors,
|
|
96
|
-
fileStateArray: multiple ? [...fileStateArray, ...newFileStateArray] : newFileStateArray,
|
|
97
|
-
isDraggingOver: false
|
|
98
|
-
});
|
|
99
|
-
await onUpload?.({ fileStateArray: newFileStateArray });
|
|
100
|
-
},
|
|
101
|
-
clearErrors: () => {
|
|
102
|
-
set({ errors: [] });
|
|
103
|
-
},
|
|
104
|
-
clearFiles: () => {
|
|
105
|
-
const { fileStateArray } = get();
|
|
106
|
-
for (const fileState of fileStateArray) clearObjectURL(fileState, disablePreviewForNonImageFiles);
|
|
107
|
-
set({ fileStateArray: [] });
|
|
108
|
-
},
|
|
109
|
-
handleChange: async (event) => {
|
|
110
|
-
const fileList = event.target.files;
|
|
111
|
-
const { actions } = get();
|
|
112
|
-
await actions.addFiles(fileList);
|
|
113
|
-
clearInputValue();
|
|
114
|
-
},
|
|
115
|
-
handleDragEnter: (event) => {
|
|
116
|
-
event.preventDefault();
|
|
117
|
-
event.stopPropagation();
|
|
118
|
-
set({ isDraggingOver: true });
|
|
119
|
-
},
|
|
120
|
-
handleDragLeave: (event) => {
|
|
121
|
-
event.preventDefault();
|
|
122
|
-
event.stopPropagation();
|
|
123
|
-
set({ isDraggingOver: false });
|
|
124
|
-
},
|
|
125
|
-
handleDragOver: (event) => {
|
|
126
|
-
event.preventDefault();
|
|
127
|
-
event.stopPropagation();
|
|
128
|
-
},
|
|
129
|
-
handleDrop: async (event) => {
|
|
130
|
-
event.preventDefault();
|
|
131
|
-
event.stopPropagation();
|
|
132
|
-
if (inputRef.current?.disabled) return;
|
|
133
|
-
const fileList = event.dataTransfer.files;
|
|
134
|
-
const { actions } = get();
|
|
135
|
-
await actions.addFiles(fileList);
|
|
136
|
-
},
|
|
137
|
-
openFilePicker: () => {
|
|
138
|
-
inputRef.current?.click();
|
|
139
|
-
},
|
|
140
|
-
removeFile: (fileToRemoveOrFileId) => {
|
|
141
|
-
const { fileStateArray } = get();
|
|
142
|
-
const actualFileToRemove = isString(fileToRemoveOrFileId) ? fileStateArray.find((file) => file.id === fileToRemoveOrFileId) : fileToRemoveOrFileId;
|
|
143
|
-
if (!actualFileToRemove) return;
|
|
144
|
-
clearObjectURL(actualFileToRemove, disablePreviewForNonImageFiles);
|
|
145
|
-
const updatedFileStateArray = fileStateArray.filter((file) => file.id !== actualFileToRemove.id);
|
|
146
|
-
set({
|
|
147
|
-
errors: [],
|
|
148
|
-
fileStateArray: updatedFileStateArray
|
|
149
|
-
});
|
|
150
|
-
}
|
|
151
|
-
}
|
|
152
|
-
}));
|
|
153
|
-
store.subscribe.withSelector((state) => state.fileStateArray, (fileStateArray) => {
|
|
154
|
-
onFilesChange?.({ fileStateArray });
|
|
155
|
-
});
|
|
156
|
-
return store;
|
|
157
|
-
};
|
|
158
|
-
|
|
159
|
-
//#endregion
|
|
160
|
-
//#region src/components/ui/drop-zone/use-drop-zone.ts
|
|
161
|
-
const useDropZone = (props) => {
|
|
162
|
-
const { allowedFileTypes, classNames, disablePreviewForNonImageFiles = true, extraProps, initialFiles, maxFileCount, maxFileSize, multiple, onFilesChange, onUpload, onUploadError, onUploadErrorCollection, onUploadSuccess, rejectDuplicateFiles = true, shouldOpenFilePickerOnAreaClick = true, validator } = props ?? {};
|
|
163
|
-
const inputRef = useRef(null);
|
|
164
|
-
const savedOnFilesChange = useCallbackRef(onFilesChange);
|
|
165
|
-
const savedOnUpload = useCallbackRef(onUpload);
|
|
166
|
-
const savedOnUploadError = useCallbackRef(onUploadError);
|
|
167
|
-
const savedOnUploadErrorCollection = useCallbackRef(onUploadErrorCollection);
|
|
168
|
-
const savedOnUploadSuccess = useCallbackRef(onUploadSuccess);
|
|
169
|
-
const savedValidator = useCallbackRef(validator);
|
|
170
|
-
const constantInitialFiles = useConstant(() => initialFiles);
|
|
171
|
-
const shallowComparedMaxFileSize = useShallowComparedValue(maxFileSize);
|
|
172
|
-
const shallowComparedAllowedFileTypes = useShallowComparedValue(allowedFileTypes);
|
|
173
|
-
const storeApi = useMemo(() => {
|
|
174
|
-
return createDropZoneStore({
|
|
175
|
-
allowedFileTypes: shallowComparedAllowedFileTypes,
|
|
176
|
-
disablePreviewForNonImageFiles,
|
|
177
|
-
initialFiles: constantInitialFiles,
|
|
178
|
-
inputRef,
|
|
179
|
-
maxFileCount,
|
|
180
|
-
maxFileSize: shallowComparedMaxFileSize,
|
|
181
|
-
multiple,
|
|
182
|
-
onFilesChange: savedOnFilesChange,
|
|
183
|
-
onUpload: savedOnUpload,
|
|
184
|
-
onUploadError: savedOnUploadError,
|
|
185
|
-
onUploadErrorCollection: savedOnUploadErrorCollection,
|
|
186
|
-
onUploadSuccess: savedOnUploadSuccess,
|
|
187
|
-
rejectDuplicateFiles,
|
|
188
|
-
validator: savedValidator
|
|
189
|
-
});
|
|
190
|
-
}, [
|
|
191
|
-
shallowComparedAllowedFileTypes,
|
|
192
|
-
disablePreviewForNonImageFiles,
|
|
193
|
-
constantInitialFiles,
|
|
194
|
-
maxFileCount,
|
|
195
|
-
shallowComparedMaxFileSize,
|
|
196
|
-
multiple,
|
|
197
|
-
savedOnFilesChange,
|
|
198
|
-
savedOnUpload,
|
|
199
|
-
savedOnUploadError,
|
|
200
|
-
savedOnUploadErrorCollection,
|
|
201
|
-
savedOnUploadSuccess,
|
|
202
|
-
rejectDuplicateFiles,
|
|
203
|
-
savedValidator
|
|
204
|
-
]);
|
|
205
|
-
const useDropZoneStore = (selector) => {
|
|
206
|
-
return useStore(storeApi, selector);
|
|
207
|
-
};
|
|
208
|
-
const isDraggingOver = useDropZoneStore((store) => store.isDraggingOver);
|
|
209
|
-
const actions = useDropZoneStore((store) => store.actions);
|
|
210
|
-
const getContainerProps = useCallback((containerProps) => {
|
|
211
|
-
const mergedContainerProps = mergeTwoProps(extraProps?.container, containerProps);
|
|
212
|
-
return {
|
|
213
|
-
...mergedContainerProps,
|
|
214
|
-
className: cnMerge("relative isolate flex flex-col", isDraggingOver && "opacity-60", classNames?.container, mergedContainerProps.className),
|
|
215
|
-
"data-drag-over": dataAttr(isDraggingOver),
|
|
216
|
-
"data-scope": "dropzone",
|
|
217
|
-
"data-part": "container",
|
|
218
|
-
"data-slot": "dropzone-container",
|
|
219
|
-
onDragEnter: composeTwoEventHandlers(actions.handleDragEnter, mergedContainerProps.onDragEnter),
|
|
220
|
-
onDragLeave: composeTwoEventHandlers(actions.handleDragLeave, mergedContainerProps.onDragLeave),
|
|
221
|
-
onDragOver: composeTwoEventHandlers(actions.handleDragOver, mergedContainerProps.onDragOver),
|
|
222
|
-
onDrop: composeTwoEventHandlers(actions.handleDrop, mergedContainerProps.onDrop)
|
|
223
|
-
};
|
|
224
|
-
}, [
|
|
225
|
-
actions.handleDragEnter,
|
|
226
|
-
actions.handleDragLeave,
|
|
227
|
-
actions.handleDragOver,
|
|
228
|
-
actions.handleDrop,
|
|
229
|
-
classNames?.container,
|
|
230
|
-
extraProps?.container,
|
|
231
|
-
isDraggingOver
|
|
232
|
-
]);
|
|
233
|
-
const getInputProps = useCallback((inputProps) => {
|
|
234
|
-
const mergedInputProps = mergeTwoProps(extraProps?.input, inputProps);
|
|
235
|
-
return {
|
|
236
|
-
...mergedInputProps,
|
|
237
|
-
accept: allowedFileTypes ? allowedFileTypes.join(", ") : mergedInputProps.accept,
|
|
238
|
-
className: cnMerge(shouldOpenFilePickerOnAreaClick ? "absolute inset-0 z-[100] cursor-pointer opacity-0" : "hidden", classNames?.input, mergedInputProps.className),
|
|
239
|
-
"data-drag-over": dataAttr(isDraggingOver),
|
|
240
|
-
"data-scope": "dropzone",
|
|
241
|
-
"data-part": "input",
|
|
242
|
-
"data-slot": "dropzone-input",
|
|
243
|
-
multiple: multiple ?? mergedInputProps.multiple,
|
|
244
|
-
onChange: composeTwoEventHandlers(actions.handleChange, mergedInputProps.onChange),
|
|
245
|
-
ref: composeRefs(inputRef, mergedInputProps.ref),
|
|
246
|
-
type: "file"
|
|
247
|
-
};
|
|
248
|
-
}, [
|
|
249
|
-
actions.handleChange,
|
|
250
|
-
allowedFileTypes,
|
|
251
|
-
classNames?.input,
|
|
252
|
-
extraProps?.input,
|
|
253
|
-
isDraggingOver,
|
|
254
|
-
multiple,
|
|
255
|
-
shouldOpenFilePickerOnAreaClick
|
|
256
|
-
]);
|
|
257
|
-
const getTriggerProps = useCallback((triggerProps) => {
|
|
258
|
-
const mergedTriggerProps = mergeTwoProps(extraProps?.trigger, triggerProps);
|
|
259
|
-
return {
|
|
260
|
-
...mergedTriggerProps,
|
|
261
|
-
className: cnMerge(classNames?.trigger, mergedTriggerProps.className),
|
|
262
|
-
"data-scope": "dropzone",
|
|
263
|
-
"data-part": "trigger",
|
|
264
|
-
"data-slot": "dropzone-trigger",
|
|
265
|
-
onClick: composeTwoEventHandlers(actions.openFilePicker, mergedTriggerProps.onClick)
|
|
266
|
-
};
|
|
267
|
-
}, [
|
|
268
|
-
actions.openFilePicker,
|
|
269
|
-
classNames?.trigger,
|
|
270
|
-
extraProps?.trigger
|
|
271
|
-
]);
|
|
272
|
-
const propGetters = useMemo(() => ({
|
|
273
|
-
getContainerProps,
|
|
274
|
-
getInputProps,
|
|
275
|
-
getTriggerProps
|
|
276
|
-
}), [
|
|
277
|
-
getContainerProps,
|
|
278
|
-
getInputProps,
|
|
279
|
-
getTriggerProps
|
|
280
|
-
]);
|
|
281
|
-
const savedUseDropZoneStore = useCallbackRef(useDropZoneStore);
|
|
282
|
-
const result = useMemo(() => ({
|
|
283
|
-
inputRef,
|
|
284
|
-
propGetters,
|
|
285
|
-
storeApi,
|
|
286
|
-
useDropZoneStore: savedUseDropZoneStore
|
|
287
|
-
}), [
|
|
288
|
-
propGetters,
|
|
289
|
-
storeApi,
|
|
290
|
-
savedUseDropZoneStore
|
|
291
|
-
]);
|
|
292
|
-
return result;
|
|
293
|
-
};
|
|
294
|
-
|
|
295
|
-
//#endregion
|
|
296
|
-
//#region src/components/ui/drop-zone/drop-zone.tsx
|
|
297
|
-
function DropZoneRoot(props) {
|
|
298
|
-
const { children,...restOfProps } = props;
|
|
299
|
-
const dropZone = useDropZone(restOfProps);
|
|
300
|
-
return /* @__PURE__ */ jsx(DropZoneStoreContextProvider, {
|
|
301
|
-
store: dropZone.storeApi,
|
|
302
|
-
children: /* @__PURE__ */ jsx(DropZonePropGettersContextProvider, {
|
|
303
|
-
value: dropZone.propGetters,
|
|
304
|
-
children
|
|
305
|
-
})
|
|
306
|
-
});
|
|
307
|
-
}
|
|
308
|
-
function DropZoneContext(props) {
|
|
309
|
-
const { children, selector } = props;
|
|
310
|
-
const dropZoneCtx = useDropZoneStoreContext(selector);
|
|
311
|
-
const resolvedChildren = isFunction(children) ? children(dropZoneCtx) : children;
|
|
312
|
-
return resolvedChildren;
|
|
313
|
-
}
|
|
314
|
-
function DropZoneContainer(props) {
|
|
315
|
-
const { as: Element = "div", asChild,...restOfProps } = props;
|
|
316
|
-
const propGetters = usePropGettersContext();
|
|
317
|
-
const Component$1 = asChild ? SlotRoot : Element;
|
|
318
|
-
return /* @__PURE__ */ jsx(Component$1, { ...propGetters.getContainerProps(restOfProps) });
|
|
319
|
-
}
|
|
320
|
-
function DropZoneInput(props) {
|
|
321
|
-
const { asChild,...restOfProps } = props;
|
|
322
|
-
const propGetters = usePropGettersContext();
|
|
323
|
-
const Component$1 = asChild ? SlotRoot : "input";
|
|
324
|
-
return /* @__PURE__ */ jsx(Component$1, { ...propGetters.getInputProps(restOfProps) });
|
|
325
|
-
}
|
|
326
|
-
function DropZoneArea(props) {
|
|
327
|
-
const { children, extraProps, selector } = props;
|
|
328
|
-
return /* @__PURE__ */ jsxs(DropZoneContainer, {
|
|
329
|
-
...extraProps?.container,
|
|
330
|
-
children: [/* @__PURE__ */ jsx(DropZoneInput, { ...extraProps?.input }), /* @__PURE__ */ jsx(DropZoneContext, {
|
|
331
|
-
selector,
|
|
332
|
-
children
|
|
333
|
-
})]
|
|
334
|
-
});
|
|
335
|
-
}
|
|
336
|
-
function DropZoneTrigger(props) {
|
|
337
|
-
const { asChild,...restOfProps } = props;
|
|
338
|
-
const propGetters = usePropGettersContext();
|
|
339
|
-
const Component$1 = asChild ? SlotRoot : "button";
|
|
340
|
-
return /* @__PURE__ */ jsx(Component$1, { ...propGetters.getTriggerProps(restOfProps) });
|
|
341
|
-
}
|
|
342
|
-
function DropZoneFilePreview(props) {
|
|
343
|
-
const { children } = props;
|
|
344
|
-
const fileStateArray = useDropZoneStoreContext((store) => store.fileStateArray);
|
|
345
|
-
const actions = useDropZoneStoreContext((store) => store.actions);
|
|
346
|
-
if (fileStateArray.length === 0) return;
|
|
347
|
-
const resolvedChildren = isFunction(children) ? children({
|
|
348
|
-
actions,
|
|
349
|
-
fileStateArray
|
|
350
|
-
}) : children;
|
|
351
|
-
return resolvedChildren;
|
|
352
|
-
}
|
|
353
|
-
function DropZoneErrorPreview(props) {
|
|
354
|
-
const { children } = props;
|
|
355
|
-
const errors = useDropZoneStoreContext((store) => store.errors);
|
|
356
|
-
const actions = useDropZoneStoreContext((store) => store.actions);
|
|
357
|
-
if (errors.length === 0) return;
|
|
358
|
-
const resolvedChildren = isFunction(children) ? children({
|
|
359
|
-
actions,
|
|
360
|
-
errors
|
|
361
|
-
}) : children;
|
|
362
|
-
return resolvedChildren;
|
|
363
|
-
}
|
|
364
|
-
|
|
365
|
-
//#endregion
|
|
366
|
-
//#region src/components/ui/drop-zone/drop-zone-parts.ts
|
|
367
|
-
var drop_zone_parts_exports = {};
|
|
368
|
-
__export(drop_zone_parts_exports, {
|
|
369
|
-
Area: () => DropZoneArea,
|
|
370
|
-
Container: () => DropZoneContainer,
|
|
371
|
-
Context: () => DropZoneContext,
|
|
372
|
-
ErrorPreview: () => DropZoneErrorPreview,
|
|
373
|
-
FilePreview: () => DropZoneFilePreview,
|
|
374
|
-
Input: () => DropZoneInput,
|
|
375
|
-
Root: () => DropZoneRoot,
|
|
376
|
-
Trigger: () => DropZoneTrigger
|
|
377
|
-
});
|
|
378
|
-
|
|
379
|
-
//#endregion
|
|
380
|
-
export { DropZoneArea, DropZoneContainer, DropZoneContext, DropZoneErrorPreview, DropZoneFilePreview, DropZoneInput, DropZoneRoot, DropZoneTrigger, drop_zone_parts_exports, useDropZone, useDropZoneStoreContext };
|
|
381
|
-
//# sourceMappingURL=drop-zone-BPfSu99L.js.map
|