@krizaka/ui 3.4.0 → 3.5.0

package/dist/data-table.js

@@ -1,4 +1,7 @@
 "use client";
+import {
+  Button
+} from "./chunk-ECSCA3CN.js";
 import {
   Checkbox
 } from "./chunk-7Z4KHPFC.js";
@@ -766,127 +769,10 @@ function ResizeHandle({
   );
 }
 
-// src/button/button.tsx
-import { Slot } from "radix-ui";
+// src/field/field.tsx
 import { tv as tv3 } from "tailwind-variants";
-
-// src/spinner/glyph.tsx
 import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
-var HEX = "M12 3 19.79 7.5 19.79 16.5 12 21 4.21 16.5 4.21 7.5Z";
-function LoaderGlyph({ state = "loading", value, ...props }) {
-  const known = typeof value === "number" && Number.isFinite(value);
-  const fill = state !== "loading" ? 100 : known ? Math.round(Math.min(1, Math.max(0, value)) * 100) : null;
-  return /* @__PURE__ */ jsxs3("svg", { viewBox: "0 0 24 24", fill: "none", "aria-hidden": true, "data-state": state, "data-progress": fill === null ? void 0 : fill, ...props, children: [
-    /* @__PURE__ */ jsx3("path", { d: HEX, stroke: "currentColor", strokeOpacity: "0.22", strokeWidth: "2.2", strokeLinejoin: "round" }),
-    /* @__PURE__ */ jsx3(
-      "path",
-      {
-        d: HEX,
-        pathLength: 100,
-        stroke: "currentColor",
-        strokeWidth: "2.2",
-        strokeLinejoin: "round",
-        strokeLinecap: "round",
-        className: "kz-loader-trace",
-        strokeDasharray: fill === null ? void 0 : `${fill} ${100 - fill}`
-      }
-    ),
-    state === "loading" && /* @__PURE__ */ jsx3("circle", { cx: "12", cy: "12", r: "2.6", fill: "currentColor", className: "kz-loader-node" }),
-    state === "success" && /* @__PURE__ */ jsx3("path", { d: "M8.3 12.3l2.6 2.6 4.9-5.3", pathLength: 20, stroke: "currentColor", strokeWidth: "2.2", strokeLinecap: "round", strokeLinejoin: "round", className: "kz-loader-mark" }),
-    state === "error" && /* @__PURE__ */ jsx3("path", { d: "M9.4 9.4l5.2 5.2M14.6 9.4l-5.2 5.2", pathLength: 20, stroke: "currentColor", strokeWidth: "2.2", strokeLinecap: "round", className: "kz-loader-mark" })
-  ] });
-}
-
-// src/button/button.tsx
-import { Fragment as Fragment3, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
-var buttonVariants = tv3({
-  base: "inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap font-semibold transition-all focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface-0 disabled:pointer-events-none disabled:opacity-40 data-loading:cursor-progress active:scale-[0.98] [&[data-loading]]:opacity-100",
-  variants: {
-    variant: {
-      primary: "bg-accent text-on-accent shadow-sm hover:bg-accent-hover",
-      // The brand's signature: accent → accent-2 (on-accent reads on both stops, tested in @krizaka/tokens).
-      gradient: "bg-linear-to-r from-accent to-accent-2 text-on-accent shadow-sm hover:brightness-110",
-      secondary: "border border-border-default bg-surface-2 text-fg hover:border-border-strong hover:bg-surface-3",
-      outline: "border border-border-default bg-transparent text-fg hover:border-accent hover:text-fg-accent",
-      ghost: "text-fg-secondary hover:bg-surface-2 hover:text-fg",
-      // The border and the tint carry the danger; the label stays the primary text role, legible on the tint at rest
-      // and hovered over every surface (`text-fg-danger` is for text set directly on a surface).
-      danger: "border border-danger/50 bg-danger/10 text-fg hover:border-danger hover:bg-danger/20"
-    },
-    size: { sm: "h-8 px-3 text-xs", md: "h-10 px-4 text-sm", lg: "h-12 px-6 text-sm", icon: "h-10 w-10" },
-    // `cut`: the Krizaka chamfer — 45° corners (CSS corner-shape, where supported; rounded elsewhere). The border, the
-    // focus ring and the hover follow the cut, unlike a clip-path.
-    shape: { rounded: "rounded-lg", pill: "rounded-full", cut: "rounded-[10px] [corner-shape:bevel]" }
-  },
-  defaultVariants: { variant: "secondary", size: "md", shape: "rounded" }
-});
-var STATUS_TEXT = { success: "text-fg-success", error: "text-fg-danger" };
-function Button({
-  asChild,
-  loading,
-  progress,
-  status,
-  announce,
-  indicator = true,
-  shimmer,
-  magnetic,
-  variant,
-  size,
-  shape,
-  className,
-  disabled,
-  children,
-  ...props
-}) {
-  const Comp = asChild ? Slot.Root : "button";
-  const known = loading && typeof progress === "number" && Number.isFinite(progress);
-  const ratio = known ? Math.min(1, Math.max(0, progress)) : 0;
-  const glyph = indicator && !asChild && (loading || status) ? status ?? "loading" : null;
-  const filled = variant === "primary" || variant === "gradient";
-  const button = /* @__PURE__ */ jsx4(
-    Comp,
-    {
-      type: asChild ? void 0 : "button",
-      "aria-busy": loading || void 0,
-      "data-loading": loading ? "" : void 0,
-      "data-variant": variant ?? "secondary",
-      "data-kz-status": status ?? void 0,
-      "data-kz-magnetic": magnetic ? "" : void 0,
-      disabled: asChild ? void 0 : disabled || loading,
-      "aria-disabled": asChild && (disabled || loading) ? true : void 0,
-      className: buttonVariants({
-        variant,
-        size,
-        shape,
-        className: [known && "relative isolate overflow-hidden", shimmer && "kz-sheen", className].filter(Boolean).join(" ") || void 0
-      }),
-      ...props,
-      children: asChild ? children : /* @__PURE__ */ jsxs4(Fragment3, { children: [
-        known && /* @__PURE__ */ jsx4("span", { "aria-hidden": true, className: "absolute inset-y-0 left-0 -z-10 bg-current opacity-15 transition-[width] duration-500", style: { width: `${ratio * 100}%` } }),
-        glyph && /* @__PURE__ */ jsx4(
-          "span",
-          {
-            "aria-hidden": true,
-            "data-slot": "indicator",
-            className: "-my-1 grid grid-cols-[1fr] transition-[grid-template-columns,margin,opacity] duration-300 starting:-mr-2 starting:grid-cols-[0fr] starting:opacity-0",
-            children: /* @__PURE__ */ jsx4("span", { className: "overflow-hidden", children: /* @__PURE__ */ jsx4(LoaderGlyph, { state: glyph, value: known ? ratio : null, className: ["h-4 w-4", glyph !== "loading" && !filled && STATUS_TEXT[glyph]].filter(Boolean).join(" ") }) })
-          }
-        ),
-        children
-      ] })
-    }
-  );
-  if (announce === void 0 || asChild) return button;
-  return /* @__PURE__ */ jsxs4(Fragment3, { children: [
-    button,
-    /* @__PURE__ */ jsx4("span", { role: "status", className: "sr-only", children: announce })
-  ] });
-}
-
-// src/field/field.tsx
-import { tv as tv4 } from "tailwind-variants";
-import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
-var field2 = tv4({
+var field2 = tv3({
   slots: {
     root: "flex flex-col gap-1.5",
     label: "text-xs font-semibold text-fg-secondary",
@@ -901,11 +787,11 @@ var field2 = tv4({
 var s = field2();
 var invalidProps = (invalid) => invalid ? { "aria-invalid": true, "data-invalid": "" } : {};
 function Input({ invalid, className, ...props }) {
-  return /* @__PURE__ */ jsx5("input", { ...invalidProps(invalid), className: s.control({ className }), ...props });
+  return /* @__PURE__ */ jsx3("input", { ...invalidProps(invalid), className: s.control({ className }), ...props });
 }
 
 // src/data-table/toolbar.tsx
-import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 var asRange = (value) => Array.isArray(value) && value.length === 2 && (typeof value[0] !== "string" || typeof value[1] !== "string") ? [value[0], value[1]] : [null, null];
 var asList = (value) => Array.isArray(value) ? value : [];
 var number = (text) => text.trim() === "" || Number.isNaN(Number(text)) ? null : Number(text);
@@ -937,7 +823,7 @@ function DataTableFilters({ debounce = 250, children, className }) {
     const label = labels.activeFilter(column.header, text);
     return [{ id: column.id, label, onRemove: () => set(column.id, null) }];
   });
-  return /* @__PURE__ */ jsxs6(
+  return /* @__PURE__ */ jsxs4(
     FilterBar,
     {
       label: labels.filters,
@@ -950,7 +836,7 @@ function DataTableFilters({ debounce = 250, children, className }) {
       children: [
         filterable.map((column) => {
           if (column.filter === "text")
-            return /* @__PURE__ */ jsx6(
+            return /* @__PURE__ */ jsx4(
               SearchField,
               {
                 label: labels.search(column.header),
@@ -966,11 +852,11 @@ function DataTableFilters({ debounce = 250, children, className }) {
               column.id
             );
           if (column.filter === "facet")
-            return /* @__PURE__ */ jsx6(FilterMenu, { label: column.header, options: optionsOf(column), value: asList(filters[column.id]), onValueChange: (value) => set(column.id, value) }, column.id);
+            return /* @__PURE__ */ jsx4(FilterMenu, { label: column.header, options: optionsOf(column), value: asList(filters[column.id]), onValueChange: (value) => set(column.id, value) }, column.id);
           const [min, max] = asRange(filters[column.id]);
           const bounds = manualFiltering ? void 0 : table.getColumn(column.id)?.getFacetedMinMaxValues();
-          return /* @__PURE__ */ jsxs6("span", { className: "inline-flex items-center gap-1.5", children: [
-            /* @__PURE__ */ jsx6(
+          return /* @__PURE__ */ jsxs4("span", { className: "inline-flex items-center gap-1.5", children: [
+            /* @__PURE__ */ jsx4(
               Input,
               {
                 type: "number",
@@ -982,8 +868,8 @@ function DataTableFilters({ debounce = 250, children, className }) {
                 className: "h-11 w-28"
               }
             ),
-            /* @__PURE__ */ jsx6("span", { "aria-hidden": true, className: "text-fg-secondary", children: "\u2013" }),
-            /* @__PURE__ */ jsx6(
+            /* @__PURE__ */ jsx4("span", { "aria-hidden": true, className: "text-fg-secondary", children: "\u2013" }),
+            /* @__PURE__ */ jsx4(
               Input,
               {
                 type: "number",
@@ -1004,14 +890,14 @@ function DataTableFilters({ debounce = 250, children, className }) {
 }
 function DataTableColumnsMenu({ defaultOpen, className }) {
   const { table, columns, labels } = useDataTable();
-  return /* @__PURE__ */ jsxs6(DropdownMenu.Root, { defaultOpen, modal: false, children: [
-    /* @__PURE__ */ jsx6(DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs6(Button, { variant: "outline", size: "sm", className, children: [
+  return /* @__PURE__ */ jsxs4(DropdownMenu.Root, { defaultOpen, modal: false, children: [
+    /* @__PURE__ */ jsx4(DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs4(Button, { variant: "outline", size: "sm", className, children: [
       labels.columns,
-      /* @__PURE__ */ jsx6(ChevronGlyph, { className: "h-4 w-4" })
+      /* @__PURE__ */ jsx4(ChevronGlyph, { className: "h-4 w-4" })
     ] }) }),
-    /* @__PURE__ */ jsx6(DropdownMenu.Content, { align: "end", "aria-label": labels.columns, children: columns.filter((column) => column.hideable !== false).map((column) => {
+    /* @__PURE__ */ jsx4(DropdownMenu.Content, { align: "end", "aria-label": labels.columns, children: columns.filter((column) => column.hideable !== false).map((column) => {
       const instance = table.getColumn(column.id);
-      return /* @__PURE__ */ jsx6(
+      return /* @__PURE__ */ jsx4(
         DropdownMenu.CheckboxItem,
         {
           checked: instance?.getIsVisible() ?? true,
@@ -1035,7 +921,7 @@ function DataTableExport({ filename = "export.csv", onExport, className }) {
     link.click();
     setTimeout(() => URL.revokeObjectURL(url), 0);
   };
-  return /* @__PURE__ */ jsx6(Button, { variant: "outline", size: "sm", className, onClick: run, children: labels.export });
+  return /* @__PURE__ */ jsx4(Button, { variant: "outline", size: "sm", className, onClick: run, children: labels.export });
 }
 export {
   DataTable,