@logicplanes/kaeso-ui 0.1.0

package/dist/chunks/input-Biakz6GB.js

@@ -0,0 +1,114 @@
+"use client";
+import { i as e } from "./dev-CR1p7gCm.js";
+import { i as t } from "./context-BELWW79w.js";
+import { t as n } from "./icon-CeNQtobn.js";
+import { i as r } from "./kbd-CBcBDvqU.js";
+import { a as i, o as a, s as o } from "./field-d8V94bvZ.js";
+import { n as s, t as c } from "./input-group-DQqEPFj_.js";
+import { forwardRef as l, useRef as u, useState as d } from "react";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
+import { Cancel01Icon as m, Search01Icon as h } from "@hugeicons/core-free-icons";
+//#region src/components/input/input.tsx
+var g = { size: {
+	sm: { classes: "h-32" },
+	md: { classes: "h-36" },
+	lg: { classes: "h-40" },
+	xl: { classes: "h-48" }
+} }, _ = { size: "md" }, v = /* @__PURE__ */ l(function(t, n) {
+	let { size: r = "md", leadingIcon: c, prefix: l, suffix: u, trailing: d, invalid: p, align: m, label: h, description: g, error: _, optional: v, required: b, layout: x, className: S, disabled: C, readOnly: w, id: T, "data-force": E, ...D } = t;
+	e("Input", S);
+	let O = i(), k = a(t), A = /* @__PURE__ */ f(y, {
+		size: r,
+		leadingIcon: c,
+		prefix: l,
+		suffix: u,
+		trailing: d,
+		invalid: p || !!_,
+		disabled: C,
+		readOnly: w,
+		force: E,
+		className: h || g || _ ? void 0 : S,
+		children: /* @__PURE__ */ f(s.Input, {
+			ref: n,
+			disabled: C,
+			readOnly: w,
+			required: b,
+			className: m === "end" ? "text-right tabular" : void 0,
+			...T ? { id: T } : {},
+			...k.controlProps,
+			...p || _ ? { "aria-invalid": !0 } : {},
+			...D
+		})
+	});
+	return O ? A : o({
+		label: h,
+		description: g,
+		error: _,
+		optional: v,
+		required: b,
+		layout: x,
+		id: k.wrapId ?? T,
+		disabled: C,
+		className: S
+	}, A);
+});
+process.env.NODE_ENV !== "production" && (v.displayName = "Input");
+function y({ size: e, leadingIcon: t, prefix: r, suffix: i, trailing: a, invalid: o, disabled: l, readOnly: u, force: d, className: m, children: h }) {
+	return /* @__PURE__ */ p(s, {
+		size: e,
+		leadingIcon: !!t,
+		trailingButton: !!a,
+		invalid: o,
+		disabled: l,
+		readOnly: u,
+		className: m,
+		...d ? { "data-force": d } : {},
+		children: [
+			t && /* @__PURE__ */ f(n, {
+				icon: t,
+				size: c[e],
+				className: "text-fg-tertiary"
+			}),
+			r && /* @__PURE__ */ f(s.Addon, { children: r }),
+			h,
+			i && /* @__PURE__ */ f(s.Addon, { children: i }),
+			a
+		]
+	});
+}
+var b = /* @__PURE__ */ l(function({ shortcut: e, onClear: n, value: i, defaultValue: a, onChange: o, onKeyDown: c, placeholder: l, size: p = "sm", ...g }, _) {
+	let y = t(), [b, x] = d(String(a ?? "")), S = i !== void 0, C = S ? String(i) : b, w = u(null), T = () => {
+		let e = w.current;
+		S ? e && !n && (Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value")?.set?.call(e, ""), e.dispatchEvent(new Event("input", { bubbles: !0 }))) : x(""), n?.(), e?.focus();
+	};
+	return /* @__PURE__ */ f(v, {
+		ref: (e) => {
+			w.current = e, typeof _ == "function" ? _(e) : _ && (_.current = e);
+		},
+		type: "search",
+		size: p,
+		leadingIcon: h,
+		placeholder: l ?? y("searchInput.placeholder", "Search"),
+		autoComplete: "off",
+		spellCheck: !1,
+		value: C,
+		onChange: (e) => {
+			S || x(e.target.value), o?.(e);
+		},
+		onKeyDown: (e) => {
+			e.key === "Escape" && C && (e.stopPropagation(), T()), c?.(e);
+		},
+		trailing: C ? /* @__PURE__ */ f(s.Button, {
+			icon: m,
+			"aria-label": y("searchInput.clear", "Clear search"),
+			onClick: T
+		}) : void 0,
+		suffix: !C && e ? /* @__PURE__ */ f(r, { keys: e }) : void 0,
+		...g
+	});
+});
+process.env.NODE_ENV !== "production" && (b.displayName = "SearchInput");
+//#endregion
+export { b as i, _ as n, g as r, v as t };
+
+//# sourceMappingURL=input-Biakz6GB.js.map

package/dist/chunks/input-Biakz6GB.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-Biakz6GB.js","names":["__icon_Search01Icon","__icon_Cancel01Icon","warnStylingClassName","useUiText","Icon","KbdSequence","useField","useFieldControl","withField","InputGroup","INPUT_ICON_SIZE","KAESO_INPUT_VARIANTS","KAESO_INPUT_DEFAULT_VARIANTS","Input","force","rest","props","className","field","fc","inner","InputGroupFromField","invalid","error","label","description","align","id","leadingIcon","trailing","size","prefix","children","suffix","SearchInput","t","setInner","useState","defaultValue","controlled","value","current","input","useRef","clear","el","onClear","ref","Search01Icon","placeholder","onChange","onKeyDown","Cancel01Icon","shortcut"],"sources":["../../src/components/input/input.tsx"],"sourcesContent":["import { forwardRef, useRef, useState, type InputHTMLAttributes, type KeyboardEvent, type ReactNode } from \"react\";\nimport { warnStylingClassName } from \"../../utils/dev.js\";\nimport { useField, useFieldControl, withField, type FieldWrapProps } from \"../field/field.js\";\nimport { InputGroup, INPUT_ICON_SIZE, type InputSize } from \"./input-group.js\";\nimport { Icon, type IconData } from \"../icon/icon.js\";\nimport { KbdSequence } from \"../kbd/kbd.js\";\nimport { Search01Icon as __icon_Search01Icon, Cancel01Icon as __icon_Cancel01Icon } from \"@hugeicons/core-free-icons\";\nimport { useUiText } from \"../../i18n/context.js\";\n\nexport const KAESO_INPUT_VARIANTS = {\n  size: {\n    sm: { classes: \"h-32\" },\n    md: { classes: \"h-36\" },\n    lg: { classes: \"h-40\" },\n    xl: { classes: \"h-48\" },\n  },\n} as const;\nexport const KAESO_INPUT_DEFAULT_VARIANTS = { size: \"md\" } as const;\n\nexport interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, \"size\" | \"prefix\">, FieldWrapProps {\n  size?: InputSize | undefined;\n  leadingIcon?: IconData | undefined;\n  prefix?: ReactNode | undefined;\n  suffix?: ReactNode | undefined;\n  trailing?: ReactNode | undefined;\n  invalid?: boolean | undefined;\n  align?: \"start\" | \"end\" | undefined;\n  \"data-force\"?: string | undefined;\n  className?: string | undefined;\n}\n\nexport const Input = /* @__PURE__ */ forwardRef<HTMLInputElement, InputProps>(function Input(props, ref) {\n  const {\n    size = \"md\",\n    leadingIcon,\n    prefix,\n    suffix,\n    trailing,\n    invalid,\n    align,\n    label,\n    description,\n    error,\n    optional,\n    required,\n    layout,\n    className,\n    disabled,\n    readOnly,\n    id,\n    \"data-force\": force,\n    ...rest\n  } = props;\n  warnStylingClassName(\"Input\", className);\n  const field = useField();\n  const fc = useFieldControl(props);\n  const inner = (\n    <InputGroupFromField\n      size={size}\n      leadingIcon={leadingIcon}\n      prefix={prefix}\n      suffix={suffix}\n      trailing={trailing}\n      invalid={invalid || !!error}\n      disabled={disabled}\n      readOnly={readOnly}\n      force={force}\n      className={label || description || error ? undefined : className}\n    >\n      <InputGroup.Input\n        ref={ref}\n        disabled={disabled}\n        readOnly={readOnly}\n        required={required}\n        className={align === \"end\" ? \"text-right tabular\" : undefined}\n        {...(id ? { id } : {})}\n        {...fc.controlProps}\n        {...(invalid || error ? { \"aria-invalid\": true } : {})}\n        {...rest}\n      />\n    </InputGroupFromField>\n  );\n  if (field) return inner;\n  return withField({ label, description, error, optional, required, layout, id: fc.wrapId ?? id, disabled, className }, inner);\n});\nif (process.env.NODE_ENV !== \"production\") Input.displayName = \"Input\";\n\nfunction InputGroupFromField({\n  size,\n  leadingIcon,\n  prefix,\n  suffix,\n  trailing,\n  invalid,\n  disabled,\n  readOnly,\n  force,\n  className,\n  children,\n}: {\n  size: InputSize;\n  leadingIcon?: IconData | undefined;\n  prefix?: ReactNode | undefined;\n  suffix?: ReactNode | undefined;\n  trailing?: ReactNode | undefined;\n  invalid?: boolean | undefined;\n  disabled?: boolean | undefined;\n  readOnly?: boolean | undefined;\n  force?: string | undefined;\n  className?: string | undefined;\n  children: ReactNode;\n}) {\n  return (\n    <InputGroup\n      size={size}\n      leadingIcon={!!leadingIcon}\n      trailingButton={!!trailing}\n      invalid={invalid}\n      disabled={disabled}\n      readOnly={readOnly}\n      className={className}\n      {...(force ? { \"data-force\": force } : {})}\n    >\n      {leadingIcon && <Icon icon={leadingIcon} size={INPUT_ICON_SIZE[size]} className=\"text-fg-tertiary\" />}\n      {prefix && <InputGroup.Addon>{prefix}</InputGroup.Addon>}\n      {children}\n      {suffix && <InputGroup.Addon>{suffix}</InputGroup.Addon>}\n      {trailing}\n    </InputGroup>\n  );\n}\n\nexport interface SearchInputProps extends Omit<InputProps, \"leadingIcon\" | \"type\" | \"prefix\" | \"suffix\"> {\n  shortcut?: string[] | undefined;\n  onClear?: (() => void) | undefined;\n  placeholder?: string | undefined;\n}\n\nexport const SearchInput = /* @__PURE__ */ forwardRef<HTMLInputElement, SearchInputProps>(function SearchInput(\n  { shortcut, onClear, value, defaultValue, onChange, onKeyDown, placeholder, size = \"sm\", ...props },\n  ref,\n) {\n  const t = useUiText();\n  const [inner, setInner] = useState(String(defaultValue ?? \"\"));\n  const controlled = value !== undefined;\n  const current = controlled ? String(value) : inner;\n  const input = useRef<HTMLInputElement | null>(null);\n  const clear = () => {\n    const el = input.current;\n    if (!controlled) setInner(\"\");\n    else if (el && !onClear) {\n      Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, \"value\")?.set?.call(el, \"\");\n      el.dispatchEvent(new Event(\"input\", { bubbles: true }));\n    }\n    onClear?.();\n    el?.focus();\n  };\n  return (\n    <Input\n      ref={(el) => {\n        input.current = el;\n        if (typeof ref === \"function\") ref(el);\n        else if (ref) ref.current = el;\n      }}\n      type=\"search\"\n      size={size}\n      leadingIcon={__icon_Search01Icon}\n      placeholder={placeholder ?? t(\"searchInput.placeholder\", \"Search\")}\n      autoComplete=\"off\"\n      spellCheck={false}\n      value={current}\n      onChange={(e) => {\n        if (!controlled) setInner(e.target.value);\n        onChange?.(e);\n      }}\n      onKeyDown={(e: KeyboardEvent<HTMLInputElement>) => {\n        if (e.key === \"Escape\" && current) {\n          e.stopPropagation();\n          clear();\n        }\n        onKeyDown?.(e);\n      }}\n      trailing={current ? <InputGroup.Button icon={__icon_Cancel01Icon} aria-label={t(\"searchInput.clear\", \"Clear search\")} onClick={clear} /> : undefined}\n      suffix={!current && shortcut ? <KbdSequence keys={shortcut} /> : undefined}\n      {...props}\n    />\n  );\n});\nif (process.env.NODE_ENV !== \"production\") SearchInput.displayName = \"SearchInput\";\n"],"mappings":"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"}

package/dist/chunks/input-group-DQqEPFj_.js

@@ -0,0 +1,87 @@
+"use client";
+import { t as e } from "./cn-CidVUKMm.js";
+import { t } from "./icon-CeNQtobn.js";
+import { n } from "./button-BHKAE6ui.js";
+import { t as r } from "./field-press-DwzBFafd.js";
+import { createContext as i, forwardRef as a, useContext as o } from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region src/components/input/input-group.tsx
+var l = { size: {
+	sm: { classes: "h-32 px-12 gap-6 text-body" },
+	md: { classes: "h-36 px-16 gap-8 text-body" },
+	lg: { classes: "h-40 px-18 gap-8 text-body" },
+	xl: { classes: "h-48 px-22 gap-8 text-body-lg" }
+} }, u = { size: "md" }, d = {
+	sm: "pl-10",
+	md: "pl-14",
+	lg: "pl-16",
+	xl: "pl-20"
+}, f = {
+	sm: "pr-4",
+	md: "pr-2",
+	lg: "pr-4",
+	xl: "pr-6"
+}, p = {
+	sm: "sm",
+	md: "sm",
+	lg: "md",
+	xl: "lg"
+}, m = /* @__PURE__ */ i({ size: "md" }), h = /* @__PURE__ */ a(function({ size: t = "md", leadingIcon: n, trailingButton: i, invalid: a, disabled: o, readOnly: c, className: u, children: p, ...h }, g) {
+	return /* @__PURE__ */ s(m.Provider, {
+		value: { size: t },
+		children: /* @__PURE__ */ s("div", {
+			ref: g,
+			className: e("relative flex w-full min-w-0 items-center rounded-pill material-field transition-control cursor-text", l.size[t].classes, n && d[t], i && f[t], o && "cursor-not-allowed", u),
+			...a ? { "data-invalid": "" } : {},
+			...o ? { "data-disabled": "" } : {},
+			...c ? { "data-readonly": "" } : {},
+			onMouseDown: r,
+			...h,
+			children: p
+		})
+	});
+});
+process.env.NODE_ENV !== "production" && (h.displayName = "InputGroup");
+var g = /* @__PURE__ */ a(function({ className: t, ...n }, r) {
+	return /* @__PURE__ */ s("input", {
+		ref: r,
+		className: e("min-w-0 flex-1 bg-transparent bidi-plaintext text-inherit text-fg outline-none placeholder:text-fg-tertiary disabled:cursor-not-allowed disabled:text-fg-disabled read-only:cursor-text", t),
+		...n
+	});
+});
+process.env.NODE_ENV !== "production" && (g.displayName = "InputGroup.Input");
+var _ = /* @__PURE__ */ a(function({ icon: n, className: r, children: i, ...a }, l) {
+	let { size: u } = o(m);
+	return /* @__PURE__ */ c("span", {
+		ref: l,
+		className: e("inline-flex shrink-0 items-center gap-4 bidi-plaintext text-fg-secondary select-none", r),
+		...a,
+		children: [n && /* @__PURE__ */ s(t, {
+			icon: n,
+			size: p[u]
+		}), i]
+	});
+});
+process.env.NODE_ENV !== "production" && (_.displayName = "InputGroup.Addon");
+var v = /* @__PURE__ */ a(function({ icon: e, className: t, ...r }, i) {
+	let { size: a } = o(m);
+	return /* @__PURE__ */ s(n, {
+		ref: i,
+		shape: "circle",
+		variant: "quiet",
+		size: a === "xl" ? "md" : a === "lg" || a === "md" ? "sm" : "xs",
+		icon: e,
+		className: t,
+		...r
+	});
+});
+process.env.NODE_ENV !== "production" && (v.displayName = "InputGroup.Button");
+var y = /* @__PURE__ */ Object.assign(h, {
+	Input: g,
+	Addon: _,
+	Button: v
+}), b = () => o(m).size;
+//#endregion
+export { b as a, l as i, y as n, u as r, p as t };
+
+//# sourceMappingURL=input-group-DQqEPFj_.js.map

package/dist/chunks/input-group-DQqEPFj_.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-group-DQqEPFj_.js","names":["cn","focusInputOnPress","KAESO_INPUT_GROUP_VARIANTS","KAESO_INPUT_GROUP_DEFAULT_VARIANTS","LEADING","TRAILING_BUTTON","INPUT_ICON_SIZE","Ctx","Root","props","size","leadingIcon","trailingButton","disabled","className","invalid","readOnly","Input","Addon","useContext","icon","Icon","children","GroupButton","Button","InputGroup","useInputGroupSize"],"sources":["../../src/components/input/input-group.tsx"],"sourcesContent":["import type * as React from \"react\";\nimport { createContext, forwardRef, useContext, type HTMLAttributes, type InputHTMLAttributes } from \"react\";\nimport { cn } from \"../../utils/cn.js\";\nimport { focusInputOnPress } from \"../../utils/field-press.js\";\nimport { Icon, type IconData, type IconSize } from \"../icon/icon.js\";\nimport { Button } from \"../button/button.js\";\n\nexport const KAESO_INPUT_GROUP_VARIANTS = {\n  size: {\n    sm: { classes: \"h-32 px-12 gap-6 text-body\" },\n    md: { classes: \"h-36 px-16 gap-8 text-body\" },\n    lg: { classes: \"h-40 px-18 gap-8 text-body\" },\n    xl: { classes: \"h-48 px-22 gap-8 text-body-lg\" },\n  },\n} as const;\nexport const KAESO_INPUT_GROUP_DEFAULT_VARIANTS = { size: \"md\" } as const;\nexport type InputSize = keyof typeof KAESO_INPUT_GROUP_VARIANTS.size;\n\nconst LEADING: Record<InputSize, string> = { sm: \"pl-10\", md: \"pl-14\", lg: \"pl-16\", xl: \"pl-20\" };\nconst TRAILING_BUTTON: Record<InputSize, string> = { sm: \"pr-4\", md: \"pr-2\", lg: \"pr-4\", xl: \"pr-6\" };\nexport const INPUT_ICON_SIZE: Record<InputSize, IconSize> = { sm: \"sm\", md: \"sm\", lg: \"md\", xl: \"lg\" };\n\nconst Ctx = /* @__PURE__ */ createContext<{ size: InputSize }>({ size: \"md\" });\n\nexport interface InputGroupProps extends HTMLAttributes<HTMLDivElement> {\n  size?: InputSize | undefined;\n  leadingIcon?: boolean | undefined;\n  trailingButton?: boolean | undefined;\n  invalid?: boolean | undefined;\n  disabled?: boolean | undefined;\n  readOnly?: boolean | undefined;\n  \"data-force\"?: string | undefined;\n}\n\nconst Root = /* @__PURE__ */ forwardRef<HTMLDivElement, InputGroupProps>(function InputGroup(\n  { size = \"md\", leadingIcon, trailingButton, invalid, disabled, readOnly, className, children, ...props },\n  ref,\n) {\n  return (\n    <Ctx.Provider value={{ size }}>\n      <div\n        ref={ref}\n        className={cn(\n          \"relative flex w-full min-w-0 items-center rounded-pill material-field transition-control cursor-text\",\n          KAESO_INPUT_GROUP_VARIANTS.size[size].classes,\n          leadingIcon && LEADING[size],\n          trailingButton && TRAILING_BUTTON[size],\n          disabled && \"cursor-not-allowed\",\n          className,\n        )}\n        {...(invalid ? { \"data-invalid\": \"\" } : {})}\n        {...(disabled ? { \"data-disabled\": \"\" } : {})}\n        {...(readOnly ? { \"data-readonly\": \"\" } : {})}\n        onMouseDown={focusInputOnPress}\n        {...props}\n      >\n        {children}\n      </div>\n    </Ctx.Provider>\n  );\n});\nif (process.env.NODE_ENV !== \"production\") Root.displayName = \"InputGroup\";\n\nexport interface InputGroupInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, \"size\"> {}\n\nconst Input = /* @__PURE__ */ forwardRef<HTMLInputElement, InputGroupInputProps>(function InputGroupInput({ className, ...props }, ref) {\n  return (\n    <input\n      ref={ref}\n      className={cn(\n        \"min-w-0 flex-1 bg-transparent bidi-plaintext text-inherit text-fg outline-none placeholder:text-fg-tertiary disabled:cursor-not-allowed disabled:text-fg-disabled read-only:cursor-text\",\n        className,\n      )}\n      {...props}\n    />\n  );\n});\nif (process.env.NODE_ENV !== \"production\") Input.displayName = \"InputGroup.Input\";\n\nexport interface InputGroupAddonProps extends HTMLAttributes<HTMLSpanElement> {\n  icon?: IconData | undefined;\n}\n\nconst Addon = /* @__PURE__ */ forwardRef<HTMLSpanElement, InputGroupAddonProps>(function InputGroupAddon({ icon, className, children, ...props }, ref) {\n  const { size } = useContext(Ctx);\n  return (\n    <span ref={ref} className={cn(\"inline-flex shrink-0 items-center gap-4 bidi-plaintext text-fg-secondary select-none\", className)} {...props}>\n      {icon && <Icon icon={icon} size={INPUT_ICON_SIZE[size]} />}\n      {children}\n    </span>\n  );\n});\nif (process.env.NODE_ENV !== \"production\") Addon.displayName = \"InputGroup.Addon\";\n\nexport interface InputGroupButtonProps {\n  icon: IconData;\n  \"aria-label\": string;\n  onClick?: (() => void) | undefined;\n  disabled?: boolean | undefined;\n  className?: string | undefined;\n}\n\nconst GroupButton = /* @__PURE__ */ forwardRef<HTMLButtonElement, InputGroupButtonProps>(function InputGroupButton({ icon, className, ...props }, ref) {\n  const { size } = useContext(Ctx);\n  return (\n    <Button\n      ref={ref as React.Ref<HTMLButtonElement & HTMLAnchorElement>}\n      shape=\"circle\"\n      variant=\"quiet\"\n      size={size === \"xl\" ? \"md\" : size === \"lg\" ? \"sm\" : size === \"md\" ? \"sm\" : \"xs\"}\n      icon={icon}\n      className={className}\n      {...props}\n    />\n  );\n});\nif (process.env.NODE_ENV !== \"production\") GroupButton.displayName = \"InputGroup.Button\";\n\nexport const InputGroup = /* @__PURE__ */ Object.assign(Root, { Input, Addon, Button: GroupButton });\nexport const useInputGroupSize = () => useContext(Ctx).size;\n"],"mappings":";;;;;;;;AAOA,IAAaE,IAA6B,EACxC,MAAM;CACJ,IAAI,EAAE,SAAS,6BAA6B;CAC5C,IAAI,EAAE,SAAS,6BAA6B;CAC5C,IAAI,EAAE,SAAS,6BAA6B;CAC5C,IAAI,EAAE,SAAS,gCAAgC;AACjD,EACF,GACaC,IAAqC,EAAE,MAAM,KAAK,GAGzDC,IAAqC;CAAE,IAAI;CAAS,IAAI;CAAS,IAAI;CAAS,IAAI;AAAQ,GAC1FC,IAA6C;CAAE,IAAI;CAAQ,IAAI;CAAQ,IAAI;CAAQ,IAAI;AAAO,GACvFC,IAA+C;CAAE,IAAI;CAAM,IAAI;CAAM,IAAI;CAAM,IAAI;AAAK,GAE/FC,IAAsB,kBAAmC,EAAE,MAAM,KAAK,CAAC,GAYvEC,IAAuB,kBAA4C,SACvE,EAAE,UAAO,MAAM,gBAAa,mBAAgB,YAAS,aAAU,aAAU,cAAW,aAAU,GAAGC,KACjG,GACA;CACA,OACE,kBAACF,EAAI,UAAL;EAAc,OAAO,EAAE,QAAK;EAC1B,UAAA,kBAAC,OAAD;GACO;GACL,WAAWP,EACT,wGACAE,EAA2B,KAAKQ,EAAK,CAAC,SACtCC,KAAeP,EAAQM,IACvBE,KAAkBP,EAAgBK,IAClCG,KAAY,sBACZC,CACF;GACA,GAAKC,IAAU,EAAE,gBAAgB,GAAG,IAAI,CAAC;GACzC,GAAKF,IAAW,EAAE,iBAAiB,GAAG,IAAI,CAAC;GAC3C,GAAKG,IAAW,EAAE,iBAAiB,GAAG,IAAI,CAAC;GAC3C,aAAaf;GACb,GAAIQ;GAEH;EACE,CAAA;CACO,CAAA;AAElB,CAAC;AACD,QAAA,IAAA,aAA6B,iBAAc,EAAK,cAAc;AAI9D,IAAMQ,IAAwB,kBAAmD,SAAyB,EAAE,cAAW,GAAGR,KAAS,GAAK;CACtI,OACE,kBAAC,SAAD;EACO;EACL,WAAWT,EACT,2LACAc,CACF;EACA,GAAIL;CACL,CAAA;AAEL,CAAC;AACD,QAAA,IAAA,aAA6B,iBAAc,EAAM,cAAc;AAM/D,IAAMS,IAAwB,kBAAkD,SAAyB,EAAE,SAAM,cAAW,aAAU,GAAGT,KAAS,GAAK;CACrJ,IAAM,EAAE,YAASU,EAAWZ,CAAG;CAC/B,OACE,kBAAC,QAAD;EAAW;EAAK,WAAWP,EAAG,wFAAwFc,CAAS;EAAG,GAAIL;EAAtI,UAAA,CACGW,KAAQ,kBAACC,GAAD;GAAY;GAAM,MAAMf,EAAgBI;EAAQ,CAAA,GACxDY,CACG;;AAEV,CAAC;AACD,QAAA,IAAA,aAA6B,iBAAc,EAAM,cAAc;AAU/D,IAAMC,IAA8B,kBAAqD,SAA0B,EAAE,SAAM,cAAW,GAAGd,KAAS,GAAK;CACrJ,IAAM,EAAE,YAASU,EAAWZ,CAAG;CAC/B,OACE,kBAACiB,GAAD;EACO;EACL,OAAM;EACN,SAAQ;EACR,MAAMd,MAAS,OAAO,OAAOA,MAAS,QAAcA,MAAS,OAAhB,OAA8B;EACrE;EACK;EACX,GAAID;CACL,CAAA;AAEL,CAAC;AACD,QAAA,IAAA,aAA6B,iBAAc,EAAY,cAAc;AAErE,IAAagB,IAA6B,uBAAO,OAAOjB,GAAM;CAAE;CAAO;CAAO,QAAQe;AAAY,CAAC,GACtFG,UAA0BP,EAAWZ,CAAG,CAAC,CAAC"}

package/dist/chunks/inset-BLMdxX4I.js

@@ -0,0 +1,18 @@
+"use client";
+import { createContext as e, useContext as t } from "react";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/utils/inset.tsx
+var r = /* @__PURE__ */ e(!1);
+function i({ children: e, inset: t = !0 }) {
+	return /* @__PURE__ */ n(r.Provider, {
+		value: t,
+		children: e
+	});
+}
+function a() {
+	return t(r);
+}
+//#endregion
+export { a as n, i as t };
+
+//# sourceMappingURL=inset-BLMdxX4I.js.map

package/dist/chunks/inset-BLMdxX4I.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"inset-BLMdxX4I.js","names":["InsetContext","InsetContent","inset","useInset","useContext"],"sources":["../../src/utils/inset.tsx"],"sourcesContent":["import { createContext, useContext, type ReactNode } from \"react\";\n\nconst InsetContext = /* @__PURE__ */ createContext(false);\n\nexport function InsetContent({ children, inset = true }: { children: ReactNode; inset?: boolean | undefined }) {\n  return <InsetContext.Provider value={inset}>{children}</InsetContext.Provider>;\n}\n\nexport function useInset(): boolean {\n  return useContext(InsetContext);\n}\n"],"mappings":";;;;AAEA,IAAMA,IAA+B,kBAAc,EAAK;AAExD,SAAgBC,EAAa,EAAE,aAAU,WAAQ,MAA8D;CAC7G,OAAO,kBAACD,EAAa,UAAd;EAAuB,OAAOE;EAAQ;CAAgC,CAAA;AAC/E;AAEA,SAAgBC,IAAoB;CAClC,OAAOC,EAAWJ,CAAY;AAChC"}

package/dist/chunks/iso-field-CznqNVrH.js

@@ -0,0 +1,31 @@
+"use client";
+import { i as e } from "./context-BELWW79w.js";
+import { formatISODate as t, parseISODate as n } from "../format.js";
+import { n as r } from "./input-group-DQqEPFj_.js";
+import { useState as i } from "react";
+import { jsx as a } from "react/jsx-runtime";
+//#region src/components/date-picker/iso-field.tsx
+function o({ label: o, value: s, onCommit: c }) {
+	let l = e(), [u, d] = i(s ? t(s) : ""), [f, p] = i(s);
+	return s !== f && (p(s), d(s ? t(s) : "")), /* @__PURE__ */ a(r, {
+		size: "sm",
+		className: "flex-1",
+		children: /* @__PURE__ */ a(r.Input, {
+			"aria-label": o,
+			placeholder: l("datePicker.isoPlaceholder", "YYYY-MM-DD"),
+			value: u,
+			inputMode: "numeric",
+			className: "mono text-small",
+			onChange: (e) => d(e.target.value),
+			onBlur: () => {
+				let e = n(u);
+				(!e || c(e) === !1) && d(s ? t(s) : "");
+			},
+			onKeyDown: (e) => e.key === "Enter" && e.target.blur()
+		})
+	});
+}
+//#endregion
+export { o as t };
+
+//# sourceMappingURL=iso-field-CznqNVrH.js.map

package/dist/chunks/iso-field-CznqNVrH.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"iso-field-CznqNVrH.js","names":["useUiText","InputGroup","IsoField","t","text","setText","useState","value","formatISODate","shown","setShown","label","d","parseISODate","onCommit"],"sources":["../../src/components/date-picker/iso-field.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport { InputGroup } from \"../input/input-group.js\";\nimport { formatISODate, parseISODate } from \"../../format/index.js\";\nimport { useUiText } from \"../../i18n/context.js\";\n\nexport function IsoField({ label, value, onCommit }: { label: string; value: Date | undefined; onCommit: (d: Date) => boolean | void }) {\n  const t = useUiText();\n  const [text, setText] = useState(value ? formatISODate(value) : \"\");\n  const [shown, setShown] = useState(value);\n  if (value !== shown) {\n    setShown(value);\n    setText(value ? formatISODate(value) : \"\");\n  }\n  return (\n    <InputGroup size=\"sm\" className=\"flex-1\">\n      <InputGroup.Input\n        aria-label={label}\n        placeholder={t(\"datePicker.isoPlaceholder\", \"YYYY-MM-DD\")}\n        value={text}\n        inputMode=\"numeric\"\n        className=\"mono text-small\"\n        onChange={(e) => setText(e.target.value)}\n        onBlur={() => {\n          const d = parseISODate(text);\n          if (!d || onCommit(d) === false) setText(value ? formatISODate(value) : \"\");\n        }}\n        onKeyDown={(e) => e.key === \"Enter\" && (e.target as HTMLInputElement).blur()}\n      />\n    </InputGroup>\n  );\n}\n"],"mappings":";;;;;;;AAKA,SAAgBE,EAAS,EAAE,UAAO,UAAO,eAA+F;CACtI,IAAMC,IAAIH,EAAU,GACd,CAACI,GAAMC,KAAWC,EAASC,IAAQC,EAAcD,CAAK,IAAI,EAAE,GAC5D,CAACE,GAAOC,KAAYJ,EAASC,CAAK;CAKxC,OAJIA,MAAUE,MACZC,EAASH,CAAK,GACdF,EAAQE,IAAQC,EAAcD,CAAK,IAAI,EAAE,IAGzC,kBAACN,GAAD;EAAY,MAAK;EAAK,WAAU;EAC9B,UAAA,kBAACA,EAAW,OAAZ;GACE,cAAYU;GACZ,aAAaR,EAAE,6BAA6B,YAAY;GACxD,OAAOC;GACP,WAAU;GACV,WAAU;GACV,WAAW,MAAMC,EAAQ,EAAE,OAAO,KAAK;GACvC,cAAc;IACZ,IAAMO,IAAIC,EAAaT,CAAI;IAC3B,CAAI,CAACQ,KAAKE,EAASF,CAAC,MAAM,OAAOP,EAAQE,IAAQC,EAAcD,CAAK,IAAI,EAAE;GAC5E;GACA,YAAY,MAAM,EAAE,QAAQ,WAAY,EAAE,OAA4B,KAAK;EAC5E,CAAA;CACS,CAAA;AAEhB"}

package/dist/chunks/json-view-B6KHIWzh.js

@@ -0,0 +1,174 @@
+"use client";
+import { t as e } from "./cn-CidVUKMm.js";
+import { i as t } from "./context-BELWW79w.js";
+import { t as n } from "./icon-CeNQtobn.js";
+import { t as r } from "./use-copy-Dm2ncvMX.js";
+import { forwardRef as i, useState as a } from "react";
+import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
+import { ArrowRight01Icon as l, Copy01Icon as u, Tick02Icon as d } from "@hugeicons/core-free-icons";
+//#region src/components/code-block/json-view.tsx
+var f = { surface: {
+	well: { classes: "rounded-well bg-fill-1 p-16" },
+	plain: { classes: "" }
+} }, p = { surface: "well" };
+function m({ text: e, query: t }) {
+	if (!t) return /* @__PURE__ */ s(o, { children: e });
+	let n = e.toLowerCase().indexOf(t.toLowerCase());
+	return n < 0 ? /* @__PURE__ */ s(o, { children: e }) : /* @__PURE__ */ c(o, { children: [
+		e.slice(0, n),
+		/* @__PURE__ */ s("mark", {
+			className: "rounded-cell bg-warning-tint text-inherit ring-mark",
+			children: e.slice(n, n + t.length)
+		}),
+		e.slice(n + t.length)
+	] });
+}
+function h({ v: e, query: t }) {
+	return e === null ? /* @__PURE__ */ s("span", {
+		className: "font-semibold text-fg",
+		children: "null"
+	}) : typeof e == "boolean" ? /* @__PURE__ */ s("span", {
+		className: "font-semibold text-fg",
+		children: String(e)
+	}) : typeof e == "number" ? /* @__PURE__ */ s("span", {
+		className: "text-warning-text tabular",
+		children: e
+	}) : /* @__PURE__ */ c("span", {
+		className: "break-all text-info-text",
+		children: [
+			"\"",
+			/* @__PURE__ */ s(m, {
+				text: String(e),
+				query: t
+			}),
+			"\""
+		]
+	});
+}
+function g({ path: e }) {
+	let { copied: i, copy: a } = r(), o = t();
+	return /* @__PURE__ */ s("button", {
+		type: "button",
+		"aria-label": i ? o("jsonView.pathCopied", "Path copied") : o("jsonView.copyPath", "Copy path {path}", { path: e }),
+		onClick: (t) => {
+			t.stopPropagation(), a(e);
+		},
+		className: "relative ml-8 inline-flex size-20 items-center justify-center rounded-pill text-fg-tertiary tap-target opacity-0 transition-control group-hover/row:opacity-100 coarse:opacity-100 hover:bg-fill-2 hover:text-fg focus-visible:opacity-100",
+		children: /* @__PURE__ */ s(n, {
+			icon: i ? d : u,
+			size: "xs"
+		})
+	});
+}
+function _({ name: r, value: i, path: u, depth: d, open: f, query: p, last: v }) {
+	let [y, b] = a(d < f), x = t(), S = typeof i == "object" && !!i, C = S ? Array.isArray(i) ? i.map((e, t) => [t, e]) : Object.entries(i) : [], w = r === void 0 ? null : typeof r == "number" ? /* @__PURE__ */ c("span", {
+		className: "text-fg-tertiary tabular",
+		children: [r, ": "]
+	}) : /* @__PURE__ */ c("span", {
+		className: "text-fg",
+		children: [
+			"\"",
+			/* @__PURE__ */ s(m, {
+				text: r,
+				query: p
+			}),
+			"\"",
+			/* @__PURE__ */ s("span", {
+				className: "text-fg-tertiary",
+				children: ": "
+			})
+		]
+	}), T = v ? "" : ",";
+	if (!S) return /* @__PURE__ */ c("div", {
+		className: "group/row flex min-h-20 items-start pl-20",
+		style: { paddingLeft: d * 16 + 20 },
+		children: [/* @__PURE__ */ c("span", { children: [
+			w,
+			/* @__PURE__ */ s(h, {
+				v: i,
+				query: p
+			}),
+			/* @__PURE__ */ s("span", {
+				className: "text-fg-tertiary",
+				children: T
+			})
+		] }), u && /* @__PURE__ */ s(g, { path: u })]
+	});
+	let [E, D] = Array.isArray(i) ? ["[", "]"] : ["{", "}"];
+	return /* @__PURE__ */ c("div", { children: [/* @__PURE__ */ c("div", {
+		className: "group/row flex min-h-24 items-center",
+		style: { paddingLeft: d * 16 },
+		children: [
+			/* @__PURE__ */ s("button", {
+				type: "button",
+				"aria-expanded": y,
+				"aria-label": u ? y ? x("jsonView.collapsePath", "Collapse {path}", { path: u }) : x("jsonView.expandPath", "Expand {path}", { path: u }) : y ? x("jsonView.collapse", "Collapse") : x("jsonView.expand", "Expand"),
+				onClick: () => b(!y),
+				className: "-ml-4 inline-flex size-24 cursor-pointer items-center justify-center rounded-pill text-fg-tertiary hover:bg-fill-2 hover:text-fg focus-ring",
+				children: /* @__PURE__ */ s(n, {
+					icon: l,
+					size: "xs",
+					className: e("transition-transform duration-180", y && "rotate-90")
+				})
+			}),
+			/* @__PURE__ */ c("span", { children: [
+				w,
+				/* @__PURE__ */ s("span", {
+					className: "text-fg-tertiary",
+					children: E
+				}),
+				!y && /* @__PURE__ */ s("button", {
+					type: "button",
+					onClick: () => b(!0),
+					className: "mx-4 cursor-pointer rounded-code px-4 text-fg-tertiary hover:bg-fill-2",
+					children: Array.isArray(i) ? x("jsonView.items", "{count, plural, one {{n} item} other {{n} items}}", {
+						count: C.length,
+						n: String(C.length)
+					}) : x("jsonView.keys", "{count, plural, one {{n} key} other {{n} keys}}", {
+						count: C.length,
+						n: String(C.length)
+					})
+				}),
+				!y && /* @__PURE__ */ c("span", {
+					className: "text-fg-tertiary",
+					children: [D, T]
+				})
+			] }),
+			u && /* @__PURE__ */ s(g, { path: u })
+		]
+	}), y && /* @__PURE__ */ c(o, { children: [C.map(([e, t], n) => /* @__PURE__ */ s(_, {
+		name: e,
+		value: t,
+		path: typeof e == "number" ? `${u}[${e}]` : u ? `${u}.${e}` : String(e),
+		depth: d + 1,
+		open: f,
+		query: p,
+		last: n === C.length - 1
+	}, e)), /* @__PURE__ */ c("div", {
+		className: "min-h-20 text-fg-tertiary",
+		style: { paddingLeft: d * 16 + 20 },
+		children: [D, T]
+	})] })] });
+}
+var v = /* @__PURE__ */ i(function({ value: t, defaultDepth: n = 2, query: r, surface: i = "well", className: a }, o) {
+	return /* @__PURE__ */ s("div", {
+		ref: o,
+		tabIndex: 0,
+		role: "region",
+		"aria-label": "JSON",
+		className: e("mono overflow-x-auto text-small focus-ring-inset leading-code text-fg scrollbar-quiet", f.surface[i].classes, a),
+		children: /* @__PURE__ */ s(_, {
+			value: t,
+			path: "",
+			depth: 0,
+			open: n,
+			query: r,
+			last: !0
+		})
+	});
+});
+process.env.NODE_ENV !== "production" && (v.displayName = "JsonView");
+//#endregion
+export { p as n, f as r, v as t };
+
+//# sourceMappingURL=json-view-B6KHIWzh.js.map

package/dist/chunks/json-view-B6KHIWzh.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"json-view-B6KHIWzh.js","names":["_Fragment","__icon_Tick02Icon","__icon_Copy01Icon","__icon_ArrowRight01Icon","cn","useUiText","Icon","useCopy","Fragment$1","KAESO_JSON_VIEW_VARIANTS","KAESO_JSON_VIEW_DEFAULT_VARIANTS","Mark","query","text","i","Scalar","v","CopyPath","t","copied","e","copy","path","Tick02Icon","Copy01Icon","Node","initialOpen","open","setOpen","useState","depth","isObj","value","entries","keyLabel","name","comma","last","o","c","ArrowRight01Icon","k","JsonView","surface","className","defaultDepth"],"sources":["../../src/components/code-block/json-view.tsx"],"sourcesContent":["import { forwardRef, useState, type ReactNode } from \"react\";\nimport { cn } from \"../../utils/cn.js\";\nimport { Tick02Icon as __icon_Tick02Icon, Copy01Icon as __icon_Copy01Icon, ArrowRight01Icon as __icon_ArrowRight01Icon } from \"@hugeicons/core-free-icons\";\nimport { Icon } from \"../icon/icon.js\";\nimport { useCopy } from \"../../hooks/use-copy.js\";\nimport { useUiText } from \"../../i18n/context.js\";\n\nexport const KAESO_JSON_VIEW_VARIANTS = {\n  surface: {\n    well: { classes: \"rounded-well bg-fill-1 p-16\" },\n    plain: { classes: \"\" },\n  },\n} as const;\nexport const KAESO_JSON_VIEW_DEFAULT_VARIANTS = { surface: \"well\" } as const;\n\ntype Json = string | number | boolean | null | Json[] | { [k: string]: Json };\n\nexport interface JsonViewProps {\n  value: unknown;\n  defaultDepth?: number | undefined;\n  query?: string | undefined;\n  surface?: keyof typeof KAESO_JSON_VIEW_VARIANTS.surface | undefined;\n  className?: string | undefined;\n}\n\nfunction Mark({ text, query }: { text: string; query?: string | undefined }) {\n  if (!query) return <>{text}</>;\n  const i = text.toLowerCase().indexOf(query.toLowerCase());\n  if (i < 0) return <>{text}</>;\n  return (\n    <>\n      {text.slice(0, i)}\n      <mark className=\"rounded-cell bg-warning-tint text-inherit ring-mark\">{text.slice(i, i + query.length)}</mark>\n      {text.slice(i + query.length)}\n    </>\n  );\n}\n\nfunction Scalar({ v, query }: { v: Json; query?: string | undefined }) {\n  if (v === null) return <span className=\"font-semibold text-fg\">null</span>;\n  if (typeof v === \"boolean\") return <span className=\"font-semibold text-fg\">{String(v)}</span>;\n  if (typeof v === \"number\") return <span className=\"text-warning-text tabular\">{v}</span>;\n  return (\n    <span className=\"break-all text-info-text\">\n      \"<Mark text={String(v)} query={query} />\"\n    </span>\n  );\n}\n\nfunction CopyPath({ path }: { path: string }) {\n  const { copied, copy } = useCopy();\n  const t = useUiText();\n  return (\n    <button\n      type=\"button\"\n      aria-label={copied ? t(\"jsonView.pathCopied\", \"Path copied\") : t(\"jsonView.copyPath\", \"Copy path {path}\", { path })}\n      onClick={(e) => {\n        e.stopPropagation();\n        void copy(path);\n      }}\n      className=\"relative ml-8 inline-flex size-20 items-center justify-center rounded-pill text-fg-tertiary tap-target opacity-0 transition-control group-hover/row:opacity-100 coarse:opacity-100 hover:bg-fill-2 hover:text-fg focus-visible:opacity-100\"\n    >\n      <Icon icon={copied ? __icon_Tick02Icon : __icon_Copy01Icon} size=\"xs\" />\n    </button>\n  );\n}\n\nfunction Node({\n  name,\n  value,\n  path,\n  depth,\n  open: initialOpen,\n  query,\n  last,\n}: {\n  name?: string | number | undefined;\n  value: Json;\n  path: string;\n  depth: number;\n  open: number;\n  query?: string | undefined;\n  last: boolean;\n}) {\n  const [open, setOpen] = useState(depth < initialOpen);\n  const t = useUiText();\n  const isObj = value !== null && typeof value === \"object\";\n  const entries: [string | number, Json][] = isObj ? (Array.isArray(value) ? value.map((v, i) => [i, v]) : Object.entries(value)) : [];\n  const keyLabel: ReactNode =\n    name === undefined ? null : typeof name === \"number\" ? (\n      <span className=\"text-fg-tertiary tabular\">{name}: </span>\n    ) : (\n      <span className=\"text-fg\">\n        \"<Mark text={name} query={query} />\"<span className=\"text-fg-tertiary\">: </span>\n      </span>\n    );\n  const comma = last ? \"\" : \",\";\n  if (!isObj) {\n    return (\n      <div className=\"group/row flex min-h-20 items-start pl-20\" style={{ paddingLeft: depth * 16 + 20 }}>\n        <span>\n          {keyLabel}\n          <Scalar v={value} query={query} />\n          <span className=\"text-fg-tertiary\">{comma}</span>\n        </span>\n        {path && <CopyPath path={path} />}\n      </div>\n    );\n  }\n  const [o, c] = Array.isArray(value) ? [\"[\", \"]\"] : [\"{\", \"}\"];\n  return (\n    <div>\n      <div className=\"group/row flex min-h-24 items-center\" style={{ paddingLeft: depth * 16 }}>\n        <button\n          type=\"button\"\n          aria-expanded={open}\n          aria-label={\n            path\n              ? open\n                ? t(\"jsonView.collapsePath\", \"Collapse {path}\", { path })\n                : t(\"jsonView.expandPath\", \"Expand {path}\", { path })\n              : open\n                ? t(\"jsonView.collapse\", \"Collapse\")\n                : t(\"jsonView.expand\", \"Expand\")\n          }\n          onClick={() => setOpen(!open)}\n          className=\"-ml-4 inline-flex size-24 cursor-pointer items-center justify-center rounded-pill text-fg-tertiary hover:bg-fill-2 hover:text-fg focus-ring\"\n        >\n          <Icon icon={__icon_ArrowRight01Icon} size=\"xs\" className={cn(\"transition-transform duration-180\", open && \"rotate-90\")} />\n        </button>\n        <span>\n          {keyLabel}\n          <span className=\"text-fg-tertiary\">{o}</span>\n          {!open && (\n            <button type=\"button\" onClick={() => setOpen(true)} className=\"mx-4 cursor-pointer rounded-code px-4 text-fg-tertiary hover:bg-fill-2\">\n              {Array.isArray(value)\n                ? t(\"jsonView.items\", \"{count, plural, one {{n} item} other {{n} items}}\", { count: entries.length, n: String(entries.length) })\n                : t(\"jsonView.keys\", \"{count, plural, one {{n} key} other {{n} keys}}\", { count: entries.length, n: String(entries.length) })}\n            </button>\n          )}\n          {!open && (\n            <span className=\"text-fg-tertiary\">\n              {c}\n              {comma}\n            </span>\n          )}\n        </span>\n        {path && <CopyPath path={path} />}\n      </div>\n      {open && (\n        <>\n          {entries.map(([k, v], i) => (\n            <Node\n              key={k}\n              name={k}\n              value={v}\n              path={typeof k === \"number\" ? `${path}[${k}]` : path ? `${path}.${k}` : String(k)}\n              depth={depth + 1}\n              open={initialOpen}\n              query={query}\n              last={i === entries.length - 1}\n            />\n          ))}\n          <div className=\"min-h-20 text-fg-tertiary\" style={{ paddingLeft: depth * 16 + 20 }}>\n            {c}\n            {comma}\n          </div>\n        </>\n      )}\n    </div>\n  );\n}\n\nexport const JsonView = /* @__PURE__ */ forwardRef<HTMLDivElement, JsonViewProps>(function JsonView({ value, defaultDepth = 2, query, surface = \"well\", className }, ref) {\n  return (\n    <div\n      ref={ref}\n      tabIndex={0}\n      role=\"region\"\n      aria-label=\"JSON\"\n      className={cn(\n        \"mono overflow-x-auto text-small focus-ring-inset leading-code text-fg scrollbar-quiet\",\n        KAESO_JSON_VIEW_VARIANTS.surface[surface].classes,\n        className,\n      )}\n    >\n      <Node value={value as Json} path=\"\" depth={0} open={defaultDepth} query={query} last />\n    </div>\n  );\n});\nif (process.env.NODE_ENV !== \"production\") JsonView.displayName = \"JsonView\";\n"],"mappings":";;;;;;;;;AAOA,IAAaS,IAA2B,EACtC,SAAS;CACP,MAAM,EAAE,SAAS,8BAA8B;CAC/C,OAAO,EAAE,SAAS,GAAG;AACvB,EACF,GACaC,IAAmC,EAAE,SAAS,OAAO;AAYlE,SAASC,EAAK,EAAE,SAAM,YAAuD;CAC3E,IAAI,CAACC,GAAO,OAAO,kBAAAZ,GAAA,EAAA,UAAGa,EAAO,CAAA;CAC7B,IAAMC,IAAID,EAAK,YAAY,CAAC,CAAC,QAAQD,EAAM,YAAY,CAAC;CAExD,OADIE,IAAI,IAAU,kBAAAd,GAAA,EAAA,UAAGa,EAAO,CAAA,IAE1B,kBAAAb,GAAA,EAAA,UAAA;EACGa,EAAK,MAAM,GAAGC,CAAC;EAChB,kBAAC,QAAD;GAAM,WAAU;GAAuD,UAAAD,EAAK,MAAMC,GAAGA,IAAIF,EAAM,MAAM;EAAQ,CAAA;EAC5GC,EAAK,MAAMC,IAAIF,EAAM,MAAM;CAC5B,EAAA,CAAA;AAEN;AAEA,SAASG,EAAO,EAAE,MAAG,YAAkD;CAIrE,OAHIC,MAAM,OAAa,kBAAC,QAAD;EAAM,WAAU;EAAwB,UAAA;CAAU,CAAA,IACrE,OAAOA,KAAM,YAAkB,kBAAC,QAAD;EAAM,WAAU;EAAyB,UAAA,OAAOA,CAAC;CAAQ,CAAA,IACxF,OAAOA,KAAM,WAAiB,kBAAC,QAAD;EAAM,WAAU;EAA6B,UAAAA;CAAQ,CAAA,IAErF,kBAAC,QAAD;EAAM,WAAU;EAAhB,UAAA;GAA2C;GACxC,kBAACL,GAAD;IAAM,MAAM,OAAOK,CAAC;IAAU;GAAQ,CAAA;GAAC;EACpC;;AAEV;AAEA,SAASC,EAAS,EAAE,WAA0B;CAC5C,IAAM,EAAE,WAAQ,YAASV,EAAQ,GAC3BW,IAAIb,EAAU;CACpB,OACE,kBAAC,UAAD;EACE,MAAK;EACL,cAAYc,IAASD,EAAE,uBAAuB,aAAa,IAAIA,EAAE,qBAAqB,oBAAoB,EAAE,QAAK,CAAC;EAClH,UAAU,MAAM;GAEd,AADAE,EAAE,gBAAgB,GAClBC,EAAUC,CAAI;EAChB;EACA,WAAU;EAEV,UAAA,kBAAChB,GAAD;GAAM,MAAMa,IAASlB,IAAoBC;GAAmB,MAAK;EAAM,CAAA;CACjE,CAAA;AAEZ;AAEA,SAASuB,EAAK,EACZ,SACA,UACA,SACA,UACA,MAAMC,GACN,UACA,WASC;CACD,IAAM,CAACC,GAAMC,KAAWC,EAASC,IAAQJ,CAAW,GAC9CR,IAAIb,EAAU,GACd0B,IAA0B,OAAOC,KAAU,cAAnCA,GACRC,IAAqCF,IAAS,MAAM,QAAQC,CAAK,IAAIA,EAAM,KAAK,GAAG,MAAM,CAAClB,GAAGE,CAAC,CAAC,IAAI,OAAO,QAAQgB,CAAK,IAAK,CAAC,GAC7HE,IACJC,MAAS,KAAA,IAAY,OAAO,OAAOA,KAAS,WAC1C,kBAAC,QAAD;EAAM,WAAU;EAAhB,UAAA,CAA4CA,GAAK,IAAQ;CAEzD,CAAA,IAAA,kBAAC,QAAD;EAAM,WAAU;EAAhB,UAAA;GAA0B;GACvB,kBAACxB,GAAD;IAAM,MAAMwB;IAAa;GAAQ,CAAA;GAAC;GAAC,kBAAC,QAAD;IAAM,WAAU;IAAmB,UAAA;GAAQ,CAAA;EAC3E;C,IAEJC,IAAQC,IAAO,KAAK;CAC1B,IAAI,CAACN,GACH,OACE,kBAAC,OAAD;EAAK,WAAU;EAA4C,OAAO,EAAE,aAAaD,IAAQ,KAAK,GAAG;EAAjG,UAAA,CACE,kBAAC,QAAD,EAAA,UAAA;GACGI;GACD,kBAACnB,GAAD;IAAQ,GAAGiB;IAAc;GAAQ,CAAA;GACjC,kBAAC,QAAD;IAAM,WAAU;IAAoB,UAAAI;GAAY,CAAA;EAC5C,EAAA,CAAA,GACLd,KAAQ,kBAACL,GAAD,EAAgB,QAAO,CAAA,CAC7B;;CAGT,IAAM,CAACqB,GAAGC,KAAK,MAAM,QAAQP,CAAK,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,GAAG;CAC5D,OACE,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,OAAD;EAAK,WAAU;EAAuC,OAAO,EAAE,aAAaF,IAAQ,GAAG;EAAvF,UAAA;GACE,kBAAC,UAAD;IACE,MAAK;IACL,iBAAeH;IACf,cACEL,IACIK,IACET,EAAE,yBAAyB,mBAAmB,EAAE,QAAK,CAAC,IACtDA,EAAE,uBAAuB,iBAAiB,EAAE,QAAK,CAAC,IACpDS,IACET,EAAE,qBAAqB,UAAU,IACjCA,EAAE,mBAAmB,QAAQ;IAErC,eAAeU,EAAQ,CAACD,CAAI;IAC5B,WAAU;IAEV,UAAA,kBAACrB,GAAD;KAAM,MAAMH;KAAyB,MAAK;KAAK,WAAWC,EAAG,qCAAqCuB,KAAQ,WAAW;IAAI,CAAA;GACnH,CAAA;GACR,kBAAC,QAAD,EAAA,UAAA;IACGO;IACD,kBAAC,QAAD;KAAM,WAAU;KAAoB,UAAAI;IAAQ,CAAA;IAC3C,CAACX,KACA,kBAAC,UAAD;KAAQ,MAAK;KAAS,eAAeC,EAAQ,EAAI;KAAG,WAAU;KAC3D,UAAA,MAAM,QAAQI,CAAK,IAChBd,EAAE,kBAAkB,qDAAqD;MAAE,OAAOe,EAAQ;MAAQ,GAAG,OAAOA,EAAQ,MAAM;KAAE,CAAC,IAC7Hf,EAAE,iBAAiB,mDAAmD;MAAE,OAAOe,EAAQ;MAAQ,GAAG,OAAOA,EAAQ,MAAM;KAAE,CAAC;IACxH,CAAA;IAET,CAACN,KACA,kBAAC,QAAD;KAAM,WAAU;KAAhB,UAAA,CACGY,GACAH,CACG;;GAEJ,EAAA,CAAA;GACLd,KAAQ,kBAACL,GAAD,EAAgB,QAAO,CAAA;EAC7B;CACJ,CAAA,GAAAU,KACC,kBAAA3B,GAAA,EAAA,UAAA,CACGiC,EAAQ,KAAK,CAACQ,GAAGzB,IAAI,MACpB,kBAACS,GAAD;EAEE,MAAMgB;EACN,OAAOzB;EACP,MAAM,OAAOyB,KAAM,WAAW,GAAGnB,EAAK,GAAGmB,EAAE,KAAKnB,IAAO,GAAGA,EAAK,GAAGmB,MAAM,OAAOA,CAAC;EAChF,OAAOX,IAAQ;EACf,MAAMJ;EACC;EACP,MAAMZ,MAAMmB,EAAQ,SAAS;CAC9B,GARMQ,CAQN,CACF,GACD,kBAAC,OAAD;EAAK,WAAU;EAA4B,OAAO,EAAE,aAAaX,IAAQ,KAAK,GAAG;EAAjF,UAAA,CACGS,GACAH,CACE;CACL,CAAA,CAAA,EAAA,CAAA,CAED,EAAA,CAAA;AAET;AAEA,IAAaM,IAA2B,kBAA0C,SAAkB,EAAE,UAAO,kBAAe,GAAG,UAAO,aAAU,QAAQ,gBAAa,GAAK;CACxK,OACE,kBAAC,OAAD;EACO;EACL,UAAU;EACV,MAAK;EACL,cAAW;EACX,WAAWtC,EACT,yFACAK,EAAyB,QAAQkC,EAAQ,CAAC,SAC1CC,CACF;EAEA,UAAA,kBAACnB,GAAD;GAAa;GAAe,MAAK;GAAG,OAAO;GAAG,MAAMoB;GAAqB;GAAO,MAAA;EAAM,CAAA;CACnF,CAAA;AAET,CAAC;AACD,QAAA,IAAA,aAA6B,iBAAc,EAAS,cAAc"}

package/dist/chunks/kbd-CBcBDvqU.js

@@ -0,0 +1,132 @@
+"use client";
+import { t as e } from "./cn-CidVUKMm.js";
+import { i as t, n } from "./context-BELWW79w.js";
+import { Fragment as r, forwardRef as i, useSyncExternalStore as a } from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region src/components/kbd/kbd.tsx
+var c = { tone: {
+	default: { classes: "bg-fill-1 text-fg-secondary shadow-ring" },
+	onInk: { classes: "bg-on-ink/15 text-on-ink/80 shadow-none" }
+} }, l = { tone: "default" }, u = () => typeof navigator < "u" && /Mac|iPhone|iPad/.test(navigator.platform || navigator.userAgent), d = () => () => void 0, f = () => a(d, u, () => !1);
+function p(e) {
+	let t = e("kbd.ctrl", "Ctrl"), n = e("kbd.optionName", "Option");
+	return {
+		mod: [
+			"⌘",
+			t,
+			e("kbd.commandName", "Command")
+		],
+		cmd: [
+			"⌘",
+			t,
+			e("kbd.commandName", "Command")
+		],
+		ctrl: [
+			"⌃",
+			t,
+			e("kbd.controlName", "Control")
+		],
+		alt: [
+			"⌥",
+			"Alt",
+			n
+		],
+		option: [
+			"⌥",
+			"Alt",
+			n
+		],
+		shift: [
+			"⇧",
+			e("kbd.shift", "Shift"),
+			e("kbd.shiftName", "Shift")
+		],
+		enter: [
+			"↵",
+			"Enter",
+			e("kbd.enterName", "Enter")
+		],
+		esc: [
+			"esc",
+			"Esc",
+			e("kbd.escapeName", "Escape")
+		],
+		backspace: [
+			"⌫",
+			e("kbd.backspace", "Backspace"),
+			e("kbd.backspaceName", "Backspace")
+		],
+		up: [
+			"↑",
+			"↑",
+			e("kbd.upName", "Up")
+		],
+		down: [
+			"↓",
+			"↓",
+			e("kbd.downName", "Down")
+		],
+		left: [
+			"←",
+			"←",
+			e("kbd.leftName", "Left")
+		],
+		right: [
+			"→",
+			"→",
+			e("kbd.rightName", "Right")
+		],
+		tab: [
+			"⇥",
+			"Tab",
+			e("kbd.tabName", "Tab")
+		]
+	};
+}
+function m(e, t = n, r = u()) {
+	let i = p(t)[e.toLowerCase()];
+	return i ? {
+		visual: r ? i[0] : i[1],
+		spoken: i[2]
+	} : {
+		visual: e.length === 1 ? e.toUpperCase() : e,
+		spoken: e
+	};
+}
+var h = /* @__PURE__ */ i(function({ children: n, tone: r = "default", className: i, ...a }, s) {
+	let l = t(), u = f(), d = typeof n == "string" ? m(n, l, u) : null;
+	return /* @__PURE__ */ o("kbd", {
+		ref: s,
+		className: e("inline-flex h-20 min-w-20 shrink-0 items-center justify-center rounded-kbd px-5 font-sans text-micro font-medium tabular", c.tone[r].classes, i),
+		...d && d.spoken !== d.visual ? {
+			"aria-label": d.spoken,
+			title: d.spoken
+		} : {},
+		...a,
+		children: d ? d.visual : n
+	});
+});
+process.env.NODE_ENV !== "production" && (h.displayName = "Kbd");
+var g = /* @__PURE__ */ i(function({ keys: n, tone: i = "default", className: a, ...c }, l) {
+	let u = t(), d = n.length > 0 && Array.isArray(n[0]) ? n : [n];
+	return /* @__PURE__ */ o("span", {
+		ref: l,
+		className: e("inline-flex items-center gap-4 align-middle", a),
+		...c,
+		children: d.map((t, n) => /* @__PURE__ */ s(r, { children: [n > 0 && /* @__PURE__ */ o("span", {
+			className: e("text-caption font-medium", i === "onInk" ? "text-on-ink/70" : "text-fg-secondary"),
+			children: u("kbd.then", "then")
+		}), /* @__PURE__ */ o("span", {
+			className: "inline-flex items-center gap-2",
+			children: t.map((e) => /* @__PURE__ */ o(h, {
+				tone: i,
+				children: e
+			}, e))
+		})] }, n))
+	});
+});
+process.env.NODE_ENV !== "production" && (g.displayName = "KbdSequence");
+//#endregion
+export { m as a, g as i, c as n, h as r, l as t };
+
+//# sourceMappingURL=kbd-CBcBDvqU.js.map