@kanzo-tech/ui 0.0.1-alpha

package/dist/simples/toggle.js

@@ -0,0 +1,57 @@
+import { jsx as a } from "react/jsx-runtime";
+import { useToggleContext as l, Toggle as s } from "@ark-ui/react/toggle";
+import { tv as g } from "tailwind-variants";
+import { cn as m } from "../lib/cn.js";
+import { buttonVariants as c } from "./button.js";
+const T = l, f = g({
+  base: [
+    "relative",
+    // The pressed state is the ACTIVE level (step 5), painted as a wash because a toggle is
+    // dropped into toolbars, cards and popovers alike. `bg-field` recedes to the page in dark, so
+    // "on" and "off" were about to become the same colour there.
+    "data-[state=on]:bg-foreground/17",
+    "pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11"
+  ],
+  variants: {
+    size: {
+      sm: "h-7 min-w-7 px-1.5",
+      md: "h-8 min-w-8 px-2",
+      lg: "h-9 min-w-9 px-2.5"
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+}), b = (t) => {
+  const { variant: e = "ghost", size: o = "md", className: r, slot: n, ...i } = t;
+  return /* @__PURE__ */ a(
+    s.Root,
+    {
+      className: m(
+        c({ variant: e, clickEffect: !1 }),
+        f({ size: o }),
+        r
+      ),
+      ...i,
+      "data-slot": n ?? "toggle"
+    }
+  );
+}, v = (t) => {
+  const { children: e, slot: o, ...r } = t;
+  return /* @__PURE__ */ a(
+    s.Indicator,
+    {
+      className: "flex items-center gap-2",
+      ...r,
+      "data-slot": o ?? "toggle-indicator",
+      children: e
+    }
+  );
+};
+export {
+  b as Toggle,
+  v as ToggleIndicator,
+  f as toggleVariants,
+  T as useToggle
+};
+//# sourceMappingURL=toggle.js.map

package/dist/simples/toggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle.js","sources":["../../src/simples/toggle.tsx"],"sourcesContent":["import { Toggle as ArkToggle, useToggleContext } from \"@ark-ui/react/toggle\";\nimport type React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\nimport { cn } from \"../lib/cn\";\nimport { buttonVariants } from \"./button\";\n\nexport const useToggle = useToggleContext;\n\nexport const toggleVariants = tv({\n  base: [\n    \"relative\",\n    // The pressed state is the ACTIVE level (step 5), painted as a wash because a toggle is\n    // dropped into toolbars, cards and popovers alike. `bg-field` recedes to the page in dark, so\n    // \"on\" and \"off\" were about to become the same colour there.\n    \"data-[state=on]:bg-foreground/17\",\n    \"pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11\",\n  ],\n  variants: {\n    size: {\n      sm: \"h-7 min-w-7 px-1.5\",\n      md: \"h-8 min-w-8 px-2\",\n      lg: \"h-9 min-w-9 px-2.5\",\n    },\n  },\n  defaultVariants: {\n    size: \"md\",\n  },\n});\n\nexport interface ToggleProps\n  extends React.ComponentProps<typeof ArkToggle.Root>,\n    VariantProps<typeof toggleVariants> {\n  /**\n   * The variant of the toggle\n   *\n   * @default \"outline\"\n   */\n  variant?: Extract<\n    VariantProps<typeof buttonVariants>[\"variant\"],\n    \"outline\" | \"ghost\"\n  >;\n}\n\nexport const Toggle = (props: ToggleProps) => {\n  const { variant = \"ghost\", size = \"md\", className, slot, ...rest } = props;\n\n  return (\n    <ArkToggle.Root\n      className={cn(\n        buttonVariants({ variant, clickEffect: false }),\n        toggleVariants({ size }),\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"toggle\"}\n    />\n  );\n};\n\nexport const ToggleIndicator = (\n  props: React.ComponentProps<typeof ArkToggle.Indicator>\n) => {\n  const { children, slot, ...rest } = props;\n\n  return (\n    <ArkToggle.Indicator\n      className=\"flex items-center gap-2\"\n      {...rest}\n      data-slot={slot ?? \"toggle-indicator\"}\n    >\n      {children}\n    </ArkToggle.Indicator>\n  );\n};\n"],"names":["useToggle","useToggleContext","toggleVariants","tv","Toggle","props","variant","size","className","slot","rest","jsx","ArkToggle","cn","buttonVariants","ToggleIndicator","children"],"mappings":";;;;;AAMO,MAAMA,IAAYC,GAEZC,IAAiBC,EAAG;AAAA,EAC/B,MAAM;AAAA,IACJ;AAAA;AAAA;AAAA;AAAA,IAIA;AAAA,IACA;AAAA,EAAA;AAAA,EAEF,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,IAAA;AAAA,EACN;AAAA,EAEF,iBAAiB;AAAA,IACf,MAAM;AAAA,EAAA;AAEV,CAAC,GAgBYC,IAAS,CAACC,MAAuB;AAC5C,QAAM,EAAE,SAAAC,IAAU,SAAS,MAAAC,IAAO,MAAM,WAAAC,GAAW,MAAAC,GAAM,GAAGC,EAAA,IAASL;AAErE,SACE,gBAAAM;AAAA,IAACC,EAAU;AAAA,IAAV;AAAA,MACC,WAAWC;AAAA,QACTC,EAAe,EAAE,SAAAR,GAAS,aAAa,IAAO;AAAA,QAC9CJ,EAAe,EAAE,MAAAK,GAAM;AAAA,QACvBC;AAAA,MAAA;AAAA,MAED,GAAGE;AAAA,MACJ,aAAWD,KAAQ;AAAA,IAAA;AAAA,EAAA;AAGzB,GAEaM,IAAkB,CAC7BV,MACG;AACH,QAAM,EAAE,UAAAW,GAAU,MAAAP,GAAM,GAAGC,MAASL;AAEpC,SACE,gBAAAM;AAAA,IAACC,EAAU;AAAA,IAAV;AAAA,MACC,WAAU;AAAA,MACT,GAAGF;AAAA,MACJ,aAAWD,KAAQ;AAAA,MAElB,UAAAO;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/dist/simples/tooltip.d.ts

@@ -0,0 +1,8 @@
+import { Tooltip as ArkTooltip } from '@ark-ui/react/tooltip';
+import { default as React } from 'react';
+export declare const useTooltip: () => import('@ark-ui/react').UseTooltipContext;
+export declare const Tooltip: (props: React.ComponentProps<typeof ArkTooltip.Root>) => React.JSX.Element;
+export declare const TooltipTrigger: ({ slot, ...rest }: React.ComponentProps<typeof ArkTooltip.Trigger>) => React.JSX.Element;
+export declare const TooltipContent: (props: React.ComponentProps<typeof ArkTooltip.Content>) => React.JSX.Element;
+export declare const TooltipArrow: (props: React.ComponentProps<typeof ArkTooltip.Arrow>) => React.JSX.Element;
+//# sourceMappingURL=tooltip.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../src/simples/tooltip.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,OAAO,IAAI,UAAU,EAEtB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,eAAO,MAAM,UAAU,iDAAoB,CAAC;AAE5C,eAAO,MAAM,OAAO,GAClB,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,UAAU,CAAC,IAAI,CAAC,sBAuBpD,CAAC;AAEF,eAAO,MAAM,cAAc,GACzB,mBAAmB,KAAK,CAAC,cAAc,CAAC,OAAO,UAAU,CAAC,OAAO,CAAC,sBACO,CAAC;AAE5E,eAAO,MAAM,cAAc,GACzB,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,UAAU,CAAC,OAAO,CAAC,sBAmCvD,CAAC;AAEF,eAAO,MAAM,YAAY,GACvB,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,UAAU,CAAC,KAAK,CAAC,sBAmBrD,CAAC"}

package/dist/simples/tooltip.js

@@ -0,0 +1,80 @@
+import { jsx as e, jsxs as d } from "react/jsx-runtime";
+import { Portal as c } from "@ark-ui/react/portal";
+import { useTooltipContext as p, Tooltip as r } from "@ark-ui/react/tooltip";
+import { cn as m } from "../lib/cn.js";
+const w = p, h = (t) => {
+  const {
+    positioning: o = {
+      placement: "top"
+    },
+    lazyMount: n = !0,
+    unmountOnExit: a = !0,
+    closeDelay: i = 100,
+    openDelay: s = 0,
+    ...l
+  } = t;
+  return /* @__PURE__ */ e(
+    r.Root,
+    {
+      closeDelay: i,
+      lazyMount: n,
+      openDelay: s,
+      positioning: o,
+      unmountOnExit: a,
+      ...l
+    }
+  );
+}, y = ({ slot: t, ...o }) => /* @__PURE__ */ e(r.Trigger, { ...o, "data-slot": t ?? "tooltip-trigger" }), b = (t) => {
+  const { className: o, children: n, slot: a, ...i } = t;
+  return /* @__PURE__ */ e(c, { children: /* @__PURE__ */ e(r.Positioner, { "data-slot": "tooltip-positioner", children: /* @__PURE__ */ d(
+    r.Content,
+    {
+      className: m(
+        "z-50 w-fit",
+        "px-3 py-1.5",
+        "bg-foreground",
+        "text-background text-xs",
+        "rounded-lg shadow-lg/5",
+        "origin-(--transform-origin) animate-in",
+        "fade-in-0 zoom-in-[98%]",
+        "data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-[98%]",
+        "data-[state=closed]:animate-out",
+        "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!",
+        o
+      ),
+      ...i,
+      "data-slot": a ?? "tooltip-content",
+      children: [
+        /* @__PURE__ */ e(u, {}),
+        n
+      ]
+    }
+  ) }) });
+}, u = (t) => {
+  const { style: o, slot: n, ...a } = t;
+  return /* @__PURE__ */ e(
+    r.Arrow,
+    {
+      style: {
+        "--arrow-background": "var(--foreground)",
+        "--arrow-size": "calc(1.5 * var(--spacing))",
+        ...o
+      },
+      ...a,
+      "data-slot": n ?? "tooltip-arrow",
+      children: /* @__PURE__ */ e(r.ArrowTip, {})
+    }
+  );
+};
+export {
+  h as Tooltip,
+  u as TooltipArrow,
+  b as TooltipContent,
+  y as TooltipTrigger,
+  w as useTooltip
+};
+//# sourceMappingURL=tooltip.js.map

package/dist/simples/tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.js","sources":["../../src/simples/tooltip.tsx"],"sourcesContent":["import { Portal } from \"@ark-ui/react/portal\";\nimport {\n  Tooltip as ArkTooltip,\n  useTooltipContext,\n} from \"@ark-ui/react/tooltip\";\nimport type React from \"react\";\nimport { cn } from \"../lib/cn\";\n\nexport const useTooltip = useTooltipContext;\n\nexport const Tooltip = (\n  props: React.ComponentProps<typeof ArkTooltip.Root>\n) => {\n  const {\n    positioning = {\n      placement: \"top\",\n    },\n    lazyMount = true,\n    unmountOnExit = true,\n    closeDelay = 100,\n    openDelay = 0,\n    ...rest\n  } = props;\n\n  return (\n    <ArkTooltip.Root\n      closeDelay={closeDelay}\n      lazyMount={lazyMount}\n      openDelay={openDelay}\n      positioning={positioning}\n      unmountOnExit={unmountOnExit}\n      {...rest}\n    />\n  );\n};\n\nexport const TooltipTrigger = (\n  { slot, ...rest }: React.ComponentProps<typeof ArkTooltip.Trigger>\n) => <ArkTooltip.Trigger {...rest} data-slot={slot ?? \"tooltip-trigger\"} />;\n\nexport const TooltipContent = (\n  props: React.ComponentProps<typeof ArkTooltip.Content>\n) => {\n  const { className, children, slot, ...rest } = props;\n\n  return (\n    <Portal>\n      <ArkTooltip.Positioner data-slot=\"tooltip-positioner\">\n        <ArkTooltip.Content\n          className={cn(\n            \"z-50 w-fit\",\n            \"px-3 py-1.5\",\n            \"bg-foreground\",\n            \"text-background text-xs\",\n            \"rounded-lg shadow-lg/5\",\n            \"origin-(--transform-origin) animate-in\",\n            \"fade-in-0 zoom-in-[98%]\",\n            \"data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-[98%]\",\n            \"data-[state=closed]:animate-out\",\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 ?? \"tooltip-content\"}\n        >\n          <TooltipArrow />\n\n          {children}\n        </ArkTooltip.Content>\n      </ArkTooltip.Positioner>\n    </Portal>\n  );\n};\n\nexport const TooltipArrow = (\n  props: React.ComponentProps<typeof ArkTooltip.Arrow>\n) => {\n  const { style, slot, ...rest } = props;\n\n  return (\n    <ArkTooltip.Arrow\n      style={\n        {\n          \"--arrow-background\": \"var(--foreground)\",\n          \"--arrow-size\": \"calc(1.5 * var(--spacing))\",\n          ...style,\n        } as React.CSSProperties\n      }\n      {...rest}\n      data-slot={slot ?? \"tooltip-arrow\"}\n    >\n      <ArkTooltip.ArrowTip />\n    </ArkTooltip.Arrow>\n  );\n};\n"],"names":["useTooltip","useTooltipContext","Tooltip","props","positioning","lazyMount","unmountOnExit","closeDelay","openDelay","rest","jsx","ArkTooltip","TooltipTrigger","slot","TooltipContent","className","children","Portal","jsxs","cn","TooltipArrow","style"],"mappings":";;;;AAQO,MAAMA,IAAaC,GAEbC,IAAU,CACrBC,MACG;AACH,QAAM;AAAA,IACJ,aAAAC,IAAc;AAAA,MACZ,WAAW;AAAA,IAAA;AAAA,IAEb,WAAAC,IAAY;AAAA,IACZ,eAAAC,IAAgB;AAAA,IAChB,YAAAC,IAAa;AAAA,IACb,WAAAC,IAAY;AAAA,IACZ,GAAGC;AAAA,EAAA,IACDN;AAEJ,SACE,gBAAAO;AAAA,IAACC,EAAW;AAAA,IAAX;AAAA,MACC,YAAAJ;AAAA,MACA,WAAAF;AAAA,MACA,WAAAG;AAAA,MACA,aAAAJ;AAAA,MACA,eAAAE;AAAA,MACC,GAAGG;AAAA,IAAA;AAAA,EAAA;AAGV,GAEaG,IAAiB,CAC5B,EAAE,MAAAC,GAAM,GAAGJ,EAAA,MACR,gBAAAC,EAACC,EAAW,SAAX,EAAoB,GAAGF,GAAM,aAAWI,KAAQ,kBAAA,CAAmB,GAE5DC,IAAiB,CAC5BX,MACG;AACH,QAAM,EAAE,WAAAY,GAAW,UAAAC,GAAU,MAAAH,GAAM,GAAGJ,MAASN;AAE/C,2BACGc,GAAA,EACC,UAAA,gBAAAP,EAACC,EAAW,YAAX,EAAsB,aAAU,sBAC/B,UAAA,gBAAAO;AAAA,IAACP,EAAW;AAAA,IAAX;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,QACAJ;AAAA,MAAA;AAAA,MAED,GAAGN;AAAA,MACJ,aAAWI,KAAQ;AAAA,MAEnB,UAAA;AAAA,QAAA,gBAAAH,EAACU,GAAA,EAAa;AAAA,QAEbJ;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,GAEL,EAAA,CACF;AAEJ,GAEaI,IAAe,CAC1BjB,MACG;AACH,QAAM,EAAE,OAAAkB,GAAO,MAAAR,GAAM,GAAGJ,MAASN;AAEjC,SACE,gBAAAO;AAAA,IAACC,EAAW;AAAA,IAAX;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,EAAW,UAAX,CAAA,CAAoB;AAAA,IAAA;AAAA,EAAA;AAG3B;"}

package/dist/simples/tour.d.ts

@@ -0,0 +1,81 @@
+import { ark } from '@ark-ui/react/factory';
+import { Tour as ArkTour, TourStepDetails, UseTourReturn } from '@ark-ui/react/tour';
+import { default as React } from 'react';
+import { DialogFooter, DialogHeader, DialogOverlay } from './dialog';
+export type TourStepType = TourStepDetails;
+/**
+ * What `useTourContext()` hands back — **and it is not Ark's tour context**, which is the whole
+ * reason this type is exported rather than inferred.
+ *
+ * `shark-parity.divergences.ts` records the edge: the name matches Shark exactly and collides with
+ * `@ark-ui/react`'s own `useTourContext`, while returning something else entirely. A consumer with
+ * both packages in scope gets two hooks under one name with incompatible returns and no error to
+ * read — so the least this side can do is let them **name** what ours returns. Without it there was
+ * no way to type a variable holding it, or a helper taking it.
+ *
+ * `UseTourContextReturn`, on Ark's own `UseTourReturn` / `UseStepsReturn` pattern. It was
+ * `TourProviderProps`, which named a `<TourProvider>` component that does not exist and is not
+ * exported.
+ */
+export interface UseTourContextReturn {
+    /**
+     * The function to start the tour
+     */
+    handleStart: () => void;
+    /**
+     * The tour instance
+     */
+    tour: UseTourReturn;
+}
+interface TourProps extends Omit<React.ComponentProps<typeof ArkTour.Root>, "tour"> {
+    /**
+     * Enable arrow key navigation between steps
+     */
+    keyboardNavigation?: boolean;
+    /**
+     * Called when the tour status changes
+     */
+    onStatusChange?: (details: {
+        status: string;
+    }) => void;
+    /**
+     * Called when the current step changes
+     */
+    onStepChange?: (details: {
+        stepId: string | null;
+    }) => void;
+    /**
+     * The steps to display in the tour
+     *
+     * @default []
+     */
+    steps: TourStepDetails[];
+}
+export declare const Tour: (props: TourProps) => React.JSX.Element;
+interface TourTriggerProps extends React.ComponentProps<typeof ark.button> {
+}
+export declare const TourTrigger: (props: TourTriggerProps) => React.JSX.Element;
+export declare const TourActionTrigger: ({ slot, ...rest }: React.ComponentProps<typeof ArkTour.ActionTrigger>) => React.JSX.Element;
+export declare const TourOverlay: (props: React.ComponentProps<typeof DialogOverlay>) => React.JSX.Element;
+export declare const TourPositioner: ({ slot, ...rest }: React.ComponentProps<typeof ArkTour.Positioner>) => React.JSX.Element;
+interface TourContentProps extends React.ComponentProps<typeof ArkTour.Content> {
+    /**
+     * Show close button at the top right corner
+     *
+     * @default true
+     */
+    showCloseButton?: boolean;
+}
+export declare const TourContent: (props: TourContentProps) => React.JSX.Element;
+export declare const TourSpotlight: ({ slot, ...rest }: React.ComponentProps<typeof ArkTour.Spotlight>) => React.JSX.Element;
+export declare const TourHeader: ({ slot, ...rest }: React.ComponentProps<typeof DialogHeader>) => React.JSX.Element;
+export declare const TourTitle: (props: React.ComponentProps<typeof ArkTour.Title>) => React.JSX.Element;
+export declare const TourDescription: (props: React.ComponentProps<typeof ArkTour.Description>) => React.JSX.Element;
+export declare const TourProgressText: (props: React.ComponentProps<typeof ArkTour.ProgressText>) => React.JSX.Element;
+export declare const TourClose: ({ slot, ...rest }: React.ComponentProps<typeof ArkTour.CloseTrigger>) => React.JSX.Element;
+export declare const TourActions: (props: React.ComponentProps<typeof DialogFooter>) => React.JSX.Element | null;
+export declare const TourPreviousStep: (props: Omit<React.ComponentProps<typeof TourActionTrigger>, "action">) => React.JSX.Element | null;
+export declare const TourNextStep: (props: Omit<React.ComponentProps<typeof TourActionTrigger>, "action">) => React.JSX.Element | null;
+export declare const useTourContext: () => UseTourContextReturn;
+export {};
+//# sourceMappingURL=tour.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tour.d.ts","sourceRoot":"","sources":["../../src/simples/tour.tsx"],"names":[],"mappings":"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"}

package/dist/simples/tour.js

@@ -0,0 +1,253 @@
+"use client";
+import { jsx as o, jsxs as p } from "react/jsx-runtime";
+import { Portal as b } from "@ark-ui/react";
+import { ark as y } from "@ark-ui/react/factory";
+import { useTour as C, Tour as l } from "@ark-ui/react/tour";
+import { ChevronLeft as x, ChevronRight as v, X as N } from "lucide-react";
+import u from "react";
+import { cn as d } from "../lib/cn.js";
+import { Button as h } from "./button.js";
+import { DialogFooter as z, DialogHeader as P, dialogOverlayVariants as S } from "./dialog.js";
+const f = u.createContext(null);
+f.displayName = "TourContext";
+const F = (t) => {
+  const {
+    steps: e = [],
+    lazyMount: n = !0,
+    unmountOnExit: s = !0,
+    ...r
+  } = t, [a, i] = u.useState(!1), c = C({ steps: e });
+  u.useEffect(() => (a ? document.body.classList.add("relative") : document.body.classList.remove("relative"), () => {
+    document.body.classList.remove("relative");
+  }), [a]);
+  const g = u.useCallback(() => {
+    i(!0), c.start();
+  }, [c]);
+  return /* @__PURE__ */ o(f.Provider, { value: { tour: c, handleStart: g }, children: /* @__PURE__ */ o(
+    l.Root,
+    {
+      lazyMount: n,
+      tour: c,
+      unmountOnExit: s,
+      ...r
+    }
+  ) });
+}, I = (t) => {
+  const { onClick: e, slot: n, ...s } = t, { handleStart: r } = m(), a = (i) => {
+    e == null || e(i), r();
+  };
+  return /* @__PURE__ */ o(
+    y.button,
+    {
+      type: "button",
+      ...s,
+      "data-slot": n ?? "tour-trigger",
+      onClick: a
+    }
+  );
+}, T = ({
+  slot: t,
+  ...e
+}) => /* @__PURE__ */ o(l.ActionTrigger, { ...e, "data-slot": t ?? "tour-action-trigger" }), w = (t) => {
+  const { className: e, slot: n, ...s } = t;
+  return /* @__PURE__ */ o(
+    l.Backdrop,
+    {
+      className: d(S(), "duration-initial", e),
+      ...s,
+      "data-slot": n ?? "tour-overlay"
+    }
+  );
+}, k = ({
+  slot: t,
+  ...e
+}) => /* @__PURE__ */ o(
+  l.Positioner,
+  {
+    className: d(
+      "z-50",
+      "flex items-center justify-center",
+      // `p-4` only on the dialog-type step, matching DialogPositioner. The content is
+      // `w-full max-w-md`, so without it a viewport narrower than 448px puts the card flush
+      // against both edges. Tooltip-type steps are anchored to a target and must not inherit
+      // the inset. (Upstream Shark omits this on Tour; Dialog here has always had it.)
+      "data-[type=dialog]:fixed data-[type=dialog]:inset-0 data-[type=dialog]:p-4",
+      "data-[type=tooltip]:absolute"
+    ),
+    ...e,
+    "data-slot": t ?? "tour-positioner"
+  }
+), V = (t) => {
+  const { showCloseButton: e = !0, className: n, children: s, slot: r, ...a } = t;
+  return /* @__PURE__ */ p(b, { children: [
+    /* @__PURE__ */ o(w, {}),
+    /* @__PURE__ */ o(k, { children: /* @__PURE__ */ p(
+      l.Content,
+      {
+        className: d(
+          "[--space:--spacing(4)]",
+          "z-[calc(50+var(--layer-index,0))]",
+          "relative",
+          "w-full max-w-md",
+          "flex flex-col gap-4",
+          "bg-background",
+          "rounded-lg border shadow-lg",
+          "focus:outline-none focus:ring-0",
+          "data-[state=closed]:animate-out data-[state=open]:animate-in",
+          "data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0",
+          "data-[state=open]:zoom-in-95 data-[state=closed]:zoom-out-95",
+          "motion-reduce:animate-none!",
+          n
+        ),
+        ...a,
+        "data-slot": r ?? "tour-content",
+        children: [
+          s,
+          !!e && // Positioned by the GLYPH, not by the button box. The button is `size-8` (32px)
+          // around a 16px icon, so an 8px inset lands the X on the same 16px grid line as
+          // the header's `p-(--space)` title — the close and the title then share a corner.
+          // At Shark's `top-4 right-4` the box is on the grid and the glyph is 8px inside
+          // it, which reads as the X sagging down and in. Same reasoning as
+          // `DialogContent`'s `inset-e-2.5 top-2.5` (28px button, 24px `--space`).
+          /* @__PURE__ */ o(D, { asChild: !0, className: "absolute inset-e-2 top-2", children: /* @__PURE__ */ p(
+            h,
+            {
+              className: "size-8 border-none opacity-70 hover:opacity-100",
+              size: "icon-md",
+              variant: "ghost",
+              children: [
+                /* @__PURE__ */ o(N, {}),
+                /* @__PURE__ */ o("span", { className: "sr-only", children: "Close" })
+              ]
+            }
+          ) })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ o(A, {})
+  ] });
+}, A = ({ slot: t, ...e }) => /* @__PURE__ */ o(
+  l.Spotlight,
+  {
+    className: "z-50 border-2 border-primary",
+    ...e,
+    "data-slot": t ?? "tour-spotlight"
+  }
+), X = ({ slot: t, ...e }) => /* @__PURE__ */ o(P, { ...e, slot: t ?? "tour-header" }), $ = (t) => {
+  var a;
+  const { className: e, slot: n, ...s } = t, { tour: r } = m();
+  return /* @__PURE__ */ o(
+    l.Title,
+    {
+      className: d(
+        "font-semibold text-base leading-none tracking-tight",
+        // Reserve inline-end room so the absolutely-positioned close X never overlaps the
+        // title — the same guard Dialog and Popover already carry. Upstream Shark omits it on
+        // Tour, which is why a long title runs straight under the button there.
+        "in-[[data-slot=tour-content]:has([data-slot=tour-close-trigger])]:pe-8",
+        e
+      ),
+      ...s,
+      "data-slot": n ?? "tour-title",
+      children: (a = r.step) == null ? void 0 : a.title
+    }
+  );
+}, q = (t) => {
+  var a;
+  const { className: e, slot: n, ...s } = t, { tour: r } = m();
+  return /* @__PURE__ */ o(
+    l.Description,
+    {
+      className: d("text-muted-foreground text-sm", e),
+      ...s,
+      "data-slot": n ?? "tour-description",
+      children: (a = r.step) == null ? void 0 : a.description
+    }
+  );
+}, G = (t) => {
+  const { className: e, slot: n, ...s } = t, { tour: r } = m();
+  return /* @__PURE__ */ o(
+    l.ProgressText,
+    {
+      className: d("text-muted-foreground text-sm", e),
+      ...s,
+      "data-slot": n ?? "tour-progress-text",
+      children: r.getProgressText()
+    }
+  );
+}, D = ({
+  slot: t,
+  ...e
+}) => /* @__PURE__ */ o(l.CloseTrigger, { ...e, "data-slot": t ?? "tour-close-trigger" }), J = (t) => {
+  var a;
+  const { className: e, ...n } = t, { tour: s } = m(), r = ((a = s.step) == null ? void 0 : a.actions) ?? [];
+  return r.length === 0 ? null : /* @__PURE__ */ o(l.Control, { ...n, asChild: !0, children: /* @__PURE__ */ o(
+    z,
+    {
+      className: d("flex flex-wrap gap-2", e),
+      slot: "tour-actions",
+      children: r.map((i) => /* @__PURE__ */ o(T, { action: i, asChild: !0, children: /* @__PURE__ */ p(
+        h,
+        {
+          size: "sm",
+          variant: i.action === "dismiss" || i.action === "prev" ? "outline" : "default",
+          children: [
+            i.action === "prev" && /* @__PURE__ */ o(x, {}),
+            i.label,
+            i.action === "next" && /* @__PURE__ */ o(v, {})
+          ]
+        }
+      ) }, i.label))
+    }
+  ) });
+}, K = (t) => {
+  const { slot: e, ...n } = t, { tour: s } = m(), r = u.useMemo(
+    () => {
+      var a, i;
+      return (i = (a = s.step) == null ? void 0 : a.actions) == null ? void 0 : i.find((c) => c.action === "prev");
+    },
+    [s]
+  );
+  return r ? /* @__PURE__ */ o(T, { ...n, action: r, asChild: !0, children: /* @__PURE__ */ p(h, { size: "sm", slot: e ?? "tour-previous-step", variant: "outline", children: [
+    /* @__PURE__ */ o(x, {}),
+    r.label
+  ] }) }) : null;
+}, Q = (t) => {
+  const { slot: e, ...n } = t, { tour: s } = m(), r = u.useMemo(
+    () => {
+      var i, c;
+      return (c = (i = s.step) == null ? void 0 : i.actions) == null ? void 0 : c.find(
+        (g) => g.action === "next" || g.action === "dismiss"
+      );
+    },
+    [s]
+  ), a = u.useMemo(() => r == null ? void 0 : r.action, [r]);
+  return r ? /* @__PURE__ */ o(T, { ...n, action: r, asChild: !0, children: /* @__PURE__ */ p(h, { size: "sm", slot: e ?? "tour-next-step", children: [
+    r.label,
+    a === "next" && /* @__PURE__ */ o(v, {})
+  ] }) }) : null;
+}, m = () => {
+  const t = u.use(f);
+  if (!t)
+    throw new Error("useTourContext must be used inside a <Tour>");
+  return t;
+};
+export {
+  F as Tour,
+  T as TourActionTrigger,
+  J as TourActions,
+  D as TourClose,
+  V as TourContent,
+  q as TourDescription,
+  X as TourHeader,
+  Q as TourNextStep,
+  w as TourOverlay,
+  k as TourPositioner,
+  K as TourPreviousStep,
+  G as TourProgressText,
+  A as TourSpotlight,
+  $ as TourTitle,
+  I as TourTrigger,
+  m as useTourContext
+};
+//# sourceMappingURL=tour.js.map

package/dist/simples/tour.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tour.js","sources":["../../src/simples/tour.tsx"],"sourcesContent":["\"use client\";\n\nimport { Portal } from \"@ark-ui/react\";\nimport { ark } from \"@ark-ui/react/factory\";\nimport {\n  Tour as ArkTour,\n  type TourStepDetails,\n  type UseTourReturn,\n  useTour,\n} from \"@ark-ui/react/tour\";\nimport { ChevronLeft, ChevronRight, X } from \"lucide-react\";\nimport React from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { Button } from \"./button\";\nimport {\n  DialogFooter,\n  DialogHeader,\n  type DialogOverlay,\n  dialogOverlayVariants,\n} from \"./dialog\";\n\nexport type TourStepType = TourStepDetails;\n\n/**\n * What `useTourContext()` hands back — **and it is not Ark's tour context**, which is the whole\n * reason this type is exported rather than inferred.\n *\n * `shark-parity.divergences.ts` records the edge: the name matches Shark exactly and collides with\n * `@ark-ui/react`'s own `useTourContext`, while returning something else entirely. A consumer with\n * both packages in scope gets two hooks under one name with incompatible returns and no error to\n * read — so the least this side can do is let them **name** what ours returns. Without it there was\n * no way to type a variable holding it, or a helper taking it.\n *\n * `UseTourContextReturn`, on Ark's own `UseTourReturn` / `UseStepsReturn` pattern. It was\n * `TourProviderProps`, which named a `<TourProvider>` component that does not exist and is not\n * exported.\n */\nexport interface UseTourContextReturn {\n  /**\n   * The function to start the tour\n   */\n  handleStart: () => void;\n  /**\n   * The tour instance\n   */\n  tour: UseTourReturn;\n}\n\nconst TourProvider = React.createContext<UseTourContextReturn | null>(null);\nTourProvider.displayName = \"TourContext\";\n\ninterface TourProps\n  extends Omit<React.ComponentProps<typeof ArkTour.Root>, \"tour\"> {\n  /**\n   * Enable arrow key navigation between steps\n   */\n  keyboardNavigation?: boolean;\n  /**\n   * Called when the tour status changes\n   */\n  onStatusChange?: (details: { status: string }) => void;\n  /**\n   * Called when the current step changes\n   */\n  onStepChange?: (details: { stepId: string | null }) => void;\n  /**\n   * The steps to display in the tour\n   *\n   * @default []\n   */\n  steps: TourStepDetails[];\n}\n\nexport const Tour = (props: TourProps) => {\n  const {\n    steps = [],\n    lazyMount = true,\n    unmountOnExit = true,\n    ...rest\n  } = props;\n\n  const [isStarted, setIsStarted] = React.useState(false);\n\n  const tour = useTour({ steps });\n\n  React.useEffect(() => {\n    if (isStarted) {\n      document.body.classList.add(\"relative\");\n    } else {\n      document.body.classList.remove(\"relative\");\n    }\n\n    return () => {\n      document.body.classList.remove(\"relative\");\n    };\n  }, [isStarted]);\n\n  const handleStart = React.useCallback(() => {\n    setIsStarted(true);\n    tour.start();\n  }, [tour]);\n\n  return (\n    <TourProvider.Provider value={{ tour, handleStart }}>\n      <ArkTour.Root\n        lazyMount={lazyMount}\n        tour={tour}\n        unmountOnExit={unmountOnExit}\n        {...rest}\n      />\n    </TourProvider.Provider>\n  );\n};\n\ninterface TourTriggerProps extends React.ComponentProps<typeof ark.button> {}\n\nexport const TourTrigger = (props: TourTriggerProps) => {\n  const { onClick, slot, ...rest } = props;\n\n  const { handleStart } = useTourContext();\n\n  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {\n    onClick?.(e);\n    handleStart();\n  };\n\n  return (\n    <ark.button\n      type=\"button\"\n      {...rest}\n      data-slot={slot ?? \"tour-trigger\"}\n      onClick={handleClick}\n    />\n  );\n};\n\nexport const TourActionTrigger = ({\n  slot,\n  ...rest\n}: React.ComponentProps<typeof ArkTour.ActionTrigger>) => (\n  <ArkTour.ActionTrigger {...rest} data-slot={slot ?? \"tour-action-trigger\"} />\n);\n\nexport const TourOverlay = (\n  props: React.ComponentProps<typeof DialogOverlay>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkTour.Backdrop\n      className={cn(dialogOverlayVariants(), \"duration-initial\", className)}\n      {...rest}\n      data-slot={slot ?? \"tour-overlay\"}\n    />\n  );\n};\nexport const TourPositioner = ({\n  slot,\n  ...rest\n}: React.ComponentProps<typeof ArkTour.Positioner>) => (\n  <ArkTour.Positioner\n    className={cn(\n      \"z-50\",\n      \"flex items-center justify-center\",\n      // `p-4` only on the dialog-type step, matching DialogPositioner. The content is\n      // `w-full max-w-md`, so without it a viewport narrower than 448px puts the card flush\n      // against both edges. Tooltip-type steps are anchored to a target and must not inherit\n      // the inset. (Upstream Shark omits this on Tour; Dialog here has always had it.)\n      \"data-[type=dialog]:fixed data-[type=dialog]:inset-0 data-[type=dialog]:p-4\",\n      \"data-[type=tooltip]:absolute\"\n    )}\n    {...rest}\n    data-slot={slot ?? \"tour-positioner\"}\n  />\n);\n\ninterface TourContentProps\n  extends React.ComponentProps<typeof ArkTour.Content> {\n  /**\n   * Show close button at the top right corner\n   *\n   * @default true\n   */\n  showCloseButton?: boolean;\n}\n\nexport const TourContent = (props: TourContentProps) => {\n  const { showCloseButton = true, className, children, slot, ...rest } = props;\n\n  return (\n    <Portal>\n      <TourOverlay />\n      <TourPositioner>\n        <ArkTour.Content\n          className={cn(\n            \"[--space:--spacing(4)]\",\n            \"z-[calc(50+var(--layer-index,0))]\",\n            \"relative\",\n            \"w-full max-w-md\",\n            \"flex flex-col gap-4\",\n            \"bg-background\",\n            \"rounded-lg border shadow-lg\",\n            \"focus:outline-none focus:ring-0\",\n            \"data-[state=closed]:animate-out data-[state=open]:animate-in\",\n            \"data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0\",\n            \"data-[state=open]:zoom-in-95 data-[state=closed]:zoom-out-95\",\n            \"motion-reduce:animate-none!\",\n            className\n          )}\n          {...rest}\n          data-slot={slot ?? \"tour-content\"}\n        >\n          {children}\n\n          {!!showCloseButton && (\n            // Positioned by the GLYPH, not by the button box. The button is `size-8` (32px)\n            // around a 16px icon, so an 8px inset lands the X on the same 16px grid line as\n            // the header's `p-(--space)` title — the close and the title then share a corner.\n            // At Shark's `top-4 right-4` the box is on the grid and the glyph is 8px inside\n            // it, which reads as the X sagging down and in. Same reasoning as\n            // `DialogContent`'s `inset-e-2.5 top-2.5` (28px button, 24px `--space`).\n            <TourClose asChild className=\"absolute inset-e-2 top-2\">\n              <Button\n                className=\"size-8 border-none opacity-70 hover:opacity-100\"\n                size=\"icon-md\"\n                variant=\"ghost\"\n              >\n                <X />\n\n                <span className=\"sr-only\">Close</span>\n              </Button>\n            </TourClose>\n          )}\n        </ArkTour.Content>\n      </TourPositioner>\n\n      <TourSpotlight />\n    </Portal>\n  );\n};\n\n// A step's body is `DialogBody`: the renamed `TourBody` only relabelled the slot, and nothing\n// keys off `tour-body`.\nexport const TourSpotlight = (\n  { slot, ...rest }: React.ComponentProps<typeof ArkTour.Spotlight>\n) => (\n  <ArkTour.Spotlight\n    className=\"z-50 border-2 border-primary\"\n    {...rest}\n    data-slot={slot ?? \"tour-spotlight\"}\n  />\n);\n\nexport const TourHeader = (\n  { slot, ...rest }: React.ComponentProps<typeof DialogHeader>\n) => <DialogHeader {...rest} slot={slot ?? \"tour-header\"} />;\n\nexport const TourTitle = (\n  props: React.ComponentProps<typeof ArkTour.Title>\n) => {\n  const { className, slot, ...rest } = props;\n\n  const { tour } = useTourContext();\n\n  return (\n    <ArkTour.Title\n      className={cn(\n        \"font-semibold text-base leading-none tracking-tight\",\n        // Reserve inline-end room so the absolutely-positioned close X never overlaps the\n        // title — the same guard Dialog and Popover already carry. Upstream Shark omits it on\n        // Tour, which is why a long title runs straight under the button there.\n        \"in-[[data-slot=tour-content]:has([data-slot=tour-close-trigger])]:pe-8\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"tour-title\"}\n    >\n      {tour.step?.title}\n    </ArkTour.Title>\n  );\n};\n\nexport const TourDescription = (\n  props: React.ComponentProps<typeof ArkTour.Description>\n) => {\n  const { className, slot, ...rest } = props;\n\n  const { tour } = useTourContext();\n\n  return (\n    <ArkTour.Description\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      {...rest}\n      data-slot={slot ?? \"tour-description\"}\n    >\n      {tour.step?.description}\n    </ArkTour.Description>\n  );\n};\n\nexport const TourProgressText = (\n  props: React.ComponentProps<typeof ArkTour.ProgressText>\n) => {\n  const { className, slot, ...rest } = props;\n\n  const { tour } = useTourContext();\n\n  return (\n    <ArkTour.ProgressText\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      {...rest}\n      data-slot={slot ?? \"tour-progress-text\"}\n    >\n      {tour.getProgressText()}\n    </ArkTour.ProgressText>\n  );\n};\n\nexport const TourClose = ({\n  slot,\n  ...rest\n}: React.ComponentProps<typeof ArkTour.CloseTrigger>) => (\n  <ArkTour.CloseTrigger {...rest} data-slot={slot ?? \"tour-close-trigger\"} />\n);\n\n// `TourFooter` was a second wrapper over the same `ArkTour.Control` that `TourActions` already\n// carries. Ark's `Control` is a bare `ark.div` with static anatomy attrs — no machine wiring —\n// so a caller laying out footer content by hand needs `DialogFooter`, not a tour part.\nexport const TourActions = (\n  props: React.ComponentProps<typeof DialogFooter>\n) => {\n  const { className, ...rest } = props;\n\n  const { tour } = useTourContext();\n\n  const actions = tour.step?.actions ?? [];\n\n  if (actions.length === 0) {\n    return null;\n  }\n\n  return (\n    <ArkTour.Control {...rest} asChild>\n      <DialogFooter\n        className={cn(\"flex flex-wrap gap-2\", className)}\n        slot=\"tour-actions\"\n      >\n        {actions.map((action) => (\n          <TourActionTrigger action={action} asChild key={action.label}>\n            <Button\n              size=\"sm\"\n              variant={\n                action.action === \"dismiss\" || action.action === \"prev\"\n                  ? \"outline\"\n                  : \"default\"\n              }\n            >\n              {action.action === \"prev\" && <ChevronLeft />}\n              {action.label}\n              {action.action === \"next\" && <ChevronRight />}\n            </Button>\n          </TourActionTrigger>\n        ))}\n      </DialogFooter>\n    </ArkTour.Control>\n  );\n};\nexport const TourPreviousStep = (\n  props: Omit<React.ComponentProps<typeof TourActionTrigger>, \"action\">\n) => {\n  const { slot, ...rest } = props;\n\n  const { tour } = useTourContext();\n\n  const prevAction = React.useMemo(\n    () => tour.step?.actions?.find((action) => action.action === \"prev\"),\n    [tour]\n  );\n\n  if (!prevAction) {\n    return null;\n  }\n\n  return (\n    <TourActionTrigger {...rest} action={prevAction} asChild>\n      <Button size=\"sm\" slot={slot ?? \"tour-previous-step\"} variant=\"outline\">\n        <ChevronLeft />\n        {prevAction.label}\n      </Button>\n    </TourActionTrigger>\n  );\n};\n\nexport const TourNextStep = (\n  props: Omit<React.ComponentProps<typeof TourActionTrigger>, \"action\">\n) => {\n  const { slot, ...rest } = props;\n\n  const { tour } = useTourContext();\n\n  const action = React.useMemo(\n    () =>\n      tour.step?.actions?.find(\n        (a) => a.action === \"next\" || a.action === \"dismiss\"\n      ),\n    [tour]\n  );\n\n  const actionType = React.useMemo(() => action?.action, [action]);\n\n  if (!action) {\n    return null;\n  }\n\n  return (\n    <TourActionTrigger {...rest} action={action} asChild>\n      <Button size=\"sm\" slot={slot ?? \"tour-next-step\"}>\n        {action.label}\n\n        {actionType === \"next\" && <ChevronRight />}\n      </Button>\n    </TourActionTrigger>\n  );\n};\n\nexport const useTourContext = () => {\n  const context = React.use(TourProvider);\n\n  if (!context) {\n    throw new Error(\"useTourContext must be used inside a <Tour>\");\n  }\n\n  return context;\n};\n"],"names":["TourProvider","React"],"mappings":";;;;;;;;;;AAgDA;AACAA;AAwBO;AACL;AAAM;AACI;AACI;AACI;AACb;AAOLC;AAQI;AAAyC;AAI7C;AACE;AACK;AAGP;AAEI;AAAS;AAAR;AACC;AACA;AACA;AACI;AAAA;AAIZ;AAKE;AAKE;AACA;AAGF;AACE;AAAK;AAAJ;AACM;AACD;AACe;AACV;AAAA;AAGf;AAEkC;AAChC;AAEF;AAOE;AAEA;AACE;AAAS;AAAR;AACqE;AAChE;AACe;AAAA;AAGzB;AAC+B;AAC7B;AAEF;AACE;AAAS;AAAR;AACY;AACT;AACA;AAAA;AAAA;AAAA;AAAA;AAKA;AACA;AAAA;AAEE;AACe;AACrB;AAcA;AAEA;AAEI;AAAa;AAEX;AAAS;AAAR;AACY;AACT;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAEE;AACe;AAElB;AAAA;AAEE;AAAA;AAAA;AAAA;AAAA;AAAA;AAQC;AAAC;AAAA;AACW;AACL;AACG;AAER;AAAG;AAE4B;AAAA;AAAA;AAEnC;AAAA;AAAA;AAGN;AAEe;AAGrB;AAOE;AAAS;AAAR;AACW;AACN;AACe;AACrB;;AAUA;AAIA;AACE;AAAS;AAAR;AACY;AACT;AAAA;AAAA;AAAA;AAIA;AACA;AAAA;AAEE;AACe;AAEP;AAAA;AAGlB;;AAKE;AAIA;AACE;AAAS;AAAR;AACyD;AACpD;AACe;AAEP;AAAA;AAGlB;AAKE;AAIA;AACE;AAAS;AAAR;AACyD;AACpD;AACe;AAEb;AAAgB;AAG5B;AAE0B;AACxB;AAEF;;AAUE;AAMA;AAMI;AAAC;AAAA;AACgD;AAC1C;AAID;AAAC;AAAA;AACM;AAIC;AAGL;AAAyC;AAClC;AACmC;AAAA;AAAA;AAGhD;AAAA;AAIT;AAIE;AAIyB;;AACjB;AAAuD;AAAA;AACxD;AAGP;AAOM;AAAa;AACD;AAIpB;AAKE;AAIqB;;AAEjB;AAAoB;AACyB;AAAA;AAAA;AAE1C;AAKP;AAOO;AAAO;AAEgC;AAIhD;AAGE;AAEA;AACE;AAGF;AACF;;;;;;;;;;;;;;;;;;;"}

package/dist/simples/tree-view.d.ts

@@ -0,0 +1,64 @@
+import { TreeView as ArkTreeView, createTreeCollection as arkCreateTreeCollection, TreeCollection as arkTreeCollection } from '@ark-ui/react/tree-view';
+import { default as React } from 'react';
+export declare const useTreeView: () => import('@ark-ui/react').UseTreeViewContext<any>;
+export interface TreeNodeType<T = unknown> {
+    children?: TreeNodeType<T>[] | undefined;
+    expandedIcon?: React.JSX.ElementType | null;
+    icon?: React.JSX.ElementType | null;
+    id: string;
+    name: string;
+}
+export declare const createTreeCollection: <T extends TreeNodeType>(options: Parameters<typeof arkCreateTreeCollection<T>>[0]) => arkTreeCollection<T>;
+export type TreeCollection = arkTreeCollection;
+interface TreeViewContextProps {
+    /**
+     * Custom extension icons
+     */
+    fileIcons?: Record<string, React.JSX.ElementType | null>;
+}
+interface TreeViewProps extends ArkTreeView.RootComponentProps, TreeViewContextProps {
+}
+export declare const TreeView: ArkTreeView.RootComponent<TreeViewProps>;
+export declare const TreeViewLabel: (props: React.ComponentProps<typeof ArkTreeView.Label>) => React.JSX.Element;
+export declare const TreeViewTree: (props: React.ComponentProps<typeof ArkTreeView.Tree>) => React.JSX.Element;
+export interface NodeProviderProps<T extends TreeNodeType = TreeNodeType> extends ArkTreeView.NodeProviderProps<T> {
+}
+export declare const TreeViewNode: <T extends TreeNodeType>(props: NodeProviderProps<T>) => React.JSX.Element;
+export declare const TreeViewBranch: ({ slot, ...rest }: React.ComponentProps<typeof ArkTreeView.Branch>) => React.JSX.Element;
+interface TreeViewBranchItemProps extends React.ComponentProps<typeof ArkTreeView.BranchControl>, Pick<TreeViewBranchTitleProps, "icon" | "expandedIcon"> {
+}
+export declare const TreeViewBranchItem: (props: TreeViewBranchItemProps) => React.JSX.Element;
+interface TreeViewBranchTitleProps extends React.ComponentProps<typeof ArkTreeView.BranchText> {
+    /**
+     * Custom expanded icon
+     *
+     * @default <FolderOpenIcon />
+     */
+    expandedIcon?: React.JSX.ElementType | null;
+    /**
+     * Custom icon
+     *
+     * @default <FolderIcon />
+     */
+    icon?: React.JSX.ElementType | null;
+}
+export declare const TreeViewBranchIndicator: (props: React.ComponentProps<typeof ArkTreeView.BranchIndicator>) => React.JSX.Element;
+export declare const TreeViewBranchContent: (props: React.ComponentProps<typeof ArkTreeView.BranchContent>) => React.JSX.Element;
+export declare const TreeViewContent: (props: React.ComponentProps<typeof ArkTreeView.Item>) => React.JSX.Element;
+interface TreeViewItemProps extends React.ComponentProps<typeof TreeViewItemTitle> {
+    /**
+     * Custom file icon
+     *
+     * @default <FileIcon />
+     */
+    icon?: React.JSX.ElementType;
+}
+export declare const TreeViewItem: (props: TreeViewItemProps) => React.JSX.Element;
+declare const TreeViewItemTitle: (props: React.ComponentProps<typeof ArkTreeView.ItemText>) => React.JSX.Element;
+export declare const TreeViewCheckbox: (props: React.ComponentProps<typeof ArkTreeView.NodeCheckbox>) => React.JSX.Element;
+type CreateFileIconsArgs = Record<`.${string}`, React.JSX.ElementType | null>;
+export declare const createFileIcons: (args: CreateFileIconsArgs) => {
+    [x: `.${string}`]: React.JSX.ElementType | null;
+};
+export {};
+//# sourceMappingURL=tree-view.d.ts.map

package/dist/simples/tree-view.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tree-view.d.ts","sourceRoot":"","sources":["../../src/simples/tree-view.tsx"],"names":[],"mappings":"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"}