@tpc-mare/mare-ui-components-react 0.1.4 → 0.1.7

package/dist/shared/Stepper-DApoMP1U.js

@@ -0,0 +1,110 @@
+import { jsxs as m, jsx as e, Fragment as g } from "react/jsx-runtime";
+import { Steps as a } from "@ark-ui/react/steps";
+import { b, e as k, f as v } from "./icons-bQxPPV8R.js";
+const y = "mare:flex mare:ark-horizontal:flex-col mare:ark-vertical:flex-row mare:gap-4 mare:w-full", N = `
+	mare:hidden mare:sm:flex mare:gap-2 mare:overflow-x-auto
+	mare:ark-horizontal:flex-row mare:ark-horizontal:items-center mare:ark-horizontal:justify-between
+	mare:ark-vertical:flex-col mare:ark-vertical:items-start
+`, w = "mare:relative mare:flex mare:items-center mare:ark-vertical:items-start mare:gap-3 mare:flex-1 mare:last:flex-none", j = `
+	mare:group mare:flex mare:items-center mare:gap-3 mare:bg-transparent mare:border-none
+	mare:text-left mare:cursor-pointer mare:rounded-md mare:outline-none
+	mare:disabled:cursor-not-allowed mare:disabled:opacity-50
+`, z = (t) => `
+	mare:group mare:flex mare:items-center mare:justify-center mare:shrink-0 mare:relative
+	mare:size-8 mare:rounded-full mare:tpc-typography-label-s
+	mare:ark-incomplete:bg-neutral-weak mare:ark-incomplete:text-weak
+	mare:ark-current:bg-accent mare:ark-current:text-on-accent
+	${t === "strong" ? "mare:ark-complete:bg-accent mare:ark-complete:text-on-accent" : "mare:ark-complete:bg-accent-weak mare:ark-complete:text-accent"}
+`, C = "mare:flex mare:items-center mare:justify-center mare:[&>svg]:size-4", S = "mare:flex mare:items-center mare:justify-center mare:group-[[data-complete]]:hidden", I = "mare:hidden mare:group-[[data-complete]]:flex mare:items-center mare:justify-center mare:absolute mare:inset-0 mare:[&>svg]:size-4", T = `
+	mare:flex-1 mare:h-[1.5px] mare:bg-neutral-weak mare:transition-colors mare:duration-300
+	mare:ark-complete:bg-accent
+	mare:ark-vertical:absolute mare:ark-vertical:flex-none mare:ark-vertical:w-[1.5px] mare:ark-vertical:h-auto
+	mare:ark-vertical:top-8 mare:ark-vertical:bottom-[-0.5rem] mare:ark-vertical:start-[calc(1rem-0.75px)]
+`, L = "mare:flex mare:flex-col mare:items-start mare:gap-0.5", R = "mare:tpc-typography-label-s mare:text-default mare:group-[[data-incomplete]]:text-weak", B = "mare:block mare:tpc-typography-body-xs mare:text-weak", F = `
+	mare:p-4 mare:min-h-24 mare:rounded-input mare:border mare:border-default
+	mare:bg-default mare:text-default mare:tpc-typography-body-s
+`, M = `
+	mare:flex mare:sm:hidden mare:items-center mare:justify-between mare:gap-3
+	mare:px-3 mare:py-2 mare:rounded-input mare:border mare:border-default mare:bg-default
+`, P = "mare:flex-1 mare:text-center mare:truncate mare:tpc-typography-body-s mare:text-default", c = `
+	mare:flex mare:items-center mare:justify-center mare:size-8 mare:rounded-full mare:text-default
+	mare:hover:bg-hover mare:disabled:opacity-40 mare:disabled:cursor-not-allowed mare:disabled:pointer-events-none
+`;
+function $({ items: t }) {
+  return /* @__PURE__ */ m("div", { className: M, children: [
+    /* @__PURE__ */ e(a.PrevTrigger, { className: c, children: /* @__PURE__ */ e(k, {}) }),
+    /* @__PURE__ */ e(a.Context, { children: (n) => /* @__PURE__ */ m("span", { className: P, children: [
+      t[n.value]?.title,
+      " · ",
+      n.value + 1,
+      "/",
+      n.count
+    ] }) }),
+    /* @__PURE__ */ e(a.NextTrigger, { className: c, children: /* @__PURE__ */ e(v, {}) })
+  ] });
+}
+function E({
+  items: t,
+  step: n,
+  defaultStep: o,
+  onStepChange: s,
+  onStepComplete: i,
+  linear: d = !1,
+  orientation: p = "horizontal",
+  indicatorVariant: u = "default",
+  isStepValid: f,
+  isStepSkippable: h
+}) {
+  const x = z(u);
+  return /* @__PURE__ */ m(
+    a.Root,
+    {
+      className: y,
+      count: t.length,
+      step: n,
+      defaultStep: o,
+      linear: d,
+      orientation: p,
+      isStepValid: f,
+      isStepSkippable: h,
+      onStepChange: (r) => s?.(r.step),
+      onStepComplete: i,
+      children: [
+        /* @__PURE__ */ e(a.List, { className: N, children: t.map((r, l) => /* @__PURE__ */ m(
+          a.Item,
+          {
+            index: l,
+            className: w,
+            children: [
+              /* @__PURE__ */ m(a.Trigger, { className: j, children: [
+                /* @__PURE__ */ e(a.Indicator, { className: x, children: r.icon ? /* @__PURE__ */ e("span", { className: C, children: r.icon }) : /* @__PURE__ */ m(g, { children: [
+                  /* @__PURE__ */ e("span", { className: I, children: /* @__PURE__ */ e(b, {}) }),
+                  /* @__PURE__ */ e("span", { className: S, children: l + 1 })
+                ] }) }),
+                /* @__PURE__ */ m("span", { className: L, children: [
+                  /* @__PURE__ */ e("span", { className: R, children: r.title }),
+                  r.description && /* @__PURE__ */ e("span", { className: B, children: r.description })
+                ] })
+              ] }),
+              /* @__PURE__ */ e(a.Separator, { className: T })
+            ]
+          },
+          l
+        )) }),
+        /* @__PURE__ */ e($, { items: t }),
+        t.map((r, l) => /* @__PURE__ */ e(
+          a.Content,
+          {
+            index: l,
+            className: F,
+            children: r.content
+          },
+          l
+        ))
+      ]
+    }
+  );
+}
+export {
+  E as S
+};

package/dist/shared/icons-bQxPPV8R.js

@@ -0,0 +1,55 @@
+import { jsx as s } from "react/jsx-runtime";
+const o = (c) => function(t) {
+  return /* @__PURE__ */ s(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      width: "1em",
+      height: "1em",
+      ...t,
+      children: c.map((n) => /* @__PURE__ */ s(
+        "path",
+        {
+          d: n
+        },
+        n
+      ))
+    }
+  );
+}, M = o(["M6 9l6 6 6-6"]), h = o(["M15 18l-6-6 6-6"]), l = o(["M9 18l6-6-6-6"]), i = o(["M11 17l-5-5 5-5", "M18 17l-5-5 5-5"]), I = o(["M6 17l5-5-5-5", "M13 17l5-5-5-5"]), v = o(["M5 12l5 5L20 7"]), C = o([
+  "M8 2v4M16 2v4",
+  "M3 8h18",
+  "M4 4h16a1 1 0 0 1 1 1v15a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1z"
+]), e = o(["M6 6l12 12", "M18 6L6 18"]), d = e, f = o([
+  "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z",
+  "M15 12a3 3 0 1 1-6 0 3 3 0 1 1 6 0z"
+]), g = o([
+  "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z",
+  "M15 12a3 3 0 1 1-6 0 3 3 0 1 1 6 0z",
+  "M3 3l18 18"
+]), u = o(["M5 12h14"]), w = o([
+  "M10 3a7 7 0 1 0 0 14 7 7 0 0 0 0-14z",
+  "M20 20l-5-5"
+]);
+export {
+  M as C,
+  f as E,
+  u as M,
+  w as S,
+  d as a,
+  v as b,
+  e as c,
+  i as d,
+  h as e,
+  l as f,
+  I as g,
+  g as h,
+  C as i
+};

package/dist/shared/icons.d.ts

@@ -1,7 +1,15 @@
 import { SVGProps } from 'react';
 export declare const ChevronDownIcon: (properties: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
+export declare const ChevronUpIcon: (properties: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
+export declare const ChevronLeftIcon: (properties: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
+export declare const ChevronRightIcon: (properties: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
+export declare const ChevronsLeftIcon: (properties: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
+export declare const ChevronsRightIcon: (properties: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
 export declare const CheckIcon: (properties: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
+export declare const CalendarIcon: (properties: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
 export declare const ClearIcon: (properties: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
 export declare const CloseIcon: (properties: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
+export declare const EyeIcon: (properties: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
+export declare const EyeOffIcon: (properties: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
 export declare const MinusIcon: (properties: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
 export declare const SearchIcon: (properties: SVGProps<SVGSVGElement>) => import("react").JSX.Element;

package/dist/shared/useMediaQuery.d.ts

@@ -0,0 +1,5 @@
+/** Tiny `matchMedia` subscription — no dependency, mirrors the Vue DS's
+ * useScreenWidth for the one thing components here actually need: whether
+ * we're at/above Tailwind's default `sm` breakpoint (640px). */
+export declare function useMediaQuery(query: string): boolean;
+export declare const SM_BREAKPOINT_QUERY = "(min-width: 640px)";

package/dist/snackbar/Snackbar.d.ts

@@ -0,0 +1,3 @@
+import { SnackbarController, SnackbarConfig, SnackbarProperties } from './Snackbar.types';
+export declare function createSnackbar(config?: SnackbarConfig): SnackbarController;
+export declare function Snackbar({ controller, portalContainer }: SnackbarProperties): import("react").JSX.Element;

package/dist/snackbar/Snackbar.types.d.ts

@@ -0,0 +1,42 @@
+import { ReactNode, RefObject } from 'react';
+import { SnackbarSeverity, SnackbarPlacement } from '@tpc-development/mare-ui-components-core/snackbar';
+export type { SnackbarSeverity, SnackbarPlacement, } from '@tpc-development/mare-ui-components-core/snackbar';
+/** The payload for `controller.show()`/`.update()`. Framework-shaped on
+ * purpose (ReactNode `detail`/`leading`) — this is why it lives in the
+ * adapter, not in core alongside `SnackbarSeverity`/`SnackbarPlacement`. */
+export interface SnackbarShowOptions {
+    /** @default 'contrast' */
+    severity?: SnackbarSeverity;
+    detail: ReactNode;
+    /** Icon or image shown before the detail text. Mutually exclusive with
+     * nothing in particular — it's just whatever `ReactNode` you pass. */
+    leading?: ReactNode;
+    /** @default 3000, and never resolves lower than that. */
+    life?: number;
+    /** Progress bar filling over `life`, indicating time until auto-dismiss. @default false */
+    progressBar?: boolean;
+    action?: {
+        label: string;
+        onClick: () => void;
+    };
+}
+/** Returned by `createSnackbar()`. Mirrors the legacy `useToast()` service —
+ * mount ONE `<Snackbar controller={controller} />` per controller, then push
+ * messages into it from anywhere via `controller.show(...)`. */
+export interface SnackbarController {
+    /** Pushes a new message, returns its id. */
+    show(options: SnackbarShowOptions): string;
+    /** Dismisses one message by id, or every message in this controller if omitted. */
+    dismiss(id?: string): void;
+    update(id: string, options: Partial<SnackbarShowOptions>): void;
+}
+export interface SnackbarConfig {
+    /** @default 'bottom-center' */
+    placement?: SnackbarPlacement;
+}
+export interface SnackbarProperties {
+    controller: SnackbarController;
+    /** Where the toast stack portals to. Override if your app scopes
+     * `data-theme` to a sub-tree rather than the document root. */
+    portalContainer?: RefObject<HTMLElement | null>;
+}

package/dist/snackbar/index.d.ts

@@ -0,0 +1,2 @@
+export { Snackbar, createSnackbar } from './Snackbar';
+export type { SnackbarProperties, SnackbarController, SnackbarConfig, SnackbarShowOptions, SnackbarSeverity, SnackbarPlacement, } from './Snackbar.types';

package/dist/snackbar/index.js

@@ -0,0 +1,5 @@
+import { S as c, c as e } from "../shared/Snackbar-C29nLHO9.js";
+export {
+  c as Snackbar,
+  e as createSnackbar
+};

package/dist/stepper/Stepper.d.ts

@@ -0,0 +1,2 @@
+import { StepperProperties } from './Stepper.types';
+export declare function Stepper({ items, step, defaultStep, onStepChange, onStepComplete, linear, orientation, indicatorVariant, isStepValid, isStepSkippable, }: StepperProperties): import("react").JSX.Element;

package/dist/stepper/Stepper.types.d.ts

@@ -0,0 +1,18 @@
+import { StepItemData, StepperOrientation, StepperIndicatorVariant } from '@tpc-development/mare-ui-components-core/stepper';
+export type { StepItemData, StepperOrientation, StepperIndicatorVariant, } from '@tpc-development/mare-ui-components-core/stepper';
+export interface StepperProperties {
+    items: StepItemData[];
+    /** Controlled current step index (0-based). Omit to let Ark manage it. */
+    step?: number;
+    defaultStep?: number;
+    onStepChange?: (step: number) => void;
+    onStepComplete?: () => void;
+    /** Requires steps to be completed in order — blocks jumping ahead. */
+    linear?: boolean;
+    orientation?: StepperOrientation;
+    /** 'default': completed steps stay weak-accent. 'strong': completed steps
+     * get the same full-accent treatment as the current one. */
+    indicatorVariant?: StepperIndicatorVariant;
+    isStepValid?: (index: number) => boolean;
+    isStepSkippable?: (index: number) => boolean;
+}

package/dist/stepper/index.d.ts

@@ -0,0 +1,2 @@
+export { Stepper } from './Stepper';
+export type { StepperProperties, StepItemData, StepperOrientation, StepperIndicatorVariant, } from './Stepper.types';

package/dist/stepper/index.js

@@ -0,0 +1,4 @@
+import { S as r } from "../shared/Stepper-DApoMP1U.js";
+export {
+  r as Stepper
+};