@pihanga2/shadcn 0.2.0 → 0.2.2

package/cards/toggleGroup/toggleGroup.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"toggleGroup.types.js","names":[],"sources":["../../../src/cards/toggleGroup/toggleGroup.types.ts"],"sourcesContent":["import {\n  createCardDeclaration,\n  createOnAction,\n  registerActions,\n} from \"@pihanga2/core\";\n\nexport const PI_TOGGLE_GROUP_CARD = \"pi/toggle-group\";\n\nexport const ToggleGroup = createCardDeclaration<\n  PiToggleGroupProps,\n  PiToggleGroupEvents\n>(PI_TOGGLE_GROUP_CARD);\n\nexport const PI_TOGGLE_GROUP_ACTION = registerActions(PI_TOGGLE_GROUP_CARD, [\n  \"changed\",\n]);\n\nexport const onPiToggleGroupChanged = createOnAction<PiToggleGroupChangedEvent>(\n  PI_TOGGLE_GROUP_ACTION.CHANGED,\n);\n\n// ---------------------------------------------------------------------------\n// Item type\n// ---------------------------------------------------------------------------\n\nexport type PiToggleGroupItem = {\n  /** The value associated with this toggle item. */\n  value: string;\n  /** Human-readable label rendered inside the toggle button. */\n  label: string;\n  /** When true, this individual item is disabled. */\n  disabled?: boolean;\n};\n\n// ---------------------------------------------------------------------------\n// Props & Events\n// ---------------------------------------------------------------------------\n\nexport type PiToggleGroupProps = {\n  /**\n   * Field name used to bind to FormContext when inside a pi/form card.\n   * When provided the component reads its selected value from form data and\n   * writes back via form.handleChange.\n   */\n  name?: string;\n\n  /**\n   * The list of toggle items to display.\n   */\n  items: PiToggleGroupItem[];\n\n  /**\n   * Selection mode.\n   * - `\"single\"` — at most one item can be active at a time.\n   * - `\"multiple\"` — any number of items can be active simultaneously.\n   *\n   * @default \"single\"\n   */\n  type?: \"single\" | \"multiple\";\n\n  /**\n   * Controlled selected value(s).\n   * - In `\"single\"` mode: a `string` (or `undefined` for nothing selected).\n   * - In `\"multiple\"` mode: an array of `string`.\n   *\n   * Ignored when `name` is set and the component is inside a pi/form.\n   * Also ignored when `selfManaged` is `true`.\n   */\n  value?: string | string[];\n\n  /**\n   * When `true`, the component manages its own selection state internally\n   * using `React.useState`.  The `value` prop is used only as the initial\n   * value (i.e. `defaultValue`) and subsequent changes do not require an\n   * external state update.  `onChanged` is still fired so callers can\n   * observe changes without owning the state.\n   *\n   * Has no effect when inside a pi/form (form context always takes\n   * precedence).\n   *\n   * @default false\n   */\n  selfManaged?: boolean;\n\n  /**\n   * Visual style variant of the toggle buttons.\n   * - `\"default\"` — transparent background, highlights on active.\n   * - `\"outline\"` — bordered buttons, grouped or spaced.\n   *\n   * @default \"default\"\n   */\n  variant?: \"default\" | \"outline\";\n\n  /**\n   * Size of each toggle button.\n   * @default \"default\"\n   */\n  size?: \"default\" | \"sm\" | \"lg\";\n\n  /**\n   * Gap between toggle buttons (in Tailwind spacing units).\n   * `0` = buttons are joined (no gap, rounded ends only).\n   * Positive values add space between each button.\n   *\n   * @default 0\n   */\n  spacing?: number;\n\n  /** When true, the entire group is disabled and non-interactive. */\n  disabled?: boolean;\n\n  /** Extra Tailwind / CSS classes forwarded to the root element. */\n  className?: string;\n};\n\nexport type PiToggleGroupChangedEvent = {\n  /** Field name, mirrors the `name` prop if provided. */\n  name?: string;\n  /**\n   * New selected value(s).\n   * - In `\"single\"` mode: a `string` (empty string when nothing selected).\n   * - In `\"multiple\"` mode: an array of `string`.\n   */\n  value: string | string[];\n};\n\nexport type PiToggleGroupEvents = {\n  onChanged: PiToggleGroupChangedEvent;\n};\n"],"mappings":";;AAMA,IAAa,IAAuB,mBAEvB,IAAc,EAGzB,CAAoB,GAET,IAAyB,EAAgB,GAAsB,CAC1E,SACF,CAAC,GAEY,IAAyB,EACpC,EAAuB,OACzB"}
+{"version":3,"file":"toggleGroup.types.js","names":[],"sources":["../../../src/cards/toggleGroup/toggleGroup.types.ts"],"sourcesContent":["import {\n  createCardDeclaration,\n  createOnAction,\n  registerActions,\n} from \"@pihanga2/core\";\n\nexport const PI_TOGGLE_GROUP_CARD = \"pi/toggle-group\";\n\nexport const ToggleGroup = createCardDeclaration<\n  PiToggleGroupProps,\n  PiToggleGroupEvents\n>(PI_TOGGLE_GROUP_CARD);\n\nexport const PI_TOGGLE_GROUP_ACTION = registerActions(PI_TOGGLE_GROUP_CARD, [\n  \"changed\",\n]);\n\nexport const onToggleGroupChanged = createOnAction<PiToggleGroupChangedEvent>(\n  PI_TOGGLE_GROUP_ACTION.CHANGED,\n);\n\n/** @deprecated Use `onToggleGroupChanged` instead. */\nexport const onPiToggleGroupChanged = onToggleGroupChanged;\n\n// ---------------------------------------------------------------------------\n// Item type\n// ---------------------------------------------------------------------------\n\nexport type PiToggleGroupItem = {\n  /** The value associated with this toggle item. */\n  value: string;\n  /** Human-readable label rendered inside the toggle button. */\n  label: string;\n  /** When true, this individual item is disabled. */\n  disabled?: boolean;\n};\n\n// ---------------------------------------------------------------------------\n// Props & Events\n// ---------------------------------------------------------------------------\n\nexport type PiToggleGroupProps = {\n  /**\n   * Field name used to bind to FormContext when inside a pi/form card.\n   * When provided the component reads its selected value from form data and\n   * writes back via form.handleChange.\n   */\n  name?: string;\n\n  /**\n   * The list of toggle items to display.\n   */\n  items: PiToggleGroupItem[];\n\n  /**\n   * Selection mode.\n   * - `\"single\"` — at most one item can be active at a time.\n   * - `\"multiple\"` — any number of items can be active simultaneously.\n   *\n   * @default \"single\"\n   */\n  type?: \"single\" | \"multiple\";\n\n  /**\n   * Controlled selected value(s).\n   * - In `\"single\"` mode: a `string` (or `undefined` for nothing selected).\n   * - In `\"multiple\"` mode: an array of `string`.\n   *\n   * Ignored when `name` is set and the component is inside a pi/form.\n   * Also ignored when `selfManaged` is `true`.\n   */\n  value?: string | string[];\n\n  /**\n   * When `true`, the component manages its own selection state internally\n   * using `React.useState`.  The `value` prop is used only as the initial\n   * value (i.e. `defaultValue`) and subsequent changes do not require an\n   * external state update.  `onChanged` is still fired so callers can\n   * observe changes without owning the state.\n   *\n   * Has no effect when inside a pi/form (form context always takes\n   * precedence).\n   *\n   * @default false\n   */\n  selfManaged?: boolean;\n\n  /**\n   * Visual style variant of the toggle buttons.\n   * - `\"default\"` — transparent background, highlights on active.\n   * - `\"outline\"` — bordered buttons, grouped or spaced.\n   *\n   * @default \"default\"\n   */\n  variant?: \"default\" | \"outline\";\n\n  /**\n   * Size of each toggle button.\n   * @default \"default\"\n   */\n  size?: \"default\" | \"sm\" | \"lg\";\n\n  /**\n   * Gap between toggle buttons (in Tailwind spacing units).\n   * `0` = buttons are joined (no gap, rounded ends only).\n   * Positive values add space between each button.\n   *\n   * @default 0\n   */\n  spacing?: number;\n\n  /** When true, the entire group is disabled and non-interactive. */\n  disabled?: boolean;\n\n  /** Extra Tailwind / CSS classes forwarded to the root element. */\n  className?: string;\n};\n\nexport type PiToggleGroupChangedEvent = {\n  /** Field name, mirrors the `name` prop if provided. */\n  name?: string;\n  /**\n   * New selected value(s).\n   * - In `\"single\"` mode: a `string` (empty string when nothing selected).\n   * - In `\"multiple\"` mode: an array of `string`.\n   */\n  value: string | string[];\n};\n\nexport type PiToggleGroupEvents = {\n  onChanged: PiToggleGroupChangedEvent;\n};\n"],"mappings":";;AAMA,IAAa,IAAuB,mBAEvB,IAAc,EAGzB,CAAoB,GAET,IAAyB,EAAgB,GAAsB,CAC1E,SACF,CAAC,GAEY,IAAuB,EAClC,EAAuB,OACzB,GAGa,IAAyB"}

package/cards/typography/typography.types.js

@@ -1,4 +1,5 @@
 import { createCardDeclaration as e } from "@pihanga2/core";
+import "react";
 //#region src/cards/typography/typography.types.ts
 var t = "shad/typography", n = e(t);
 //#endregion

package/cards/typography/typography.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"typography.types.js","names":[],"sources":["../../../src/cards/typography/typography.types.ts"],"sourcesContent":["import * as React from \"react\";\nimport {PiCardRef, createCardDeclaration} from \"@pihanga2/core\";\n\nexport const TYPOGRAPHY_CARD = \"shad/typography\";\n\nexport const Typography =\n  createCardDeclaration<TypographyProps>(TYPOGRAPHY_CARD);\n\n/**\n * Semantic level controls both the rendered HTML element and default\n * Tailwind prose styling (following shadcn/ui typography conventions).\n */\nexport type TypographyLevel =\n  | \"h1\"\n  | \"h2\"\n  | \"h3\"\n  | \"h4\"\n  | \"p\"\n  | \"blockquote\"\n  | \"code\"\n  | \"lead\" // large muted intro paragraph\n  | \"large\" // large text, semibold\n  | \"small\" // small, medium-weight\n  | \"muted\"; // small, muted-foreground\n\nexport type TypographyProps = {\n  /** Plain text content. */\n  text?: string;\n  /** A child card rendered as content. */\n  childCard?: PiCardRef;\n  /** Inline paragraph: mix of literal strings and nested TypographyProps. */\n  paragraph?: (string | TypographyProps)[];\n\n  /** Semantic level — controls the HTML element and default prose styling. */\n  level?: TypographyLevel;\n\n  /** Additional CSS classes applied directly to the element. */\n  className?: string;\n  /** Inline styles applied directly to the element. */\n  style?: React.CSSProperties;\n};\n"],"mappings":";;AAGA,IAAa,IAAkB,mBAElB,IACX,EAAuC,CAAe"}
+{"version":3,"file":"typography.types.js","names":[],"sources":["../../../src/cards/typography/typography.types.ts"],"sourcesContent":["import * as React from \"react\";\nimport {type PiCardRef, createCardDeclaration} from \"@pihanga2/core\";\n\nexport const TYPOGRAPHY_CARD = \"shad/typography\";\n\nexport const Typography =\n  createCardDeclaration<TypographyProps>(TYPOGRAPHY_CARD);\n\n/**\n * Semantic level controls both the rendered HTML element and default\n * Tailwind prose styling (following shadcn/ui typography conventions).\n */\nexport type TypographyLevel =\n  | \"h1\"\n  | \"h2\"\n  | \"h3\"\n  | \"h4\"\n  | \"p\"\n  | \"blockquote\"\n  | \"code\"\n  | \"lead\" // large muted intro paragraph\n  | \"large\" // large text, semibold\n  | \"small\" // small, medium-weight\n  | \"muted\"; // small, muted-foreground\n\nexport type TypographyProps = {\n  /** Plain text content. */\n  text?: string;\n  /** A child card rendered as content. */\n  childCard?: PiCardRef;\n  /** Inline paragraph: mix of literal strings and nested TypographyProps. */\n  paragraph?: (string | TypographyProps)[];\n\n  /** Semantic level — controls the HTML element and default prose styling. */\n  level?: TypographyLevel;\n\n  /** Additional CSS classes applied directly to the element. */\n  className?: string;\n  /** Inline styles applied directly to the element. */\n  style?: React.CSSProperties;\n};\n"],"mappings":";;;AAGA,IAAa,IAAkB,mBAElB,IACX,EAAuC,CAAe"}

package/components/hooks/use-breakpoint.d.ts

@@ -0,0 +1,49 @@
+import * as React from "react";
+/**
+ * Convert a user-supplied breakpoint selector string into a CSS media-query
+ * string suitable for `window.matchMedia`.
+ *
+ * Supported selector formats
+ * ──────────────────────────
+ *  Named (Tailwind)  │ `sm`  `md`  `lg`  `xl`  `2xl`
+ *  Min-width         │ `640px`   `>=640px`
+ *  Exclusive min     │ `>640px`  (≡ min-width: 641px)
+ *  Max-width         │ `<=1024px`
+ *  Exclusive max     │ `<1024px` (≡ max-width: 1023px)
+ */
+export declare function selectorToMediaQuery(selector: string): string;
+/**
+ * Convert a breakpoint selector string into a predicate that tests a pixel
+ * width directly.  Used by `useContainerBreakpoint` to evaluate the selector
+ * against an element's `contentRect.width` rather than the viewport.
+ *
+ * Returns `() => true` for unrecognised selectors (fail-open).
+ */
+export declare function selectorToWidthTest(selector: string): (width: number) => boolean;
+/**
+ * Returns `true` when the **viewport** matches the given breakpoint selector,
+ * and reactively updates on resize via `window.matchMedia`.
+ *
+ * When `selector` is `undefined` the hook always returns `true` (no restriction).
+ *
+ * @param selector  A breakpoint name (`sm` | `md` | `lg` | `xl` | `2xl`),
+ *                  a pixel expression (`>400px`, `>=640px`, `<768px`,
+ *                  `<=1024px`, `400px`), or `undefined`.
+ */
+export declare function useBreakpoint(selector: string | undefined): boolean;
+/**
+ * Returns `true` when the width of the element referenced by `ref` matches
+ * the given breakpoint selector.  Uses `ResizeObserver` so it reacts to
+ * any layout change — not just window resize.
+ *
+ * When `selector` is `undefined` the hook always returns `true`.
+ *
+ * **Note:** The caller must attach `ref` to a DOM element.  A thin wrapper
+ * `<div ref={ref} style={{ width: "100%" }}>` whose width equals its parent's
+ * content width is the canonical usage pattern, allowing the breakpoint to be
+ * evaluated against the **enclosing container** rather than the viewport.
+ *
+ * @param selector  Same format as {@link useBreakpoint}.
+ * @param ref       A React ref attached to the element whose width is measured.
+ */
+export declare function useContainerBreakpoint(selector: string | undefined, ref: React.RefObject<HTMLElement | null>): boolean;

package/components/hooks/use-breakpoint.js

@@ -0,0 +1,73 @@
+"use client";
+import * as e from "react";
+//#region src/components/hooks/use-breakpoint.ts
+var t = {
+	sm: 640,
+	md: 768,
+	lg: 1024,
+	xl: 1280,
+	"2xl": 1536
+};
+function n(e) {
+	return t[e] ? `(min-width: ${t[e]}px)` : /^>=\d+(\.\d+)?px$/.test(e) ? `(min-width: ${e.slice(2)})` : /^>\d+(\.\d+)?px$/.test(e) ? `(min-width: ${parseFloat(e.slice(1)) + 1}px)` : /^<=\d+(\.\d+)?px$/.test(e) ? `(max-width: ${e.slice(2)})` : /^<\d+(\.\d+)?px$/.test(e) ? `(max-width: ${parseFloat(e.slice(1)) - 1}px)` : /^\d+(\.\d+)?px$/.test(e) ? `(min-width: ${e})` : e;
+}
+function r(e) {
+	if (t[e]) {
+		let n = t[e];
+		return (e) => e >= n;
+	}
+	if (/^>=\d+(\.\d+)?px$/.test(e)) {
+		let t = parseFloat(e.slice(2));
+		return (e) => e >= t;
+	}
+	if (/^>\d+(\.\d+)?px$/.test(e)) {
+		let t = parseFloat(e.slice(1));
+		return (e) => e > t;
+	}
+	if (/^<=\d+(\.\d+)?px$/.test(e)) {
+		let t = parseFloat(e.slice(2));
+		return (e) => e <= t;
+	}
+	if (/^<\d+(\.\d+)?px$/.test(e)) {
+		let t = parseFloat(e.slice(1));
+		return (e) => e < t;
+	}
+	if (/^\d+(\.\d+)?px$/.test(e)) {
+		let t = parseFloat(e);
+		return (e) => e >= t;
+	}
+	return () => !0;
+}
+function i(t) {
+	let r = e.useMemo(() => t ? n(t) : null, [t]), [i, a] = e.useState(() => !r || typeof window > "u" ? !0 : window.matchMedia(r).matches);
+	return e.useEffect(() => {
+		if (!r) {
+			a(!0);
+			return;
+		}
+		let e = window.matchMedia(r);
+		a(e.matches);
+		let t = (e) => a(e.matches);
+		return e.addEventListener ? (e.addEventListener("change", t), () => e.removeEventListener("change", t)) : (e.addListener(t), () => e.removeListener(t));
+	}, [r]), i;
+}
+function a(t, n) {
+	let i = e.useMemo(() => t ? r(t) : null, [t]), [a, o] = e.useState(!0);
+	return e.useEffect(() => {
+		if (!i) {
+			o(!0);
+			return;
+		}
+		let e = n.current;
+		if (!e) return;
+		o(i(e.getBoundingClientRect().width));
+		let t = new ResizeObserver((e) => {
+			for (let t of e) o(i(t.contentBoxSize?.[0]?.inlineSize ?? t.contentRect.width));
+		});
+		return t.observe(e), () => t.disconnect();
+	}, [i, n]), a;
+}
+//#endregion
+export { i as useBreakpoint, a as useContainerBreakpoint };
+
+//# sourceMappingURL=use-breakpoint.js.map

package/components/hooks/use-breakpoint.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-breakpoint.js","names":[],"sources":["../../../src/components/hooks/use-breakpoint.ts"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\n\n// ── Named breakpoints ─────────────────────────────────────────────────────────\n\n/** Named Tailwind-compatible breakpoints → pixel values. */\nconst NAMED_PX: Record<string, number> = {\n  sm: 640,\n  md: 768,\n  lg: 1024,\n  xl: 1280,\n  \"2xl\": 1536,\n};\n\n// ── Selector parsers ──────────────────────────────────────────────────────────\n\n/**\n * Convert a user-supplied breakpoint selector string into a CSS media-query\n * string suitable for `window.matchMedia`.\n *\n * Supported selector formats\n * ──────────────────────────\n *  Named (Tailwind)  │ `sm`  `md`  `lg`  `xl`  `2xl`\n *  Min-width         │ `640px`   `>=640px`\n *  Exclusive min     │ `>640px`  (≡ min-width: 641px)\n *  Max-width         │ `<=1024px`\n *  Exclusive max     │ `<1024px` (≡ max-width: 1023px)\n */\nexport function selectorToMediaQuery(selector: string): string {\n  if (NAMED_PX[selector]) return `(min-width: ${NAMED_PX[selector]}px)`;\n\n  if (/^>=\\d+(\\.\\d+)?px$/.test(selector))\n    return `(min-width: ${selector.slice(2)})`;\n\n  if (/^>\\d+(\\.\\d+)?px$/.test(selector)) {\n    const px = parseFloat(selector.slice(1));\n    return `(min-width: ${px + 1}px)`;\n  }\n\n  if (/^<=\\d+(\\.\\d+)?px$/.test(selector))\n    return `(max-width: ${selector.slice(2)})`;\n\n  if (/^<\\d+(\\.\\d+)?px$/.test(selector)) {\n    const px = parseFloat(selector.slice(1));\n    return `(max-width: ${px - 1}px)`;\n  }\n\n  if (/^\\d+(\\.\\d+)?px$/.test(selector)) return `(min-width: ${selector})`;\n\n  // Fallback: treat as a raw CSS media feature\n  return selector;\n}\n\n/**\n * Convert a breakpoint selector string into a predicate that tests a pixel\n * width directly.  Used by `useContainerBreakpoint` to evaluate the selector\n * against an element's `contentRect.width` rather than the viewport.\n *\n * Returns `() => true` for unrecognised selectors (fail-open).\n */\nexport function selectorToWidthTest(\n  selector: string,\n): (width: number) => boolean {\n  // Named Tailwind breakpoints → min-width\n  if (NAMED_PX[selector]) {\n    const threshold = NAMED_PX[selector];\n    return (w) => w >= threshold;\n  }\n\n  // >=Npx\n  if (/^>=\\d+(\\.\\d+)?px$/.test(selector)) {\n    const px = parseFloat(selector.slice(2));\n    return (w) => w >= px;\n  }\n\n  // >Npx\n  if (/^>\\d+(\\.\\d+)?px$/.test(selector)) {\n    const px = parseFloat(selector.slice(1));\n    return (w) => w > px;\n  }\n\n  // <=Npx\n  if (/^<=\\d+(\\.\\d+)?px$/.test(selector)) {\n    const px = parseFloat(selector.slice(2));\n    return (w) => w <= px;\n  }\n\n  // <Npx\n  if (/^<\\d+(\\.\\d+)?px$/.test(selector)) {\n    const px = parseFloat(selector.slice(1));\n    return (w) => w < px;\n  }\n\n  // Bare Npx  →  min-width\n  if (/^\\d+(\\.\\d+)?px$/.test(selector)) {\n    const px = parseFloat(selector);\n    return (w) => w >= px;\n  }\n\n  // Unrecognised → always visible\n  return () => true;\n}\n\n// ── Hooks ─────────────────────────────────────────────────────────────────────\n\n/**\n * Returns `true` when the **viewport** matches the given breakpoint selector,\n * and reactively updates on resize via `window.matchMedia`.\n *\n * When `selector` is `undefined` the hook always returns `true` (no restriction).\n *\n * @param selector  A breakpoint name (`sm` | `md` | `lg` | `xl` | `2xl`),\n *                  a pixel expression (`>400px`, `>=640px`, `<768px`,\n *                  `<=1024px`, `400px`), or `undefined`.\n */\nexport function useBreakpoint(selector: string | undefined): boolean {\n  const mediaQuery = React.useMemo(\n    () => (selector ? selectorToMediaQuery(selector) : null),\n    [selector],\n  );\n\n  const [matches, setMatches] = React.useState<boolean>(() => {\n    if (!mediaQuery || typeof window === \"undefined\") return true;\n    return window.matchMedia(mediaQuery).matches;\n  });\n\n  React.useEffect(() => {\n    if (!mediaQuery) {\n      setMatches(true);\n      return;\n    }\n\n    const mql = window.matchMedia(mediaQuery);\n    setMatches(mql.matches);\n\n    const handler = (e: MediaQueryListEvent) => setMatches(e.matches);\n    if (mql.addEventListener) {\n      mql.addEventListener(\"change\", handler);\n      return () => mql.removeEventListener(\"change\", handler);\n    } else {\n      mql.addListener(handler);\n      return () => mql.removeListener(handler);\n    }\n  }, [mediaQuery]);\n\n  return matches;\n}\n\n/**\n * Returns `true` when the width of the element referenced by `ref` matches\n * the given breakpoint selector.  Uses `ResizeObserver` so it reacts to\n * any layout change — not just window resize.\n *\n * When `selector` is `undefined` the hook always returns `true`.\n *\n * **Note:** The caller must attach `ref` to a DOM element.  A thin wrapper\n * `<div ref={ref} style={{ width: \"100%\" }}>` whose width equals its parent's\n * content width is the canonical usage pattern, allowing the breakpoint to be\n * evaluated against the **enclosing container** rather than the viewport.\n *\n * @param selector  Same format as {@link useBreakpoint}.\n * @param ref       A React ref attached to the element whose width is measured.\n */\nexport function useContainerBreakpoint(\n  selector: string | undefined,\n  ref: React.RefObject<HTMLElement | null>,\n): boolean {\n  // Build the width-test predicate once per selector change.\n  const test = React.useMemo(\n    () => (selector ? selectorToWidthTest(selector) : null),\n    [selector],\n  );\n\n  // Default to `true` (optimistic / SSR-safe) until the observer fires.\n  const [matches, setMatches] = React.useState(true);\n\n  React.useEffect(() => {\n    if (!test) {\n      setMatches(true);\n      return;\n    }\n\n    const el = ref.current;\n    if (!el) return;\n\n    // Run immediately so the first render is correct.\n    setMatches(test(el.getBoundingClientRect().width));\n\n    const observer = new ResizeObserver((entries) => {\n      for (const entry of entries) {\n        // `contentBoxSize` is the standard; fall back to `contentRect` for\n        // older Safari.\n        const width =\n          entry.contentBoxSize?.[0]?.inlineSize ?? entry.contentRect.width;\n        setMatches(test(width));\n      }\n    });\n\n    observer.observe(el);\n    return () => observer.disconnect();\n  }, [test, ref]);\n\n  return matches;\n}\n"],"mappings":";;;AAOA,IAAM,IAAmC;CACvC,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,OAAO;AACT;AAgBA,SAAgB,EAAqB,GAA0B;CAsB7D,OArBI,EAAS,KAAkB,eAAe,EAAS,GAAU,OAE7D,oBAAoB,KAAK,CAAQ,IAC5B,eAAe,EAAS,MAAM,CAAC,EAAE,KAEtC,mBAAmB,KAAK,CAAQ,IAE3B,eADI,WAAW,EAAS,MAAM,CAAC,CAChB,IAAK,EAAE,OAG3B,oBAAoB,KAAK,CAAQ,IAC5B,eAAe,EAAS,MAAM,CAAC,EAAE,KAEtC,mBAAmB,KAAK,CAAQ,IAE3B,eADI,WAAW,EAAS,MAAM,CAAC,CAChB,IAAK,EAAE,OAG3B,kBAAkB,KAAK,CAAQ,IAAU,eAAe,EAAS,KAG9D;AACT;AASA,SAAgB,EACd,GAC4B;CAE5B,IAAI,EAAS,IAAW;EACtB,IAAM,IAAY,EAAS;EAC3B,QAAQ,MAAM,KAAK;CACrB;CAGA,IAAI,oBAAoB,KAAK,CAAQ,GAAG;EACtC,IAAM,IAAK,WAAW,EAAS,MAAM,CAAC,CAAC;EACvC,QAAQ,MAAM,KAAK;CACrB;CAGA,IAAI,mBAAmB,KAAK,CAAQ,GAAG;EACrC,IAAM,IAAK,WAAW,EAAS,MAAM,CAAC,CAAC;EACvC,QAAQ,MAAM,IAAI;CACpB;CAGA,IAAI,oBAAoB,KAAK,CAAQ,GAAG;EACtC,IAAM,IAAK,WAAW,EAAS,MAAM,CAAC,CAAC;EACvC,QAAQ,MAAM,KAAK;CACrB;CAGA,IAAI,mBAAmB,KAAK,CAAQ,GAAG;EACrC,IAAM,IAAK,WAAW,EAAS,MAAM,CAAC,CAAC;EACvC,QAAQ,MAAM,IAAI;CACpB;CAGA,IAAI,kBAAkB,KAAK,CAAQ,GAAG;EACpC,IAAM,IAAK,WAAW,CAAQ;EAC9B,QAAQ,MAAM,KAAK;CACrB;CAGA,aAAa;AACf;AAcA,SAAgB,EAAc,GAAuC;CACnE,IAAM,IAAa,EAAM,cAChB,IAAW,EAAqB,CAAQ,IAAI,MACnD,CAAC,CAAQ,CACX,GAEM,CAAC,GAAS,KAAc,EAAM,eAC9B,CAAC,KAAc,OAAO,SAAW,MAAoB,KAClD,OAAO,WAAW,CAAU,EAAE,OACtC;CAqBD,OAnBA,EAAM,gBAAgB;EACpB,IAAI,CAAC,GAAY;GACf,EAAW,EAAI;GACf;EACF;EAEA,IAAM,IAAM,OAAO,WAAW,CAAU;EACxC,EAAW,EAAI,OAAO;EAEtB,IAAM,KAAW,MAA2B,EAAW,EAAE,OAAO;EAM9D,OALE,EAAI,oBACN,EAAI,iBAAiB,UAAU,CAAO,SACzB,EAAI,oBAAoB,UAAU,CAAO,MAEtD,EAAI,YAAY,CAAO,SACV,EAAI,eAAe,CAAO;CAE3C,GAAG,CAAC,CAAU,CAAC,GAER;AACT;AAiBA,SAAgB,EACd,GACA,GACS;CAET,IAAM,IAAO,EAAM,cACV,IAAW,EAAoB,CAAQ,IAAI,MAClD,CAAC,CAAQ,CACX,GAGM,CAAC,GAAS,KAAc,EAAM,SAAS,EAAI;CA4BjD,OA1BA,EAAM,gBAAgB;EACpB,IAAI,CAAC,GAAM;GACT,EAAW,EAAI;GACf;EACF;EAEA,IAAM,IAAK,EAAI;EACf,IAAI,CAAC,GAAI;EAGT,EAAW,EAAK,EAAG,sBAAsB,EAAE,KAAK,CAAC;EAEjD,IAAM,IAAW,IAAI,gBAAgB,MAAY;GAC/C,KAAK,IAAM,KAAS,GAKlB,EAAW,EADT,EAAM,iBAAiB,IAAI,cAAc,EAAM,YAAY,KACxC,CAAC;EAE1B,CAAC;EAGD,OADA,EAAS,QAAQ,CAAE,SACN,EAAS,WAAW;CACnC,GAAG,CAAC,GAAM,CAAG,CAAC,GAEP;AACT"}

package/components/ui/slider.js

@@ -0,0 +1,36 @@
+import { cn as e } from "../lib/utils.js";
+import * as t from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import * as i from "@radix-ui/react-slider";
+//#region src/components/ui/slider.tsx
+function a({ className: a, defaultValue: o, value: s, min: c = 0, max: l = 100, ...u }) {
+	let d = t.useMemo(() => Array.isArray(s) ? s : Array.isArray(o) ? o : [c], [
+		s,
+		o,
+		c
+	]);
+	return /* @__PURE__ */ r(i.Root, {
+		"data-slot": "slider",
+		defaultValue: o,
+		value: s,
+		min: c,
+		max: l,
+		className: e("relative flex w-full touch-none items-center select-none", "data-[disabled]:opacity-50", "data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44", "data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col", a),
+		...u,
+		children: [/* @__PURE__ */ n(i.Track, {
+			"data-slot": "slider-track",
+			className: e("bg-muted relative grow overflow-hidden rounded-full", "data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full", "data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5"),
+			children: /* @__PURE__ */ n(i.Range, {
+				"data-slot": "slider-range",
+				className: e("bg-primary absolute", "data-[orientation=horizontal]:h-full", "data-[orientation=vertical]:w-full")
+			})
+		}), Array.from({ length: d.length }, (t, r) => /* @__PURE__ */ n(i.Thumb, {
+			"data-slot": "slider-thumb",
+			className: e("border-primary bg-background ring-ring/50", "block size-4 shrink-0 rounded-full border-2 shadow-sm", "transition-[color,box-shadow]", "focus-visible:ring-[3px] focus-visible:outline-none", "disabled:pointer-events-none")
+		}, r))]
+	});
+}
+//#endregion
+export { a as Slider };
+
+//# sourceMappingURL=slider.js.map

package/components/ui/slider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider.js","names":[],"sources":["../../../src/components/ui/slider.tsx"],"sourcesContent":["import * as React from \"react\";\nimport * as SliderPrimitive from \"@radix-ui/react-slider\";\n\nimport {cn} from \"@/components/lib/utils\";\n\nfunction Slider({\n  className,\n  defaultValue,\n  value,\n  min = 0,\n  max = 100,\n  ...props\n}: React.ComponentProps<typeof SliderPrimitive.Root>) {\n  const _values = React.useMemo(\n    () =>\n      Array.isArray(value)\n        ? value\n        : Array.isArray(defaultValue)\n          ? defaultValue\n          : [min],\n    [value, defaultValue, min],\n  );\n\n  return (\n    <SliderPrimitive.Root\n      data-slot=\"slider\"\n      defaultValue={defaultValue}\n      value={value}\n      min={min}\n      max={max}\n      className={cn(\n        \"relative flex w-full touch-none items-center select-none\",\n        \"data-[disabled]:opacity-50\",\n        \"data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44\",\n        \"data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col\",\n        className,\n      )}\n      {...props}\n    >\n      <SliderPrimitive.Track\n        data-slot=\"slider-track\"\n        className={cn(\n          \"bg-muted relative grow overflow-hidden rounded-full\",\n          \"data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full\",\n          \"data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5\",\n        )}\n      >\n        <SliderPrimitive.Range\n          data-slot=\"slider-range\"\n          className={cn(\n            \"bg-primary absolute\",\n            \"data-[orientation=horizontal]:h-full\",\n            \"data-[orientation=vertical]:w-full\",\n          )}\n        />\n      </SliderPrimitive.Track>\n      {Array.from({length: _values.length}, (_, i) => (\n        <SliderPrimitive.Thumb\n          key={i}\n          data-slot=\"slider-thumb\"\n          className={cn(\n            \"border-primary bg-background ring-ring/50\",\n            \"block size-4 shrink-0 rounded-full border-2 shadow-sm\",\n            \"transition-[color,box-shadow]\",\n            \"focus-visible:ring-[3px] focus-visible:outline-none\",\n            \"disabled:pointer-events-none\",\n          )}\n        />\n      ))}\n    </SliderPrimitive.Root>\n  );\n}\n\nexport {Slider};\n"],"mappings":";;;;;AAKA,SAAS,EAAO,EACd,cACA,iBACA,UACA,SAAM,GACN,SAAM,KACN,GAAG,KACiD;CACpD,IAAM,IAAU,EAAM,cAElB,MAAM,QAAQ,CAAK,IACf,IACA,MAAM,QAAQ,CAAY,IACxB,IACA,CAAC,CAAG,GACZ;EAAC;EAAO;EAAc;CAAG,CAC3B;CAEA,OACE,kBAAC,EAAgB,MAAjB;EACE,aAAU;EACI;EACP;EACF;EACA;EACL,WAAW,EACT,4DACA,8BACA,2EACA,2EACA,CACF;EACA,GAAI;YAbN,CAeE,kBAAC,EAAgB,OAAjB;GACE,aAAU;GACV,WAAW,EACT,uDACA,4EACA,sEACF;aAEA,kBAAC,EAAgB,OAAjB;IACE,aAAU;IACV,WAAW,EACT,uBACA,wCACA,oCACF;GACD,CAAA;EACoB,CAAA,GACtB,MAAM,KAAK,EAAC,QAAQ,EAAQ,OAAM,IAAI,GAAG,MACxC,kBAAC,EAAgB,OAAjB;GAEE,aAAU;GACV,WAAW,EACT,6CACA,yDACA,iCACA,uDACA,8BACF;EACD,GATM,CASN,CACF,CACmB;;AAE1B"}

package/components/ui/toggle-group.js

@@ -2,6 +2,7 @@
 import { cn as e } from "../../lib/utils.js";
 import { toggleVariants as t } from "./toggle.js";
 import * as n from "react";
+import "class-variance-authority";
 import { jsx as r } from "react/jsx-runtime";
 import { ToggleGroup as i } from "radix-ui";
 //#region src/components/ui/toggle-group.tsx

package/components/ui/toggle-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"toggle-group.js","names":[],"sources":["../../../src/components/ui/toggle-group.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { type VariantProps } from \"class-variance-authority\"\nimport { ToggleGroup as ToggleGroupPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\nimport { toggleVariants } from \"@/components/ui/toggle\"\n\nconst ToggleGroupContext = React.createContext<\n  VariantProps<typeof toggleVariants> & {\n    spacing?: number\n  }\n>({\n  size: \"default\",\n  variant: \"default\",\n  spacing: 0,\n})\n\nfunction ToggleGroup({\n  className,\n  variant,\n  size,\n  spacing = 0,\n  children,\n  ...props\n}: React.ComponentProps<typeof ToggleGroupPrimitive.Root> &\n  VariantProps<typeof toggleVariants> & {\n    spacing?: number\n  }) {\n  return (\n    <ToggleGroupPrimitive.Root\n      data-slot=\"toggle-group\"\n      data-variant={variant}\n      data-size={size}\n      data-spacing={spacing}\n      style={{ \"--gap\": spacing } as React.CSSProperties}\n      className={cn(\n        \"group/toggle-group flex w-fit items-center gap-[--spacing(var(--gap))] rounded-md data-[spacing=default]:data-[variant=outline]:shadow-xs\",\n        className\n      )}\n      {...props}\n    >\n      <ToggleGroupContext.Provider value={{ variant, size, spacing }}>\n        {children}\n      </ToggleGroupContext.Provider>\n    </ToggleGroupPrimitive.Root>\n  )\n}\n\nfunction ToggleGroupItem({\n  className,\n  children,\n  variant,\n  size,\n  ...props\n}: React.ComponentProps<typeof ToggleGroupPrimitive.Item> &\n  VariantProps<typeof toggleVariants>) {\n  const context = React.useContext(ToggleGroupContext)\n\n  return (\n    <ToggleGroupPrimitive.Item\n      data-slot=\"toggle-group-item\"\n      data-variant={context.variant || variant}\n      data-size={context.size || size}\n      data-spacing={context.spacing}\n      className={cn(\n        toggleVariants({\n          variant: context.variant || variant,\n          size: context.size || size,\n        }),\n        \"w-auto min-w-0 shrink-0 px-3 focus:z-10 focus-visible:z-10\",\n        \"data-[spacing=0]:rounded-none data-[spacing=0]:shadow-none data-[spacing=0]:first:rounded-l-md data-[spacing=0]:last:rounded-r-md data-[spacing=0]:data-[variant=outline]:border-l-0 data-[spacing=0]:data-[variant=outline]:first:border-l\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </ToggleGroupPrimitive.Item>\n  )\n}\n\nexport { ToggleGroup, ToggleGroupItem }\n"],"mappings":";;;;;;;AASA,IAAM,IAAqB,EAAM,cAI/B;CACA,MAAM;CACN,SAAS;CACT,SAAS;AACX,CAAC;AAED,SAAS,EAAY,EACnB,cACA,YACA,SACA,aAAU,GACV,aACA,GAAG,KAIA;CACH,OACE,kBAAC,EAAqB,MAAtB;EACE,aAAU;EACV,gBAAc;EACd,aAAW;EACX,gBAAc;EACd,OAAO,EAAE,SAAS,EAAQ;EAC1B,WAAW,EACT,6IACA,CACF;EACA,GAAI;YAEJ,kBAAC,EAAmB,UAApB;GAA6B,OAAO;IAAE;IAAS;IAAM;GAAQ;GAC1D;EAC0B,CAAA;CACJ,CAAA;AAE/B;AAEA,SAAS,EAAgB,EACvB,cACA,aACA,YACA,SACA,GAAG,KAEkC;CACrC,IAAM,IAAU,EAAM,WAAW,CAAkB;CAEnD,OACE,kBAAC,EAAqB,MAAtB;EACE,aAAU;EACV,gBAAc,EAAQ,WAAW;EACjC,aAAW,EAAQ,QAAQ;EAC3B,gBAAc,EAAQ;EACtB,WAAW,EACT,EAAe;GACb,SAAS,EAAQ,WAAW;GAC5B,MAAM,EAAQ,QAAQ;EACxB,CAAC,GACD,8DACA,+OACA,CACF;EACA,GAAI;EAEH;CACwB,CAAA;AAE/B"}
+{"version":3,"file":"toggle-group.js","names":[],"sources":["../../../src/components/ui/toggle-group.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { type VariantProps } from \"class-variance-authority\"\nimport { ToggleGroup as ToggleGroupPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\nimport { toggleVariants } from \"@/components/ui/toggle\"\n\nconst ToggleGroupContext = React.createContext<\n  VariantProps<typeof toggleVariants> & {\n    spacing?: number\n  }\n>({\n  size: \"default\",\n  variant: \"default\",\n  spacing: 0,\n})\n\nfunction ToggleGroup({\n  className,\n  variant,\n  size,\n  spacing = 0,\n  children,\n  ...props\n}: React.ComponentProps<typeof ToggleGroupPrimitive.Root> &\n  VariantProps<typeof toggleVariants> & {\n    spacing?: number\n  }) {\n  return (\n    <ToggleGroupPrimitive.Root\n      data-slot=\"toggle-group\"\n      data-variant={variant}\n      data-size={size}\n      data-spacing={spacing}\n      style={{ \"--gap\": spacing } as React.CSSProperties}\n      className={cn(\n        \"group/toggle-group flex w-fit items-center gap-[--spacing(var(--gap))] rounded-md data-[spacing=default]:data-[variant=outline]:shadow-xs\",\n        className\n      )}\n      {...props}\n    >\n      <ToggleGroupContext.Provider value={{ variant, size, spacing }}>\n        {children}\n      </ToggleGroupContext.Provider>\n    </ToggleGroupPrimitive.Root>\n  )\n}\n\nfunction ToggleGroupItem({\n  className,\n  children,\n  variant,\n  size,\n  ...props\n}: React.ComponentProps<typeof ToggleGroupPrimitive.Item> &\n  VariantProps<typeof toggleVariants>) {\n  const context = React.useContext(ToggleGroupContext)\n\n  return (\n    <ToggleGroupPrimitive.Item\n      data-slot=\"toggle-group-item\"\n      data-variant={context.variant || variant}\n      data-size={context.size || size}\n      data-spacing={context.spacing}\n      className={cn(\n        toggleVariants({\n          variant: context.variant || variant,\n          size: context.size || size,\n        }),\n        \"w-auto min-w-0 shrink-0 px-3 focus:z-10 focus-visible:z-10\",\n        \"data-[spacing=0]:rounded-none data-[spacing=0]:shadow-none data-[spacing=0]:first:rounded-l-md data-[spacing=0]:last:rounded-r-md data-[spacing=0]:data-[variant=outline]:border-l-0 data-[spacing=0]:data-[variant=outline]:first:border-l\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </ToggleGroupPrimitive.Item>\n  )\n}\n\nexport { ToggleGroup, ToggleGroupItem }\n"],"mappings":";;;;;;;;AASA,IAAM,IAAqB,EAAM,cAI/B;CACA,MAAM;CACN,SAAS;CACT,SAAS;AACX,CAAC;AAED,SAAS,EAAY,EACnB,cACA,YACA,SACA,aAAU,GACV,aACA,GAAG,KAIA;CACH,OACE,kBAAC,EAAqB,MAAtB;EACE,aAAU;EACV,gBAAc;EACd,aAAW;EACX,gBAAc;EACd,OAAO,EAAE,SAAS,EAAQ;EAC1B,WAAW,EACT,6IACA,CACF;EACA,GAAI;YAEJ,kBAAC,EAAmB,UAApB;GAA6B,OAAO;IAAE;IAAS;IAAM;GAAQ;GAC1D;EAC0B,CAAA;CACJ,CAAA;AAE/B;AAEA,SAAS,EAAgB,EACvB,cACA,aACA,YACA,SACA,GAAG,KAEkC;CACrC,IAAM,IAAU,EAAM,WAAW,CAAkB;CAEnD,OACE,kBAAC,EAAqB,MAAtB;EACE,aAAU;EACV,gBAAc,EAAQ,WAAW;EACjC,aAAW,EAAQ,QAAQ;EAC3B,gBAAc,EAAQ;EACtB,WAAW,EACT,EAAe;GACb,SAAS,EAAQ,WAAW;GAC5B,MAAM,EAAQ,QAAQ;EACxB,CAAC,GACD,8DACA,+OACA,CACF;EACA,GAAI;EAEH;CACwB,CAAA;AAE/B"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pihanga2/shadcn",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "description": "Pihanga core card components built on shadcn/ui and Radix UI — the npm distribution of pihanga-shadcn.",
   "type": "module",
   "exports": {
@@ -44,6 +44,10 @@
       "import": "./cards/field/index.js",
       "types": "./cards/field/index.d.ts"
     },
+    "./cards/fileDrop": {
+      "import": "./cards/fileDrop/index.js",
+      "types": "./cards/fileDrop/index.d.ts"
+    },
     "./cards/flexGrid": {
       "import": "./cards/flexGrid/index.js",
       "types": "./cards/flexGrid/index.d.ts"
@@ -96,6 +100,14 @@
       "import": "./cards/select/index.js",
       "types": "./cards/select/index.d.ts"
     },
+    "./cards/slider": {
+      "import": "./cards/slider/index.js",
+      "types": "./cards/slider/index.d.ts"
+    },
+    "./cards/sliderValue": {
+      "import": "./cards/sliderValue/index.js",
+      "types": "./cards/sliderValue/index.d.ts"
+    },
     "./cards/stack": {
       "import": "./cards/stack/index.js",
       "types": "./cards/stack/index.d.ts"
@@ -149,6 +161,7 @@
     "./cards/dialog/index.js",
     "./cards/dropDownMenu/index.js",
     "./cards/field/index.js",
+    "./cards/fileDrop/index.js",
     "./cards/flexGrid/index.js",
     "./cards/form/index.js",
     "./cards/framework/index.js",
@@ -162,6 +175,8 @@
     "./cards/pageWithNavbar/index.js",
     "./cards/pasteTarget/index.js",
     "./cards/select/index.js",
+    "./cards/slider/index.js",
+    "./cards/sliderValue/index.js",
     "./cards/stack/index.js",
     "./cards/stepper/index.js",
     "./cards/switch/index.js",
@@ -190,13 +205,14 @@
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "@pihanga2/core": "*",
-    "@pihanga2/cards": "^0.3.15"
+    "@pihanga2/cards": "*"
   },
   "dependencies": {
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-menubar": "^1.1.16",
     "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-slider": "^1.2.3",
     "@radix-ui/react-slot": "^1.2.4",
     "@radix-ui/react-switch": "^1.1.2",
     "@radix-ui/react-tabs": "^1.1.13",
@@ -205,6 +221,7 @@
     "clsx": "^2.1.1",
     "lucide-react": "^0.513.0",
     "radix-ui": "^1.4.3",
+    "react-drag-drop-files": "^3.0.1",
     "sonner": "^2.0.7",
     "tailwind-merge": "^3.3.0"
   }

package/pihanga-shadcn.css

@@ -1,2 +1,2 @@
-.overlay-wrapper{flex-direction:column;width:100%;min-width:0;display:flex;position:relative}.overlay-wrapper.is-loading.fill-parent{min-height:12rem}.overlay-content{flex-direction:column;flex-grow:1;width:100%;min-width:0;display:flex;position:relative;overflow-y:hidden}.overlay-wrapper.fill-parent .overlay-content{min-height:inherit}.loading-overlay{opacity:0;pointer-events:none;z-index:2;background:oklch(100% 0 0/.7);justify-content:center;align-items:center;transition:opacity .15s;display:flex;position:absolute;inset:0}.overlay-wrapper.viewport-centered .loading-overlay{z-index:50;position:fixed;inset:0}.dark .loading-overlay{background:oklch(14.5% 0 0/.5)}.overlay-wrapper.is-loading .loading-overlay{opacity:1;pointer-events:auto}.loading-overlay__content{color:var(--muted-foreground);align-items:center;gap:.5rem;font-size:.875rem;display:flex}.window{justify-content:center;width:100%;display:flex}.page{grid-template:"header"4rem"main"1fr"footer"/100%;width:100%;height:100vh;min-height:100vh;display:grid}.header{border-bottom:1px solid var(--border);background-color:var(--background);grid-area:header;align-items:center;gap:1rem;padding-left:1rem;padding-right:1rem;display:flex}@media (width>=768px){.header{padding-left:1.5rem;padding-right:1.5rem}}.title-section{align-items:center;gap:.5rem;display:inline-flex}.title-section .title-icon{flex-shrink:0;width:1.5rem;height:1.5rem}.title-section .title-text{color:var(--foreground);font-size:1.125rem;font-weight:600;line-height:1.75rem}.nav-md{display:none}@media (width>=768px){.nav-md{flex-direction:row;align-items:center;gap:1.25rem;display:flex}}@media (width>=1024px){.nav-md{gap:1.5rem}}.nav-md .nav-link{color:var(--muted-foreground);padding-left:0;padding-right:0;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.nav-md .nav-link:hover{color:var(--foreground)}.nav-sm{gap:1.5rem;padding:1rem;font-size:1.125rem;font-weight:500;line-height:1.75rem;display:grid}.nav-sm .nav-link{color:var(--muted-foreground);justify-content:flex-start;padding-left:0;padding-right:0;font-size:1.125rem;line-height:1.75rem}.nav-sm .nav-link:hover{color:var(--foreground)}.header-actions{align-items:center;gap:.5rem;margin-left:auto;display:flex}@media (width>=1024px){.header-actions{gap:1rem}}.main{background-color:var(--background);grid-area:main;min-height:0;padding:.5rem 1rem;overflow-y:auto}@media (width>=768px){.main{padding:1rem 2rem}}.footer{background-color:var(--background);color:var(--muted-foreground);grid-area:footer;padding:.5rem 1rem}@media (width>=768px){.footer{padding:1rem 2rem}}.pihanga-paste-target{border:2px dashed #999}.pihanga-paste-target .paste-target-msg-title{font-size:1.2em}.pihanga-paste-target textarea:focus{outline:none}.pihanga-paste-target-focused{border-width:3px;border-color:#007bff}.pihanga-paste-target-focused .paste-target-focus-reminder{display:none}.pi-stepper{--pi-stepper-indicator-size-sm:1.5rem;--pi-stepper-indicator-size-md:2rem;--pi-stepper-indicator-size-lg:2.5rem;--pi-stepper-indicator-size:var(--pi-stepper-indicator-size-md);--pi-stepper-connector-thickness:2px;--pi-stepper-connector-min-height:1.5rem;--pi-stepper-label-max-width:6rem}.pi-stepper--sm{--pi-stepper-indicator-size:var(--pi-stepper-indicator-size-sm)}.pi-stepper--md{--pi-stepper-indicator-size:var(--pi-stepper-indicator-size-md)}.pi-stepper--lg{--pi-stepper-indicator-size:var(--pi-stepper-indicator-size-lg)}.pi-stepper__indicator{transition:background-color .2s,border-color .2s,color .2s,outline-color .2s}.pi-stepper__indicator--clickable{cursor:pointer}.pi-stepper__indicator--clickable:hover{opacity:.8}.pi-stepper__indicator--static{cursor:default}.pi-stepper__connector{transition:background-color .3s}.pi-stepper__connector--vertical{min-height:var(--pi-stepper-connector-min-height)}.pi-stepper__label-title{transition:color .2s}
+.pi-file-drop-root label{border:2px dashed #999;flex-grow:1;justify-content:space-between;max-width:100%;display:flex}.pi-file-drop-root .dropzone-msg{cursor:pointer;text-align:center;flex-grow:4;margin:3em 0}.pi-file-drop-root .pi-progress{max-width:100%;padding:1.25em}.pi-file-drop-root .pi-progress-label{font-size:1rem;font-weight:600;line-height:1.5rem}.pi-file-drop -root.pi-progress-container{background-color:#dadfe5;border-radius:4px;height:1rem;display:flex;position:relative;overflow:hidden}.pi-file-drop-root .pi-progress-bar{color:#fff;background-color:#0054a6;flex-direction:column;justify-content:center;display:flex;overflow:hidden}.pi-file-drop-root .pi-progress .label{font-size:1em;display:block}.overlay-wrapper{flex-direction:column;width:100%;min-width:0;display:flex;position:relative}.overlay-wrapper.is-loading.fill-parent{min-height:12rem}.overlay-content{flex-direction:column;flex-grow:1;width:100%;min-width:0;display:flex;position:relative;overflow-y:hidden}.overlay-wrapper.fill-parent .overlay-content{min-height:inherit}.loading-overlay{opacity:0;pointer-events:none;z-index:2;background:oklch(100% 0 0/.7);justify-content:center;align-items:center;transition:opacity .15s;display:flex;position:absolute;inset:0}.overlay-wrapper.viewport-centered .loading-overlay{z-index:50;position:fixed;inset:0}.dark .loading-overlay{background:oklch(14.5% 0 0/.5)}.overlay-wrapper.is-loading .loading-overlay{opacity:1;pointer-events:auto}.loading-overlay__content{color:var(--muted-foreground);align-items:center;gap:.5rem;font-size:.875rem;display:flex}.window{justify-content:center;width:100%;height:100%;display:flex}.page{flex-direction:column;flex:1;width:100%;height:100%;display:flex}.header{border-bottom:1px solid var(--border);background-color:var(--background);flex-shrink:0;align-items:center;gap:1rem;padding-left:1rem;padding-right:1rem;display:flex}@media (width>=768px){.header{padding-left:1.5rem;padding-right:1.5rem}}.title-section{align-items:center;gap:.5rem;display:inline-flex}.title-section .title-icon{flex-shrink:0;width:1.5rem;height:1.5rem}.title-section .title-text{color:var(--foreground);font-size:1.125rem;font-weight:600;line-height:1.75rem}.nav-md{display:none}@media (width>=768px){.nav-md{flex-direction:row;align-items:center;gap:1.25rem;display:flex}}@media (width>=1024px){.nav-md{gap:1.5rem}}.nav-md .nav-link{color:var(--muted-foreground);padding-left:0;padding-right:0;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.nav-md .nav-link:hover{color:var(--foreground)}.nav-sm{gap:1.5rem;padding:1rem;font-size:1.125rem;font-weight:500;line-height:1.75rem;display:grid}.nav-sm .nav-link{color:var(--muted-foreground);justify-content:flex-start;padding-left:0;padding-right:0;font-size:1.125rem;line-height:1.75rem}.nav-sm .nav-link:hover{color:var(--foreground)}.header-actions{align-items:center;gap:.5rem;margin-left:auto;display:flex}@media (width>=1024px){.header-actions{gap:1rem}}.main{background-color:var(--background);flex:1;min-height:0;padding:.5rem 1rem;overflow-y:auto}@media (width>=768px){.main{padding:1rem 2rem}}.footer{background-color:var(--background);color:var(--muted-foreground);flex-shrink:0;padding:.5rem 1rem}@media (width>=768px){.footer{padding:1rem 2rem}}.pihanga-paste-target{border:2px dashed #999}.pihanga-paste-target .paste-target-msg-title{font-size:1.2em}.pihanga-paste-target textarea:focus{outline:none}.pihanga-paste-target-focused{border-width:3px;border-color:#007bff}.pihanga-paste-target-focused .paste-target-focus-reminder{display:none}.pi-stepper{--pi-stepper-indicator-size-sm:1.5rem;--pi-stepper-indicator-size-md:2rem;--pi-stepper-indicator-size-lg:2.5rem;--pi-stepper-indicator-size:var(--pi-stepper-indicator-size-md);--pi-stepper-connector-thickness:2px;--pi-stepper-connector-min-height:1.5rem;--pi-stepper-label-max-width:6rem}.pi-stepper--sm{--pi-stepper-indicator-size:var(--pi-stepper-indicator-size-sm)}.pi-stepper--md{--pi-stepper-indicator-size:var(--pi-stepper-indicator-size-md)}.pi-stepper--lg{--pi-stepper-indicator-size:var(--pi-stepper-indicator-size-lg)}.pi-stepper__indicator{transition:background-color .2s,border-color .2s,color .2s,outline-color .2s}.pi-stepper__indicator--clickable{cursor:pointer}.pi-stepper__indicator--clickable:hover{opacity:.8}.pi-stepper__indicator--static{cursor:default}.pi-stepper__connector{transition:background-color .3s}.pi-stepper__connector--vertical{min-height:var(--pi-stepper-connector-min-height)}.pi-stepper__label-title{transition:color .2s}
 /*$vite$:1*/