@cloudflare/kumo 1.14.1 → 1.15.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +11 -0
- package/ai/component-registry.json +88 -6
- package/ai/component-registry.md +32 -2
- package/ai/schemas.ts +1 -1
- package/dist/.build-complete +1 -1
- package/dist/ai/schemas.d.ts +4 -0
- package/dist/ai/schemas.d.ts.map +1 -1
- package/dist/ai/schemas.js +1 -1
- package/dist/ai/schemas.js.map +1 -1
- package/dist/chunks/{breadcrumbs-gr907zcoo65rpn90.js → breadcrumbs-m79gm4gjwbfajpna.js} +2 -2
- package/dist/chunks/{breadcrumbs-gr907zcoo65rpn90.js.map → breadcrumbs-m79gm4gjwbfajpna.js.map} +1 -1
- package/dist/chunks/{button-d82sexqgnd834eaa.js → button-j0hi0afn33w9lxgi.js} +2 -2
- package/dist/chunks/button-j0hi0afn33w9lxgi.js.map +1 -0
- package/dist/chunks/{checkbox-f4qsbq6xycaji7qw.js → checkbox-bvzuggmadtqawis4.js} +2 -2
- package/dist/chunks/{checkbox-f4qsbq6xycaji7qw.js.map → checkbox-bvzuggmadtqawis4.js.map} +1 -1
- package/dist/chunks/{clipboard-text-fvggzgqrza82t5om.js → clipboard-text-mwcknzn75qdvigrd.js} +3 -3
- package/dist/chunks/{clipboard-text-fvggzgqrza82t5om.js.map → clipboard-text-mwcknzn75qdvigrd.js.map} +1 -1
- package/dist/chunks/{combobox-om4zw74o076sa00p.js → combobox-ndbaroqh1c0u49ye.js} +3 -3
- package/dist/chunks/{combobox-om4zw74o076sa00p.js.map → combobox-ndbaroqh1c0u49ye.js.map} +1 -1
- package/dist/chunks/{empty-h3qhwtx0z8arupc9.js → empty-hrwtammqp0b2nvtf.js} +2 -2
- package/dist/chunks/{empty-h3qhwtx0z8arupc9.js.map → empty-hrwtammqp0b2nvtf.js.map} +1 -1
- package/dist/chunks/{field-lc4gr226y5aqlctf.js → field-lweivfadxgpqhuqi.js} +2 -2
- package/dist/chunks/{field-lc4gr226y5aqlctf.js.map → field-lweivfadxgpqhuqi.js.map} +1 -1
- package/dist/chunks/{input-area-ce3bf8m8wvot44kg.js → input-area-obli4ufvu40bfpgp.js} +3 -3
- package/dist/chunks/{input-area-ce3bf8m8wvot44kg.js.map → input-area-obli4ufvu40bfpgp.js.map} +1 -1
- package/dist/chunks/{input-group-kttdor9mr32k289o.js → input-group-dwtsd04lzf2bcsdo.js} +3 -3
- package/dist/chunks/{input-group-kttdor9mr32k289o.js.map → input-group-dwtsd04lzf2bcsdo.js.map} +1 -1
- package/dist/chunks/{input-nvne68upfj8b2bk6.js → input-ko2dne1givlxq7sz.js} +2 -2
- package/dist/chunks/{input-nvne68upfj8b2bk6.js.map → input-ko2dne1givlxq7sz.js.map} +1 -1
- package/dist/chunks/{label-e42o95ab0dxmchxb.js → label-kjahhybc191quieo.js} +2 -2
- package/dist/chunks/{label-e42o95ab0dxmchxb.js.map → label-kjahhybc191quieo.js.map} +1 -1
- package/dist/chunks/{pagination-owm6h66jjgv1tjoe.js → pagination-eo0gzzm7v5w8niqe.js} +3 -3
- package/dist/chunks/{pagination-owm6h66jjgv1tjoe.js.map → pagination-eo0gzzm7v5w8niqe.js.map} +1 -1
- package/dist/chunks/{radio-ff1csb328f12smd4.js → radio-oi9iw7ls1t04j377.js} +32 -32
- package/dist/chunks/{radio-ff1csb328f12smd4.js.map → radio-oi9iw7ls1t04j377.js.map} +1 -1
- package/dist/chunks/{select-go7a0z3evkh9cfxq.js → select-0m0xklfwdlx8dwba.js} +3 -3
- package/dist/chunks/{select-go7a0z3evkh9cfxq.js.map → select-0m0xklfwdlx8dwba.js.map} +1 -1
- package/dist/chunks/{sensitive-input-gtzk3vit4i35n95g.js → sensitive-input-rjpykxn2llh0thx1.js} +3 -3
- package/dist/chunks/{sensitive-input-gtzk3vit4i35n95g.js.map → sensitive-input-rjpykxn2llh0thx1.js.map} +1 -1
- package/dist/chunks/{switch-cpbp0i75jnazkani.js → switch-lv4mrrkfl5uc99xo.js} +2 -2
- package/dist/chunks/{switch-cpbp0i75jnazkani.js.map → switch-lv4mrrkfl5uc99xo.js.map} +1 -1
- package/dist/chunks/{table-g41yb7ruredizqr8.js → table-fh7jmfip27vdapxm.js} +2 -2
- package/dist/chunks/{table-g41yb7ruredizqr8.js.map → table-fh7jmfip27vdapxm.js.map} +1 -1
- package/dist/chunks/{toast-j5gtfc50xpzzd0hc.js → toast-kswfqmjysxcrwij3.js} +179 -100
- package/dist/chunks/toast-kswfqmjysxcrwij3.js.map +1 -0
- package/dist/code.js +1 -1
- package/dist/components/breadcrumbs.js +1 -1
- package/dist/components/button.js +1 -1
- package/dist/components/checkbox.js +1 -1
- package/dist/components/clipboard-text.js +1 -1
- package/dist/components/combobox.js +1 -1
- package/dist/components/empty.js +1 -1
- package/dist/components/field.js +1 -1
- package/dist/components/input.js +3 -3
- package/dist/components/label.js +1 -1
- package/dist/components/pagination.js +1 -1
- package/dist/components/radio.js +1 -1
- package/dist/components/select.js +1 -1
- package/dist/components/sensitive-input.js +1 -1
- package/dist/components/switch.js +1 -1
- package/dist/components/table.js +1 -1
- package/dist/components/toast.js +1 -1
- package/dist/index.js +20 -20
- package/dist/src/components/button/button.d.ts +1 -1
- package/dist/src/components/radio/radio.d.ts +1 -1
- package/dist/src/components/radio/radio.d.ts.map +1 -1
- package/dist/src/components/toast/toast.d.ts +12 -2
- package/dist/src/components/toast/toast.d.ts.map +1 -1
- package/dist/styles/kumo-standalone.css +1 -1
- package/package.json +1 -1
- package/dist/chunks/button-d82sexqgnd834eaa.js.map +0 -1
- package/dist/chunks/toast-j5gtfc50xpzzd0hc.js.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"field-
|
|
1
|
+
{"version":3,"file":"field-lweivfadxgpqhuqi.js","sources":["../../src/components/field/field.tsx"],"sourcesContent":["import { Field as FieldBase } from \"@base-ui/react/field\";\nimport type { ReactNode } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Label } from \"../label\";\n\n/** Field variant definitions (currently empty, reserved for future additions). */\nexport const KUMO_FIELD_VARIANTS = {\n // Field currently has no variant options but structure is ready for future additions\n} as const;\n\nexport const KUMO_FIELD_DEFAULT_VARIANTS = {} as const;\n\n// Derived types from KUMO_FIELD_VARIANTS\nexport interface KumoFieldVariantsProps {\n /**\n * When true, places the control (checkbox/switch) before the label visually.\n * When false (default), places the label before the control.\n * Used to support different layout patterns (e.g., iOS-style toggles on the right).\n */\n controlFirst?: boolean;\n}\n\nexport function fieldVariants({\n controlFirst = false,\n}: KumoFieldVariantsProps = {}) {\n return cn(\n // Base styles - vertical layout (default)\n \"grid gap-2\",\n\n // Horizontal layout for checkbox and switch\n // Default: Grid auto-reverses in RTL (desired)\n \"has-[input[type=checkbox]]:grid-cols-[auto_1fr] has-[input[type=checkbox]]:items-center\",\n \"has-[[role=switch]]:grid-cols-[auto_1fr] has-[[role=switch]]:items-center\",\n\n // Control first: use flexbox with row-reverse to flip visual order without affecting text direction\n // flex-row-reverse in LTR: Control→Label, in RTL: Label→Control (opposite of grid default)\n controlFirst && [\n \"has-[input[type=checkbox]]:flex has-[input[type=checkbox]]:flex-row-reverse has-[input[type=checkbox]]:flex-wrap has-[input[type=checkbox]]:items-center\",\n \"has-[[role=switch]]:flex has-[[role=switch]]:flex-row-reverse has-[[role=switch]]:flex-wrap has-[[role=switch]]:items-center\",\n \"[&>label]:flex-1\",\n ],\n );\n}\n\n/**\n * Match type for field validation errors.\n * Can be a boolean or a key from the browser's ValidityState interface.\n * Source: BaseErrorProps[\"match\"] (ComponentPropsWithoutRef<typeof FieldBase.Error>)\n */\nexport type FieldErrorMatch =\n | boolean\n | \"badInput\"\n | \"customError\"\n | \"patternMismatch\"\n | \"rangeOverflow\"\n | \"rangeUnderflow\"\n | \"stepMismatch\"\n | \"tooLong\"\n | \"tooShort\"\n | \"typeMismatch\"\n | \"valid\"\n | \"valueMissing\";\n\n/**\n * Field component props — wraps a form control with label, description, and error message.\n *\n * @example\n * ```tsx\n * <Field label=\"Email\" required>\n * <Input placeholder=\"you@example.com\" />\n * </Field>\n *\n * <Field label=\"Phone\" required={false} description=\"We'll only use this for account recovery.\">\n * <Input placeholder=\"+1 555-0000\" />\n * </Field>\n * ```\n */\nexport interface FieldProps extends KumoFieldVariantsProps {\n /** The form control element(s) to wrap (Input, Select, Checkbox, etc.). */\n children: ReactNode;\n /** The label content — can be a string or any React node. */\n label: ReactNode;\n /**\n * When explicitly `false`, shows gray \"(optional)\" text after the label.\n * When `true` or `undefined`, no indicator is shown.\n */\n required?: boolean;\n /** Tooltip content displayed next to the label via an info icon. */\n labelTooltip?: ReactNode;\n /** Validation error with a message and a browser `ValidityState` match key. */\n error?: {\n message: ReactNode;\n match: FieldErrorMatch;\n };\n /** Helper text displayed below the control (hidden when `error` is present). */\n description?: ReactNode;\n /** When `true`, places the control before the label (for checkbox/switch layouts). */\n controlFirst?: boolean;\n}\n\n/**\n * Form field wrapper that provides a label, optional description, and error display\n * around any form control. Built on Base UI Field primitives.\n *\n * @example\n * ```tsx\n * <Field label=\"Username\">\n * <Input placeholder=\"Choose a username\" />\n * </Field>\n * ```\n */\nexport function Field({\n children,\n label,\n required,\n labelTooltip,\n error,\n description,\n controlFirst = false,\n}: FieldProps) {\n // Show \"(optional)\" when required is explicitly false\n const showOptional = required === false;\n\n return (\n <FieldBase.Root className={fieldVariants({ controlFirst })}>\n <FieldBase.Label className=\"m-0 text-base font-medium text-kumo-default\">\n <Label showOptional={showOptional} tooltip={labelTooltip} asContent>\n {label}\n </Label>\n </FieldBase.Label>\n {children}\n {error ? (\n <FieldBase.Error\n className={cn(\n \"text-sm leading-snug text-kumo-danger\",\n // Span full width in horizontal layout\n \"col-span-full\",\n )}\n match={error.match}\n >\n {error.message}\n </FieldBase.Error>\n ) : (\n description && (\n <FieldBase.Description\n className={cn(\n \"text-sm leading-snug text-kumo-subtle\",\n // Span full width in horizontal layout\n \"col-span-full\",\n )}\n >\n {description}\n </FieldBase.Description>\n )\n )}\n </FieldBase.Root>\n );\n}\n"],"names":["KUMO_FIELD_VARIANTS","KUMO_FIELD_DEFAULT_VARIANTS","fieldVariants","controlFirst","cn","Field","children","label","required","labelTooltip","error","description","showOptional","jsxs","FieldBase.Root","jsx","FieldBase.Label","Label","FieldBase.Error","FieldBase.Description"],"mappings":";;;;;AAMO,MAAMA,IAAsB;AAAA;AAEnC,GAEaC,IAA8B,CAAA;AAYpC,SAASC,EAAc;AAAA,EAC5B,cAAAC,IAAe;AACjB,IAA4B,IAAI;AAC9B,SAAOC;AAAA;AAAA,IAEL;AAAA;AAAA;AAAA,IAIA;AAAA,IACA;AAAA;AAAA;AAAA,IAIAD,KAAgB;AAAA,MACd;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,EACF;AAEJ;AAqEO,SAASE,EAAM;AAAA,EACpB,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,cAAAC;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,cAAAR,IAAe;AACjB,GAAe;AAEb,QAAMS,IAAeJ,MAAa;AAElC,SACE,gBAAAK,EAACC,GAAA,EAAe,WAAWZ,EAAc,EAAE,cAAAC,EAAA,CAAc,GACvD,UAAA;AAAA,IAAA,gBAAAY,EAACC,GAAA,EAAgB,WAAU,+CACzB,UAAA,gBAAAD,EAACE,GAAA,EAAM,cAAAL,GAA4B,SAASH,GAAc,WAAS,IAChE,aACH,GACF;AAAA,IACCH;AAAA,IACAI,IACC,gBAAAK;AAAA,MAACG;AAAAA,MAAA;AAAA,QACC,WAAWd;AAAA,UACT;AAAA;AAAA,UAEA;AAAA,QAAA;AAAA,QAEF,OAAOM,EAAM;AAAA,QAEZ,UAAAA,EAAM;AAAA,MAAA;AAAA,IAAA,IAGTC,KACE,gBAAAI;AAAA,MAACI;AAAAA,MAAA;AAAA,QACC,WAAWf;AAAA,UACT;AAAA;AAAA,UAEA;AAAA,QAAA;AAAA,QAGD,UAAAO;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,GAGN;AAEJ;"}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx as r } from "react/jsx-runtime";
|
|
3
|
-
import { i as x } from "./input-
|
|
3
|
+
import { i as x } from "./input-ko2dne1givlxq7sz.js";
|
|
4
4
|
import { c as N } from "./cn-ct4n7r74mh8y0f48.js";
|
|
5
5
|
import * as b from "react";
|
|
6
6
|
import { useCallback as I } from "react";
|
|
7
|
-
import { F as y } from "./field-
|
|
7
|
+
import { F as y } from "./field-lweivfadxgpqhuqi.js";
|
|
8
8
|
import { aP as F } from "./vendor-base-ui-cpvkrhz4zgw9nw2b.js";
|
|
9
9
|
const c = b.forwardRef(
|
|
10
10
|
(p, o) => {
|
|
@@ -71,4 +71,4 @@ export {
|
|
|
71
71
|
c as I,
|
|
72
72
|
k as T
|
|
73
73
|
};
|
|
74
|
-
//# sourceMappingURL=input-area-
|
|
74
|
+
//# sourceMappingURL=input-area-obli4ufvu40bfpgp.js.map
|
package/dist/chunks/{input-area-ce3bf8m8wvot44kg.js.map → input-area-obli4ufvu40bfpgp.js.map}
RENAMED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"input-area-
|
|
1
|
+
{"version":3,"file":"input-area-obli4ufvu40bfpgp.js","sources":["../../src/components/input/input-area.tsx"],"sourcesContent":["import { inputVariants } from \"./input\";\nimport { cn } from \"../../utils/cn\";\nimport { useCallback, type ReactNode } from \"react\";\nimport * as React from \"react\";\nimport { Field as FieldBase } from \"@base-ui/react/field\";\nimport { Field as KumoField, type FieldErrorMatch } from \"../field/field\";\n\nexport const InputArea = React.forwardRef<HTMLTextAreaElement, InputAreaProps>(\n (props, ref) => {\n const {\n className,\n onValueChange,\n size = \"base\",\n variant = \"default\",\n onChange,\n label,\n labelTooltip,\n description,\n error,\n ...inputProps\n } = props;\n\n // Extract required from inputProps to pass to Field for label decoration\n const { required } = inputProps;\n const handleChange = useCallback(\n (event: React.ChangeEvent<HTMLTextAreaElement>) => {\n onChange?.(event);\n onValueChange?.(event.target.value);\n },\n [onChange, onValueChange],\n );\n\n const textareaClassName = cn(\n inputVariants({ size, variant, focusIndicator: true }),\n \"h-auto py-2\", // Input variant always comes with size, but it does not apply for textarea\n className,\n );\n\n // Render with Field wrapper if label is provided\n // Use FieldBase.Control with render callback to ensure proper label-textarea association.\n // The render callback receives props with the correct id/aria-labelledby from Field context.\n if (label) {\n return (\n <KumoField\n label={label}\n required={required}\n labelTooltip={labelTooltip}\n description={description}\n error={\n error\n ? typeof error === \"string\"\n ? { message: error, match: true }\n : error\n : undefined\n }\n >\n <FieldBase.Control\n render={(controlProps) => (\n <textarea\n {...controlProps}\n ref={ref}\n className={textareaClassName}\n onChange={handleChange}\n {...inputProps}\n />\n )}\n />\n </KumoField>\n );\n }\n\n // Render bare textarea without Field wrapper\n return (\n <textarea\n ref={ref}\n className={textareaClassName}\n onChange={handleChange}\n {...inputProps}\n />\n );\n },\n);\n\nInputArea.displayName = \"InputArea\";\n\n/** Alias for InputArea — provided for discoverability when migrating from other libraries */\nexport const Textarea = InputArea;\n\n/**\n * InputArea component props\n * @property {ReactNode} [label] - Label content for the textarea (enables Field wrapper)\n * @property {ReactNode} [description] - Helper text displayed below the textarea\n * @property {string | { message: ReactNode, match: FieldErrorMatch }} [error] - Error message or validation error object\n */\nexport type InputAreaProps = {\n onValueChange?: (value: string) => void;\n variant?: \"default\" | \"error\";\n size?: \"xs\" | \"sm\" | \"base\" | \"lg\";\n // Then other custom props\n children?: React.ReactNode;\n className?: string;\n /** Label content for the textarea (enables Field wrapper) - can be a string or any React node */\n label?: ReactNode;\n /** Tooltip content to display next to the label via an info icon */\n labelTooltip?: ReactNode;\n /** Helper text displayed below the textarea */\n description?: ReactNode;\n /** Error message or validation error object */\n error?: string | { message: ReactNode; match: FieldErrorMatch };\n\n // Finally, spread the native input props (least important)\n} & Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, \"size\">;\n"],"names":["InputArea","React","props","ref","className","onValueChange","size","variant","onChange","label","labelTooltip","description","error","inputProps","required","handleChange","useCallback","event","textareaClassName","cn","inputVariants","jsx","KumoField","FieldBase.Control","controlProps","Textarea"],"mappings":";;;;;;;;AAOO,MAAMA,IAAYC,EAAM;AAAA,EAC7B,CAACC,GAAOC,MAAQ;AACd,UAAM;AAAA,MACJ,WAAAC;AAAA,MACA,eAAAC;AAAA,MACA,MAAAC,IAAO;AAAA,MACP,SAAAC,IAAU;AAAA,MACV,UAAAC;AAAA,MACA,OAAAC;AAAA,MACA,cAAAC;AAAA,MACA,aAAAC;AAAA,MACA,OAAAC;AAAA,MACA,GAAGC;AAAA,IAAA,IACDX,GAGE,EAAE,UAAAY,MAAaD,GACfE,IAAeC;AAAA,MACnB,CAACC,MAAkD;AACjD,QAAAT,IAAWS,CAAK,GAChBZ,IAAgBY,EAAM,OAAO,KAAK;AAAA,MACpC;AAAA,MACA,CAACT,GAAUH,CAAa;AAAA,IAAA,GAGpBa,IAAoBC;AAAA,MACxBC,EAAc,EAAE,MAAAd,GAAM,SAAAC,GAAS,gBAAgB,IAAM;AAAA,MACrD;AAAA;AAAA,MACAH;AAAA,IAAA;AAMF,WAAIK,IAEA,gBAAAY;AAAA,MAACC;AAAAA,MAAA;AAAA,QACC,OAAAb;AAAA,QACA,UAAAK;AAAA,QACA,cAAAJ;AAAA,QACA,aAAAC;AAAA,QACA,OACEC,IACI,OAAOA,KAAU,WACf,EAAE,SAASA,GAAO,OAAO,GAAA,IACzBA,IACF;AAAA,QAGN,UAAA,gBAAAS;AAAA,UAACE;AAAAA,UAAA;AAAA,YACC,QAAQ,CAACC,MACP,gBAAAH;AAAA,cAAC;AAAA,cAAA;AAAA,gBACE,GAAGG;AAAA,gBACJ,KAAArB;AAAA,gBACA,WAAWe;AAAA,gBACX,UAAUH;AAAA,gBACT,GAAGF;AAAA,cAAA;AAAA,YAAA;AAAA,UACN;AAAA,QAAA;AAAA,MAEJ;AAAA,IAAA,IAOJ,gBAAAQ;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAAlB;AAAA,QACA,WAAWe;AAAA,QACX,UAAUH;AAAA,QACT,GAAGF;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;AAEAb,EAAU,cAAc;AAGjB,MAAMyB,IAAWzB;"}
|
|
@@ -3,8 +3,8 @@ import { jsx as e } from "react/jsx-runtime";
|
|
|
3
3
|
import * as d from "react";
|
|
4
4
|
import { useContext as l } from "react";
|
|
5
5
|
import { c as s } from "./cn-ct4n7r74mh8y0f48.js";
|
|
6
|
-
import { i as m, I as p } from "./input-
|
|
7
|
-
import { B as x } from "./button-
|
|
6
|
+
import { i as m, I as p } from "./input-ko2dne1givlxq7sz.js";
|
|
7
|
+
import { B as x } from "./button-j0hi0afn33w9lxgi.js";
|
|
8
8
|
const I = {
|
|
9
9
|
focusMode: "container"
|
|
10
10
|
}, r = d.createContext(
|
|
@@ -108,4 +108,4 @@ const U = Object.assign(v, {
|
|
|
108
108
|
export {
|
|
109
109
|
U as I
|
|
110
110
|
};
|
|
111
|
-
//# sourceMappingURL=input-group-
|
|
111
|
+
//# sourceMappingURL=input-group-dwtsd04lzf2bcsdo.js.map
|
package/dist/chunks/{input-group-kttdor9mr32k289o.js.map → input-group-dwtsd04lzf2bcsdo.js.map}
RENAMED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"input-group-
|
|
1
|
+
{"version":3,"file":"input-group-dwtsd04lzf2bcsdo.js","sources":["../../src/components/input/input-group.tsx"],"sourcesContent":["import { type PropsWithChildren, useContext } from \"react\";\nimport * as React from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport {\n Input as InputExternal,\n type InputProps,\n inputVariants,\n} from \"./input\";\nimport { type ButtonProps, Button as ButtonExternal } from \"../button/button\";\n\nexport const KUMO_INPUT_GROUP_VARIANTS = {\n focusMode: {\n container: {\n classes: \"\",\n description: \"Focus indicator on container (default behavior)\",\n },\n individual: {\n classes: \"\",\n description: \"Focus indicators on individual elements\",\n },\n },\n} as const;\n\nexport const KUMO_INPUT_GROUP_DEFAULT_VARIANTS = {\n focusMode: \"container\",\n} as const;\n\nexport type KumoInputGroupFocusMode =\n keyof typeof KUMO_INPUT_GROUP_VARIANTS.focusMode;\n\nexport interface KumoInputGroupVariantsProps {\n focusMode?: KumoInputGroupFocusMode;\n}\n\ninterface InputGroupRootProps extends KumoInputGroupVariantsProps {\n className?: string;\n size?: \"xs\" | \"sm\" | \"base\" | \"lg\" | undefined;\n}\n\ninterface InputGroupContextValue extends InputGroupRootProps {\n inputId: string;\n descriptionId: string;\n}\n\nconst InputGroupContext = React.createContext<InputGroupContextValue | null>(\n null,\n);\n\nfunction Root({\n size,\n children,\n className,\n focusMode = KUMO_INPUT_GROUP_DEFAULT_VARIANTS.focusMode,\n}: PropsWithChildren<InputGroupRootProps>) {\n const inputId = React.useId();\n const descriptionId = React.useId();\n const contextValue = React.useMemo(\n () => ({ size, inputId, descriptionId, focusMode }),\n [size, inputId, descriptionId, focusMode],\n );\n\n const isIndividualFocus = focusMode === \"individual\";\n\n return (\n <InputGroupContext.Provider value={contextValue}>\n <div\n className={cn(\n inputVariants({ size, parentFocusIndicator: !isIndividualFocus }),\n \"flex w-full gap-0 border-0 px-0\",\n isIndividualFocus\n ? \"isolate overflow-visible\"\n : \"overflow-hidden shadow-xs ring ring-kumo-line focus-within:ring-kumo-ring\",\n className,\n )}\n >\n {children}\n </div>\n </InputGroupContext.Provider>\n );\n}\n\nfunction Label({ children }: PropsWithChildren<{}>) {\n const context = useContext(InputGroupContext);\n const isIndividualFocus = context?.focusMode === \"individual\";\n\n return (\n <label\n htmlFor={context?.inputId}\n className={cn(\n \"flex h-full items-center p-0 px-2 text-kumo-subtle\",\n isIndividualFocus &&\n \"first:rounded-l-[inherit] last:rounded-r-[inherit]\",\n )}\n >\n {children}\n </label>\n );\n}\n\nfunction Input(props: InputProps) {\n const context = useContext(InputGroupContext);\n const isIndividualFocus = context?.focusMode === \"individual\";\n\n return (\n <InputExternal\n id={context?.inputId}\n aria-describedby={context?.descriptionId}\n size={context?.size}\n {...props}\n className={cn(\n \"flex h-full items-center rounded-none border-0 bg-kumo-base font-sans\",\n \"grow px-2\",\n isIndividualFocus\n ? \"relative ring ring-kumo-line first:rounded-l-[inherit] last:rounded-r-[inherit] focus:z-1 focus:outline\"\n : \"focus:border-kumo-fill\",\n props.className,\n )}\n />\n );\n}\n\nfunction Description({ children }: PropsWithChildren<{}>) {\n const context = useContext(InputGroupContext);\n const isIndividualFocus = context?.focusMode === \"individual\";\n\n return (\n <span\n id={context?.descriptionId}\n className={cn(\n \"flex h-full items-center p-0 px-2 text-kumo-subtle\",\n isIndividualFocus &&\n \"first:rounded-l-[inherit] last:rounded-r-[inherit]\",\n )}\n >\n {children}\n </span>\n );\n}\n\nfunction Button({\n children,\n className,\n ...props\n}: PropsWithChildren<ButtonProps>) {\n const context = useContext(InputGroupContext);\n const isIndividualFocus = context?.focusMode === \"individual\";\n\n return (\n <ButtonExternal\n {...props}\n size={context?.size}\n className={cn(\n \"h-full! rounded-none disabled:bg-kumo-overlay disabled:text-kumo-inactive!\",\n isIndividualFocus &&\n \"relative ring ring-kumo-line first:rounded-l-[inherit] last:rounded-r-[inherit] focus:z-1 focus:outline\",\n className,\n )}\n >\n {children}\n </ButtonExternal>\n );\n}\n\nexport const InputGroup = Object.assign(Root, {\n Label,\n Input,\n Button,\n Description,\n});\n"],"names":["KUMO_INPUT_GROUP_DEFAULT_VARIANTS","InputGroupContext","React","Root","size","children","className","focusMode","inputId","descriptionId","contextValue","isIndividualFocus","jsx","cn","inputVariants","Label","context","useContext","Input","props","InputExternal","Description","Button","ButtonExternal","InputGroup"],"mappings":";;;;;;;AAuBO,MAAMA,IAAoC;AAAA,EAC/C,WAAW;AACb,GAmBMC,IAAoBC,EAAM;AAAA,EAC9B;AACF;AAEA,SAASC,EAAK;AAAA,EACZ,MAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,WAAAC,IAAYP,EAAkC;AAChD,GAA2C;AACzC,QAAMQ,IAAUN,EAAM,MAAA,GAChBO,IAAgBP,EAAM,MAAA,GACtBQ,IAAeR,EAAM;AAAA,IACzB,OAAO,EAAE,MAAAE,GAAM,SAAAI,GAAS,eAAAC,GAAe,WAAAF,EAAA;AAAA,IACvC,CAACH,GAAMI,GAASC,GAAeF,CAAS;AAAA,EAAA,GAGpCI,IAAoBJ,MAAc;AAExC,SACE,gBAAAK,EAACX,EAAkB,UAAlB,EAA2B,OAAOS,GACjC,UAAA,gBAAAE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC;AAAA,QACTC,EAAc,EAAE,MAAAV,GAAM,sBAAsB,CAACO,GAAmB;AAAA,QAChE;AAAA,QACAA,IACI,6BACA;AAAA,QACJL;AAAA,MAAA;AAAA,MAGD,UAAAD;AAAA,IAAA;AAAA,EAAA,GAEL;AAEJ;AAEA,SAASU,EAAM,EAAE,UAAAV,KAAmC;AAClD,QAAMW,IAAUC,EAAWhB,CAAiB,GACtCU,IAAoBK,GAAS,cAAc;AAEjD,SACE,gBAAAJ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,SAASI,GAAS;AAAA,MAClB,WAAWH;AAAA,QACT;AAAA,QACAF,KACE;AAAA,MAAA;AAAA,MAGH,UAAAN;AAAA,IAAA;AAAA,EAAA;AAGP;AAEA,SAASa,EAAMC,GAAmB;AAChC,QAAMH,IAAUC,EAAWhB,CAAiB,GACtCU,IAAoBK,GAAS,cAAc;AAEjD,SACE,gBAAAJ;AAAA,IAACQ;AAAAA,IAAA;AAAA,MACC,IAAIJ,GAAS;AAAA,MACb,oBAAkBA,GAAS;AAAA,MAC3B,MAAMA,GAAS;AAAA,MACd,GAAGG;AAAA,MACJ,WAAWN;AAAA,QACT;AAAA,QACA;AAAA,QACAF,IACI,4GACA;AAAA,QACJQ,EAAM;AAAA,MAAA;AAAA,IACR;AAAA,EAAA;AAGN;AAEA,SAASE,EAAY,EAAE,UAAAhB,KAAmC;AACxD,QAAMW,IAAUC,EAAWhB,CAAiB,GACtCU,IAAoBK,GAAS,cAAc;AAEjD,SACE,gBAAAJ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,IAAII,GAAS;AAAA,MACb,WAAWH;AAAA,QACT;AAAA,QACAF,KACE;AAAA,MAAA;AAAA,MAGH,UAAAN;AAAA,IAAA;AAAA,EAAA;AAGP;AAEA,SAASiB,EAAO;AAAA,EACd,UAAAjB;AAAA,EACA,WAAAC;AAAA,EACA,GAAGa;AACL,GAAmC;AACjC,QAAMH,IAAUC,EAAWhB,CAAiB,GACtCU,IAAoBK,GAAS,cAAc;AAEjD,SACE,gBAAAJ;AAAA,IAACW;AAAAA,IAAA;AAAA,MACE,GAAGJ;AAAA,MACJ,MAAMH,GAAS;AAAA,MACf,WAAWH;AAAA,QACT;AAAA,QACAF,KACE;AAAA,QACFL;AAAA,MAAA;AAAA,MAGD,UAAAD;AAAA,IAAA;AAAA,EAAA;AAGP;AAEO,MAAMmB,IAAa,OAAO,OAAOrB,GAAM;AAAA,EAC5C,OAAAY;AAAA,EACA,OAAAG;AAAA,EACA,QAAAI;AAAA,EACA,aAAAD;AACF,CAAC;"}
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
import { jsx as l } from "react/jsx-runtime";
|
|
3
3
|
import { c as p } from "./cn-ct4n7r74mh8y0f48.js";
|
|
4
4
|
import { forwardRef as I } from "react";
|
|
5
|
-
import { F as k } from "./field-
|
|
5
|
+
import { F as k } from "./field-lweivfadxgpqhuqi.js";
|
|
6
6
|
import { I as v } from "./vendor-base-ui-cpvkrhz4zgw9nw2b.js";
|
|
7
7
|
const c = {
|
|
8
8
|
size: {
|
|
@@ -106,4 +106,4 @@ export {
|
|
|
106
106
|
c as K,
|
|
107
107
|
N as i
|
|
108
108
|
};
|
|
109
|
-
//# sourceMappingURL=input-
|
|
109
|
+
//# sourceMappingURL=input-ko2dne1givlxq7sz.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"input-
|
|
1
|
+
{"version":3,"file":"input-ko2dne1givlxq7sz.js","sources":["../../src/components/input/input.tsx"],"sourcesContent":["import { cn } from \"../../utils/cn\";\nimport {\n forwardRef,\n type ComponentPropsWithoutRef,\n type ReactNode,\n} from \"react\";\nimport { Input as BaseInput } from \"@base-ui/react/input\";\nimport { Field, type FieldErrorMatch } from \"../field/field\";\n\n/** Input size and variant definitions mapping names to their Tailwind classes. */\nexport const KUMO_INPUT_VARIANTS = {\n size: {\n xs: {\n classes: \"h-5 gap-1 rounded-sm px-1.5 text-xs\",\n description: \"Extra small input for compact UIs\",\n },\n sm: {\n classes: \"h-6.5 gap-1 rounded-md px-2 text-xs\",\n description: \"Small input for secondary fields\",\n },\n base: {\n classes: \"h-9 gap-1.5 rounded-lg px-3 text-base\",\n description: \"Default input size\",\n },\n lg: {\n classes: \"h-10 gap-2 rounded-lg px-4 text-base\",\n description: \"Large input for prominent fields\",\n },\n },\n variant: {\n default: {\n classes: \"focus:ring-kumo-ring\",\n description: \"Default input appearance\",\n },\n error: {\n classes: \"!ring-kumo-danger focus:ring-kumo-danger\",\n description: \"Error state for validation failures\",\n },\n },\n} as const;\n\nexport const KUMO_INPUT_DEFAULT_VARIANTS = {\n size: \"base\",\n variant: \"default\",\n} as const;\n\nexport const KUMO_INPUT_STYLING = {\n dimensions: {\n xs: { height: 20, paddingX: 6, fontSize: 12, borderRadius: 2, width: 160 },\n sm: { height: 26, paddingX: 8, fontSize: 12, borderRadius: 6, width: 200 },\n base: {\n height: 36,\n paddingX: 12,\n fontSize: 16,\n borderRadius: 8,\n width: 280,\n },\n lg: { height: 40, paddingX: 16, fontSize: 16, borderRadius: 8, width: 320 },\n },\n baseTokens: {\n background: \"color-secondary\",\n text: \"text-color-surface\",\n placeholder: \"text-color-muted\",\n ring: \"color-border\",\n },\n stateTokens: {\n focus: { ring: \"color-active\" },\n error: { ring: \"color-error\" },\n disabled: { opacity: 0.5, text: \"text-color-muted\" },\n },\n} as const;\n\n// Derived types from KUMO_INPUT_VARIANTS\nexport type KumoInputSize = keyof typeof KUMO_INPUT_VARIANTS.size;\nexport type KumoInputVariant = keyof typeof KUMO_INPUT_VARIANTS.variant;\n\nexport interface KumoInputVariantsProps {\n /**\n * Input size.\n * - `\"xs\"` — Extra small for compact UIs\n * - `\"sm\"` — Small for secondary fields\n * - `\"base\"` — Default size\n * - `\"lg\"` — Large for prominent fields\n * @default \"base\"\n */\n size?: KumoInputSize;\n /**\n * Visual variant.\n * - `\"default\"` — Standard input\n * - `\"error\"` — Error state for validation failures\n * @default \"default\"\n */\n variant?: KumoInputVariant;\n parentFocusIndicator?: boolean;\n focusIndicator?: boolean;\n}\n\n// Omit native `size` attribute (number) to avoid conflict with our custom `size` variant\ntype BaseInputProps = Omit<ComponentPropsWithoutRef<typeof BaseInput>, \"size\">;\n\nexport function inputVariants({\n variant = KUMO_INPUT_DEFAULT_VARIANTS.variant,\n size = KUMO_INPUT_DEFAULT_VARIANTS.size,\n parentFocusIndicator = false,\n focusIndicator = false,\n}: KumoInputVariantsProps = {}) {\n return cn(\n // Base styles\n \"border-0 bg-kumo-control text-kumo-default ring ring-kumo-line\",\n // Disabled state and placeholder styles (using vanilla CSS class for Chrome compatibility)\n \"kumo-input-placeholder disabled:text-kumo-subtle\",\n // Apply size styles from KUMO_INPUT_VARIANTS\n KUMO_INPUT_VARIANTS.size[size].classes,\n // Apply variant styles from KUMO_INPUT_VARIANTS\n KUMO_INPUT_VARIANTS.variant[variant].classes,\n // Focus state handling\n parentFocusIndicator && \"[&:has(:focus-within)]:ring-kumo-ring\",\n focusIndicator && \"focus:ring-kumo-ring\",\n );\n}\n\nexport const Input = forwardRef<HTMLInputElement, InputProps>((props, ref) => {\n const {\n className,\n size = \"base\",\n variant = \"default\",\n label,\n labelTooltip,\n description,\n error,\n ...inputProps\n } = props;\n\n // Extract required from inputProps to pass to Field for label decoration\n const { required } = inputProps;\n\n // A11y enforcement: warn in dev if no accessible name provided\n if (process.env.NODE_ENV !== \"production\") {\n const hasLabel = Boolean(label);\n const hasPlaceholderAndAriaLabel = Boolean(\n inputProps.placeholder && inputProps[\"aria-label\"],\n );\n const hasAriaLabelledBy = Boolean(inputProps[\"aria-labelledby\"]);\n\n if (!hasLabel && !hasPlaceholderAndAriaLabel && !hasAriaLabelledBy) {\n console.warn(\n \"[Kumo Input]: Input must have an accessible name. Provide either:\\n\" +\n \" - label prop: <Input label='Email' />\\n\" +\n \" - placeholder + aria-label: <Input placeholder='Email' aria-label='Email address' />\\n\" +\n \" - aria-labelledby for custom label association\",\n );\n }\n }\n\n const input = (\n <BaseInput\n ref={ref}\n className={cn(\n inputVariants({ size, variant, focusIndicator: true }),\n className,\n )}\n {...inputProps}\n />\n );\n\n // Render with Field wrapper if label is provided\n if (label) {\n return (\n <Field\n label={label}\n required={required}\n labelTooltip={labelTooltip}\n description={description}\n error={\n error\n ? typeof error === \"string\"\n ? { message: error, match: true }\n : error\n : undefined\n }\n >\n {input}\n </Field>\n );\n }\n\n // Render bare input without Field wrapper\n return input;\n});\n\nInput.displayName = \"Input\";\n\n/**\n * Input component props with accessibility guidance.\n *\n * **Accessible Name Required:** Input should have one of:\n * 1. `label` prop (recommended) - enables Field wrapper with label/description/error\n * 2. `placeholder` + `aria-label` - for bare inputs with visual placeholder\n * 3. `aria-labelledby` - for custom label association\n *\n * Missing accessible names will trigger console warnings in development.\n *\n * @example\n * // Recommended: Built-in Field wrapper\n * <Input label=\"Email\" placeholder=\"you@example.com\" />\n *\n * @example\n * // Bare input with placeholder and aria-label\n * <Input placeholder=\"Search...\" aria-label=\"Search products\" />\n *\n * @example\n * // Custom label association\n * <label id=\"email-label\">Email</label>\n * <Input aria-labelledby=\"email-label\" />\n *\n * @example\n * // With description and error\n * <Input\n * label=\"Password\"\n * description=\"Must be at least 8 characters\"\n * error=\"Password is too short\"\n * variant=\"error\"\n * />\n */\nexport type InputProps = Pick<KumoInputVariantsProps, \"size\" | \"variant\"> &\n BaseInputProps & {\n /** Label content for the input (enables Field wrapper) - can be a string or any React node */\n label?: ReactNode;\n /** Tooltip content to display next to the label via an info icon */\n labelTooltip?: ReactNode;\n /** Helper text displayed below the input */\n description?: ReactNode;\n /** Error message or validation error object */\n error?: string | { message: ReactNode; match: FieldErrorMatch };\n };\n"],"names":["KUMO_INPUT_VARIANTS","KUMO_INPUT_DEFAULT_VARIANTS","inputVariants","variant","size","parentFocusIndicator","focusIndicator","cn","Input","forwardRef","props","ref","className","label","labelTooltip","description","error","inputProps","required","hasLabel","hasPlaceholderAndAriaLabel","hasAriaLabelledBy","input","jsx","BaseInput","Field"],"mappings":";;;;;;AAUO,MAAMA,IAAsB;AAAA,EACjC,MAAM;AAAA,IACJ,IAAI;AAAA,MACF,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,IAAI;AAAA,MACF,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,IAAI;AAAA,MACF,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,EACf;AAAA,EAEF,SAAS;AAAA,IACP,SAAS;AAAA,MACP,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,OAAO;AAAA,MACL,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,EACf;AAEJ,GAEaC,IAA8B;AAAA,EACzC,MAAM;AAAA,EACN,SAAS;AACX;AAwDO,SAASC,EAAc;AAAA,EAC5B,SAAAC,IAAUF,EAA4B;AAAA,EACtC,MAAAG,IAAOH,EAA4B;AAAA,EACnC,sBAAAI,IAAuB;AAAA,EACvB,gBAAAC,IAAiB;AACnB,IAA4B,IAAI;AAC9B,SAAOC;AAAA;AAAA,IAEL;AAAA;AAAA,IAEA;AAAA;AAAA,IAEAP,EAAoB,KAAKI,CAAI,EAAE;AAAA;AAAA,IAE/BJ,EAAoB,QAAQG,CAAO,EAAE;AAAA;AAAA,IAErCE,KAAwB;AAAA,IACxBC,KAAkB;AAAA,EAAA;AAEtB;AAEO,MAAME,IAAQC,EAAyC,CAACC,GAAOC,MAAQ;AAC5E,QAAM;AAAA,IACJ,WAAAC;AAAA,IACA,MAAAR,IAAO;AAAA,IACP,SAAAD,IAAU;AAAA,IACV,OAAAU;AAAA,IACA,cAAAC;AAAA,IACA,aAAAC;AAAA,IACA,OAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACDP,GAGE,EAAE,UAAAQ,MAAaD;AAGrB,MAAI,QAAQ,IAAI,aAAa,cAAc;AACzC,UAAME,IAAW,EAAQN,GACnBO,IAA6B,GACjCH,EAAW,eAAeA,EAAW,YAAY,IAE7CI,IAAoB,EAAQJ,EAAW,iBAAiB;AAE9D,IAAI,CAACE,KAAY,CAACC,KAA8B,CAACC,KAC/C,QAAQ;AAAA,MACN;AAAA;AAAA;AAAA;AAAA,IAAA;AAAA,EAMN;AAEA,QAAMC,IACJ,gBAAAC;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,KAAAb;AAAA,MACA,WAAWJ;AAAA,QACTL,EAAc,EAAE,MAAAE,GAAM,SAAAD,GAAS,gBAAgB,IAAM;AAAA,QACrDS;AAAA,MAAA;AAAA,MAED,GAAGK;AAAA,IAAA;AAAA,EAAA;AAKR,SAAIJ,IAEA,gBAAAU;AAAA,IAACE;AAAA,IAAA;AAAA,MACC,OAAAZ;AAAA,MACA,UAAAK;AAAA,MACA,cAAAJ;AAAA,MACA,aAAAC;AAAA,MACA,OACEC,IACI,OAAOA,KAAU,WACf,EAAE,SAASA,GAAO,OAAO,GAAA,IACzBA,IACF;AAAA,MAGL,UAAAM;AAAA,IAAA;AAAA,EAAA,IAMAA;AACT,CAAC;AAEDd,EAAM,cAAc;"}
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
import { jsx as e, jsxs as c, Fragment as f } from "react/jsx-runtime";
|
|
3
3
|
import { Info as u } from "@phosphor-icons/react";
|
|
4
4
|
import { c as a } from "./cn-ct4n7r74mh8y0f48.js";
|
|
5
|
-
import { B as p } from "./button-
|
|
5
|
+
import { B as p } from "./button-j0hi0afn33w9lxgi.js";
|
|
6
6
|
import { T as d } from "./tooltip-k68wcv9mrigb7rcb.js";
|
|
7
7
|
const T = {
|
|
8
8
|
// Label currently has no variant options but structure is ready for future additions
|
|
@@ -59,4 +59,4 @@ export {
|
|
|
59
59
|
g as b,
|
|
60
60
|
h as l
|
|
61
61
|
};
|
|
62
|
-
//# sourceMappingURL=label-
|
|
62
|
+
//# sourceMappingURL=label-kjahhybc191quieo.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"label-
|
|
1
|
+
{"version":3,"file":"label-kjahhybc191quieo.js","sources":["../../src/components/label/label.tsx"],"sourcesContent":["import { Info } from \"@phosphor-icons/react\";\nimport type { ReactNode } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Button } from \"../button\";\nimport { Tooltip } from \"../tooltip\";\n\n/** Label variant definitions (currently empty, reserved for future additions). */\nexport const KUMO_LABEL_VARIANTS = {\n // Label currently has no variant options but structure is ready for future additions\n} as const;\n\nexport const KUMO_LABEL_DEFAULT_VARIANTS = {} as const;\n\n// Derived types from KUMO_LABEL_VARIANTS\nexport interface KumoLabelVariantsProps {}\n\nexport function labelVariants(_props: KumoLabelVariantsProps = {}) {\n return cn(\n // Base styles - when used standalone, apply text styling\n // When used inside Field, the parent FieldBase.Label provides these styles\n \"m-0 text-base font-medium text-kumo-default\",\n );\n}\n\nexport function labelContentVariants() {\n return cn(\n // Content wrapper styles - always applied\n \"inline-flex items-center gap-1\",\n );\n}\n\n/**\n * Label component props.\n *\n * @example\n * ```tsx\n * <Label>Email</Label>\n * <Label showOptional>Middle Name</Label>\n * <Label tooltip=\"We'll use this to send you updates\">Email</Label>\n * ```\n */\nexport interface LabelProps extends KumoLabelVariantsProps {\n /** The label content — can be a string or any React node. */\n children: ReactNode;\n /** When `true`, shows gray \"(optional)\" text after the label. */\n showOptional?: boolean;\n /** Tooltip content displayed next to the label via an info icon. */\n tooltip?: ReactNode;\n /** Additional CSS classes merged via `cn()`. */\n className?: string;\n /** The id of the form element this label is associated with */\n htmlFor?: string;\n /**\n * When true, only renders the inline content (indicators, tooltip) without\n * the outer label element with font styling. Useful when composed inside another\n * label element that already provides the text styling.\n * @default false\n */\n asContent?: boolean;\n}\n\n/**\n * Label component for form fields.\n *\n * Provides a standardized way to display labels with optional indicators:\n * - Optional indicator: gray \"(optional)\" text when `showOptional={true}`\n * - Tooltip: info icon with hover tooltip for additional context\n *\n * @example\n * // Basic label\n * <Label>Email</Label>\n *\n * @example\n * // Optional field with indicator\n * <Label showOptional>Middle Name</Label>\n *\n * @example\n * // With tooltip\n * <Label tooltip=\"We'll use this to send you updates\">Email</Label>\n *\n * @example\n * // With ReactNode children\n * <Label>\n * <span>Custom label with <strong>bold</strong> text</span>\n * </Label>\n */\nexport function Label({\n children,\n showOptional = false,\n tooltip,\n className,\n htmlFor,\n asContent = false,\n}: LabelProps) {\n const content = (\n <>\n {children}\n {showOptional && (\n <span className=\"font-normal text-kumo-strong\">(optional)</span>\n )}\n {tooltip && (\n <Tooltip content={tooltip} asChild>\n <Button\n variant=\"ghost\"\n size=\"xs\"\n shape=\"square\"\n aria-label=\"More information\"\n >\n <Info className=\"size-4\" />\n </Button>\n </Tooltip>\n )}\n </>\n );\n\n // When used as content inside another styled element, just render inline\n if (asContent) {\n return (\n <span className={cn(labelContentVariants(), className)}>{content}</span>\n );\n }\n\n // When used standalone, render as <label> for accessibility\n return (\n <label\n htmlFor={htmlFor}\n className={cn(labelVariants(), labelContentVariants(), className)}\n >\n {content}\n </label>\n );\n}\n\nLabel.displayName = \"Label\";\n"],"names":["KUMO_LABEL_VARIANTS","KUMO_LABEL_DEFAULT_VARIANTS","labelVariants","_props","cn","labelContentVariants","Label","children","showOptional","tooltip","className","htmlFor","asContent","content","jsxs","Fragment","jsx","Tooltip","Button","Info"],"mappings":";;;;;;AAOO,MAAMA,IAAsB;AAAA;AAEnC,GAEaC,IAA8B,CAAA;AAKpC,SAASC,EAAcC,IAAiC,IAAI;AACjE,SAAOC;AAAA;AAAA;AAAA,IAGL;AAAA,EAAA;AAEJ;AAEO,SAASC,IAAuB;AACrC,SAAOD;AAAA;AAAA,IAEL;AAAA,EAAA;AAEJ;AAyDO,SAASE,EAAM;AAAA,EACpB,UAAAC;AAAA,EACA,cAAAC,IAAe;AAAA,EACf,SAAAC;AAAA,EACA,WAAAC;AAAA,EACA,SAAAC;AAAA,EACA,WAAAC,IAAY;AACd,GAAe;AACb,QAAMC,IACJ,gBAAAC,EAAAC,GAAA,EACG,UAAA;AAAA,IAAAR;AAAA,IACAC,KACC,gBAAAQ,EAAC,QAAA,EAAK,WAAU,gCAA+B,UAAA,cAAU;AAAA,IAE1DP,KACC,gBAAAO,EAACC,GAAA,EAAQ,SAASR,GAAS,SAAO,IAChC,UAAA,gBAAAO;AAAA,MAACE;AAAA,MAAA;AAAA,QACC,SAAQ;AAAA,QACR,MAAK;AAAA,QACL,OAAM;AAAA,QACN,cAAW;AAAA,QAEX,UAAA,gBAAAF,EAACG,GAAA,EAAK,WAAU,SAAA,CAAS;AAAA,MAAA;AAAA,IAAA,EAC3B,CACF;AAAA,EAAA,GAEJ;AAIF,SAAIP,IAEA,gBAAAI,EAAC,UAAK,WAAWZ,EAAGC,KAAwBK,CAAS,GAAI,UAAAG,GAAQ,IAMnE,gBAAAG;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,SAAAL;AAAA,MACA,WAAWP,EAAGF,EAAA,GAAiBG,EAAA,GAAwBK,CAAS;AAAA,MAE/D,UAAAG;AAAA,IAAA;AAAA,EAAA;AAGP;AAEAP,EAAM,cAAc;"}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx as a, jsxs as g, Fragment as C } from "react/jsx-runtime";
|
|
3
3
|
import { useState as O, useEffect as R, useMemo as b, createContext as T, useContext as _ } from "react";
|
|
4
|
-
import { I as c } from "./input-group-
|
|
4
|
+
import { I as c } from "./input-group-dwtsd04lzf2bcsdo.js";
|
|
5
5
|
import { CaretDoubleLeftIcon as B, CaretLeftIcon as L, CaretRightIcon as D, CaretDoubleRightIcon as F } from "@phosphor-icons/react";
|
|
6
6
|
import { c as u } from "./cn-ct4n7r74mh8y0f48.js";
|
|
7
|
-
import { S as v } from "./select-
|
|
7
|
+
import { S as v } from "./select-0m0xklfwdlx8dwba.js";
|
|
8
8
|
const V = [25, 50, 100, 250], f = {
|
|
9
9
|
controls: "full"
|
|
10
10
|
}, h = T(null);
|
|
@@ -221,4 +221,4 @@ const q = Object.assign(M, {
|
|
|
221
221
|
export {
|
|
222
222
|
q as P
|
|
223
223
|
};
|
|
224
|
-
//# sourceMappingURL=pagination-
|
|
224
|
+
//# sourceMappingURL=pagination-eo0gzzm7v5w8niqe.js.map
|
package/dist/chunks/{pagination-owm6h66jjgv1tjoe.js.map → pagination-eo0gzzm7v5w8niqe.js.map}
RENAMED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"pagination-owm6h66jjgv1tjoe.js","sources":["../../src/components/pagination/pagination.tsx"],"sourcesContent":["import {\n createContext,\n useContext,\n useEffect,\n useMemo,\n useState,\n type ReactNode,\n} from \"react\";\nimport { InputGroup } from \"../input\";\nimport {\n CaretDoubleLeftIcon,\n CaretDoubleRightIcon,\n CaretLeftIcon,\n CaretRightIcon,\n} from \"@phosphor-icons/react\";\nimport { cn } from \"../../utils/cn\";\nimport { Select } from \"../select\";\n\nconst DEFAULT_PAGE_SIZE_OPTIONS = [25, 50, 100, 250] as const;\n\n/** Pagination controls variant definitions. */\nexport const KUMO_PAGINATION_VARIANTS = {\n controls: {\n full: {\n classes: \"\",\n description:\n \"Full pagination controls with first, previous, page input, next, and last buttons\",\n },\n simple: {\n classes: \"\",\n description:\n \"Simple pagination controls with only previous and next buttons\",\n },\n },\n} as const;\n\nexport type KumoPaginationControls =\n keyof typeof KUMO_PAGINATION_VARIANTS.controls;\n\nexport const KUMO_PAGINATION_DEFAULT_VARIANTS = {\n controls: \"full\",\n} as const;\n\nexport interface KumoPaginationVariantsProps {\n controls?: KumoPaginationControls;\n}\n\nexport function paginationVariants({\n controls = KUMO_PAGINATION_DEFAULT_VARIANTS.controls,\n}: KumoPaginationVariantsProps = {}) {\n return cn(\n \"flex items-center justify-between gap-2\",\n KUMO_PAGINATION_VARIANTS.controls[controls].classes,\n );\n}\n\n// ============================================================================\n// Pagination Context\n// ============================================================================\n\ninterface PaginationContextValue {\n page: number;\n perPage?: number;\n totalCount?: number;\n maxPage: number;\n pageShowingRange: string;\n setPage: (page: number) => void;\n editingPage: number;\n setEditingPage: (page: number) => void;\n}\n\nconst PaginationContext = createContext<PaginationContextValue | null>(null);\n\nfunction usePaginationContext() {\n const context = useContext(PaginationContext);\n if (!context) {\n throw new Error(\n \"Pagination compound components must be used within a Pagination component\",\n );\n }\n return context;\n}\n\n// ============================================================================\n// Pagination.Info\n// ============================================================================\n\nexport interface PaginationInfoProps {\n /** Custom render function for the info text */\n children?: (props: {\n page: number;\n perPage?: number;\n totalCount?: number;\n pageShowingRange: string;\n }) => ReactNode;\n /** Additional CSS classes */\n className?: string;\n}\n\nfunction PaginationInfo({ children, className }: PaginationInfoProps) {\n const { page, perPage, totalCount, pageShowingRange } =\n usePaginationContext();\n\n const content = children ? (\n children({ page, perPage, totalCount, pageShowingRange })\n ) : totalCount && totalCount > 0 ? (\n <>\n Showing <span className=\"tabular-nums\">{pageShowingRange}</span> of{\" \"}\n <span className=\"tabular-nums\">{totalCount}</span>\n </>\n ) : null;\n\n return (\n <div\n data-slot=\"pagination-info\"\n className={cn(\"text-sm text-kumo-strong\", className)}\n >\n {content}\n </div>\n );\n}\n\nPaginationInfo.displayName = \"Pagination.Info\";\n\n// ============================================================================\n// Pagination.PageSize\n// ============================================================================\n\nexport interface PaginationPageSizeProps {\n /** Current page size value */\n value: number;\n /** Callback when page size changes */\n onChange: (size: number) => void;\n /** Available page size options */\n options?: number[];\n /** Label text shown before the selector */\n label?: ReactNode;\n /** Additional CSS classes */\n className?: string;\n}\n\nfunction PaginationPageSize({\n value,\n onChange,\n options = DEFAULT_PAGE_SIZE_OPTIONS as unknown as number[],\n label = \"Per page:\",\n className,\n}: PaginationPageSizeProps) {\n return (\n <div\n data-slot=\"pagination-page-size\"\n className={cn(\"flex items-center gap-2\", className)}\n >\n {label && <span className=\"text-sm text-kumo-strong\">{label}</span>}\n <Select\n aria-label=\"Page size\"\n value={value}\n onValueChange={(v) => onChange(v as number)}\n >\n {options.map((size) => (\n <Select.Option key={size} value={size}>\n {size}\n </Select.Option>\n ))}\n </Select>\n </div>\n );\n}\n\nPaginationPageSize.displayName = \"Pagination.PageSize\";\n\n// ============================================================================\n// Pagination.Controls\n// ============================================================================\n\nexport interface PaginationControlsProps extends KumoPaginationVariantsProps {\n /** Additional CSS classes */\n className?: string;\n}\n\nfunction PaginationControls({\n controls = KUMO_PAGINATION_DEFAULT_VARIANTS.controls,\n className,\n}: PaginationControlsProps) {\n const { page, maxPage, setPage, editingPage, setEditingPage } =\n usePaginationContext();\n\n return (\n <div\n data-slot=\"pagination-controls\"\n className={cn(\"grow flex flex-col items-end\", className)}\n >\n <div>\n <InputGroup focusMode=\"individual\">\n {controls === \"full\" && (\n <InputGroup.Button\n variant=\"secondary\"\n aria-label=\"First page\"\n disabled={page <= 1}\n onClick={() => {\n setPage(1);\n setEditingPage(1);\n }}\n >\n <CaretDoubleLeftIcon size={16} />\n </InputGroup.Button>\n )}\n <InputGroup.Button\n variant=\"secondary\"\n aria-label=\"Previous page\"\n disabled={page <= 1}\n onClick={() => {\n const previousPage = Math.max(page - 1, 1);\n setPage(previousPage);\n setEditingPage(previousPage);\n }}\n >\n <CaretLeftIcon size={16} />\n </InputGroup.Button>\n {controls === \"full\" && (\n <InputGroup.Input\n style={{ width: 50 }}\n className=\"text-center\"\n aria-label=\"Page number\"\n value={editingPage}\n onValueChange={(value: string) => {\n setEditingPage(Number(value));\n }}\n onBlur={() => {\n let number = Math.max(editingPage, 1);\n number = Math.min(number, maxPage);\n setPage(number);\n setEditingPage(number);\n }}\n // Prevent password managers from auto-filling\n autoComplete=\"off\"\n data-1p-ignore\n data-lpignore=\"true\"\n data-form-type=\"other\"\n />\n )}\n <InputGroup.Button\n variant=\"secondary\"\n aria-label=\"Next page\"\n disabled={page === maxPage}\n onClick={() => {\n const nextPage = Math.min(page + 1, maxPage);\n setPage(nextPage);\n setEditingPage(nextPage);\n }}\n >\n <CaretRightIcon size={16} />\n </InputGroup.Button>\n {controls === \"full\" && (\n <InputGroup.Button\n variant=\"secondary\"\n aria-label=\"Last page\"\n disabled={page === maxPage}\n onClick={() => {\n setPage(maxPage);\n setEditingPage(maxPage);\n }}\n >\n <CaretDoubleRightIcon size={16} />\n </InputGroup.Button>\n )}\n </InputGroup>\n </div>\n </div>\n );\n}\n\nPaginationControls.displayName = \"Pagination.Controls\";\n\n// ============================================================================\n// Pagination.Separator\n// ============================================================================\n\nexport interface PaginationSeparatorProps {\n /** Additional CSS classes */\n className?: string;\n}\n\nfunction PaginationSeparator({ className }: PaginationSeparatorProps) {\n return (\n <div\n data-slot=\"pagination-separator\"\n className={cn(\"mx-2 h-6 border-l border-kumo-line\", className)}\n />\n );\n}\n\nPaginationSeparator.displayName = \"Pagination.Separator\";\n\n// ============================================================================\n// Pagination Root\n// ============================================================================\n\n/** Base props shared by both compound and legacy Pagination APIs */\ninterface PaginationBaseProps {\n /** Callback fired when the current page changes. */\n setPage: (page: number) => void;\n /**\n * Current page number (1-indexed).\n * @default 1\n */\n page?: number;\n /** Number of items displayed per page. */\n perPage?: number;\n /** Total number of items across all pages. */\n totalCount?: number;\n /** Additional CSS classes for the container */\n className?: string;\n}\n\n/**\n * Props for the compound component API (recommended).\n *\n * @example\n * ```tsx\n * <Pagination page={page} setPage={setPage} perPage={perPage} totalCount={500}>\n * <Pagination.Info />\n * <Pagination.PageSize value={perPage} onChange={setPerPage} />\n * <Pagination.Controls />\n * </Pagination>\n * ```\n */\nexport interface PaginationCompoundProps extends PaginationBaseProps {\n /**\n * Compound component children for custom layouts.\n * Use Pagination.Info, Pagination.PageSize, Pagination.Controls, and Pagination.Separator.\n */\n children: ReactNode;\n controls?: never;\n text?: never;\n}\n\n/**\n * Props for the legacy API (deprecated, use compound components instead).\n *\n * @deprecated Use the compound component API with children instead:\n * ```tsx\n * <Pagination page={page} setPage={setPage} perPage={perPage} totalCount={500}>\n * <Pagination.Info />\n * <Pagination.Controls />\n * </Pagination>\n * ```\n *\n * @example\n * ```tsx\n * // Legacy usage (deprecated)\n * <Pagination page={page} setPage={setPage} perPage={10} totalCount={100} />\n * ```\n */\nexport interface PaginationLegacyProps\n extends PaginationBaseProps,\n KumoPaginationVariantsProps {\n children?: never;\n /** @deprecated Use Pagination.Info with children prop instead */\n text?: (props: {\n page?: number;\n perPage?: number;\n totalCount?: number;\n pageShowingRange: string;\n }) => ReactNode;\n}\n\n/**\n * Pagination component props.\n *\n * Prefer the compound component API for new code:\n * @example\n * ```tsx\n * <Pagination page={page} setPage={setPage} perPage={perPage} totalCount={500}>\n * <Pagination.Info />\n * <Pagination.PageSize value={perPage} onChange={setPerPage} />\n * <Pagination.Controls />\n * </Pagination>\n * ```\n */\nexport type PaginationProps = PaginationCompoundProps | PaginationLegacyProps;\n\n/**\n * Page navigation controls with page count display.\n *\n * Supports both compound component and legacy patterns. Prefer compound components for new code:\n *\n * @example\n * // Compound component (recommended)\n * ```tsx\n * <Pagination page={page} setPage={setPage} perPage={perPage} totalCount={500}>\n * <Pagination.Info />\n * <Pagination.Separator />\n * <Pagination.PageSize value={perPage} onChange={setPerPage} />\n * <Pagination.Controls />\n * </Pagination>\n * ```\n *\n * @example\n * // Legacy (deprecated)\n * ```tsx\n * <Pagination page={page} setPage={setPage} perPage={10} totalCount={100} />\n * ```\n */\nfunction PaginationRoot(props: PaginationProps) {\n const { page = 1, perPage, totalCount, setPage, children, className } = props;\n\n // Extract legacy props (only present when children is not provided)\n const text = \"text\" in props ? props.text : undefined;\n const controls =\n \"controls\" in props\n ? (props.controls ?? KUMO_PAGINATION_DEFAULT_VARIANTS.controls)\n : KUMO_PAGINATION_DEFAULT_VARIANTS.controls;\n const [editingPage, setEditingPage] = useState<number>(1);\n\n useEffect(() => {\n setEditingPage(page);\n }, [page]);\n\n const pageShowingRange = useMemo(() => {\n let lower = page * (perPage ?? 1) - (perPage ?? 0) + 1;\n let upper = Math.min(page * (perPage ?? 0), totalCount ?? 0);\n\n if (Number.isNaN(lower)) lower = 0;\n if (Number.isNaN(upper)) upper = 0;\n\n return `${lower}-${upper}`;\n }, [page, perPage, totalCount]);\n\n const maxPage = useMemo(() => {\n return Math.ceil((totalCount ?? 1) / (perPage ?? 1));\n }, [totalCount, perPage]);\n\n const contextValue: PaginationContextValue = {\n page,\n perPage,\n totalCount,\n maxPage,\n pageShowingRange,\n setPage,\n editingPage,\n setEditingPage,\n };\n\n // Compound component mode: render children within context\n if (children) {\n return (\n <PaginationContext.Provider value={contextValue}>\n <div\n data-slot=\"pagination\"\n className={cn(\"flex items-center gap-2 w-full\", className)}\n >\n {children}\n </div>\n </PaginationContext.Provider>\n );\n }\n\n // Legacy mode: render default layout for backwards compatibility\n const getPaginationText = () => {\n if (text) {\n return text({ page, perPage, totalCount, pageShowingRange });\n } else if (totalCount && totalCount > 0) {\n return (\n <>\n Showing <span className=\"tabular-nums\">{pageShowingRange}</span> of{\" \"}\n <span className=\"tabular-nums\">{totalCount}</span>\n </>\n );\n }\n return null;\n };\n\n return (\n <PaginationContext.Provider value={contextValue}>\n <div\n data-slot=\"pagination\"\n className={cn(\"flex items-center gap-2 w-full\", className)}\n >\n <div\n data-slot=\"pagination-info\"\n className=\"grow text-sm text-kumo-strong\"\n >\n {getPaginationText()}\n </div>\n <PaginationControls controls={controls} />\n </div>\n </PaginationContext.Provider>\n );\n}\n\nPaginationRoot.displayName = \"Pagination\";\n\n// ============================================================================\n// Compound Component Export\n// ============================================================================\n\nexport const Pagination = Object.assign(PaginationRoot, {\n Info: PaginationInfo,\n PageSize: PaginationPageSize,\n Controls: PaginationControls,\n Separator: PaginationSeparator,\n});\n\nexport {\n PaginationInfo,\n PaginationPageSize,\n PaginationControls,\n PaginationSeparator,\n};\n"],"names":["DEFAULT_PAGE_SIZE_OPTIONS","KUMO_PAGINATION_DEFAULT_VARIANTS","PaginationContext","createContext","usePaginationContext","context","useContext","PaginationInfo","children","className","page","perPage","totalCount","pageShowingRange","content","jsxs","Fragment","jsx","cn","PaginationPageSize","value","onChange","options","label","Select","v","size","PaginationControls","controls","maxPage","setPage","editingPage","setEditingPage","InputGroup","CaretDoubleLeftIcon","previousPage","CaretLeftIcon","number","nextPage","CaretRightIcon","CaretDoubleRightIcon","PaginationSeparator","PaginationRoot","props","text","useState","useEffect","useMemo","lower","upper","contextValue","getPaginationText","Pagination"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"pagination-eo0gzzm7v5w8niqe.js","sources":["../../src/components/pagination/pagination.tsx"],"sourcesContent":["import {\n createContext,\n useContext,\n useEffect,\n useMemo,\n useState,\n type ReactNode,\n} from \"react\";\nimport { InputGroup } from \"../input\";\nimport {\n CaretDoubleLeftIcon,\n CaretDoubleRightIcon,\n CaretLeftIcon,\n CaretRightIcon,\n} from \"@phosphor-icons/react\";\nimport { cn } from \"../../utils/cn\";\nimport { Select } from \"../select\";\n\nconst DEFAULT_PAGE_SIZE_OPTIONS = [25, 50, 100, 250] as const;\n\n/** Pagination controls variant definitions. */\nexport const KUMO_PAGINATION_VARIANTS = {\n controls: {\n full: {\n classes: \"\",\n description:\n \"Full pagination controls with first, previous, page input, next, and last buttons\",\n },\n simple: {\n classes: \"\",\n description:\n \"Simple pagination controls with only previous and next buttons\",\n },\n },\n} as const;\n\nexport type KumoPaginationControls =\n keyof typeof KUMO_PAGINATION_VARIANTS.controls;\n\nexport const KUMO_PAGINATION_DEFAULT_VARIANTS = {\n controls: \"full\",\n} as const;\n\nexport interface KumoPaginationVariantsProps {\n controls?: KumoPaginationControls;\n}\n\nexport function paginationVariants({\n controls = KUMO_PAGINATION_DEFAULT_VARIANTS.controls,\n}: KumoPaginationVariantsProps = {}) {\n return cn(\n \"flex items-center justify-between gap-2\",\n KUMO_PAGINATION_VARIANTS.controls[controls].classes,\n );\n}\n\n// ============================================================================\n// Pagination Context\n// ============================================================================\n\ninterface PaginationContextValue {\n page: number;\n perPage?: number;\n totalCount?: number;\n maxPage: number;\n pageShowingRange: string;\n setPage: (page: number) => void;\n editingPage: number;\n setEditingPage: (page: number) => void;\n}\n\nconst PaginationContext = createContext<PaginationContextValue | null>(null);\n\nfunction usePaginationContext() {\n const context = useContext(PaginationContext);\n if (!context) {\n throw new Error(\n \"Pagination compound components must be used within a Pagination component\",\n );\n }\n return context;\n}\n\n// ============================================================================\n// Pagination.Info\n// ============================================================================\n\nexport interface PaginationInfoProps {\n /** Custom render function for the info text */\n children?: (props: {\n page: number;\n perPage?: number;\n totalCount?: number;\n pageShowingRange: string;\n }) => ReactNode;\n /** Additional CSS classes */\n className?: string;\n}\n\nfunction PaginationInfo({ children, className }: PaginationInfoProps) {\n const { page, perPage, totalCount, pageShowingRange } =\n usePaginationContext();\n\n const content = children ? (\n children({ page, perPage, totalCount, pageShowingRange })\n ) : totalCount && totalCount > 0 ? (\n <>\n Showing <span className=\"tabular-nums\">{pageShowingRange}</span> of{\" \"}\n <span className=\"tabular-nums\">{totalCount}</span>\n </>\n ) : null;\n\n return (\n <div\n data-slot=\"pagination-info\"\n className={cn(\"text-sm text-kumo-strong\", className)}\n >\n {content}\n </div>\n );\n}\n\nPaginationInfo.displayName = \"Pagination.Info\";\n\n// ============================================================================\n// Pagination.PageSize\n// ============================================================================\n\nexport interface PaginationPageSizeProps {\n /** Current page size value */\n value: number;\n /** Callback when page size changes */\n onChange: (size: number) => void;\n /** Available page size options */\n options?: number[];\n /** Label text shown before the selector */\n label?: ReactNode;\n /** Additional CSS classes */\n className?: string;\n}\n\nfunction PaginationPageSize({\n value,\n onChange,\n options = DEFAULT_PAGE_SIZE_OPTIONS as unknown as number[],\n label = \"Per page:\",\n className,\n}: PaginationPageSizeProps) {\n return (\n <div\n data-slot=\"pagination-page-size\"\n className={cn(\"flex items-center gap-2\", className)}\n >\n {label && <span className=\"text-sm text-kumo-strong\">{label}</span>}\n <Select\n aria-label=\"Page size\"\n value={value}\n onValueChange={(v) => onChange(v as number)}\n >\n {options.map((size) => (\n <Select.Option key={size} value={size}>\n {size}\n </Select.Option>\n ))}\n </Select>\n </div>\n );\n}\n\nPaginationPageSize.displayName = \"Pagination.PageSize\";\n\n// ============================================================================\n// Pagination.Controls\n// ============================================================================\n\nexport interface PaginationControlsProps extends KumoPaginationVariantsProps {\n /** Additional CSS classes */\n className?: string;\n}\n\nfunction PaginationControls({\n controls = KUMO_PAGINATION_DEFAULT_VARIANTS.controls,\n className,\n}: PaginationControlsProps) {\n const { page, maxPage, setPage, editingPage, setEditingPage } =\n usePaginationContext();\n\n return (\n <div\n data-slot=\"pagination-controls\"\n className={cn(\"grow flex flex-col items-end\", className)}\n >\n <div>\n <InputGroup focusMode=\"individual\">\n {controls === \"full\" && (\n <InputGroup.Button\n variant=\"secondary\"\n aria-label=\"First page\"\n disabled={page <= 1}\n onClick={() => {\n setPage(1);\n setEditingPage(1);\n }}\n >\n <CaretDoubleLeftIcon size={16} />\n </InputGroup.Button>\n )}\n <InputGroup.Button\n variant=\"secondary\"\n aria-label=\"Previous page\"\n disabled={page <= 1}\n onClick={() => {\n const previousPage = Math.max(page - 1, 1);\n setPage(previousPage);\n setEditingPage(previousPage);\n }}\n >\n <CaretLeftIcon size={16} />\n </InputGroup.Button>\n {controls === \"full\" && (\n <InputGroup.Input\n style={{ width: 50 }}\n className=\"text-center\"\n aria-label=\"Page number\"\n value={editingPage}\n onValueChange={(value: string) => {\n setEditingPage(Number(value));\n }}\n onBlur={() => {\n let number = Math.max(editingPage, 1);\n number = Math.min(number, maxPage);\n setPage(number);\n setEditingPage(number);\n }}\n // Prevent password managers from auto-filling\n autoComplete=\"off\"\n data-1p-ignore\n data-lpignore=\"true\"\n data-form-type=\"other\"\n />\n )}\n <InputGroup.Button\n variant=\"secondary\"\n aria-label=\"Next page\"\n disabled={page === maxPage}\n onClick={() => {\n const nextPage = Math.min(page + 1, maxPage);\n setPage(nextPage);\n setEditingPage(nextPage);\n }}\n >\n <CaretRightIcon size={16} />\n </InputGroup.Button>\n {controls === \"full\" && (\n <InputGroup.Button\n variant=\"secondary\"\n aria-label=\"Last page\"\n disabled={page === maxPage}\n onClick={() => {\n setPage(maxPage);\n setEditingPage(maxPage);\n }}\n >\n <CaretDoubleRightIcon size={16} />\n </InputGroup.Button>\n )}\n </InputGroup>\n </div>\n </div>\n );\n}\n\nPaginationControls.displayName = \"Pagination.Controls\";\n\n// ============================================================================\n// Pagination.Separator\n// ============================================================================\n\nexport interface PaginationSeparatorProps {\n /** Additional CSS classes */\n className?: string;\n}\n\nfunction PaginationSeparator({ className }: PaginationSeparatorProps) {\n return (\n <div\n data-slot=\"pagination-separator\"\n className={cn(\"mx-2 h-6 border-l border-kumo-line\", className)}\n />\n );\n}\n\nPaginationSeparator.displayName = \"Pagination.Separator\";\n\n// ============================================================================\n// Pagination Root\n// ============================================================================\n\n/** Base props shared by both compound and legacy Pagination APIs */\ninterface PaginationBaseProps {\n /** Callback fired when the current page changes. */\n setPage: (page: number) => void;\n /**\n * Current page number (1-indexed).\n * @default 1\n */\n page?: number;\n /** Number of items displayed per page. */\n perPage?: number;\n /** Total number of items across all pages. */\n totalCount?: number;\n /** Additional CSS classes for the container */\n className?: string;\n}\n\n/**\n * Props for the compound component API (recommended).\n *\n * @example\n * ```tsx\n * <Pagination page={page} setPage={setPage} perPage={perPage} totalCount={500}>\n * <Pagination.Info />\n * <Pagination.PageSize value={perPage} onChange={setPerPage} />\n * <Pagination.Controls />\n * </Pagination>\n * ```\n */\nexport interface PaginationCompoundProps extends PaginationBaseProps {\n /**\n * Compound component children for custom layouts.\n * Use Pagination.Info, Pagination.PageSize, Pagination.Controls, and Pagination.Separator.\n */\n children: ReactNode;\n controls?: never;\n text?: never;\n}\n\n/**\n * Props for the legacy API (deprecated, use compound components instead).\n *\n * @deprecated Use the compound component API with children instead:\n * ```tsx\n * <Pagination page={page} setPage={setPage} perPage={perPage} totalCount={500}>\n * <Pagination.Info />\n * <Pagination.Controls />\n * </Pagination>\n * ```\n *\n * @example\n * ```tsx\n * // Legacy usage (deprecated)\n * <Pagination page={page} setPage={setPage} perPage={10} totalCount={100} />\n * ```\n */\nexport interface PaginationLegacyProps\n extends PaginationBaseProps,\n KumoPaginationVariantsProps {\n children?: never;\n /** @deprecated Use Pagination.Info with children prop instead */\n text?: (props: {\n page?: number;\n perPage?: number;\n totalCount?: number;\n pageShowingRange: string;\n }) => ReactNode;\n}\n\n/**\n * Pagination component props.\n *\n * Prefer the compound component API for new code:\n * @example\n * ```tsx\n * <Pagination page={page} setPage={setPage} perPage={perPage} totalCount={500}>\n * <Pagination.Info />\n * <Pagination.PageSize value={perPage} onChange={setPerPage} />\n * <Pagination.Controls />\n * </Pagination>\n * ```\n */\nexport type PaginationProps = PaginationCompoundProps | PaginationLegacyProps;\n\n/**\n * Page navigation controls with page count display.\n *\n * Supports both compound component and legacy patterns. Prefer compound components for new code:\n *\n * @example\n * // Compound component (recommended)\n * ```tsx\n * <Pagination page={page} setPage={setPage} perPage={perPage} totalCount={500}>\n * <Pagination.Info />\n * <Pagination.Separator />\n * <Pagination.PageSize value={perPage} onChange={setPerPage} />\n * <Pagination.Controls />\n * </Pagination>\n * ```\n *\n * @example\n * // Legacy (deprecated)\n * ```tsx\n * <Pagination page={page} setPage={setPage} perPage={10} totalCount={100} />\n * ```\n */\nfunction PaginationRoot(props: PaginationProps) {\n const { page = 1, perPage, totalCount, setPage, children, className } = props;\n\n // Extract legacy props (only present when children is not provided)\n const text = \"text\" in props ? props.text : undefined;\n const controls =\n \"controls\" in props\n ? (props.controls ?? KUMO_PAGINATION_DEFAULT_VARIANTS.controls)\n : KUMO_PAGINATION_DEFAULT_VARIANTS.controls;\n const [editingPage, setEditingPage] = useState<number>(1);\n\n useEffect(() => {\n setEditingPage(page);\n }, [page]);\n\n const pageShowingRange = useMemo(() => {\n let lower = page * (perPage ?? 1) - (perPage ?? 0) + 1;\n let upper = Math.min(page * (perPage ?? 0), totalCount ?? 0);\n\n if (Number.isNaN(lower)) lower = 0;\n if (Number.isNaN(upper)) upper = 0;\n\n return `${lower}-${upper}`;\n }, [page, perPage, totalCount]);\n\n const maxPage = useMemo(() => {\n return Math.ceil((totalCount ?? 1) / (perPage ?? 1));\n }, [totalCount, perPage]);\n\n const contextValue: PaginationContextValue = {\n page,\n perPage,\n totalCount,\n maxPage,\n pageShowingRange,\n setPage,\n editingPage,\n setEditingPage,\n };\n\n // Compound component mode: render children within context\n if (children) {\n return (\n <PaginationContext.Provider value={contextValue}>\n <div\n data-slot=\"pagination\"\n className={cn(\"flex items-center gap-2 w-full\", className)}\n >\n {children}\n </div>\n </PaginationContext.Provider>\n );\n }\n\n // Legacy mode: render default layout for backwards compatibility\n const getPaginationText = () => {\n if (text) {\n return text({ page, perPage, totalCount, pageShowingRange });\n } else if (totalCount && totalCount > 0) {\n return (\n <>\n Showing <span className=\"tabular-nums\">{pageShowingRange}</span> of{\" \"}\n <span className=\"tabular-nums\">{totalCount}</span>\n </>\n );\n }\n return null;\n };\n\n return (\n <PaginationContext.Provider value={contextValue}>\n <div\n data-slot=\"pagination\"\n className={cn(\"flex items-center gap-2 w-full\", className)}\n >\n <div\n data-slot=\"pagination-info\"\n className=\"grow text-sm text-kumo-strong\"\n >\n {getPaginationText()}\n </div>\n <PaginationControls controls={controls} />\n </div>\n </PaginationContext.Provider>\n );\n}\n\nPaginationRoot.displayName = \"Pagination\";\n\n// ============================================================================\n// Compound Component Export\n// ============================================================================\n\nexport const Pagination = Object.assign(PaginationRoot, {\n Info: PaginationInfo,\n PageSize: PaginationPageSize,\n Controls: PaginationControls,\n Separator: PaginationSeparator,\n});\n\nexport {\n PaginationInfo,\n PaginationPageSize,\n PaginationControls,\n PaginationSeparator,\n};\n"],"names":["DEFAULT_PAGE_SIZE_OPTIONS","KUMO_PAGINATION_DEFAULT_VARIANTS","PaginationContext","createContext","usePaginationContext","context","useContext","PaginationInfo","children","className","page","perPage","totalCount","pageShowingRange","content","jsxs","Fragment","jsx","cn","PaginationPageSize","value","onChange","options","label","Select","v","size","PaginationControls","controls","maxPage","setPage","editingPage","setEditingPage","InputGroup","CaretDoubleLeftIcon","previousPage","CaretLeftIcon","number","nextPage","CaretRightIcon","CaretDoubleRightIcon","PaginationSeparator","PaginationRoot","props","text","useState","useEffect","useMemo","lower","upper","contextValue","getPaginationText","Pagination"],"mappings":"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"}
|
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
import { jsx as e, jsxs as m } from "react/jsx-runtime";
|
|
3
3
|
import { forwardRef as y, createContext as j, useContext as A } from "react";
|
|
4
4
|
import { c as o } from "./cn-ct4n7r74mh8y0f48.js";
|
|
5
|
-
import { R as I, P as C, Q as G, bi as
|
|
6
|
-
const
|
|
5
|
+
import { R as I, P as C, Q as G, bi as h, bj as b } from "./vendor-base-ui-cpvkrhz4zgw9nw2b.js";
|
|
6
|
+
const x = {
|
|
7
7
|
variant: {
|
|
8
8
|
default: {
|
|
9
9
|
classes: "ring-kumo-line",
|
|
@@ -24,23 +24,23 @@ const b = {
|
|
|
24
24
|
description: "Choice card appearance with border, padding, and highlighted selection state"
|
|
25
25
|
}
|
|
26
26
|
}
|
|
27
|
-
},
|
|
27
|
+
}, v = {
|
|
28
28
|
variant: "default",
|
|
29
29
|
appearance: "default"
|
|
30
30
|
};
|
|
31
|
-
function
|
|
32
|
-
variant: t =
|
|
33
|
-
appearance: r =
|
|
31
|
+
function M({
|
|
32
|
+
variant: t = v.variant,
|
|
33
|
+
appearance: r = v.appearance
|
|
34
34
|
} = {}) {
|
|
35
35
|
return o(
|
|
36
|
-
|
|
37
|
-
|
|
36
|
+
x.variant[t].classes,
|
|
37
|
+
x.appearance[r].classes
|
|
38
38
|
);
|
|
39
39
|
}
|
|
40
|
-
const
|
|
40
|
+
const N = j({
|
|
41
41
|
controlPosition: "start",
|
|
42
42
|
appearance: "default"
|
|
43
|
-
}),
|
|
43
|
+
}), R = y(
|
|
44
44
|
({
|
|
45
45
|
className: t,
|
|
46
46
|
disabled: r,
|
|
@@ -50,7 +50,7 @@ const v = j({
|
|
|
50
50
|
description: i,
|
|
51
51
|
value: c
|
|
52
52
|
}, l) => {
|
|
53
|
-
const { controlPosition: f, appearance: d } = A(
|
|
53
|
+
const { controlPosition: f, appearance: d } = A(N), u = (s ?? d) === "card", g = u ? "end" : f;
|
|
54
54
|
return u ? /* @__PURE__ */ m(
|
|
55
55
|
"label",
|
|
56
56
|
{
|
|
@@ -69,7 +69,7 @@ const v = j({
|
|
|
69
69
|
i && /* @__PURE__ */ e("span", { className: "text-sm text-kumo-subtle", children: i })
|
|
70
70
|
] }),
|
|
71
71
|
/* @__PURE__ */ e(
|
|
72
|
-
|
|
72
|
+
h,
|
|
73
73
|
{
|
|
74
74
|
ref: l,
|
|
75
75
|
value: c,
|
|
@@ -82,7 +82,7 @@ const v = j({
|
|
|
82
82
|
"data-[checked]:bg-kumo-contrast"
|
|
83
83
|
),
|
|
84
84
|
children: /* @__PURE__ */ e(
|
|
85
|
-
|
|
85
|
+
b,
|
|
86
86
|
{
|
|
87
87
|
keepMounted: !0,
|
|
88
88
|
className: "flex items-center justify-center",
|
|
@@ -100,13 +100,13 @@ const v = j({
|
|
|
100
100
|
"m-0 group relative inline-flex items-center gap-2",
|
|
101
101
|
// "start" (default): radio before label
|
|
102
102
|
// "end": label before radio using flex-row-reverse
|
|
103
|
-
|
|
103
|
+
g === "end" && "flex-row-reverse justify-end",
|
|
104
104
|
r ? "cursor-not-allowed opacity-50" : "cursor-pointer",
|
|
105
105
|
t
|
|
106
106
|
),
|
|
107
107
|
children: [
|
|
108
108
|
/* @__PURE__ */ e(
|
|
109
|
-
|
|
109
|
+
h,
|
|
110
110
|
{
|
|
111
111
|
ref: l,
|
|
112
112
|
value: c,
|
|
@@ -119,7 +119,7 @@ const v = j({
|
|
|
119
119
|
"data-[checked]:bg-kumo-contrast"
|
|
120
120
|
),
|
|
121
121
|
children: /* @__PURE__ */ e(
|
|
122
|
-
|
|
122
|
+
b,
|
|
123
123
|
{
|
|
124
124
|
keepMounted: !0,
|
|
125
125
|
className: "flex items-center justify-center",
|
|
@@ -134,8 +134,8 @@ const v = j({
|
|
|
134
134
|
);
|
|
135
135
|
}
|
|
136
136
|
);
|
|
137
|
-
|
|
138
|
-
function
|
|
137
|
+
R.displayName = "Radio.Item";
|
|
138
|
+
function p({
|
|
139
139
|
legend: t,
|
|
140
140
|
children: r,
|
|
141
141
|
orientation: a = "vertical",
|
|
@@ -146,11 +146,11 @@ function R({
|
|
|
146
146
|
value: l,
|
|
147
147
|
onValueChange: f,
|
|
148
148
|
disabled: d,
|
|
149
|
-
controlPosition:
|
|
149
|
+
controlPosition: k = "start",
|
|
150
150
|
name: u,
|
|
151
|
-
className:
|
|
151
|
+
className: g
|
|
152
152
|
}) {
|
|
153
|
-
return /* @__PURE__ */ e(
|
|
153
|
+
return /* @__PURE__ */ e(N.Provider, { value: { controlPosition: k, appearance: s }, children: /* @__PURE__ */ e(
|
|
154
154
|
I,
|
|
155
155
|
{
|
|
156
156
|
defaultValue: c,
|
|
@@ -164,7 +164,7 @@ function R({
|
|
|
164
164
|
disabled: d,
|
|
165
165
|
className: o(
|
|
166
166
|
"flex flex-col gap-4 rounded-lg border border-kumo-line p-4",
|
|
167
|
-
|
|
167
|
+
g
|
|
168
168
|
),
|
|
169
169
|
children: [
|
|
170
170
|
/* @__PURE__ */ e(G, { className: "text-lg font-medium text-kumo-default", children: t }),
|
|
@@ -185,16 +185,16 @@ function R({
|
|
|
185
185
|
}
|
|
186
186
|
) });
|
|
187
187
|
}
|
|
188
|
-
|
|
189
|
-
const V = {
|
|
190
|
-
Item:
|
|
191
|
-
Group:
|
|
192
|
-
};
|
|
188
|
+
p.displayName = "Radio.Group";
|
|
189
|
+
const V = Object.assign(p, {
|
|
190
|
+
Item: R,
|
|
191
|
+
Group: p
|
|
192
|
+
});
|
|
193
193
|
export {
|
|
194
|
-
|
|
194
|
+
x as K,
|
|
195
195
|
V as R,
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
196
|
+
p as a,
|
|
197
|
+
v as b,
|
|
198
|
+
M as r
|
|
199
199
|
};
|
|
200
|
-
//# sourceMappingURL=radio-
|
|
200
|
+
//# sourceMappingURL=radio-oi9iw7ls1t04j377.js.map
|