@alfakit/react 0.0.0-stage → 0.1.0

package/dist/components/fields/toggle-buttons.js

@@ -0,0 +1,84 @@
+import { cn } from "../../lib/utils.js";
+import { solidButtonColorClasses } from "../../lib/colors.js";
+import { Icon } from "../../lib/icons.js";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../ui/tooltip.js";
+import { useField } from "../form/form-context.js";
+import { FieldWrapper } from "../schema/field-wrapper.js";
+import { fieldIds, gridColumnsClasses, isOptionGroup, toggleButtonsNext, toggleButtonsSelected } from "@alfakit/core";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/fields/toggle-buttons.tsx
+/**
+* Buttons acting as a radio group (or, when `multiple`, a set of toggles). Each button
+* reports its state with `aria-pressed`; the selected one takes the option's colour.
+*/
+/** `gridDirection('column')`: buttons flow down each column. Spelled out for Tailwind. */
+const COLUMN_FLOW_CLASSES = {
+	2: "md:columns-2",
+	3: "md:columns-3",
+	4: "md:columns-4",
+	5: "md:columns-5",
+	6: "md:columns-6"
+};
+/** `size()`: height, padding and text of the buttons (medium is the default). */
+const SIZE_CLASSES = {
+	xs: "h-7 px-2 text-xs",
+	sm: "h-8 px-2.5 text-sm",
+	md: "h-9 px-3 text-sm",
+	lg: "h-10 px-4 text-base",
+	xl: "h-11 px-5 text-base"
+};
+function ToggleButtonsField({ component }) {
+	const { value, setValue, error, id, disabled, readOnly, aria } = useField(component);
+	const multiple = Boolean(component.multiple);
+	const selected = toggleButtonsSelected(value, multiple);
+	const locked = disabled || readOnly;
+	const options = component.options.flatMap((option) => isOptionGroup(option) ? option.options : [option]);
+	const grid = !component.inline && !component.grouped && (component.gridColumns ?? 0) > 1;
+	const columnFlow = grid && component.gridDirection === "column";
+	const fullWidth = Boolean(component.fullWidth);
+	const sizeClasses = SIZE_CLASSES[component.size ?? "md"] ?? cn(SIZE_CLASSES.md, component.size);
+	return /* @__PURE__ */ jsx(FieldWrapper, {
+		field: component,
+		htmlFor: id,
+		error,
+		children: /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsx("div", {
+			id,
+			role: "group",
+			"data-slot": "toggle-buttons",
+			"aria-labelledby": component.label ? fieldIds(id).label : void 0,
+			"aria-describedby": aria["aria-describedby"],
+			"data-grid-direction": grid ? component.gridDirection ?? "row" : void 0,
+			className: cn(grid ? columnFlow ? cn("gap-x-2 *:mb-2 *:w-full", COLUMN_FLOW_CLASSES[component.gridColumns ?? 1]) : cn("grid gap-2", gridColumnsClasses({
+				default: 1,
+				md: component.gridColumns ?? 1
+			})) : "flex gap-2", !grid && (component.inline ? "flex-row flex-wrap" : cn("flex-col", fullWidth ? "items-stretch" : "items-start")), component.grouped && cn("gap-0 rounded-md shadow-xs", fullWidth ? "w-full" : "w-fit"), fullWidth && "w-full"),
+			children: options.map((option) => {
+				const pressed = selected.includes(option.value);
+				const color = option.color ?? "primary";
+				const tooltip = component.tooltips?.[option.value];
+				const button = /* @__PURE__ */ jsxs("button", {
+					type: "button",
+					"aria-pressed": pressed,
+					"aria-label": component.iconsOnly ? option.label : void 0,
+					title: component.iconsOnly ? option.label : void 0,
+					disabled: locked || option.disabled,
+					onClick: () => setValue(toggleButtonsNext(value, option.value, multiple)),
+					"data-state": pressed ? "on" : "off",
+					className: cn("focus-visible:border-ring focus-visible:ring-ring/50 inline-flex items-center justify-center gap-1.5 rounded-md border font-medium whitespace-nowrap transition-colors outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50", sizeClasses, fullWidth && component.inline && "flex-1", pressed ? cn("border-transparent", solidButtonColorClasses[color]) : "bg-background hover:bg-accent hover:text-accent-foreground", component.grouped && "rounded-none shadow-none not-first:-ms-px first:rounded-s-md last:rounded-e-md focus-visible:z-10", readOnly && "disabled:opacity-100"),
+					children: [option.icon && /* @__PURE__ */ jsx(Icon, {
+						name: option.icon,
+						className: "size-4"
+					}), !component.iconsOnly && /* @__PURE__ */ jsx("span", { children: option.label })]
+				}, option.value);
+				return tooltip ? /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+					asChild: true,
+					children: button
+				}), /* @__PURE__ */ jsx(TooltipContent, { children: tooltip })] }, option.value) : button;
+			})
+		}) })
+	});
+}
+//#endregion
+export { ToggleButtonsField };
+
+//# sourceMappingURL=toggle-buttons.js.map

package/dist/components/fields/toggle-buttons.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle-buttons.js","names":[],"sources":["../../../src/components/fields/toggle-buttons.tsx"],"sourcesContent":["import type { ToggleButtonsSchema } from '@alfakit/core'\nimport {\n  fieldIds,\n  gridColumnsClasses,\n  isOptionGroup,\n  toggleButtonsNext,\n  toggleButtonsSelected,\n} from '@alfakit/core'\nimport { solidButtonColorClasses } from '../../lib/colors'\nimport { Icon } from '../../lib/icons'\nimport { cn } from '../../lib/utils'\nimport { useField } from '../form/form-context'\nimport { FieldWrapper } from '../schema/field-wrapper'\nimport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../ui/tooltip'\n\n/**\n * Buttons acting as a radio group (or, when `multiple`, a set of toggles). Each button\n * reports its state with `aria-pressed`; the selected one takes the option's colour.\n */\n/** `gridDirection('column')`: buttons flow down each column. Spelled out for Tailwind. */\nconst COLUMN_FLOW_CLASSES: Record<number, string> = {\n  2: 'md:columns-2',\n  3: 'md:columns-3',\n  4: 'md:columns-4',\n  5: 'md:columns-5',\n  6: 'md:columns-6',\n}\n\n/** `size()`: height, padding and text of the buttons (medium is the default). */\nconst SIZE_CLASSES: Record<string, string> = {\n  xs: 'h-7 px-2 text-xs',\n  sm: 'h-8 px-2.5 text-sm',\n  md: 'h-9 px-3 text-sm',\n  lg: 'h-10 px-4 text-base',\n  xl: 'h-11 px-5 text-base',\n}\n\nexport function ToggleButtonsField({ component }: { component: ToggleButtonsSchema }) {\n  const { value, setValue, error, id, disabled, readOnly, aria } = useField<unknown>(component)\n  const multiple = Boolean(component.multiple)\n  const selected = toggleButtonsSelected(value, multiple)\n  const locked = disabled || readOnly\n  const options = component.options.flatMap((option) =>\n    isOptionGroup(option) ? option.options : [option],\n  )\n  // `columns()`: a grid of full-width buttons (inline and grouped layouts stay a row).\n  const grid = !component.inline && !component.grouped && (component.gridColumns ?? 0) > 1\n  const columnFlow = grid && component.gridDirection === 'column'\n  const fullWidth = Boolean(component.fullWidth)\n  // Any other `size()` string is a CSS class for the buttons.\n  const sizeClasses = SIZE_CLASSES[component.size ?? 'md'] ?? cn(SIZE_CLASSES.md, component.size)\n\n  return (\n    <FieldWrapper field={component} htmlFor={id} error={error}>\n      <TooltipProvider>\n        <div\n          id={id}\n          role=\"group\"\n          data-slot=\"toggle-buttons\"\n          aria-labelledby={component.label ? fieldIds(id).label : undefined}\n          aria-describedby={aria['aria-describedby']}\n          data-grid-direction={grid ? (component.gridDirection ?? 'row') : undefined}\n          className={cn(\n            grid\n              ? columnFlow\n                ? cn('gap-x-2 *:mb-2 *:w-full', COLUMN_FLOW_CLASSES[component.gridColumns ?? 1])\n                : cn(\n                    'grid gap-2',\n                    gridColumnsClasses({ default: 1, md: component.gridColumns ?? 1 }),\n                  )\n              : 'flex gap-2',\n            !grid &&\n              (component.inline\n                ? 'flex-row flex-wrap'\n                : cn('flex-col', fullWidth ? 'items-stretch' : 'items-start')),\n            component.grouped && cn('gap-0 rounded-md shadow-xs', fullWidth ? 'w-full' : 'w-fit'),\n            fullWidth && 'w-full',\n          )}\n        >\n          {options.map((option) => {\n            const pressed = selected.includes(option.value)\n            const color = option.color ?? 'primary'\n            const tooltip = component.tooltips?.[option.value]\n\n            const button = (\n              <button\n                key={option.value}\n                type=\"button\"\n                aria-pressed={pressed}\n                aria-label={component.iconsOnly ? option.label : undefined}\n                title={component.iconsOnly ? option.label : undefined}\n                disabled={locked || option.disabled}\n                onClick={() => setValue(toggleButtonsNext(value, option.value, multiple))}\n                data-state={pressed ? 'on' : 'off'}\n                className={cn(\n                  'focus-visible:border-ring focus-visible:ring-ring/50 inline-flex items-center justify-center gap-1.5 rounded-md border font-medium whitespace-nowrap transition-colors outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50',\n                  sizeClasses,\n                  fullWidth && component.inline && 'flex-1',\n                  pressed\n                    ? cn('border-transparent', solidButtonColorClasses[color])\n                    : 'bg-background hover:bg-accent hover:text-accent-foreground',\n                  component.grouped &&\n                    'rounded-none shadow-none not-first:-ms-px first:rounded-s-md last:rounded-e-md focus-visible:z-10',\n                  readOnly && 'disabled:opacity-100',\n                )}\n              >\n                {option.icon && <Icon name={option.icon} className=\"size-4\" />}\n                {!component.iconsOnly && <span>{option.label}</span>}\n              </button>\n            )\n\n            return tooltip ? (\n              <Tooltip key={option.value}>\n                <TooltipTrigger asChild>{button}</TooltipTrigger>\n                <TooltipContent>{tooltip}</TooltipContent>\n              </Tooltip>\n            ) : (\n              button\n            )\n          })}\n        </div>\n      </TooltipProvider>\n    </FieldWrapper>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;AAoBA,MAAM,sBAA8C;CAClD,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;AACL;;AAGA,MAAM,eAAuC;CAC3C,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAEA,SAAgB,mBAAmB,EAAE,aAAiD;CACpF,MAAM,EAAE,OAAO,UAAU,OAAO,IAAI,UAAU,UAAU,SAAS,SAAkB,SAAS;CAC5F,MAAM,WAAW,QAAQ,UAAU,QAAQ;CAC3C,MAAM,WAAW,sBAAsB,OAAO,QAAQ;CACtD,MAAM,SAAS,YAAY;CAC3B,MAAM,UAAU,UAAU,QAAQ,SAAS,WACzC,cAAc,MAAM,IAAI,OAAO,UAAU,CAAC,MAAM,CAClD;CAEA,MAAM,OAAO,CAAC,UAAU,UAAU,CAAC,UAAU,YAAY,UAAU,eAAe,KAAK;CACvF,MAAM,aAAa,QAAQ,UAAU,kBAAkB;CACvD,MAAM,YAAY,QAAQ,UAAU,SAAS;CAE7C,MAAM,cAAc,aAAa,UAAU,QAAQ,SAAS,GAAG,aAAa,IAAI,UAAU,IAAI;CAE9F,OACE,oBAAC,cAAD;EAAc,OAAO;EAAW,SAAS;EAAW;EAClD,UAAA,oBAAC,iBAAD,EAAA,UACE,oBAAC,OAAD;GACM;GACJ,MAAK;GACL,aAAU;GACV,mBAAiB,UAAU,QAAQ,SAAS,EAAE,CAAC,CAAC,QAAQ,KAAA;GACxD,oBAAkB,KAAK;GACvB,uBAAqB,OAAQ,UAAU,iBAAiB,QAAS,KAAA;GACjE,WAAW,GACT,OACI,aACE,GAAG,2BAA2B,oBAAoB,UAAU,eAAe,EAAE,IAC7E,GACE,cACA,mBAAmB;IAAE,SAAS;IAAG,IAAI,UAAU,eAAe;GAAE,CAAC,CACnE,IACF,cACJ,CAAC,SACE,UAAU,SACP,uBACA,GAAG,YAAY,YAAY,kBAAkB,aAAa,IAChE,UAAU,WAAW,GAAG,8BAA8B,YAAY,WAAW,OAAO,GACpF,aAAa,QACf;GAEC,UAAA,QAAQ,KAAK,WAAW;IACvB,MAAM,UAAU,SAAS,SAAS,OAAO,KAAK;IAC9C,MAAM,QAAQ,OAAO,SAAS;IAC9B,MAAM,UAAU,UAAU,WAAW,OAAO;IAE5C,MAAM,SACJ,qBAAC,UAAD;KAEE,MAAK;KACL,gBAAc;KACd,cAAY,UAAU,YAAY,OAAO,QAAQ,KAAA;KACjD,OAAO,UAAU,YAAY,OAAO,QAAQ,KAAA;KAC5C,UAAU,UAAU,OAAO;KAC3B,eAAe,SAAS,kBAAkB,OAAO,OAAO,OAAO,QAAQ,CAAC;KACxE,cAAY,UAAU,OAAO;KAC7B,WAAW,GACT,iQACA,aACA,aAAa,UAAU,UAAU,UACjC,UACI,GAAG,sBAAsB,wBAAwB,MAAM,IACvD,8DACJ,UAAU,WACR,qGACF,YAAY,sBACd;KAnBF,UAAA,CAqBG,OAAO,QAAQ,oBAAC,MAAD;MAAM,MAAM,OAAO;MAAM,WAAU;KAAU,CAAA,GAC5D,CAAC,UAAU,aAAa,oBAAC,QAAD,EAAA,UAAO,OAAO,MAAY,CAAA,CAC7C;IAtBD,GAAA,OAAO,KAsBN;IAGV,OAAO,UACL,qBAAC,SAAD,EAAA,UAAA,CACE,oBAAC,gBAAD;KAAgB,SAAA;KAAS,UAAA;IAAuB,CAAA,GAChD,oBAAC,gBAAD,EAAA,UAAiB,QAAwB,CAAA,CAClC,EAAA,GAHK,OAAO,KAGZ,IAET;GAEJ,CAAC;EACE,CAAA,EACU,CAAA;CACL,CAAA;AAElB"}

package/dist/components/fields/toggle.d.ts

@@ -0,0 +1,7 @@
+import { ToggleSchema } from "@alfakit/core";
+//#region src/components/fields/toggle.d.ts
+export declare function ToggleField({ component }: {
+  component: ToggleSchema;
+}): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=toggle.d.ts.map

package/dist/components/fields/toggle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle.d.ts","names":[],"sources":["../../../src/components/fields/toggle.tsx"],"mappings":";;wBAagB,cAAc;EAAe,WAAW;oBAAc,IAAA"}

package/dist/components/fields/toggle.js

@@ -0,0 +1,39 @@
+import { cn } from "../../lib/utils.js";
+import { colorClass, switchOffColorClasses, switchOnColorClasses, textColorClasses } from "../../lib/colors.js";
+import { Icon } from "../../lib/icons.js";
+import { useField } from "../form/form-context.js";
+import { FieldWrapper } from "../schema/field-wrapper.js";
+import { Switch } from "../ui/switch.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/fields/toggle.tsx
+function ToggleField({ component }) {
+	const { value, setValue, error, id, disabled, readOnly, aria } = useField(component);
+	const on = Boolean(value);
+	const icon = on ? component.onIcon : component.offIcon;
+	return /* @__PURE__ */ jsx(FieldWrapper, {
+		field: component,
+		htmlFor: id,
+		error,
+		inline: component.inline,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-2",
+			children: [/* @__PURE__ */ jsx(Switch, {
+				id,
+				name: component.name,
+				checked: on,
+				onCheckedChange: (checked) => setValue(checked),
+				disabled: disabled || readOnly,
+				"aria-readonly": readOnly || void 0,
+				...aria,
+				className: cn(component.onColor && colorClass(switchOnColorClasses, component.onColor), component.offColor && colorClass(switchOffColorClasses, component.offColor))
+			}), icon && /* @__PURE__ */ jsx(Icon, {
+				name: icon,
+				className: colorClass(textColorClasses, on ? component.onColor : component.offColor, "gray")
+			})]
+		})
+	});
+}
+//#endregion
+export { ToggleField };
+
+//# sourceMappingURL=toggle.js.map

package/dist/components/fields/toggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle.js","names":[],"sources":["../../../src/components/fields/toggle.tsx"],"sourcesContent":["import type { ToggleSchema } from '@alfakit/core'\nimport {\n  colorClass,\n  switchOffColorClasses,\n  switchOnColorClasses,\n  textColorClasses,\n} from '../../lib/colors'\nimport { Icon } from '../../lib/icons'\nimport { cn } from '../../lib/utils'\nimport { useField } from '../form/form-context'\nimport { FieldWrapper } from '../schema/field-wrapper'\nimport { Switch } from '../ui/switch'\n\nexport function ToggleField({ component }: { component: ToggleSchema }) {\n  const { value, setValue, error, id, disabled, readOnly, aria } = useField<boolean | null>(\n    component,\n  )\n  const on = Boolean(value)\n  const icon = on ? component.onIcon : component.offIcon\n\n  return (\n    <FieldWrapper field={component} htmlFor={id} error={error} inline={component.inline}>\n      <div className=\"flex items-center gap-2\">\n        <Switch\n          id={id}\n          name={component.name}\n          checked={on}\n          onCheckedChange={(checked) => setValue(checked)}\n          disabled={disabled || readOnly}\n          aria-readonly={readOnly || undefined}\n          {...aria}\n          className={cn(\n            component.onColor && colorClass(switchOnColorClasses, component.onColor),\n            component.offColor && colorClass(switchOffColorClasses, component.offColor),\n          )}\n        />\n        {icon && (\n          <Icon\n            name={icon}\n            className={colorClass(\n              textColorClasses,\n              on ? component.onColor : component.offColor,\n              'gray',\n            )}\n          />\n        )}\n      </div>\n    </FieldWrapper>\n  )\n}\n"],"mappings":";;;;;;;;AAaA,SAAgB,YAAY,EAAE,aAA0C;CACtE,MAAM,EAAE,OAAO,UAAU,OAAO,IAAI,UAAU,UAAU,SAAS,SAC/D,SACF;CACA,MAAM,KAAK,QAAQ,KAAK;CACxB,MAAM,OAAO,KAAK,UAAU,SAAS,UAAU;CAE/C,OACE,oBAAC,cAAD;EAAc,OAAO;EAAW,SAAS;EAAW;EAAO,QAAQ,UAAU;EAC3E,UAAA,qBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACE,oBAAC,QAAD;IACM;IACJ,MAAM,UAAU;IAChB,SAAS;IACT,kBAAkB,YAAY,SAAS,OAAO;IAC9C,UAAU,YAAY;IACtB,iBAAe,YAAY,KAAA;IAC3B,GAAI;IACJ,WAAW,GACT,UAAU,WAAW,WAAW,sBAAsB,UAAU,OAAO,GACvE,UAAU,YAAY,WAAW,uBAAuB,UAAU,QAAQ,CAC5E;GACD,CAAA,GACA,QACC,oBAAC,MAAD;IACE,MAAM;IACN,WAAW,WACT,kBACA,KAAK,UAAU,UAAU,UAAU,UACnC,MACF;GACD,CAAA,CAEA;;CACO,CAAA;AAElB"}

package/dist/components/file-manager/file-manager-lazy.d.ts

@@ -0,0 +1,10 @@
+import { LazyComponent } from "../../lib/lazy.js";
+import "./file-manager.js";
+import { FileManagerSchema } from "@alfakit/core";
+//#region src/components/file-manager/file-manager-lazy.d.ts
+/** The file manager; its code loads the first time it is shown. */
+export declare const FileManager: LazyComponent<{
+  component?: FileManagerSchema;
+}>;
+//#endregion
+//# sourceMappingURL=file-manager-lazy.d.ts.map

package/dist/components/file-manager/file-manager-lazy.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-manager-lazy.d.ts","names":["_$______lib_lazy0.LazyComponent"],"sources":["../../../src/components/file-manager/file-manager-lazy.tsx"],"mappings":";;;;;qBA0Ca,aAA0CA;EAAA,YAAA"}

package/dist/components/file-manager/file-manager-lazy.js

@@ -0,0 +1,49 @@
+import { useT } from "../../context.js";
+import { lazyComponent } from "../../lib/lazy.js";
+import { Card } from "../ui/card.js";
+import { Skeleton } from "../ui/skeleton.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/file-manager/file-manager-lazy.tsx
+/** The server render and the first paint: the file manager's outline. */
+function FileManagerSkeleton({ grid = true }) {
+	const t = useT();
+	return /* @__PURE__ */ jsxs(Card, {
+		className: "gap-0 overflow-hidden py-0",
+		"aria-busy": "true",
+		"data-slot": "file-manager",
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: "sr-only",
+				children: t("file-manager.loading", {}, "Loading files")
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2 border-b p-3",
+				"aria-hidden": "true",
+				children: [
+					/* @__PURE__ */ jsx(Skeleton, { className: "h-6 w-40" }),
+					/* @__PURE__ */ jsx(Skeleton, { className: "ms-auto h-9 w-52" }),
+					/* @__PURE__ */ jsx(Skeleton, { className: "h-9 w-24" })
+				]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex min-h-[28rem]",
+				"aria-hidden": "true",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "hidden w-60 flex-col gap-2 border-e p-3 md:flex",
+					children: Array.from({ length: 5 }, (_, index) => /* @__PURE__ */ jsx(Skeleton, { className: "h-6" }, index))
+				}), /* @__PURE__ */ jsx("div", {
+					className: grid ? "grid flex-1 grid-cols-2 content-start gap-3 p-3 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6" : "flex flex-1 flex-col gap-2 p-3",
+					children: Array.from({ length: 12 }, (_, index) => /* @__PURE__ */ jsx(Skeleton, { className: grid ? "aspect-[4/3]" : "h-10" }, index))
+				})]
+			})
+		]
+	});
+}
+/** The file manager; its code loads the first time it is shown. */
+const FileManager = lazyComponent(() => import("./file-manager.js").then((module) => module.FileManager), ({ component }) => /* @__PURE__ */ jsx(FileManagerSkeleton, { grid: component?.view !== "list" }));
+/** The picker's browser (the same view in picker mode). */
+const FileManagerBrowser = lazyComponent(() => import("./file-manager.js").then((module) => module.FileManagerView), () => /* @__PURE__ */ jsx(FileManagerSkeleton, {}));
+//#endregion
+export { FileManager, FileManagerBrowser, FileManagerSkeleton };
+
+//# sourceMappingURL=file-manager-lazy.js.map

package/dist/components/file-manager/file-manager-lazy.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-manager-lazy.js","names":[],"sources":["../../../src/components/file-manager/file-manager-lazy.tsx"],"sourcesContent":["import type { FileManagerSchema } from '@alfakit/core'\nimport { useT } from '../../context'\nimport { lazyComponent } from '../../lib/lazy'\nimport { Card } from '../ui/card'\nimport { Skeleton } from '../ui/skeleton'\nimport type { FileManagerViewProps } from './file-manager'\n\n/** The server render and the first paint: the file manager's outline. */\nexport function FileManagerSkeleton({ grid = true }: { grid?: boolean }) {\n  const t = useT()\n\n  return (\n    <Card className=\"gap-0 overflow-hidden py-0\" aria-busy=\"true\" data-slot=\"file-manager\">\n      <span className=\"sr-only\">{t('file-manager.loading', {}, 'Loading files')}</span>\n      <div className=\"flex items-center gap-2 border-b p-3\" aria-hidden=\"true\">\n        <Skeleton className=\"h-6 w-40\" />\n        <Skeleton className=\"ms-auto h-9 w-52\" />\n        <Skeleton className=\"h-9 w-24\" />\n      </div>\n      <div className=\"flex min-h-[28rem]\" aria-hidden=\"true\">\n        <div className=\"hidden w-60 flex-col gap-2 border-e p-3 md:flex\">\n          {Array.from({ length: 5 }, (_, index) => (\n            <Skeleton key={index} className=\"h-6\" />\n          ))}\n        </div>\n        <div\n          className={\n            grid\n              ? 'grid flex-1 grid-cols-2 content-start gap-3 p-3 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6'\n              : 'flex flex-1 flex-col gap-2 p-3'\n          }\n        >\n          {Array.from({ length: 12 }, (_, index) => (\n            <Skeleton key={index} className={grid ? 'aspect-[4/3]' : 'h-10'} />\n          ))}\n        </div>\n      </div>\n    </Card>\n  )\n}\n\n/** The file manager; its code loads the first time it is shown. */\nexport const FileManager = lazyComponent<{ component?: FileManagerSchema }>(\n  () => import('./file-manager').then((module) => module.FileManager),\n  ({ component }) => <FileManagerSkeleton grid={component?.view !== 'list'} />,\n)\n\n/** The picker's browser (the same view in picker mode). */\nexport const FileManagerBrowser = lazyComponent<FileManagerViewProps>(\n  () => import('./file-manager').then((module) => module.FileManagerView),\n  () => <FileManagerSkeleton />,\n)\n"],"mappings":";;;;;;;AAQA,SAAgB,oBAAoB,EAAE,OAAO,QAA4B;CACvE,MAAM,IAAI,KAAK;CAEf,OACE,qBAAC,MAAD;EAAM,WAAU;EAA6B,aAAU;EAAO,aAAU;EAAxE,UAAA;GACE,oBAAC,QAAD;IAAM,WAAU;IAAW,UAAA,EAAE,wBAAwB,CAAC,GAAG,eAAe;GAAQ,CAAA;GAChF,qBAAC,OAAD;IAAK,WAAU;IAAuC,eAAY;IAAlE,UAAA;KACE,oBAAC,UAAD,EAAU,WAAU,WAAY,CAAA;KAChC,oBAAC,UAAD,EAAU,WAAU,mBAAoB,CAAA;KACxC,oBAAC,UAAD,EAAU,WAAU,WAAY,CAAA;IAC7B;;GACL,qBAAC,OAAD;IAAK,WAAU;IAAqB,eAAY;IAAhD,UAAA,CACE,oBAAC,OAAD;KAAK,WAAU;KACZ,UAAA,MAAM,KAAK,EAAE,QAAQ,EAAE,IAAI,GAAG,UAC7B,oBAAC,UAAD,EAAsB,WAAU,MAAO,GAAxB,KAAwB,CACxC;IACE,CAAA,GACL,oBAAC,OAAD;KACE,WACE,OACI,iGACA;KAGL,UAAA,MAAM,KAAK,EAAE,QAAQ,GAAG,IAAI,GAAG,UAC9B,oBAAC,UAAD,EAAsB,WAAW,OAAO,iBAAiB,OAAS,GAAnD,KAAmD,CACnE;IACE,CAAA,CACF;;EACD;;AAEV;;AAGA,MAAa,cAAc,oBACnB,OAAO,oBAAiB,CAAC,MAAM,WAAW,OAAO,WAAW,IACjE,EAAE,gBAAgB,oBAAC,qBAAD,EAAqB,MAAM,WAAW,SAAS,OAAS,CAAA,CAC7E;;AAGA,MAAa,qBAAqB,oBAC1B,OAAO,oBAAiB,CAAC,MAAM,WAAW,OAAO,eAAe,SAChE,oBAAC,qBAAD,CAAsB,CAAA,CAC9B"}

package/dist/components/file-manager/file-manager.d.ts

@@ -0,0 +1 @@
+import { FileManagerSchema } from "@alfakit/core";