@alfakit/react 0.0.0-stage → 0.1.0

package/dist/components/table/trigger-button.js

@@ -0,0 +1,44 @@
+import { cn } from "../../lib/utils.js";
+import { badgeColorClasses, colorClass, outlineButtonColorClasses, solidButtonColorClasses, textColorClasses } from "../../lib/colors.js";
+import { Icon } from "../../lib/icons.js";
+import { Badge } from "../ui/badge.js";
+import { Button } from "../ui/button.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/table/trigger-button.tsx
+/**
+* A table toolbar button (filters, column manager, grouping, reordering, apply / reset)
+* in its default look or as customised with `filtersTriggerAction()` & co. Extra props
+* (`aria-*`, handlers, the ref of a popover trigger) reach the button.
+*/
+function TableTriggerButton({ view, defaultIcon, responsiveLabel = false, active = false, className, disabled, ...props }) {
+	const icon = view.icon ? /* @__PURE__ */ jsx(Icon, { name: view.icon }) : defaultIcon;
+	const iconOnly = !view.showLabel;
+	const colored = view.color ? view.variant === "default" ? colorClass(solidButtonColorClasses, view.color, "primary") : view.variant === "outline" ? colorClass(outlineButtonColorClasses, view.color, "gray") : colorClass(textColorClasses, view.color, "primary") : void 0;
+	return /* @__PURE__ */ jsxs(Button, {
+		type: "button",
+		variant: view.variant,
+		size: iconOnly ? view.size === "xs" ? "icon-xs" : view.size === "lg" ? "icon" : "icon-sm" : view.size,
+		title: view.tooltip,
+		"aria-label": iconOnly ? view.label : void 0,
+		"data-slot": "table-trigger",
+		...props,
+		disabled: view.disabled || disabled,
+		className: cn(colored, active && !view.color && view.variant === "outline" && "border-primary/50 text-primary", className),
+		children: [
+			!view.iconAfter && icon,
+			!iconOnly && /* @__PURE__ */ jsx("span", {
+				className: cn(responsiveLabel && icon ? "sr-only sm:not-sr-only" : void 0),
+				children: view.label
+			}),
+			view.iconAfter && icon,
+			view.badge !== void 0 && view.badge !== null && view.badge !== 0 && /* @__PURE__ */ jsx(Badge, {
+				className: cn("ms-1 h-5 min-w-5 px-1", view.badgeColor && colorClass(badgeColorClasses, view.badgeColor, "primary")),
+				children: view.badge
+			})
+		]
+	});
+}
+//#endregion
+export { TableTriggerButton };
+
+//# sourceMappingURL=trigger-button.js.map

package/dist/components/table/trigger-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"trigger-button.js","names":[],"sources":["../../../src/components/table/trigger-button.tsx"],"sourcesContent":["import type { TriggerButtonView } from '@alfakit/core'\nimport type { ComponentProps, ReactNode } from 'react'\nimport {\n  badgeColorClasses,\n  colorClass,\n  outlineButtonColorClasses,\n  solidButtonColorClasses,\n  textColorClasses,\n} from '../../lib/colors'\nimport { Icon } from '../../lib/icons'\nimport { cn } from '../../lib/utils'\nimport { Badge } from '../ui/badge'\nimport { Button } from '../ui/button'\n\nexport interface TableTriggerButtonProps extends Omit<ComponentProps<'button'>, 'children'> {\n  view: TriggerButtonView\n  /** Icon of the default look; a server icon (`->icon()`) replaces it. */\n  defaultIcon?: ReactNode\n  /** The default look hides the label below `sm` (icon only on phones). */\n  responsiveLabel?: boolean\n  /** Highlight the default look (active filters, an active grouping). */\n  active?: boolean\n}\n\n/**\n * A table toolbar button (filters, column manager, grouping, reordering, apply / reset)\n * in its default look or as customised with `filtersTriggerAction()` & co. Extra props\n * (`aria-*`, handlers, the ref of a popover trigger) reach the button.\n */\nexport function TableTriggerButton({\n  view,\n  defaultIcon,\n  responsiveLabel = false,\n  active = false,\n  className,\n  disabled,\n  ...props\n}: TableTriggerButtonProps) {\n  const icon = view.icon ? <Icon name={view.icon} /> : defaultIcon\n  const iconOnly = !view.showLabel\n  const colored = view.color\n    ? view.variant === 'default'\n      ? colorClass(solidButtonColorClasses, view.color, 'primary')\n      : view.variant === 'outline'\n        ? colorClass(outlineButtonColorClasses, view.color, 'gray')\n        : colorClass(textColorClasses, view.color, 'primary')\n    : undefined\n\n  return (\n    <Button\n      type=\"button\"\n      variant={view.variant}\n      size={\n        iconOnly\n          ? view.size === 'xs'\n            ? 'icon-xs'\n            : view.size === 'lg'\n              ? 'icon'\n              : 'icon-sm'\n          : view.size\n      }\n      title={view.tooltip}\n      aria-label={iconOnly ? view.label : undefined}\n      data-slot=\"table-trigger\"\n      {...props}\n      disabled={view.disabled || disabled}\n      className={cn(\n        colored,\n        active && !view.color && view.variant === 'outline' && 'border-primary/50 text-primary',\n        className,\n      )}\n    >\n      {!view.iconAfter && icon}\n      {!iconOnly && (\n        <span className={cn(responsiveLabel && icon ? 'sr-only sm:not-sr-only' : undefined)}>\n          {view.label}\n        </span>\n      )}\n      {view.iconAfter && icon}\n      {view.badge !== undefined && view.badge !== null && view.badge !== 0 && (\n        <Badge\n          className={cn(\n            'ms-1 h-5 min-w-5 px-1',\n            view.badgeColor && colorClass(badgeColorClasses, view.badgeColor, 'primary'),\n          )}\n        >\n          {view.badge}\n        </Badge>\n      )}\n    </Button>\n  )\n}\n"],"mappings":";;;;;;;;;;;;AA6BA,SAAgB,mBAAmB,EACjC,MACA,aACA,kBAAkB,OAClB,SAAS,OACT,WACA,UACA,GAAG,SACuB;CAC1B,MAAM,OAAO,KAAK,OAAO,oBAAC,MAAD,EAAM,MAAM,KAAK,KAAO,CAAA,IAAI;CACrD,MAAM,WAAW,CAAC,KAAK;CACvB,MAAM,UAAU,KAAK,QACjB,KAAK,YAAY,YACf,WAAW,yBAAyB,KAAK,OAAO,SAAS,IACzD,KAAK,YAAY,YACf,WAAW,2BAA2B,KAAK,OAAO,MAAM,IACxD,WAAW,kBAAkB,KAAK,OAAO,SAAS,IACtD,KAAA;CAEJ,OACE,qBAAC,QAAD;EACE,MAAK;EACL,SAAS,KAAK;EACd,MACE,WACI,KAAK,SAAS,OACZ,YACA,KAAK,SAAS,OACZ,SACA,YACJ,KAAK;EAEX,OAAO,KAAK;EACZ,cAAY,WAAW,KAAK,QAAQ,KAAA;EACpC,aAAU;EACV,GAAI;EACJ,UAAU,KAAK,YAAY;EAC3B,WAAW,GACT,SACA,UAAU,CAAC,KAAK,SAAS,KAAK,YAAY,aAAa,kCACvD,SACF;EArBF,UAAA;GAuBG,CAAC,KAAK,aAAa;GACnB,CAAC,YACA,oBAAC,QAAD;IAAM,WAAW,GAAG,mBAAmB,OAAO,2BAA2B,KAAA,CAAS;IAC/E,UAAA,KAAK;GACF,CAAA;GAEP,KAAK,aAAa;GAClB,KAAK,UAAU,KAAA,KAAa,KAAK,UAAU,QAAQ,KAAK,UAAU,KACjE,oBAAC,OAAD;IACE,WAAW,GACT,yBACA,KAAK,cAAc,WAAW,mBAAmB,KAAK,YAAY,SAAS,CAC7E;IAEC,UAAA,KAAK;GACD,CAAA;EAEH;;AAEZ"}

package/dist/components/translation-manager/index.d.ts

@@ -0,0 +1,2 @@
+import { TranslationManager } from "./translation-manager-lazy.js";
+export { TranslationManager };

package/dist/components/translation-manager/index.js

@@ -0,0 +1,2 @@
+import { TranslationManager } from "./translation-manager-lazy.js";
+export { TranslationManager };

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

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

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

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

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

@@ -0,0 +1,24 @@
+import { lazyComponent } from "../../lib/lazy.js";
+import { Card, CardContent } from "../ui/card.js";
+import { Skeleton } from "../ui/skeleton.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/translation-manager/translation-manager-lazy.tsx
+function TranslationManagerSkeleton({ component }) {
+	const count = Math.min(8, Math.max(3, component?.rows.length ?? 5));
+	return /* @__PURE__ */ jsx(Card, {
+		className: "gap-4 py-4",
+		"aria-busy": "true",
+		"data-slot": "translation-manager",
+		children: /* @__PURE__ */ jsxs(CardContent, {
+			className: "flex flex-col gap-2 px-5",
+			"aria-hidden": "true",
+			children: [/* @__PURE__ */ jsx(Skeleton, { className: "h-9" }), Array.from({ length: count }, (_, index) => /* @__PURE__ */ jsx(Skeleton, { className: "h-12" }, index))]
+		})
+	});
+}
+/** The translation editor; its code loads the first time it is shown. */
+const TranslationManager = lazyComponent(() => import("./translation-manager.js").then((module) => module.TranslationManager), (props) => /* @__PURE__ */ jsx(TranslationManagerSkeleton, { ...props }));
+//#endregion
+export { TranslationManager };
+
+//# sourceMappingURL=translation-manager-lazy.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"translation-manager-lazy.js","names":[],"sources":["../../../src/components/translation-manager/translation-manager-lazy.tsx"],"sourcesContent":["import type { TranslationManagerSchema } from '@alfakit/core'\nimport { lazyComponent } from '../../lib/lazy'\nimport { Card, CardContent } from '../ui/card'\nimport { Skeleton } from '../ui/skeleton'\n\nfunction TranslationManagerSkeleton({ component }: { component?: TranslationManagerSchema }) {\n  const count = Math.min(8, Math.max(3, component?.rows.length ?? 5))\n\n  return (\n    <Card className=\"gap-4 py-4\" aria-busy=\"true\" data-slot=\"translation-manager\">\n      <CardContent className=\"flex flex-col gap-2 px-5\" aria-hidden=\"true\">\n        <Skeleton className=\"h-9\" />\n        {Array.from({ length: count }, (_, index) => (\n          <Skeleton key={index} className=\"h-12\" />\n        ))}\n      </CardContent>\n    </Card>\n  )\n}\n\n/** The translation editor; its code loads the first time it is shown. */\nexport const TranslationManager = lazyComponent<{ component?: TranslationManagerSchema }>(\n  () => import('./translation-manager').then((module) => module.TranslationManager),\n  (props) => <TranslationManagerSkeleton {...props} />,\n)\n"],"mappings":";;;;;AAKA,SAAS,2BAA2B,EAAE,aAAuD;CAC3F,MAAM,QAAQ,KAAK,IAAI,GAAG,KAAK,IAAI,GAAG,WAAW,KAAK,UAAU,CAAC,CAAC;CAElE,OACE,oBAAC,MAAD;EAAM,WAAU;EAAa,aAAU;EAAO,aAAU;EACtD,UAAA,qBAAC,aAAD;GAAa,WAAU;GAA2B,eAAY;GAA9D,UAAA,CACE,oBAAC,UAAD,EAAU,WAAU,MAAO,CAAA,GAC1B,MAAM,KAAK,EAAE,QAAQ,MAAM,IAAI,GAAG,UACjC,oBAAC,UAAD,EAAsB,WAAU,OAAQ,GAAzB,KAAyB,CACzC,CACU;;CACT,CAAA;AAEV;;AAGA,MAAa,qBAAqB,oBAC1B,OAAO,2BAAwB,CAAC,MAAM,WAAW,OAAO,kBAAkB,IAC/E,UAAU,oBAAC,4BAAD,EAA4B,GAAI,MAAQ,CAAA,CACrD"}