@kanzo-tech/ui 0.0.1-alpha

package/dist/simples/floating-panel.d.ts

@@ -0,0 +1,25 @@
+import { default as React } from 'react';
+export interface FloatingPanelProps extends React.ComponentProps<"div"> {
+    /** Controlled width in px. Omit to run uncontrolled from `defaultWidth`. */
+    width?: number;
+    /** Initial width when uncontrolled. @default 320 */
+    defaultWidth?: number;
+    /** Called with the clamped width on every resize step. */
+    onWidthChange?: (width: number) => void;
+    /** @default 240 */
+    minWidth?: number;
+    /** @default 640 */
+    maxWidth?: number;
+}
+export declare function FloatingPanel({ width: controlledWidth, defaultWidth, onWidthChange, minWidth, maxWidth, className, style, children, slot, ...rest }: FloatingPanelProps): React.JSX.Element;
+export interface FloatingPanelResizeHandleProps extends React.ComponentProps<"div"> {
+    /**
+     * Which edge the handle sits on. `"start"` (the default) puts it at the leading edge and
+     * renders first; `"end"` puts it at the trailing edge and renders last. It only affects the
+     * drag direction and flex order — position the panel itself with the parent's `className`.
+     * @default "start"
+     */
+    side?: "start" | "end";
+}
+export declare function FloatingPanelResizeHandle({ side, className, slot, ...rest }: FloatingPanelResizeHandleProps): React.JSX.Element;
+//# sourceMappingURL=floating-panel.d.ts.map

package/dist/simples/floating-panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"floating-panel.d.ts","sourceRoot":"","sources":["../../src/simples/floating-panel.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AA4B1B,MAAM,WAAW,kBAAmB,SAAQ,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC;IACrE,4EAA4E;IAC5E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oDAAoD;IACpD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,0DAA0D;IAC1D,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,mBAAmB;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,mBAAmB;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EAAE,eAAe,EACtB,YAAkB,EAClB,aAAa,EACb,QAAc,EACd,QAAc,EACd,SAAS,EACT,KAAK,EACL,QAAQ,EACR,IAAI,EACJ,GAAG,IAAI,EACR,EAAE,kBAAkB,qBAgEpB;AAED,MAAM,WAAW,8BAA+B,SAAQ,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC;IACjF;;;;;OAKG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;CACxB;AAED,wBAAgB,yBAAyB,CAAC,EACxC,IAAc,EACd,SAAS,EACT,IAAI,EACJ,GAAG,IAAI,EACR,EAAE,8BAA8B,qBAwBhC"}

package/dist/simples/floating-panel.js

@@ -0,0 +1,95 @@
+"use client";
+import { jsx as p } from "react/jsx-runtime";
+import e from "react";
+import { cn as R } from "../lib/cn.js";
+const g = e.createContext(null);
+function D({
+  width: t,
+  defaultWidth: l = 320,
+  onWidthChange: r,
+  minWidth: o = 240,
+  maxWidth: n = 640,
+  className: i,
+  style: w,
+  children: z,
+  slot: P,
+  ...k
+}) {
+  const [E, L] = e.useState(l), u = t ?? E, m = e.useRef(u);
+  m.current = u;
+  const v = e.useCallback(
+    (a) => {
+      const s = Math.max(o, Math.min(n, a));
+      t == null && L(s), r == null || r(s);
+    },
+    [t, o, n, r]
+  ), d = e.useRef(null), f = e.useCallback(
+    (a, s) => {
+      a.preventDefault(), d.current = { startX: a.clientX, startWidth: m.current, direction: s };
+      const b = (X) => {
+        const c = d.current;
+        c && v(c.startWidth + (X.clientX - c.startX) * c.direction);
+      }, x = () => {
+        d.current = null, document.removeEventListener("pointermove", b), document.removeEventListener("pointerup", x);
+      };
+      document.addEventListener("pointermove", b), document.addEventListener("pointerup", x);
+    },
+    [v]
+  ), M = e.useMemo(() => ({ startResize: f }), [f]);
+  return /* @__PURE__ */ p(
+    "div",
+    {
+      className: R(
+        "flex overflow-hidden",
+        // `Popover`'s surface, at `Popover`'s radius and its shadow token. This was `rounded-lg`
+        // and a flat `shadow-lg` — a step below every panel here and a different lift from the one
+        // the floating surfaces share. Same cause as `StatTile`: no Shark file, so no guard, and
+        // `shark-parity.test.ts` reads names rather than classes.
+        //
+        // The `/95` and the blur stay: this panel floats over content a reader is still looking at,
+        // which a popover does not. It is the one place the translucency is the point.
+        "rounded-xl border bg-popover/95 text-popover-foreground shadow-lg/5 backdrop-blur-sm",
+        i
+      ),
+      style: { width: u, ...w },
+      ...k,
+      "data-slot": P ?? "floating-panel",
+      children: /* @__PURE__ */ p(g.Provider, { value: M, children: z })
+    }
+  );
+}
+function N({
+  side: t = "start",
+  className: l,
+  slot: r,
+  ...o
+}) {
+  const n = e.useContext(g);
+  return /* @__PURE__ */ p(
+    "div",
+    {
+      "aria-orientation": "vertical",
+      className: R(
+        "w-1.5 shrink-0 cursor-col-resize touch-none transition-colors",
+        // The handle's backdrop is not unknown — it is the panel it lives in, `bg-popover`. So the
+        // ladder can be named: rest is the panel surface, hover is step 4 and active is step 5.
+        // Measured over popover, rest→hover is ΔE 6.02 in light and 3.95 in dark and hover→active
+        // 3.96 and 4.61; the dilution gave 5.11/4.38 and 4.87/4.18 for the same two moves, so this
+        // is not a visibility fix — it is the same three steps written with their names.
+        "hover:bg-secondary active:bg-accent",
+        t === "end" && "order-last",
+        l
+      ),
+      "data-side": t,
+      onPointerDown: (i) => n == null ? void 0 : n.startResize(i, t === "start" ? -1 : 1),
+      role: "separator",
+      ...o,
+      "data-slot": r ?? "floating-panel-resize-handle"
+    }
+  );
+}
+export {
+  D as FloatingPanel,
+  N as FloatingPanelResizeHandle
+};
+//# sourceMappingURL=floating-panel.js.map

package/dist/simples/floating-panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"floating-panel.js","sources":["../../src/simples/floating-panel.tsx"],"sourcesContent":["\"use client\";\n\nimport React from \"react\";\nimport { cn } from \"../lib/cn.js\";\n\n/**\n * FloatingPanel — a glass surface meant to float over other content (a canvas, a map, a graph),\n * with an optional drag-to-resize edge. It owns the surface (elevated `--popover` tint, blur,\n * border, shadow, rounded) and the resize behaviour; the CALLER owns where it floats (position it\n * with `className`, e.g. `absolute inset-y-2 end-2`) and what it holds.\n *\n *   <div className=\"relative\">\n *     <Canvas />\n *     <FloatingPanel className=\"absolute inset-y-2 end-2\" defaultWidth={360}>\n *       <FloatingPanelResizeHandle side=\"start\" />\n *       <div className=\"min-w-0 flex-1\">…</div>\n *     </FloatingPanel>\n *   </div>\n *\n * Width is controllable (`width` + `onWidthChange`) or uncontrolled (`defaultWidth`), clamped to\n * `minWidth`/`maxWidth`. Drop a {@link FloatingPanelResizeHandle} inside to expose a drag edge;\n * omit it for a fixed-width panel.\n */\n\ninterface FloatingPanelContextValue {\n  startResize: (event: React.PointerEvent, direction: 1 | -1) => void;\n}\n\nconst FloatingPanelContext = React.createContext<FloatingPanelContextValue | null>(null);\n\nexport interface FloatingPanelProps extends React.ComponentProps<\"div\"> {\n  /** Controlled width in px. Omit to run uncontrolled from `defaultWidth`. */\n  width?: number;\n  /** Initial width when uncontrolled. @default 320 */\n  defaultWidth?: number;\n  /** Called with the clamped width on every resize step. */\n  onWidthChange?: (width: number) => void;\n  /** @default 240 */\n  minWidth?: number;\n  /** @default 640 */\n  maxWidth?: number;\n}\n\nexport function FloatingPanel({\n  width: controlledWidth,\n  defaultWidth = 320,\n  onWidthChange,\n  minWidth = 240,\n  maxWidth = 640,\n  className,\n  style,\n  children,\n  slot,\n  ...rest\n}: FloatingPanelProps) {\n  const [uncontrolledWidth, setUncontrolledWidth] = React.useState(defaultWidth);\n  const width = controlledWidth ?? uncontrolledWidth;\n\n  // The latest width, read inside the long-lived pointer handlers without re-binding them.\n  const widthRef = React.useRef(width);\n  widthRef.current = width;\n\n  const setWidth = React.useCallback(\n    (next: number) => {\n      const clamped = Math.max(minWidth, Math.min(maxWidth, next));\n      if (controlledWidth == null) setUncontrolledWidth(clamped);\n      onWidthChange?.(clamped);\n    },\n    [controlledWidth, minWidth, maxWidth, onWidthChange],\n  );\n\n  const dragRef = React.useRef<{ startX: number; startWidth: number; direction: 1 | -1 } | null>(null);\n\n  const startResize = React.useCallback(\n    (event: React.PointerEvent, direction: 1 | -1) => {\n      event.preventDefault();\n      dragRef.current = { startX: event.clientX, startWidth: widthRef.current, direction };\n      const onMove = (moveEvent: PointerEvent) => {\n        const drag = dragRef.current;\n        if (!drag) return;\n        // A start-edge handle grows the panel as the pointer moves left (direction -1); an\n        // end-edge handle grows it moving right (direction 1).\n        setWidth(drag.startWidth + (moveEvent.clientX - drag.startX) * drag.direction);\n      };\n      const onUp = () => {\n        dragRef.current = null;\n        document.removeEventListener(\"pointermove\", onMove);\n        document.removeEventListener(\"pointerup\", onUp);\n      };\n      document.addEventListener(\"pointermove\", onMove);\n      document.addEventListener(\"pointerup\", onUp);\n    },\n    [setWidth],\n  );\n\n  const context = React.useMemo<FloatingPanelContextValue>(() => ({ startResize }), [startResize]);\n\n  return (\n    <div\n      className={cn(\n        \"flex overflow-hidden\",\n        // `Popover`'s surface, at `Popover`'s radius and its shadow token. This was `rounded-lg`\n        // and a flat `shadow-lg` — a step below every panel here and a different lift from the one\n        // the floating surfaces share. Same cause as `StatTile`: no Shark file, so no guard, and\n        // `shark-parity.test.ts` reads names rather than classes.\n        //\n        // The `/95` and the blur stay: this panel floats over content a reader is still looking at,\n        // which a popover does not. It is the one place the translucency is the point.\n        \"rounded-xl border bg-popover/95 text-popover-foreground shadow-lg/5 backdrop-blur-sm\",\n        className,\n      )}\n      style={{ width, ...style }}\n      {...rest}\n      data-slot={slot ?? \"floating-panel\"}\n    >\n      <FloatingPanelContext.Provider value={context}>{children}</FloatingPanelContext.Provider>\n    </div>\n  );\n}\n\nexport interface FloatingPanelResizeHandleProps extends React.ComponentProps<\"div\"> {\n  /**\n   * Which edge the handle sits on. `\"start\"` (the default) puts it at the leading edge and\n   * renders first; `\"end\"` puts it at the trailing edge and renders last. It only affects the\n   * drag direction and flex order — position the panel itself with the parent's `className`.\n   * @default \"start\"\n   */\n  side?: \"start\" | \"end\";\n}\n\nexport function FloatingPanelResizeHandle({\n  side = \"start\",\n  className,\n  slot,\n  ...rest\n}: FloatingPanelResizeHandleProps) {\n  const context = React.useContext(FloatingPanelContext);\n\n  return (\n    <div\n      aria-orientation=\"vertical\"\n      className={cn(\n        \"w-1.5 shrink-0 cursor-col-resize touch-none transition-colors\",\n        // The handle's backdrop is not unknown — it is the panel it lives in, `bg-popover`. So the\n        // ladder can be named: rest is the panel surface, hover is step 4 and active is step 5.\n        // Measured over popover, rest→hover is ΔE 6.02 in light and 3.95 in dark and hover→active\n        // 3.96 and 4.61; the dilution gave 5.11/4.38 and 4.87/4.18 for the same two moves, so this\n        // is not a visibility fix — it is the same three steps written with their names.\n        \"hover:bg-secondary active:bg-accent\",\n        side === \"end\" && \"order-last\",\n        className,\n      )}\n      data-side={side}\n      onPointerDown={(event) => context?.startResize(event, side === \"start\" ? -1 : 1)}\n      role=\"separator\"\n      {...rest}\n      data-slot={slot ?? \"floating-panel-resize-handle\"}\n    />\n  );\n}\n"],"names":[],"mappings":";;;;AA4BA;AAeO;AAAuB;AACrB;AACQ;AACf;AACW;AACA;AACX;AACA;AACA;AACA;AAEF;AACE;AAKA;AAEA;AAAuB;AAEnB;AACA;AACgB;AAClB;AACmD;AAK3B;AAEtB;AAEA;AACE;AACA;AAG6E;AAG7E;AAE8C;AAEhD;AAC2C;AAC7C;AACS;AAKX;AACE;AAAC;AAAA;AACY;AACT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQA;AACA;AAAA;AAEiB;AACf;AACe;AAEsC;AAAA;AAG/D;AAYO;AAAmC;AACjC;AACP;AACA;AAEF;AACE;AAEA;AACE;AAAC;AAAA;AACkB;AACN;AACT;AAAA;AAAA;AAAA;AAAA;AAAA;AAMA;AACkB;AAClB;AAAA;AAES;AACmE;AACzE;AACD;AACe;AAAA;AAGzB;;;;;"}

package/dist/simples/highlight.d.ts

@@ -0,0 +1,6 @@
+import { HighlightProps as ArkHighlightProps } from '@ark-ui/react/highlight';
+export declare const useHighlight: (props: import('@ark-ui/react').UseHighlightProps) => import('@ark-ui/react').HighlightChunk[];
+export interface HighlightProps extends ArkHighlightProps {
+}
+export declare const Highlight: (props: HighlightProps) => import("react").JSX.Element;
+//# sourceMappingURL=highlight.d.ts.map

package/dist/simples/highlight.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"highlight.d.ts","sourceRoot":"","sources":["../../src/simples/highlight.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,cAAc,IAAI,iBAAiB,EAEzC,MAAM,yBAAyB,CAAC;AAKjC,eAAO,MAAM,YAAY,gGAAkB,CAAC;AAE5C,MAAM,WAAW,cAAe,SAAQ,iBAAiB;CAAG;AAM5D,eAAO,MAAM,SAAS,GAAI,OAAO,cAAc,gCAe9C,CAAC"}

package/dist/simples/highlight.js

@@ -0,0 +1,24 @@
+import { jsx as o } from "react/jsx-runtime";
+import { useHighlight as h, Highlight as r } from "@ark-ui/react/highlight";
+import { cn as e } from "../lib/cn.js";
+const a = h, u = (t) => {
+  const { className: i, slot: g, ...s } = t;
+  return /* @__PURE__ */ o(
+    r,
+    {
+      className: e(
+        "rounded-sm px-0.5",
+        "bg-warning/17 text-foreground",
+        "font-medium",
+        i
+      ),
+      ...s,
+      "data-slot": g ?? "highlight"
+    }
+  );
+};
+export {
+  u as Highlight,
+  a as useHighlight
+};
+//# sourceMappingURL=highlight.js.map

package/dist/simples/highlight.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"highlight.js","sources":["../../src/simples/highlight.tsx"],"sourcesContent":["import {\n  Highlight as ArkHighlight,\n  type HighlightProps as ArkHighlightProps,\n  useHighlight as useArkHighlight,\n} from \"@ark-ui/react/highlight\";\nimport { cn } from \"../lib/cn\";\n\n// Ark's machine hook, not a context alias: it takes `{ text, query }` and returns the chunks\n// `Highlight` renders, for a caller marking something other than a `<mark>`.\nexport const useHighlight = useArkHighlight;\n\nexport interface HighlightProps extends ArkHighlightProps {}\n\n// Ark's Highlight splits `text` into chunks and wraps each match in a `<mark>`,\n// forwarding `className`/`data-*` to every match. We token-theme the mark so it\n// never falls back to the browser's yellow default — `bg-warning/17`, the same token\n// the editor paints a search hit with, because they are the same decision.\nexport const Highlight = (props: HighlightProps) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkHighlight\n      className={cn(\n        \"rounded-sm px-0.5\",\n        \"bg-warning/17 text-foreground\",\n        \"font-medium\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"highlight\"}\n    />\n  );\n};\n"],"names":["useHighlight","useArkHighlight","Highlight","props","className","slot","rest","jsx","ArkHighlight","cn"],"mappings":";;;AASO,MAAMA,IAAeC,GAQfC,IAAY,CAACC,MAA0B;AAClD,QAAM,EAAE,WAAAC,GAAW,MAAAC,GAAM,GAAGC,MAASH;AAErC,SACE,gBAAAI;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,WAAWC;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACAL;AAAA,MAAA;AAAA,MAED,GAAGE;AAAA,MACJ,aAAWD,KAAQ;AAAA,IAAA;AAAA,EAAA;AAGzB;"}

package/dist/simples/hover-card.d.ts

@@ -0,0 +1,11 @@
+import { HoverCard as ArkHoverCard } from '@ark-ui/react/hover-card';
+import { default as React } from 'react';
+export declare const useHoverCard: () => import('@ark-ui/react').UseHoverCardContext;
+interface HoverCardProps extends React.ComponentProps<typeof ArkHoverCard.Root> {
+}
+export declare const HoverCard: (props: HoverCardProps) => React.JSX.Element;
+export declare const HoverCardTrigger: ({ slot, ...rest }: React.ComponentProps<typeof ArkHoverCard.Trigger>) => React.JSX.Element;
+export declare const HoverCardContent: (props: React.ComponentProps<typeof ArkHoverCard.Content>) => React.JSX.Element;
+export declare const HoverCardArrow: (props: React.ComponentProps<typeof ArkHoverCard.Arrow>) => React.JSX.Element;
+export {};
+//# sourceMappingURL=hover-card.d.ts.map

package/dist/simples/hover-card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hover-card.d.ts","sourceRoot":"","sources":["../../src/simples/hover-card.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,SAAS,IAAI,YAAY,EAE1B,MAAM,0BAA0B,CAAC;AAClC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,eAAO,MAAM,YAAY,mDAAsB,CAAC;AAEhD,UAAU,cACR,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,YAAY,CAAC,IAAI,CAAC;CAAG;AAE3D,eAAO,MAAM,SAAS,GAAI,OAAO,cAAc,sBAoB9C,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAAI,mBAG9B,KAAK,CAAC,cAAc,CAAC,OAAO,YAAY,CAAC,OAAO,CAAC,sBAEnD,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAC3B,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,YAAY,CAAC,OAAO,CAAC,sBAqCzD,CAAC;AAEF,eAAO,MAAM,cAAc,GACzB,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,YAAY,CAAC,KAAK,CAAC,sBAmBvD,CAAC"}

package/dist/simples/hover-card.js

@@ -0,0 +1,83 @@
+import { jsx as r, jsxs as l } from "react/jsx-runtime";
+import { Portal as c } from "@ark-ui/react";
+import { useHoverCardContext as m, HoverCard as e } from "@ark-ui/react/hover-card";
+import { cn as p } from "../lib/cn.js";
+const C = m, b = (o) => {
+  const {
+    lazyMount: t = !0,
+    unmountOnExit: a = !0,
+    closeDelay: n = 100,
+    openDelay: s = 10,
+    positioning: d = { placement: "top" },
+    ...i
+  } = o;
+  return /* @__PURE__ */ r(
+    e.Root,
+    {
+      closeDelay: n,
+      lazyMount: t,
+      openDelay: s,
+      positioning: d,
+      unmountOnExit: a,
+      ...i
+    }
+  );
+}, w = ({
+  slot: o,
+  ...t
+}) => /* @__PURE__ */ r(e.Trigger, { ...t, "data-slot": o ?? "hover-card-trigger" }), H = (o) => {
+  const { className: t, children: a, slot: n, ...s } = o;
+  return /* @__PURE__ */ r(c, { children: /* @__PURE__ */ r(e.Positioner, { "data-slot": "hover-card-positioner", children: /* @__PURE__ */ l(
+    e.Content,
+    {
+      className: p(
+        "z-50",
+        "w-64",
+        "p-4",
+        "bg-popover",
+        "text-popover-foreground",
+        "origin-(--transform-origin)",
+        "rounded-box border shadow-lg/5",
+        "outline-hidden",
+        "data-[state=closed]:zoom-out-[98%] data-[state=open]:zoom-in-[98%]",
+        "data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0",
+        "data-[state=closed]:animate-out data-[state=open]:animate-in",
+        "data-[placement=bottom]:slide-in-from-top-2",
+        "data-[placement=left]:slide-in-from-end-2",
+        "data-[placement=right]:slide-in-from-start-2",
+        "data-[placement=top]:slide-in-from-bottom-2",
+        "motion-reduce:animate-none!",
+        t
+      ),
+      ...s,
+      "data-slot": n ?? "hover-card-content",
+      children: [
+        a,
+        /* @__PURE__ */ r(u, {})
+      ]
+    }
+  ) }) });
+}, u = (o) => {
+  const { style: t, slot: a, ...n } = o;
+  return /* @__PURE__ */ r(
+    e.Arrow,
+    {
+      style: {
+        "--arrow-background": "var(--popover)",
+        "--arrow-size": "calc(1.5 * var(--spacing))",
+        ...t
+      },
+      ...n,
+      "data-slot": a ?? "hover-card-arrow",
+      children: /* @__PURE__ */ r(e.ArrowTip, { className: "border-s border-t" })
+    }
+  );
+};
+export {
+  b as HoverCard,
+  u as HoverCardArrow,
+  H as HoverCardContent,
+  w as HoverCardTrigger,
+  C as useHoverCard
+};
+//# sourceMappingURL=hover-card.js.map

package/dist/simples/hover-card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hover-card.js","sources":["../../src/simples/hover-card.tsx"],"sourcesContent":["import { Portal } from \"@ark-ui/react\";\nimport {\n  HoverCard as ArkHoverCard,\n  useHoverCardContext,\n} from \"@ark-ui/react/hover-card\";\nimport type React from \"react\";\nimport { cn } from \"../lib/cn\";\n\nexport const useHoverCard = useHoverCardContext;\n\ninterface HoverCardProps\n  extends React.ComponentProps<typeof ArkHoverCard.Root> {}\n\nexport const HoverCard = (props: HoverCardProps) => {\n  const {\n    lazyMount = true,\n    unmountOnExit = true,\n    closeDelay = 100,\n    openDelay = 10,\n    positioning = { placement: \"top\" },\n    ...rest\n  } = props;\n\n  return (\n    <ArkHoverCard.Root\n      closeDelay={closeDelay}\n      lazyMount={lazyMount}\n      openDelay={openDelay}\n      positioning={positioning}\n      unmountOnExit={unmountOnExit}\n      {...rest}\n    />\n  );\n};\n\nexport const HoverCardTrigger = ({\n  slot,\n  ...rest\n}: React.ComponentProps<typeof ArkHoverCard.Trigger>) => (\n  <ArkHoverCard.Trigger {...rest} data-slot={slot ?? \"hover-card-trigger\"} />\n);\n\nexport const HoverCardContent = (\n  props: React.ComponentProps<typeof ArkHoverCard.Content>\n) => {\n  const { className, children, slot, ...rest } = props;\n\n  return (\n    <Portal>\n      <ArkHoverCard.Positioner data-slot=\"hover-card-positioner\">\n        <ArkHoverCard.Content\n          className={cn(\n            \"z-50\",\n            \"w-64\",\n            \"p-4\",\n            \"bg-popover\",\n            \"text-popover-foreground\",\n            \"origin-(--transform-origin)\",\n            \"rounded-box border shadow-lg/5\",\n            \"outline-hidden\",\n            \"data-[state=closed]:zoom-out-[98%] data-[state=open]:zoom-in-[98%]\",\n            \"data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0\",\n            \"data-[state=closed]:animate-out data-[state=open]:animate-in\",\n            \"data-[placement=bottom]:slide-in-from-top-2\",\n            \"data-[placement=left]:slide-in-from-end-2\",\n            \"data-[placement=right]:slide-in-from-start-2\",\n            \"data-[placement=top]:slide-in-from-bottom-2\",\n            \"motion-reduce:animate-none!\",\n            className\n          )}\n          {...rest}\n          data-slot={slot ?? \"hover-card-content\"}\n        >\n          {children}\n\n          <HoverCardArrow />\n        </ArkHoverCard.Content>\n      </ArkHoverCard.Positioner>\n    </Portal>\n  );\n};\n\nexport const HoverCardArrow = (\n  props: React.ComponentProps<typeof ArkHoverCard.Arrow>\n) => {\n  const { style, slot, ...rest } = props;\n\n  return (\n    <ArkHoverCard.Arrow\n      style={\n        {\n          \"--arrow-background\": \"var(--popover)\",\n          \"--arrow-size\": \"calc(1.5 * var(--spacing))\",\n          ...style,\n        } as React.CSSProperties\n      }\n      {...rest}\n      data-slot={slot ?? \"hover-card-arrow\"}\n    >\n      <ArkHoverCard.ArrowTip className=\"border-s border-t\" />\n    </ArkHoverCard.Arrow>\n  );\n};\n"],"names":["useHoverCard","useHoverCardContext","HoverCard","props","lazyMount","unmountOnExit","closeDelay","openDelay","positioning","rest","jsx","ArkHoverCard","HoverCardTrigger","slot","HoverCardContent","className","children","Portal","jsxs","cn","HoverCardArrow","style"],"mappings":";;;;AAQO,MAAMA,IAAeC,GAKfC,IAAY,CAACC,MAA0B;AAClD,QAAM;AAAA,IACJ,WAAAC,IAAY;AAAA,IACZ,eAAAC,IAAgB;AAAA,IAChB,YAAAC,IAAa;AAAA,IACb,WAAAC,IAAY;AAAA,IACZ,aAAAC,IAAc,EAAE,WAAW,MAAA;AAAA,IAC3B,GAAGC;AAAA,EAAA,IACDN;AAEJ,SACE,gBAAAO;AAAA,IAACC,EAAa;AAAA,IAAb;AAAA,MACC,YAAAL;AAAA,MACA,WAAAF;AAAA,MACA,WAAAG;AAAA,MACA,aAAAC;AAAA,MACA,eAAAH;AAAA,MACC,GAAGI;AAAA,IAAA;AAAA,EAAA;AAGV,GAEaG,IAAmB,CAAC;AAAA,EAC/B,MAAAC;AAAA,EACA,GAAGJ;AACL,MACE,gBAAAC,EAACC,EAAa,SAAb,EAAsB,GAAGF,GAAM,aAAWI,KAAQ,qBAAA,CAAsB,GAG9DC,IAAmB,CAC9BX,MACG;AACH,QAAM,EAAE,WAAAY,GAAW,UAAAC,GAAU,MAAAH,GAAM,GAAGJ,MAASN;AAE/C,2BACGc,GAAA,EACC,UAAA,gBAAAP,EAACC,EAAa,YAAb,EAAwB,aAAU,yBACjC,UAAA,gBAAAO;AAAA,IAACP,EAAa;AAAA,IAAb;AAAA,MACC,WAAWQ;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACAJ;AAAA,MAAA;AAAA,MAED,GAAGN;AAAA,MACJ,aAAWI,KAAQ;AAAA,MAElB,UAAA;AAAA,QAAAG;AAAA,0BAEAI,GAAA,CAAA,CAAe;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,GAEpB,EAAA,CACF;AAEJ,GAEaA,IAAiB,CAC5BjB,MACG;AACH,QAAM,EAAE,OAAAkB,GAAO,MAAAR,GAAM,GAAGJ,MAASN;AAEjC,SACE,gBAAAO;AAAA,IAACC,EAAa;AAAA,IAAb;AAAA,MACC,OACE;AAAA,QACE,sBAAsB;AAAA,QACtB,gBAAgB;AAAA,QAChB,GAAGU;AAAA,MAAA;AAAA,MAGN,GAAGZ;AAAA,MACJ,aAAWI,KAAQ;AAAA,MAEnB,UAAA,gBAAAH,EAACC,EAAa,UAAb,EAAsB,WAAU,oBAAA,CAAoB;AAAA,IAAA;AAAA,EAAA;AAG3D;"}

package/dist/simples/image-cropper.d.ts

@@ -0,0 +1,17 @@
+import { ImageCropper as ArkImageCropper } from '@ark-ui/react/image-cropper';
+import { default as React } from 'react';
+export declare const useImageCropper: () => import('@ark-ui/react').UseImageCropperContext;
+export declare const ImageCropper: (props: React.ComponentProps<typeof ArkImageCropper.Root>) => React.JSX.Element;
+export declare const ImageCropperImage: (props: React.ComponentProps<typeof ArkImageCropper.Image>) => React.JSX.Element;
+export interface ImageCropperSelectionProps extends React.ComponentProps<typeof ArkImageCropper.Selection> {
+    /**
+     * The axis of the grid to show.
+     *
+     * @default "both"
+     */
+    axis?: "horizontal" | "vertical" | "both";
+}
+export declare const ImageCropperSelection: (props: ImageCropperSelectionProps) => React.JSX.Element;
+export declare const ImageCropperHandle: (props: React.ComponentProps<typeof ArkImageCropper.Handle>) => React.JSX.Element;
+export declare const ImageCropperGrid: (props: React.ComponentProps<typeof ArkImageCropper.Grid>) => React.JSX.Element;
+//# sourceMappingURL=image-cropper.d.ts.map

package/dist/simples/image-cropper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"image-cropper.d.ts","sourceRoot":"","sources":["../../src/simples/image-cropper.tsx"],"names":[],"mappings":"AA2BA,OAAO,EACL,YAAY,IAAI,eAAe,EAEhC,MAAM,6BAA6B,CAAC;AACrC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,eAAO,MAAM,eAAe,sDAAyB,CAAC;AAEtD,eAAO,MAAM,YAAY,GAAI,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,sBAuBpF,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAC5B,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,sBAmB1D,CAAC;AAEF,MAAM,WAAW,0BACf,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,SAAS,CAAC;IAC9D;;;;OAIG;IACH,IAAI,CAAC,EAAE,YAAY,GAAG,UAAU,GAAG,MAAM,CAAC;CAC3C;AAED,eAAO,MAAM,qBAAqB,GAAI,OAAO,0BAA0B,sBAkCtE,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAC7B,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,MAAM,CAAC,sBAgC3D,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAAI,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,sBAqBxF,CAAC"}

package/dist/simples/image-cropper.js

@@ -0,0 +1,139 @@
+import { jsx as e, jsxs as l } from "react/jsx-runtime";
+import { useImageCropperContext as h, ImageCropper as s } from "@ark-ui/react/image-cropper";
+import { cn as n } from "../lib/cn.js";
+const _ = h, m = (a) => {
+  const { className: o, children: t, slot: r, ...p } = a;
+  return /* @__PURE__ */ e(
+    s.Root,
+    {
+      className: n(
+        "[--cropper-accent:var(--color-white)] [--cropper-handler-size:--spacing(2)] [--cropper-handler-width:--spacing(1)]",
+        "relative",
+        "w-full",
+        "aspect-video",
+        o
+      ),
+      ...p,
+      "data-slot": r ?? "image-cropper",
+      children: /* @__PURE__ */ e(
+        s.Viewport,
+        {
+          className: n("size-full", "overflow-hidden"),
+          "data-slot": "image-cropper-viewport",
+          children: t
+        }
+      )
+    }
+  );
+}, u = (a) => {
+  const { className: o, slot: t, ...r } = a;
+  return /* @__PURE__ */ e(
+    s.Image,
+    {
+      className: n(
+        "absolute top-0 left-0",
+        "size-full object-contain",
+        "select-none",
+        "backface-hidden",
+        "pointer-events-none",
+        "origin-center",
+        o
+      ),
+      ...r,
+      "data-slot": t ?? "image-cropper-image"
+    }
+  );
+}, z = (a) => {
+  const { axis: o = "both", className: t, children: r, slot: p, ...d } = a;
+  return /* @__PURE__ */ l(
+    s.Selection,
+    {
+      className: n(
+        "shadow-[0_0_0_9999px_rgb(0_0_0/0.5)]",
+        "border-2 border-white/64",
+        "backface-hidden",
+        "cursor-move",
+        "data-[shape=circle]:rounded-full",
+        "outline-none focus-visible:border-(--cropper-accent)",
+        "data-disabled:cursor-default",
+        "data-dragging:cursor-grabbing data-dragging:border-white/84",
+        t
+      ),
+      ...d,
+      "data-slot": p ?? "image-cropper-selection",
+      children: [
+        r,
+        (o === "horizontal" || o === "both") && /* @__PURE__ */ e(c, { axis: "horizontal" }),
+        (o === "vertical" || o === "both") && /* @__PURE__ */ e(c, { axis: "vertical" }),
+        /* @__PURE__ */ e(i, { position: "n" }),
+        /* @__PURE__ */ e(i, { position: "e" }),
+        /* @__PURE__ */ e(i, { position: "s" }),
+        /* @__PURE__ */ e(i, { position: "w" }),
+        /* @__PURE__ */ e(i, { position: "ne" }),
+        /* @__PURE__ */ e(i, { position: "se" }),
+        /* @__PURE__ */ e(i, { position: "sw" }),
+        /* @__PURE__ */ e(i, { position: "nw" })
+      ]
+    }
+  );
+}, i = (a) => {
+  const { className: o, slot: t, ...r } = a;
+  return /* @__PURE__ */ e(
+    s.Handle,
+    {
+      className: n(
+        "absolute flex touch-none items-center justify-center",
+        "h-[calc(var(--cropper-handler-size)+8px)] w-[calc(var(--cropper-handler-size)+8px)]",
+        "data-disabled:hidden",
+        "data-[position=ne]:cursor-nesw-resize data-[position=nw]:cursor-nwse-resize",
+        "data-[position=se]:cursor-nwse-resize data-[position=sw]:cursor-nesw-resize",
+        "data-[position=n]:cursor-ns-resize data-[position=s]:cursor-ns-resize",
+        "data-[position=e]:cursor-ew-resize data-[position=w]:cursor-ew-resize",
+        "border-(--cropper-accent)",
+        "[&>span]:bg-(--cropper-accent) [&>span]:shadow-[0_1px_3px_rgb(0_0_0/0.3)]",
+        "data-[position=nw]:hover:**:scale-110 [&[data-position=nw]_*]:size-(--cropper-handler-size) [&[data-position=nw]_*]:border-t-[length:(--cropper-handler-width)] [&[data-position=nw]_*]:border-l-[length:(--cropper-handler-width)] [&[data-position=nw]_*]:bg-(--cropper-accent)",
+        "data-[position=ne]:hover:**:scale-110 [&[data-position=ne]_*]:size-(--cropper-handler-size) [&[data-position=ne]_*]:border-t-[length:(--cropper-handler-width)] [&[data-position=ne]_*]:border-r-[length:(--cropper-handler-width)] [&[data-position=ne]_*]:bg-(--cropper-accent)",
+        "data-[position=se]:hover:**:scale-110 [&[data-position=se]_*]:size-(--cropper-handler-size) [&[data-position=se]_*]:border-r-[length:(--cropper-handler-width)] [&[data-position=se]_*]:border-b-[length:(--cropper-handler-width)] [&[data-position=se]_*]:bg-(--cropper-accent)",
+        "data-[position=sw]:hover:**:scale-110 [&[data-position=sw]_*]:size-(--cropper-handler-size) [&[data-position=sw]_*]:border-b-[length:(--cropper-handler-width)] [&[data-position=sw]_*]:border-l-[length:(--cropper-handler-width)] [&[data-position=sw]_*]:bg-(--cropper-accent)",
+        "data-[position=n]:hover:**:opacity-100 [&[data-position=n]_*]:size-1.5 [&[data-position=n]_*]:bg-(--cropper-accent) [&[data-position=n]_*]:opacity-0",
+        "data-[position=s]:hover:**:opacity-100 [&[data-position=s]_*]:size-1.5 [&[data-position=s]_*]:bg-(--cropper-accent) [&[data-position=s]_*]:opacity-0",
+        "data-[position=e]:hover:**:opacity-100 [&[data-position=e]_*]:size-1.5 [&[data-position=e]_*]:bg-(--cropper-accent) [&[data-position=e]_*]:opacity-0",
+        "data-[position=w]:hover:**:opacity-100 [&[data-position=w]_*]:size-1.5 [&[data-position=w]_*]:bg-(--cropper-accent) [&[data-position=w]_*]:opacity-0",
+        o
+      ),
+      ...r,
+      "data-slot": t ?? "image-cropper-handle",
+      children: /* @__PURE__ */ e("span", { "aria-hidden": !0, className: "block size-(--cropper-handler-size)" })
+    }
+  );
+}, c = (a) => {
+  const { className: o, slot: t, ...r } = a;
+  return /* @__PURE__ */ e(
+    s.Grid,
+    {
+      className: n(
+        "absolute",
+        "opacity-0",
+        "pointer-events-none",
+        "transition-opacity duration-200",
+        "data-[axis=horizontal]:inset-[33.33%_0] data-[axis=horizontal]:border-white/40 data-[axis=horizontal]:border-t data-[axis=horizontal]:border-b",
+        "data-[axis=vertical]:inset-[0_33.33%] data-[axis=vertical]:border-white/40 data-[axis=vertical]:border-r data-[axis=vertical]:border-l",
+        "data-dragging:opacity-100",
+        "data-panning:opacity-100",
+        "motion-reduce:transition-none!",
+        o
+      ),
+      ...r,
+      "data-slot": t ?? "image-cropper-grid"
+    }
+  );
+};
+export {
+  m as ImageCropper,
+  c as ImageCropperGrid,
+  i as ImageCropperHandle,
+  u as ImageCropperImage,
+  z as ImageCropperSelection,
+  _ as useImageCropper
+};
+//# sourceMappingURL=image-cropper.js.map

package/dist/simples/image-cropper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"image-cropper.js","sources":["../../src/simples/image-cropper.tsx"],"sourcesContent":["// A box drawn on a photograph, and the photograph read back through it. Ark's image-cropper\n// machine, Shark's appearance.\n//\n// Shark's `image-cropper.tsx`, adopted the day it got a renderer: the Field notes showcase lets a\n// reader draw the box a row was read from, which is the only paper a row typed by hand has ever\n// had. Four differences from the reference file, all of them house rules or\n// classes that compile to nothing:\n//\n// - `data-slot` after the spread with a `slot` prop, per `data-slot.test.tsx`.\n// - No `\"use client\"`. Nothing here is stateful — `client-boundary.test.ts` forbids the directive\n//   on a file that only wraps Ark's own client modules.\n// - `useImageCropper` is the CONTEXT hook, not the machine hook Shark binds it to. Shark ships no\n//   `ImageCropperRootProvider`, so under its own binding the export cannot be reached from\n//   anything Shark's file renders; every other `useX` here is the context hook, and the binding is\n//   pinned in `image-cropper.test.tsx` where the comparison over names cannot see it.\n// - Three class spellings emit no CSS and are corrected: `backface-visibility-hidden` (Tailwind v4\n//   spells it `backface-hidden`, which the same file already uses on the image),\n//   `inset-0_[33.33%]` (an arbitrary value whose bracket opened one token late, so the vertical\n//   grid lines had no inset at all and collapsed onto the selection's inline start), and a\n//   `[&[data-position=n]_*]:` left dangling with its utility missing, which is what the three\n//   other edge handles spell as a fill.\n//\n// What a caller owes: Ark reports the crop in VIEWPORT coordinates, and only `getCropData()` on the\n// machine api knows about zoom, rotation and flip. Persisting a crop means one or the other, never\n// a mix — or `maxZoom={1}`, which pins the pan offset at zero and makes the two agree, because at\n// zoom 1 the image exactly fills the viewport.\n\nimport {\n  ImageCropper as ArkImageCropper,\n  useImageCropperContext,\n} from \"@ark-ui/react/image-cropper\";\nimport type React from \"react\";\nimport { cn } from \"../lib/cn\";\n\nexport const useImageCropper = useImageCropperContext;\n\nexport const ImageCropper = (props: React.ComponentProps<typeof ArkImageCropper.Root>) => {\n  const { className, children, slot, ...rest } = props;\n\n  return (\n    <ArkImageCropper.Root\n      className={cn(\n        \"[--cropper-accent:var(--color-white)] [--cropper-handler-size:--spacing(2)] [--cropper-handler-width:--spacing(1)]\",\n        \"relative\",\n        \"w-full\",\n        \"aspect-video\",\n        className,\n      )}\n      {...rest}\n      data-slot={slot ?? \"image-cropper\"}\n    >\n      <ArkImageCropper.Viewport\n        className={cn(\"size-full\", \"overflow-hidden\")}\n        data-slot=\"image-cropper-viewport\"\n      >\n        {children}\n      </ArkImageCropper.Viewport>\n    </ArkImageCropper.Root>\n  );\n};\n\nexport const ImageCropperImage = (\n  props: React.ComponentProps<typeof ArkImageCropper.Image>,\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkImageCropper.Image\n      className={cn(\n        \"absolute top-0 left-0\",\n        \"size-full object-contain\",\n        \"select-none\",\n        \"backface-hidden\",\n        \"pointer-events-none\",\n        \"origin-center\",\n        className,\n      )}\n      {...rest}\n      data-slot={slot ?? \"image-cropper-image\"}\n    />\n  );\n};\n\nexport interface ImageCropperSelectionProps\n  extends React.ComponentProps<typeof ArkImageCropper.Selection> {\n  /**\n   * The axis of the grid to show.\n   *\n   * @default \"both\"\n   */\n  axis?: \"horizontal\" | \"vertical\" | \"both\";\n}\n\nexport const ImageCropperSelection = (props: ImageCropperSelectionProps) => {\n  const { axis = \"both\", className, children, slot, ...rest } = props;\n\n  return (\n    <ArkImageCropper.Selection\n      className={cn(\n        \"shadow-[0_0_0_9999px_rgb(0_0_0/0.5)]\",\n        \"border-2 border-white/64\",\n        \"backface-hidden\",\n        \"cursor-move\",\n        \"data-[shape=circle]:rounded-full\",\n        \"outline-none focus-visible:border-(--cropper-accent)\",\n        \"data-disabled:cursor-default\",\n        \"data-dragging:cursor-grabbing data-dragging:border-white/84\",\n        className,\n      )}\n      {...rest}\n      data-slot={slot ?? \"image-cropper-selection\"}\n    >\n      {children}\n\n      {(axis === \"horizontal\" || axis === \"both\") && <ImageCropperGrid axis=\"horizontal\" />}\n      {(axis === \"vertical\" || axis === \"both\") && <ImageCropperGrid axis=\"vertical\" />}\n\n      <ImageCropperHandle position=\"n\" />\n      <ImageCropperHandle position=\"e\" />\n      <ImageCropperHandle position=\"s\" />\n      <ImageCropperHandle position=\"w\" />\n      <ImageCropperHandle position=\"ne\" />\n      <ImageCropperHandle position=\"se\" />\n      <ImageCropperHandle position=\"sw\" />\n      <ImageCropperHandle position=\"nw\" />\n    </ArkImageCropper.Selection>\n  );\n};\n\nexport const ImageCropperHandle = (\n  props: React.ComponentProps<typeof ArkImageCropper.Handle>,\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkImageCropper.Handle\n      className={cn(\n        \"absolute flex touch-none items-center justify-center\",\n        \"h-[calc(var(--cropper-handler-size)+8px)] w-[calc(var(--cropper-handler-size)+8px)]\",\n        \"data-disabled:hidden\",\n        \"data-[position=ne]:cursor-nesw-resize data-[position=nw]:cursor-nwse-resize\",\n        \"data-[position=se]:cursor-nwse-resize data-[position=sw]:cursor-nesw-resize\",\n        \"data-[position=n]:cursor-ns-resize data-[position=s]:cursor-ns-resize\",\n        \"data-[position=e]:cursor-ew-resize data-[position=w]:cursor-ew-resize\",\n        \"border-(--cropper-accent)\",\n        \"[&>span]:bg-(--cropper-accent) [&>span]:shadow-[0_1px_3px_rgb(0_0_0/0.3)]\",\n        \"data-[position=nw]:hover:**:scale-110 [&[data-position=nw]_*]:size-(--cropper-handler-size) [&[data-position=nw]_*]:border-t-[length:(--cropper-handler-width)] [&[data-position=nw]_*]:border-l-[length:(--cropper-handler-width)] [&[data-position=nw]_*]:bg-(--cropper-accent)\",\n        \"data-[position=ne]:hover:**:scale-110 [&[data-position=ne]_*]:size-(--cropper-handler-size) [&[data-position=ne]_*]:border-t-[length:(--cropper-handler-width)] [&[data-position=ne]_*]:border-r-[length:(--cropper-handler-width)] [&[data-position=ne]_*]:bg-(--cropper-accent)\",\n        \"data-[position=se]:hover:**:scale-110 [&[data-position=se]_*]:size-(--cropper-handler-size) [&[data-position=se]_*]:border-r-[length:(--cropper-handler-width)] [&[data-position=se]_*]:border-b-[length:(--cropper-handler-width)] [&[data-position=se]_*]:bg-(--cropper-accent)\",\n        \"data-[position=sw]:hover:**:scale-110 [&[data-position=sw]_*]:size-(--cropper-handler-size) [&[data-position=sw]_*]:border-b-[length:(--cropper-handler-width)] [&[data-position=sw]_*]:border-l-[length:(--cropper-handler-width)] [&[data-position=sw]_*]:bg-(--cropper-accent)\",\n        \"data-[position=n]:hover:**:opacity-100 [&[data-position=n]_*]:size-1.5 [&[data-position=n]_*]:bg-(--cropper-accent) [&[data-position=n]_*]:opacity-0\",\n        \"data-[position=s]:hover:**:opacity-100 [&[data-position=s]_*]:size-1.5 [&[data-position=s]_*]:bg-(--cropper-accent) [&[data-position=s]_*]:opacity-0\",\n        \"data-[position=e]:hover:**:opacity-100 [&[data-position=e]_*]:size-1.5 [&[data-position=e]_*]:bg-(--cropper-accent) [&[data-position=e]_*]:opacity-0\",\n        \"data-[position=w]:hover:**:opacity-100 [&[data-position=w]_*]:size-1.5 [&[data-position=w]_*]:bg-(--cropper-accent) [&[data-position=w]_*]:opacity-0\",\n        className,\n      )}\n      {...rest}\n      data-slot={slot ?? \"image-cropper-handle\"}\n    >\n      <span aria-hidden className=\"block size-(--cropper-handler-size)\" />\n    </ArkImageCropper.Handle>\n  );\n};\n\nexport const ImageCropperGrid = (props: React.ComponentProps<typeof ArkImageCropper.Grid>) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkImageCropper.Grid\n      className={cn(\n        \"absolute\",\n        \"opacity-0\",\n        \"pointer-events-none\",\n        \"transition-opacity duration-200\",\n        \"data-[axis=horizontal]:inset-[33.33%_0] data-[axis=horizontal]:border-white/40 data-[axis=horizontal]:border-t data-[axis=horizontal]:border-b\",\n        \"data-[axis=vertical]:inset-[0_33.33%] data-[axis=vertical]:border-white/40 data-[axis=vertical]:border-r data-[axis=vertical]:border-l\",\n        \"data-dragging:opacity-100\",\n        \"data-panning:opacity-100\",\n        \"motion-reduce:transition-none!\",\n        className,\n      )}\n      {...rest}\n      data-slot={slot ?? \"image-cropper-grid\"}\n    />\n  );\n};\n"],"names":["useImageCropper","useImageCropperContext","ImageCropper","props","className","children","slot","rest","jsx","ArkImageCropper","cn","ImageCropperImage","ImageCropperSelection","axis","jsxs","ImageCropperGrid","ImageCropperHandle"],"mappings":"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"}

package/dist/simples/input-group.d.ts

@@ -0,0 +1,116 @@
+import { ark } from '@ark-ui/react/factory';
+import { default as React } from 'react';
+import { VariantProps } from 'tailwind-variants';
+import { Button } from './button';
+import { Input } from './input';
+import { Textarea } from './textarea';
+declare const inpuGroupVariants: import('tailwind-variants').TVReturnType<{
+    size: {
+        sm: string[];
+        md: string[];
+        lg: string[];
+    };
+}, undefined, string[], {
+    size: {
+        sm: string[];
+        md: string[];
+        lg: string[];
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    size: {
+        sm: string[];
+        md: string[];
+        lg: string[];
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+export interface InputGroupProps extends React.ComponentProps<typeof ark.div>, VariantProps<typeof inpuGroupVariants> {
+}
+export declare const InputGroup: (props: InputGroupProps) => React.JSX.Element;
+declare const inputGroupAddonVariants: import('tailwind-variants').TVReturnType<{
+    align: {
+        "inline-start": string[];
+        "inline-end": string[];
+        "block-start": string[];
+        "block-end": string[];
+    };
+}, undefined, string[], {
+    align: {
+        "inline-start": string[];
+        "inline-end": string[];
+        "block-start": string[];
+        "block-end": string[];
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    align: {
+        "inline-start": string[];
+        "inline-end": string[];
+        "block-start": string[];
+        "block-end": string[];
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+interface InputGroupAddonProps extends React.ComponentProps<typeof ark.div>, VariantProps<typeof inputGroupAddonVariants> {
+}
+export declare const InputGroupAddon: (props: InputGroupAddonProps) => React.JSX.Element;
+declare const inputGroupButtonVariants: import('tailwind-variants').TVReturnType<{
+    size: {
+        /**
+         * The floor, and the default, because there is nothing legal below it.
+         *
+         * `xs` and `icon-xs` were `1.5rem`, which is 24px at the default root and **21px at compact** —
+         * every size here is a `rem` against a root the density axis sets. That is under the 24×24
+         * WCAG 2.5.8 states in CSS pixels, and it was this component's DEFAULT, so an input group
+         * that said nothing got the failing size.
+         *
+         * The `pointer-coarse` hit area below does not save it. 44px is the touch answer and 2.5.8
+         * asks about pointers generally: with a mouse the target was 21px and the `::after` is not in
+         * the hit path. This is the one thing `Button` does not carry, and it is why the two were
+         * decided separately rather than in one sweep.
+         */
+        sm: string[];
+        "icon-sm": string[];
+    };
+}, undefined, string[], {
+    size: {
+        /**
+         * The floor, and the default, because there is nothing legal below it.
+         *
+         * `xs` and `icon-xs` were `1.5rem`, which is 24px at the default root and **21px at compact** —
+         * every size here is a `rem` against a root the density axis sets. That is under the 24×24
+         * WCAG 2.5.8 states in CSS pixels, and it was this component's DEFAULT, so an input group
+         * that said nothing got the failing size.
+         *
+         * The `pointer-coarse` hit area below does not save it. 44px is the touch answer and 2.5.8
+         * asks about pointers generally: with a mouse the target was 21px and the `::after` is not in
+         * the hit path. This is the one thing `Button` does not carry, and it is why the two were
+         * decided separately rather than in one sweep.
+         */
+        sm: string[];
+        "icon-sm": string[];
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    size: {
+        /**
+         * The floor, and the default, because there is nothing legal below it.
+         *
+         * `xs` and `icon-xs` were `1.5rem`, which is 24px at the default root and **21px at compact** —
+         * every size here is a `rem` against a root the density axis sets. That is under the 24×24
+         * WCAG 2.5.8 states in CSS pixels, and it was this component's DEFAULT, so an input group
+         * that said nothing got the failing size.
+         *
+         * The `pointer-coarse` hit area below does not save it. 44px is the touch answer and 2.5.8
+         * asks about pointers generally: with a mouse the target was 21px and the `::after` is not in
+         * the hit path. This is the one thing `Button` does not carry, and it is why the two were
+         * decided separately rather than in one sweep.
+         */
+        sm: string[];
+        "icon-sm": string[];
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+interface InputGroupButtonProps extends Omit<React.ComponentProps<typeof Button>, "size">, VariantProps<typeof inputGroupButtonVariants> {
+}
+export declare const InputGroupButton: (props: InputGroupButtonProps) => React.JSX.Element;
+export declare const InputGroupText: (props: React.ComponentProps<typeof ark.span>) => React.JSX.Element;
+export declare const InputGroupInput: (props: React.ComponentProps<typeof Input>) => React.JSX.Element;
+export declare const InputGroupTextarea: (props: React.ComponentProps<typeof Textarea>) => React.JSX.Element;
+export {};
+//# sourceMappingURL=input-group.d.ts.map

package/dist/simples/input-group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-group.d.ts","sourceRoot":"","sources":["../../src/simples/input-group.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAC;AAC5C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAE1D,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,QAAA,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;qDAqDrB,CAAC;AAEH,MAAM,WAAW,eACf,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,GAAG,CAAC,EAC1C,YAAY,CAAC,OAAO,iBAAiB,CAAC;CAAG;AAE7C,eAAO,MAAM,UAAU,GAAI,OAAO,eAAe,sBAYhD,CAAC;AAEF,QAAA,MAAM,uBAAuB;;;;;;;;;;;;;;;;;;;;;qDA8C3B,CAAC;AAEH,UAAU,oBACR,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,GAAG,CAAC,EAC1C,YAAY,CAAC,OAAO,uBAAuB,CAAC;CAAG;AAEnD,eAAO,MAAM,eAAe,GAAI,OAAO,oBAAoB,sBAkB1D,CAAC;AAEF,QAAA,MAAM,wBAAwB;;QAUxB;;;;;;;;;;;;WAYG;;;;;;QAZH;;;;;;;;;;;;WAYG;;;;;;QAZH;;;;;;;;;;;;WAYG;;;;qDAQP,CAAC;AAEH,UAAU,qBACR,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,EAAE,MAAM,CAAC,EACvD,YAAY,CAAC,OAAO,wBAAwB,CAAC;CAAG;AAEpD,eAAO,MAAM,gBAAgB,GAAI,OAAO,qBAAqB,sBAoB5D,CAAC;AAEF,eAAO,MAAM,cAAc,GACzB,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,sBAgB7C,CAAC;AAEF,eAAO,MAAM,eAAe,GAAI,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,KAAK,CAAC,sBAiBxE,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAC7B,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,QAAQ,CAAC,sBAmB7C,CAAC"}