@cloudflare/kumo 2.5.1 → 2.5.2
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 +8 -0
- package/ai/component-registry.json +10 -5
- package/ai/component-registry.md +4 -2
- package/dist/.build-complete +1 -1
- package/dist/chunks/{autocomplete-d0w42h1frdu03df6.js → autocomplete-d52negr21cedr4rm.js} +3 -3
- package/dist/chunks/{autocomplete-d0w42h1frdu03df6.js.map → autocomplete-d52negr21cedr4rm.js.map} +1 -1
- package/dist/chunks/{breadcrumbs-j214mimk5zj4ffp4.js → breadcrumbs-bfuf7g8hh36rg7h8.js} +2 -2
- package/dist/chunks/{breadcrumbs-j214mimk5zj4ffp4.js.map → breadcrumbs-bfuf7g8hh36rg7h8.js.map} +1 -1
- package/dist/chunks/{button-mnrxu6dud2x5js5b.js → button-ov39dxshqbqrthhd.js} +11 -11
- package/dist/chunks/button-ov39dxshqbqrthhd.js.map +1 -0
- package/dist/chunks/{checkbox-dqih8tzzt3vhp870.js → checkbox-bt4nfv1i2142kykg.js} +2 -2
- package/dist/chunks/{checkbox-dqih8tzzt3vhp870.js.map → checkbox-bt4nfv1i2142kykg.js.map} +1 -1
- package/dist/chunks/{clipboard-text-mrut8z3dt1w0efxz.js → clipboard-text-h3oi6wm5vj2q7q4h.js} +3 -3
- package/dist/chunks/{clipboard-text-mrut8z3dt1w0efxz.js.map → clipboard-text-h3oi6wm5vj2q7q4h.js.map} +1 -1
- package/dist/chunks/{combobox-msvukodjsqzlvpqc.js → combobox-l6qcou2s3xmsbplp.js} +3 -3
- package/dist/chunks/{combobox-msvukodjsqzlvpqc.js.map → combobox-l6qcou2s3xmsbplp.js.map} +1 -1
- package/dist/chunks/{empty-n17inn1z67bpohkw.js → empty-frsjvok4w6i0fyex.js} +2 -2
- package/dist/chunks/{empty-n17inn1z67bpohkw.js.map → empty-frsjvok4w6i0fyex.js.map} +1 -1
- package/dist/chunks/{field-c8o7h3rlam4c9pcx.js → field-m57qcw5b1zt1ohfz.js} +2 -2
- package/dist/chunks/{field-c8o7h3rlam4c9pcx.js.map → field-m57qcw5b1zt1ohfz.js.map} +1 -1
- package/dist/chunks/{input-area-eurk3seud30ricwn.js → input-area-o2avpahffav0gydf.js} +3 -3
- package/dist/chunks/{input-area-eurk3seud30ricwn.js.map → input-area-o2avpahffav0gydf.js.map} +1 -1
- package/dist/chunks/{input-group-d09ocmjcbdai0gze.js → input-group-os810pmsqcftt6mq.js} +4 -4
- package/dist/chunks/{input-group-d09ocmjcbdai0gze.js.map → input-group-os810pmsqcftt6mq.js.map} +1 -1
- package/dist/chunks/{input-en8hhb14mmt3tfwn.js → input-iahz0dpc9xdar2ju.js} +2 -2
- package/dist/chunks/{input-en8hhb14mmt3tfwn.js.map → input-iahz0dpc9xdar2ju.js.map} +1 -1
- package/dist/chunks/{label-c8rz453pti66slki.js → label-kib2hn4pkbn28c31.js} +2 -2
- package/dist/chunks/{label-c8rz453pti66slki.js.map → label-kib2hn4pkbn28c31.js.map} +1 -1
- package/dist/chunks/{pagination-bw7vwca4wrfjm8vb.js → pagination-mvvg7qfvoqr5l4vt.js} +3 -3
- package/dist/chunks/{pagination-bw7vwca4wrfjm8vb.js.map → pagination-mvvg7qfvoqr5l4vt.js.map} +1 -1
- package/dist/chunks/{select-dw9iw35ug7yer3o3.js → select-c79vjqmcytn2oujb.js} +5 -5
- package/dist/chunks/{select-dw9iw35ug7yer3o3.js.map → select-c79vjqmcytn2oujb.js.map} +1 -1
- package/dist/chunks/{sensitive-input-dgoxjtoxl4zqa51v.js → sensitive-input-mxbd0ayw2mbju4ii.js} +3 -3
- package/dist/chunks/{sensitive-input-dgoxjtoxl4zqa51v.js.map → sensitive-input-mxbd0ayw2mbju4ii.js.map} +1 -1
- package/dist/chunks/{sidebar-nbdw4rgvuabxp5nj.js → sidebar-dqw2uxx6xqln639l.js} +2 -2
- package/dist/chunks/{sidebar-nbdw4rgvuabxp5nj.js.map → sidebar-dqw2uxx6xqln639l.js.map} +1 -1
- package/dist/chunks/{switch-g8f77h69h34xld06.js → switch-dld1q6qdzhe1uip7.js} +2 -2
- package/dist/chunks/{switch-g8f77h69h34xld06.js.map → switch-dld1q6qdzhe1uip7.js.map} +1 -1
- package/dist/chunks/{table-e1te1im2tt2ez05y.js → table-l64wm81r9t67mtzm.js} +2 -2
- package/dist/chunks/{table-e1te1im2tt2ez05y.js.map → table-l64wm81r9t67mtzm.js.map} +1 -1
- package/dist/chunks/{toast-kvbgct0jvfmn4mas.js → toast-gewrapiiy5x9ak0o.js} +2 -2
- package/dist/chunks/{toast-kvbgct0jvfmn4mas.js.map → toast-gewrapiiy5x9ak0o.js.map} +1 -1
- package/dist/code.js +1 -1
- package/dist/components/autocomplete.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-group.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/select.js +1 -1
- package/dist/components/sensitive-input.js +1 -1
- package/dist/components/sidebar.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 +21 -21
- package/dist/src/components/button/button.d.ts +3 -3
- package/dist/src/components/button/button.d.ts.map +1 -1
- package/dist/styles/kumo-standalone.css +1 -1
- package/package.json +1 -1
- package/dist/chunks/button-mnrxu6dud2x5js5b.js.map +0 -1
package/dist/chunks/{input-group-d09ocmjcbdai0gze.js.map → input-group-os810pmsqcftt6mq.js.map}
RENAMED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"input-group-d09ocmjcbdai0gze.js","sources":["../../src/components/input-group/context.ts","../../src/components/input-group/input-group-input.tsx","../../src/components/input-group/input-group-button.tsx","../../src/components/input-group/input-group-addon.tsx","../../src/components/input-group/input-group-suffix.tsx","../../src/components/input-group/input-group.tsx"],"sourcesContent":["import {\n Children,\n createContext,\n isValidElement,\n useContext,\n type HTMLAttributes,\n type ReactNode,\n} from \"react\";\nimport type { KumoInputSize } from \"../input/input\";\nimport type { FieldProps } from \"../field/field\";\n\n// Spacing model\n//\n// Each element type has a fixed outer padding. The container uses has-[] CSS\n// to reduce the input's padding on sides that touch an addon.\n//\n// Input outer: px-3 (12px base) — full padding when at the edge\n// Input seam: pl-2 / pr-2 (8px base) — applied by container has-[]\n// Addon outer: pl-2 / pr-2 (8px base) — on the container-edge side\n// Addon seam: nothing — input owns the gap entirely\n//\n// has-[] rules on the container override [&_input]:pl-{seam} when a start\n// addon is present, and [&_input]:pr-{seam} when an end addon is present.\n\nexport interface InputGroupSizeTokens {\n /** Full outer padding — matches standalone Input (e.g. px-3). */\n inputOuter: string;\n /**\n * Directional outer padding for Addon at the container edge.\n *\n * These MUST be static pl-/pr- strings (not derived at runtime via\n * `\"px-N\".replace(…)`) so Tailwind JIT can detect them during its\n * source-file scan. Dynamic string construction produces class names\n * that never appear as literals, so Tailwind never generates the CSS.\n */\n addonOuterStart: string;\n addonOuterEnd: string;\n /**\n * Reduced outer padding when the Addon contains a Button.\n * Buttons have their own internal padding, so the Addon can use\n * less outer padding to keep the visual gap balanced.\n */\n addonButtonOuterStart: string;\n addonButtonOuterEnd: string;\n /** pr- for suffix when no end addon. */\n suffixPad: string;\n fontSize: string;\n /** Icon size in px. */\n iconSize: number;\n}\n\nexport const INPUT_GROUP_SIZE: Record<KumoInputSize, InputGroupSizeTokens> = {\n xs: {\n inputOuter: \"px-1.5\",\n addonOuterStart: \"pl-1.5\",\n addonOuterEnd: \"pr-1.5\",\n addonButtonOuterStart: \"pl-1\",\n addonButtonOuterEnd: \"pr-1\",\n suffixPad: \"pr-1.5\",\n fontSize: \"text-xs\",\n iconSize: 10,\n },\n sm: {\n inputOuter: \"px-2\",\n addonOuterStart: \"pl-1.5\",\n addonOuterEnd: \"pr-1.5\",\n addonButtonOuterStart: \"pl-1\",\n addonButtonOuterEnd: \"pr-1\",\n suffixPad: \"pr-2\",\n fontSize: \"text-xs\",\n iconSize: 13,\n },\n base: {\n inputOuter: \"px-3\",\n addonOuterStart: \"pl-2\",\n addonOuterEnd: \"pr-2\",\n addonButtonOuterStart: \"pl-1\",\n addonButtonOuterEnd: \"pr-1\",\n suffixPad: \"pr-3\",\n fontSize: \"text-base\",\n iconSize: 18,\n },\n lg: {\n inputOuter: \"px-4\",\n addonOuterStart: \"pl-2.5\",\n addonOuterEnd: \"pr-2.5\",\n addonButtonOuterStart: \"pl-1.5\",\n addonButtonOuterEnd: \"pr-1.5\",\n suffixPad: \"pr-4\",\n fontSize: \"text-base\",\n iconSize: 20,\n },\n};\n\n// Build the has-[] container classes that reduce input padding when addons\n// are present. These are static strings so Tailwind JIT can detect them.\nexport const INPUT_GROUP_HAS_CLASSES: Record<KumoInputSize, string> = {\n xs: [\n \"has-[[data-slot=input-group-addon-start]]:[&_input]:pl-1\",\n \"has-[[data-slot=input-group-addon-end]]:[&_input]:pr-1\",\n ].join(\" \"),\n sm: [\n \"has-[[data-slot=input-group-addon-start]]:[&_input]:pl-1.5\",\n \"has-[[data-slot=input-group-addon-end]]:[&_input]:pr-1.5\",\n ].join(\" \"),\n base: [\n \"has-[[data-slot=input-group-addon-start]]:[&_input]:pl-2\",\n \"has-[[data-slot=input-group-addon-end]]:[&_input]:pr-2\",\n ].join(\" \"),\n lg: [\n \"has-[[data-slot=input-group-addon-start]]:[&_input]:pl-2.5\",\n \"has-[[data-slot=input-group-addon-end]]:[&_input]:pr-2.5\",\n ].join(\" \"),\n};\n\n// Context\n\n/**\n * Props for `InputGroup.Root`. Focus mode is auto-detected from children\n * (see `detectFocusMode`), so it is not part of the public or internal API.\n */\nexport interface InputGroupRootPropsInternal\n extends HTMLAttributes<HTMLElement>,\n Partial<\n Pick<\n FieldProps,\n \"label\" | \"description\" | \"error\" | \"required\" | \"labelTooltip\"\n >\n > {\n size?: KumoInputSize | undefined;\n disabled?: boolean;\n}\n\n/** Public InputGroup.Root props — identical to the internal type. */\nexport type InputGroupRootProps = InputGroupRootPropsInternal;\n\nexport interface InputGroupContextValue {\n size?: KumoInputSize;\n focusMode: \"container\" | \"individual\" | \"hybrid\";\n disabled: boolean;\n error?: FieldProps[\"error\"];\n /** Auto-generated id for the input element; used by the invisible label overlay. */\n inputId: string;\n}\n\nexport const InputGroupContext = createContext<InputGroupContextValue | null>(\n null,\n);\n\n/**\n * Set to `true` by `InputGroup.Addon` so that `InputGroup.Button` can detect\n * whether it's wrapped in an Addon. Ghost buttons should always live inside\n * an Addon for correct spacing.\n */\nexport const InputGroupAddonContext = createContext(false);\n\n/**\n * Reads InputGroupContext and warns in development when the context is null\n * (i.e. when a sub-component is rendered outside of `<InputGroup>`).\n */\nexport function useInputGroupContext(componentName: string) {\n const context = useContext(InputGroupContext);\n if (process.env.NODE_ENV !== \"production\" && !context) {\n console.warn(\n `<InputGroup.${componentName}> must be used within <InputGroup>. Falling back to default values.`,\n );\n }\n return context;\n}\n\n/**\n * Partitions InputGroup children for hybrid focus mode.\n *\n * Container zone: Addon, Input, Suffix, text nodes — everything that should\n * share a single container-style border.\n *\n * Individual zone: Direct `InputGroup.Button` elements that manage their own\n * border and focus ring.\n *\n * Uses `displayName` comparison to identify elements, avoiding circular\n * imports between `context.ts` and the sub-component files.\n */\nexport function partitionChildren(children: ReactNode): {\n containerZone: ReactNode[];\n individualZone: ReactNode[];\n} {\n const containerZone: ReactNode[] = [];\n const individualZone: ReactNode[] = [];\n\n Children.forEach(children, (child) => {\n if (\n isValidElement(child) &&\n (child.type as { displayName?: string })?.displayName ===\n \"InputGroup.Button\"\n ) {\n individualZone.push(child);\n } else {\n containerZone.push(child);\n }\n });\n\n return { containerZone, individualZone };\n}\n\n/**\n * Analyzes the direct children of `InputGroup` to determine the focus mode.\n *\n * Returns `\"hybrid\"` when BOTH an `InputGroup.Addon` AND a non-ghost direct\n * `InputGroup.Button` are present. In hybrid mode, Addon+Input share a\n * container-style border while Buttons get individual borders.\n *\n * Returns `\"individual\"` when a non-ghost direct `InputGroup.Button` is\n * present WITHOUT any `InputGroup.Addon`. This signals a toolbar/pagination\n * layout where each element manages its own focus ring.\n *\n * Returns `\"container\"` (default) in all other cases — the container owns a\n * single shared focus ring.\n *\n * Uses `displayName` comparison to identify elements, avoiding circular\n * imports between `context.ts` and the sub-component files.\n */\nexport function detectFocusMode(\n children: ReactNode,\n): \"container\" | \"individual\" | \"hybrid\" {\n let hasNonGhostDirectButton = false;\n let hasAddon = false;\n\n Children.forEach(children, (child) => {\n if (!isValidElement(child)) return;\n\n // Identify components by displayName to avoid circular imports.\n const type = child.type;\n const displayName =\n typeof type === \"function\" || typeof type === \"object\"\n ? (type as { displayName?: string }).displayName\n : undefined;\n\n if (displayName === \"InputGroup.Addon\") {\n hasAddon = true;\n return;\n }\n\n if (displayName !== \"InputGroup.Button\") return;\n\n // A direct-child Button is by definition NOT inside an Addon (Addon's\n // children are children of the Addon element, not of InputGroup).\n // Check whether the variant is explicitly non-ghost.\n const variant = (child.props as { variant?: string }).variant;\n if (variant !== undefined && variant !== \"ghost\") {\n hasNonGhostDirectButton = true;\n }\n });\n\n if (hasNonGhostDirectButton && hasAddon) return \"hybrid\";\n if (hasNonGhostDirectButton) return \"individual\";\n return \"container\";\n}\n","import { forwardRef } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Input as InputExternal, type InputProps } from \"../input/input\";\nimport { useInputGroupContext, INPUT_GROUP_SIZE } from \"./context\";\n\n/** Props for InputGroup.Input — omits Field props since InputGroup handles them. */\nexport type InputGroupInputProps = Omit<\n InputProps,\n \"label\" | \"labelTooltip\" | \"description\" | \"error\" | \"size\" | \"disabled\"\n>;\n\n/**\n * Text input that inherits size, disabled, and error state from InputGroup context.\n * Automatically sets `aria-invalid` when parent has an error.\n */\nexport const Input = forwardRef<HTMLInputElement, InputGroupInputProps>(\n (props, ref) => {\n const context = useInputGroupContext(\"Input\");\n\n // Warn when props that belong on <InputGroup> are passed directly\n if (process.env.NODE_ENV !== \"production\" && context) {\n if ((props as any).size !== undefined) {\n console.warn(\n \"InputGroup.Input: Set `size` on <InputGroup> instead of <InputGroup.Input>.\",\n );\n }\n if ((props as any).disabled !== undefined) {\n console.warn(\n \"InputGroup.Input: Set `disabled` on <InputGroup> instead of <InputGroup.Input>.\",\n );\n }\n if ((props as any).label !== undefined) {\n console.warn(\n \"InputGroup.Input: Use the `label` prop on <InputGroup> instead of <InputGroup.Input>.\",\n );\n }\n if ((props as any).description !== undefined) {\n console.warn(\n \"InputGroup.Input: Use <InputGroup.Suffix> instead of passing `description` to <InputGroup.Input>.\",\n );\n }\n }\n\n const size = context?.size ?? \"base\";\n const tokens = INPUT_GROUP_SIZE[size];\n const isIndividual = context?.focusMode === \"individual\";\n\n // Auto-set aria-invalid when error is present in context\n const hasError = Boolean(context?.error);\n\n // Use explicit id if provided, otherwise fall back to context id\n // (links the input to the invisible label overlay for click-to-focus).\n const inputId = props.id ?? context?.inputId;\n\n return (\n <InputExternal\n ref={ref}\n size={context?.size}\n disabled={context?.disabled || (props as any).disabled}\n aria-invalid={hasError || props[\"aria-invalid\"]}\n {...props}\n id={inputId}\n className={cn(\n // Base input layout: fill height, allow shrinking, strip native border/radius\n \"flex h-full min-w-0 grow items-center rounded-none border-0 bg-transparent font-sans\",\n // Always use full outer padding — the container's has-[] rules reduce pl/pr to inputSeam on sides that touch an addon.\n tokens.inputOuter,\n // Truncate overflowing text with \"…\" instead of expanding the input\n \"text-ellipsis\",\n // Individual mode: each element owns its own border instead of sharing a container ring\n isIndividual\n ? [\n // Own border replaces the container's shared ring; suppress the base Input's focus:ring so only the border-swap shows\n \"relative ring-0 focus:ring-0 border border-kumo-line\",\n \"first:rounded-l-[inherit] last:rounded-r-[inherit]\",\n // Negative margin (not border-l-0) so the border is still paintable on focus\n \"not-first:-ml-px\",\n \"hover:z-1 hover:border-kumo-line\",\n // z-[2] lifts above hovered siblings so focus border isn't clipped\n \"focus:z-2 focus:border-kumo-focus/50\",\n ].join(\" \")\n : // Container mode: kill all focus indicators — the container handles them z-1 lifts the input above the invisible label overlay so cursor/selection work\n \"relative z-1 ring-0! shadow-none outline-none focus:ring-0! focus:outline-none\",\n props.className,\n )}\n />\n );\n },\n);\nInput.displayName = \"InputGroup.Input\";\n","import React, {\n forwardRef,\n useContext,\n type PropsWithChildren,\n type ReactNode,\n} from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { type ButtonProps, Button as ButtonExternal } from \"../button/button\";\nimport { Tooltip, type KumoTooltipSide } from \"../tooltip/tooltip\";\nimport type { KumoInputSize } from \"../input/input\";\nimport {\n INPUT_GROUP_SIZE,\n InputGroupAddonContext,\n useInputGroupContext,\n} from \"./context\";\n\n/**\n * In container mode, buttons render \"one size down\" so they stay visually\n * subordinate to the input. In individual mode the size passes through\n * unchanged (pagination / toolbar buttons should match the input height).\n */\nconst COMPACT_BUTTON_SIZE: Record<KumoInputSize, KumoInputSize> = {\n xs: \"xs\",\n sm: \"xs\",\n base: \"sm\",\n lg: \"base\",\n};\n\nexport type InputGroupButtonProps = ButtonProps & {\n /**\n * When provided, wraps the button in a `Tooltip` showing this content on hover.\n * Automatically sets `aria-label` from a string value when no `aria-label` is set.\n *\n * @example\n * ```tsx\n * <InputGroup.Addon align=\"end\">\n * <InputGroup.Button tooltip=\"Query language help\" aria-label=\"Query language help\">\n * <QuestionIcon size={16} />\n * </InputGroup.Button>\n * </InputGroup.Addon>\n * ```\n */\n tooltip?: ReactNode;\n /**\n * Preferred side for the tooltip popup.\n * @default \"bottom\"\n */\n tooltipSide?: KumoTooltipSide;\n};\n\n/**\n * Button for secondary actions rendered inside `InputGroup.Addon`\n * (toggle, copy, help).\n *\n * In `focusMode=\"container\"` (default), renders as a compact ghost button\n * subordinate to the input. In `focusMode=\"individual\"`, renders as a full\n * standalone button with its own focus ring, matching toolbar/pagination usage.\n *\n * Pass a `tooltip` prop to show a tooltip on hover.\n */\nexport const Button = forwardRef<\n HTMLButtonElement,\n PropsWithChildren<InputGroupButtonProps>\n>(\n (\n {\n children,\n className,\n variant,\n size,\n disabled,\n tooltip,\n tooltipSide = \"bottom\",\n icon,\n ...props\n }: PropsWithChildren<InputGroupButtonProps>,\n ref: React.ForwardedRef<HTMLButtonElement>,\n ) => {\n const context = useInputGroupContext(\"Button\");\n const isInsideAddon = useContext(InputGroupAddonContext);\n const isDisabled = disabled ?? context?.disabled;\n const isIndividual =\n context?.focusMode === \"individual\" || context?.focusMode === \"hybrid\";\n const effectiveVariant = variant ?? \"ghost\";\n\n if (\n process.env.NODE_ENV !== \"production\" &&\n context &&\n effectiveVariant === \"ghost\" &&\n !isInsideAddon\n ) {\n console.warn(\n \"InputGroup.Button: Ghost buttons should be wrapped in <InputGroup.Addon> for correct spacing.\",\n );\n }\n\n if (\n process.env.NODE_ENV !== \"production\" &&\n context &&\n size !== undefined\n ) {\n console.warn(\n \"InputGroup.Button: Set `size` on <InputGroup> instead of <InputGroup.Button>.\",\n );\n }\n\n // Derive aria-label from tooltip string when the button has no explicit label.\n // Icon-only buttons require an aria-label for a11y.\n const tooltipAriaLabel =\n typeof tooltip === \"string\" && !props[\"aria-label\"] ? tooltip : undefined;\n\n // Pre-render the icon with the context-derived size so it matches the\n // Addon icon sizing (e.g. 18px at \"base\"). Without this, Button's\n // internal renderIconNode renders `<Icon />` with no size prop,\n // falling back to CSS font-size (~14px).\n const contextIconSize = context\n ? INPUT_GROUP_SIZE[context.size ?? \"base\"].iconSize\n : undefined;\n\n const sizedIcon =\n icon &&\n contextIconSize &&\n (typeof icon === \"function\" ||\n (typeof icon === \"object\" &&\n icon !== null &&\n !React.isValidElement(icon)))\n ? React.createElement(icon as React.ComponentType<{ size?: number }>, {\n size: contextIconSize,\n })\n : icon;\n\n const btn = (\n <ButtonExternal\n ref={ref}\n type=\"button\"\n disabled={isDisabled}\n aria-label={tooltipAriaLabel}\n {...props}\n icon={sizedIcon}\n variant={variant ?? \"ghost\"}\n // Individual: use the group's size directly so buttons match the input height.\n // Container: render one size down so the button stays subordinate to the input.\n size={\n size ??\n (isIndividual\n ? (context?.size ?? \"sm\")\n : (COMPACT_BUTTON_SIZE[context?.size ?? \"base\"] ?? \"sm\"))\n }\n className={cn(\n // Ensure clicks register even when parent has pointer-events-none (e.g. disabled overlay)\n \"pointer-events-auto\",\n // Suppress the base Button's non-visible focus ring in all modes\n \"focus:ring-0\",\n // Container-zone buttons: use a subtle ring as focus indicator\n // (outline doesn't work because the base Button's `focus:outline-none`\n // sets `outline-style: none` which our outline-width/color can't override)\n !isIndividual &&\n \"focus-visible:ring-[1.5px] focus-visible:ring-kumo-focus/50\",\n // Individual mode: each button owns its own border and focus indicator\n isIndividual && [\n // Own border replaces the container's shared ring; force full height\n \"relative h-full! rounded-none ring-0 focus-visible:ring-0 border border-kumo-line\",\n \"first:rounded-l-[inherit] last:rounded-r-[inherit]\",\n // Negative margin (not border-l-0) so the border is still paintable on focus\n \"not-first:-ml-px\",\n \"hover:z-1\",\n // z-2 lifts above hovered siblings so focus border isn't clipped\n \"focus:z-2\",\n \"focus-visible:border-kumo-focus/50\",\n \"disabled:bg-kumo-overlay disabled:text-kumo-inactive!\",\n ],\n className,\n )}\n >\n {children}\n </ButtonExternal>\n );\n\n if (tooltip) {\n return (\n <Tooltip content={tooltip} side={tooltipSide} asChild>\n {btn}\n </Tooltip>\n );\n }\n\n return btn;\n },\n);\nButton.displayName = \"InputGroup.Button\";\n","import {\n Children,\n cloneElement,\n forwardRef,\n isValidElement,\n type ReactElement,\n type ReactNode,\n} from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport {\n useInputGroupContext,\n INPUT_GROUP_SIZE,\n InputGroupAddonContext,\n} from \"./context\";\nimport { Button } from \"./input-group-button\";\n\nexport interface InputGroupAddonProps {\n /** Position relative to the input. @default \"start\" */\n align?: \"start\" | \"end\";\n /** Additional CSS classes. */\n className?: string;\n /** Addon content: icons, buttons, spinners, text. */\n children?: ReactNode;\n}\n\n/**\n * Container for icons, text, or compact buttons positioned at the start or end\n * of the input. Automatically sizes icon children to match the input size.\n */\nexport const Addon = forwardRef<HTMLDivElement, InputGroupAddonProps>(\n ({ align = \"start\", className, children }, ref) => {\n const context = useInputGroupContext(\"Addon\");\n\n const size = context?.size ?? \"base\";\n const tokens = INPUT_GROUP_SIZE[size];\n\n // Inject size into direct icon children that don't already have one set.\n // Skips buttons (which have their own size handling) and non-element nodes.\n // Also tracks whether a Button is present so we can reduce outer padding.\n let containsButton = false;\n const sizedChildren = Children.map(children, (child) => {\n if (!isValidElement(child)) return child;\n if (child.type === Button) {\n containsButton = true;\n return child;\n }\n const props = child.props as { size?: unknown };\n if (props.size !== undefined) return child;\n return cloneElement(child as ReactElement<{ size?: number }>, {\n size: tokens.iconSize,\n });\n });\n\n // Always use flex-based positioning. CSS order controls visual placement.\n return (\n <div\n ref={ref}\n data-slot={\n align === \"start\"\n ? \"input-group-addon-start\"\n : \"input-group-addon-end\"\n }\n className={cn(\n \"relative z-[1] pointer-events-none flex shrink-0 items-center gap-1.5\",\n \"text-kumo-subtle\",\n tokens.fontSize,\n \"*:pointer-events-auto\",\n align === \"start\"\n ? cn(\n \"-order-1\",\n containsButton\n ? tokens.addonButtonOuterStart\n : tokens.addonOuterStart,\n \"pr-0\",\n )\n : cn(\n \"order-1\",\n \"pl-0\",\n containsButton\n ? tokens.addonButtonOuterEnd\n : tokens.addonOuterEnd,\n ),\n className,\n )}\n >\n <InputGroupAddonContext.Provider value={true}>\n {sizedChildren}\n </InputGroupAddonContext.Provider>\n </div>\n );\n },\n);\nAddon.displayName = \"InputGroup.Addon\";\n","import { forwardRef, type ReactNode } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { useInputGroupContext, INPUT_GROUP_SIZE } from \"./context\";\n\nexport interface InputGroupSuffixProps {\n /** Additional CSS classes. */\n className?: string;\n /** Suffix content (e.g., \".workers.dev\"). */\n children?: ReactNode;\n}\n\n/**\n * Inline suffix that flows seamlessly next to the typed input value.\n * Input width adjusts automatically via CSS `field-sizing: content`.\n */\nexport const Suffix = forwardRef<HTMLDivElement, InputGroupSuffixProps>(\n ({ className, children }, ref) => {\n const context = useInputGroupContext(\"Suffix\");\n\n const size = context?.size ?? \"base\";\n const tokens = INPUT_GROUP_SIZE[size];\n\n return (\n <div\n ref={ref}\n data-slot=\"input-group-suffix\"\n className={cn(\n \"pointer-events-none flex min-w-0 grow select-none items-center text-kumo-subtle\",\n tokens.fontSize,\n tokens.suffixPad,\n className,\n )}\n >\n <span className=\"truncate\">{children}</span>\n </div>\n );\n },\n);\nSuffix.displayName = \"InputGroup.Suffix\";\n","import {\n forwardRef,\n useId,\n useMemo,\n type ComponentPropsWithoutRef,\n type PropsWithChildren,\n} from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { inputVariants } from \"../input/input\";\nimport { Field } from \"../field/field\";\nimport {\n InputGroupContext,\n INPUT_GROUP_HAS_CLASSES,\n detectFocusMode,\n partitionChildren,\n type InputGroupRootPropsInternal,\n} from \"./context\";\nimport { Input } from \"./input-group-input\";\nimport { Button } from \"./input-group-button\";\nimport { Addon } from \"./input-group-addon\";\nimport { Suffix } from \"./input-group-suffix\";\n\nexport { type InputGroupRootProps } from \"./context\";\nexport { type InputGroupInputProps } from \"./input-group-input\";\nexport { type InputGroupButtonProps } from \"./input-group-button\";\nexport { type InputGroupAddonProps } from \"./input-group-addon\";\nexport { type InputGroupSuffixProps } from \"./input-group-suffix\";\n\nexport const KUMO_INPUT_GROUP_VARIANTS = {\n size: {\n xs: {\n classes: \"h-6 text-xs\",\n description: \"Extra small size.\",\n },\n sm: {\n classes: \"h-7 text-xs\",\n description: \"Small size.\",\n },\n base: {\n classes: \"h-9 text-base\",\n description: \"Default size.\",\n },\n lg: {\n classes: \"h-11 text-base\",\n description: \"Large size.\",\n },\n },\n} as const;\n\nexport const KUMO_INPUT_GROUP_DEFAULT_VARIANTS = {\n size: \"base\",\n} as const;\n\n/**\n * Compound input component for building inputs with icons, addons, inline\n * suffixes, and action buttons. Accepts Field props and wraps content in\n * Field when label is provided.\n *\n * Renders as `<label>` only in standalone container mode (single input, no\n * sibling buttons) so clicking empty space focuses the input. Otherwise\n * renders as `<div>` to avoid nested `<label>` (when Field provides one) or\n * the browser's `:hover` propagation from `<label>` to its first labelable\n * descendant (when multiple labelable controls are siblings).\n *\n * @note Do not wrap InputGroup inside an external Field without using the `label` prop —\n * this creates invalid nested `<label>` elements. Use InputGroup's own `label` prop instead.\n *\n * @example\n * ```tsx\n * <InputGroup label=\"Email\" error={{ message: \"Invalid\", match: true }}>\n * <InputGroup.Addon><EnvelopeIcon /></InputGroup.Addon>\n * <InputGroup.Input placeholder=\"you@example.com\" />\n * </InputGroup>\n * ```\n *\n * @example\n * ```tsx\n * <InputGroup>\n * <InputGroup.Input placeholder=\"my-worker\" />\n * <InputGroup.Suffix>.workers.dev</InputGroup.Suffix>\n * </InputGroup>\n * ```\n */\nconst Root = forwardRef<\n HTMLElement,\n PropsWithChildren<InputGroupRootPropsInternal>\n>(\n (\n {\n size = \"base\",\n children,\n className,\n disabled = false,\n label,\n description,\n error,\n required,\n labelTooltip,\n ...rest\n },\n forwardedRef,\n ) => {\n const inputId = useId();\n const focusMode = detectFocusMode(children);\n\n const contextValue = useMemo(\n () => ({\n size,\n focusMode,\n disabled,\n error,\n inputId,\n }),\n [size, focusMode, disabled, error, inputId],\n );\n\n // When label is provided, Field already renders a <label> with htmlFor\n // that handles click-to-focus. Using <div> avoids nested <label> elements\n // (invalid HTML with undefined assistive technology behavior).\n // When standalone (no label), a native <label> preserves click-to-focus.\n const containerClassName = cn(\n // Establish positioning context and make the whole area a click target\n \"relative w-full cursor-text\",\n // inputVariants provides base ring-kumo-line; must come before state overrides\n inputVariants({ size }),\n // Subtle drop shadow to separate the group from the page surface\n \"shadow-xs\",\n // Disabled state: prevent interaction and dim the entire group\n \"data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n // Container mode: clip children to rounded corners and show a shared focus ring\n // Individual mode: disable container ring/shadow so each child owns its own border\n focusMode === \"container\"\n ? [\n \"overflow-hidden\",\n // Focus state must come AFTER inputVariants to override ring-kumo-line\n \"focus-within:ring-kumo-focus/50 focus-within:ring-[1.5px]\",\n ]\n : // isolate creates a new stacking context so z-index in children doesn't leak out\n \"isolate overflow-visible ring-0 shadow-none\",\n // Error state must also come after inputVariants\n \"has-[input[aria-invalid=true]]:ring-kumo-danger\",\n // Reset horizontal padding — children handle their own spacing\n \"px-0\",\n // Horizontal layout with no gap — children control their own internal spacing\n \"flex items-center gap-0\",\n // When a suffix is present, let the input shrink to its content width\n // so the suffix stays visually adjacent\n \"has-[[data-slot=input-group-suffix]]:[&_input]:[field-sizing:content]\",\n \"has-[[data-slot=input-group-suffix]]:[&_input]:max-w-full\",\n \"has-[[data-slot=input-group-suffix]]:[&_input]:grow-0\",\n \"has-[[data-slot=input-group-suffix]]:[&_input]:pr-0\",\n // Size-specific padding adjustments when addons or suffixes are present\n INPUT_GROUP_HAS_CLASSES[size],\n // Reset bottom margin to avoid inherited spacing from parent <label> styles\n \"!mb-0\",\n className,\n );\n\n // Data attributes drive CSS selectors in kumo-binding.css (focus outline)\n // and enable child components to query their parent's state.\n const dataProps = {\n \"data-slot\": \"input-group\" as const,\n \"data-focus-mode\": focusMode,\n \"data-disabled\": disabled ? (\"\" as const) : undefined,\n };\n\n // Hybrid mode: splits children into two rendering zones:\n // 1. Container zone (Addon + Input + Suffix) — shares a single border/ring\n // 2. Individual zone (standalone Buttons) — each button owns its own border\n // This lets inputs and addons look unified while buttons remain independent.\n if (focusMode === \"hybrid\") {\n // Partition children by type: addons/inputs/suffixes → container, buttons → individual\n const { containerZone, individualZone } = partitionChildren(children);\n\n // Override focusMode to \"container\" for children inside the zone\n // so InputGroup.Input uses container-mode styling (ring-0!, no own border).\n const containerZoneContext = {\n ...contextValue,\n focusMode: \"container\" as const,\n };\n\n const hybridContent = (\n <>\n {/* Container zone wrapper — shares a single border/ring */}\n <InputGroupContext.Provider value={containerZoneContext}>\n <div\n data-slot=\"input-group-container-zone\"\n className={cn(\n // Base input sizing/shape from shared variant function\n inputVariants({ size }),\n // Clip children to rounded corners within the zone\n \"overflow-hidden\",\n // Show red ring on validation error\n \"has-[input[aria-invalid=true]]:ring-kumo-danger\",\n // Reset horizontal padding — children handle their own spacing\n \"px-0\",\n // Fill available width but allow shrinking when sibling buttons are present\n \"flex min-w-0 flex-1 items-center gap-0\",\n // Use a clean 1px CSS border instead of ring+shadow from inputVariants\n // so the zone matches adjacent individual-mode buttons exactly.\n \"ring-0 shadow-none\",\n \"border border-kumo-line\",\n \"focus-within:border-kumo-focus/50\",\n // z-[2] lifts above adjacent button's -ml-px overlap so focus border shows\n \"focus-within:z-2\",\n // Negative margin (not border-l-0) so the border is still paintable on focus\n \"not-first:-ml-px\",\n // Outer edges inherit radius; inner edges are flat against sibling buttons\n \"first:rounded-l-[inherit] last:rounded-r-[inherit] rounded-none\",\n // Size-specific padding adjustments when addons or suffixes are present\n INPUT_GROUP_HAS_CLASSES[size],\n // When a suffix is present, let the input shrink to its content width\n \"has-data-[slot=input-group-suffix]:[&_input]:field-sizing-content\",\n \"has-data-[slot=input-group-suffix]:[&_input]:max-w-full\",\n \"has-data-[slot=input-group-suffix]:[&_input]:grow-0\",\n \"has-data-[slot=input-group-suffix]:[&_input]:pr-0\",\n )}\n >\n {/* When label exists, an invisible <label> overlay enables click-to-focus inside the container zone without nesting visible <label> elements */}\n {label && (\n // Invisible overlay for click-to-focus; the visible Field label handles a11y\n // eslint-disable-next-line jsx-a11y/label-has-associated-control\n <label\n htmlFor={inputId}\n // Positioned behind children (z-0) so it catches clicks on empty space\n className=\"absolute inset-0 z-0 cursor-text mb-0!\"\n aria-hidden=\"true\"\n />\n )}\n {containerZone}\n </div>\n </InputGroupContext.Provider>\n {/* Individual zone — buttons with their own borders */}\n {individualZone}\n </>\n );\n\n // Hybrid always uses a <div> container (never <label>) because individual-zone buttons are siblings — wrapping them in a <label> would be semantically incorrect.\n const hybridContainer = (\n <InputGroupContext.Provider value={contextValue}>\n <div\n ref={forwardedRef as React.Ref<HTMLDivElement>}\n {...dataProps}\n className={containerClassName}\n {...rest}\n >\n {hybridContent}\n </div>\n </InputGroupContext.Provider>\n );\n\n if (label) {\n return (\n <Field\n label={label}\n description={description}\n error={error}\n required={required}\n labelTooltip={labelTooltip}\n >\n {hybridContainer}\n </Field>\n );\n }\n\n return hybridContainer;\n }\n\n // Container / Individual mode (non-hybrid)\n // Use <label> only when there's exactly one labelable descendant; otherwise <label> would propagate :hover to its first labelable descendant.\n const useLabelContainer = !label && focusMode === \"container\";\n const container = (\n <InputGroupContext.Provider value={contextValue}>\n {/* When label is set, use <div> to avoid nested <label> (Field provides one). An invisible <label> overlay handles click-to-focus on empty space. */}\n {label ? (\n <div\n ref={forwardedRef as React.Ref<HTMLDivElement>}\n {...dataProps}\n className={containerClassName}\n {...rest}\n >\n {/* eslint-disable-next-line jsx-a11y/label-has-associated-control -- invisible overlay for click-to-focus; the visible Field label handles a11y */}\n <label\n htmlFor={inputId}\n // Positioned behind children (z-0) so it catches clicks on empty space\n className=\"absolute inset-0 z-0 mb-0!\"\n aria-hidden=\"true\"\n />\n {children}\n </div>\n ) : useLabelContainer ? (\n // Standalone container mode: <label> enables click-to-focus on empty space.\n <label\n ref={forwardedRef as React.Ref<HTMLLabelElement>}\n {...dataProps}\n className={cn(containerClassName, \"mb-0!\")}\n {...rest}\n >\n {children}\n </label>\n ) : (\n // Individual mode: <div> avoids :hover propagating to the first labelable sibling.\n <div\n ref={forwardedRef as React.Ref<HTMLDivElement>}\n {...dataProps}\n className={containerClassName}\n {...rest}\n >\n {children}\n </div>\n )}\n </InputGroupContext.Provider>\n );\n\n if (label) {\n return (\n <Field\n label={label}\n description={description}\n error={error}\n required={required}\n labelTooltip={labelTooltip}\n >\n {container}\n </Field>\n );\n }\n\n return container;\n },\n);\nRoot.displayName = \"InputGroup\";\n\n/** @deprecated Use `InputGroup.Addon` instead. */\nconst Label = forwardRef<\n HTMLDivElement,\n ComponentPropsWithoutRef<typeof Addon>\n>((props, ref) => <Addon ref={ref} align=\"start\" {...props} />);\nLabel.displayName = \"InputGroup.Label\";\n\n/** @deprecated Use `InputGroup.Suffix` instead. */\nconst Description = forwardRef<\n HTMLDivElement,\n ComponentPropsWithoutRef<typeof Suffix>\n>((props, ref) => <Suffix ref={ref} {...props} />);\nDescription.displayName = \"InputGroup.Description\";\n\nexport const InputGroup = Object.assign(Root, {\n Input,\n Button,\n Addon,\n Suffix,\n /** @deprecated Use `InputGroup.Addon` instead. */\n Label,\n /** @deprecated Use `InputGroup.Suffix` instead. */\n Description,\n});\n"],"names":["INPUT_GROUP_SIZE","INPUT_GROUP_HAS_CLASSES","InputGroupContext","createContext","InputGroupAddonContext","useInputGroupContext","componentName","context","useContext","partitionChildren","children","containerZone","individualZone","Children","child","isValidElement","detectFocusMode","hasNonGhostDirectButton","hasAddon","type","displayName","variant","Input","forwardRef","props","ref","size","tokens","isIndividual","hasError","inputId","jsx","InputExternal","cn","COMPACT_BUTTON_SIZE","Button","className","disabled","tooltip","tooltipSide","icon","isInsideAddon","isDisabled","effectiveVariant","tooltipAriaLabel","contextIconSize","sizedIcon","React","btn","ButtonExternal","Tooltip","Addon","align","containsButton","sizedChildren","cloneElement","Suffix","KUMO_INPUT_GROUP_VARIANTS","KUMO_INPUT_GROUP_DEFAULT_VARIANTS","Root","label","description","error","required","labelTooltip","rest","forwardedRef","useId","focusMode","contextValue","useMemo","containerClassName","inputVariants","dataProps","containerZoneContext","hybridContent","jsxs","Fragment","hybridContainer","Field","useLabelContainer","container","Label","Description","InputGroup"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"input-group-os810pmsqcftt6mq.js","sources":["../../src/components/input-group/context.ts","../../src/components/input-group/input-group-input.tsx","../../src/components/input-group/input-group-button.tsx","../../src/components/input-group/input-group-addon.tsx","../../src/components/input-group/input-group-suffix.tsx","../../src/components/input-group/input-group.tsx"],"sourcesContent":["import {\n Children,\n createContext,\n isValidElement,\n useContext,\n type HTMLAttributes,\n type ReactNode,\n} from \"react\";\nimport type { KumoInputSize } from \"../input/input\";\nimport type { FieldProps } from \"../field/field\";\n\n// Spacing model\n//\n// Each element type has a fixed outer padding. The container uses has-[] CSS\n// to reduce the input's padding on sides that touch an addon.\n//\n// Input outer: px-3 (12px base) — full padding when at the edge\n// Input seam: pl-2 / pr-2 (8px base) — applied by container has-[]\n// Addon outer: pl-2 / pr-2 (8px base) — on the container-edge side\n// Addon seam: nothing — input owns the gap entirely\n//\n// has-[] rules on the container override [&_input]:pl-{seam} when a start\n// addon is present, and [&_input]:pr-{seam} when an end addon is present.\n\nexport interface InputGroupSizeTokens {\n /** Full outer padding — matches standalone Input (e.g. px-3). */\n inputOuter: string;\n /**\n * Directional outer padding for Addon at the container edge.\n *\n * These MUST be static pl-/pr- strings (not derived at runtime via\n * `\"px-N\".replace(…)`) so Tailwind JIT can detect them during its\n * source-file scan. Dynamic string construction produces class names\n * that never appear as literals, so Tailwind never generates the CSS.\n */\n addonOuterStart: string;\n addonOuterEnd: string;\n /**\n * Reduced outer padding when the Addon contains a Button.\n * Buttons have their own internal padding, so the Addon can use\n * less outer padding to keep the visual gap balanced.\n */\n addonButtonOuterStart: string;\n addonButtonOuterEnd: string;\n /** pr- for suffix when no end addon. */\n suffixPad: string;\n fontSize: string;\n /** Icon size in px. */\n iconSize: number;\n}\n\nexport const INPUT_GROUP_SIZE: Record<KumoInputSize, InputGroupSizeTokens> = {\n xs: {\n inputOuter: \"px-1.5\",\n addonOuterStart: \"pl-1.5\",\n addonOuterEnd: \"pr-1.5\",\n addonButtonOuterStart: \"pl-1\",\n addonButtonOuterEnd: \"pr-1\",\n suffixPad: \"pr-1.5\",\n fontSize: \"text-xs\",\n iconSize: 10,\n },\n sm: {\n inputOuter: \"px-2\",\n addonOuterStart: \"pl-1.5\",\n addonOuterEnd: \"pr-1.5\",\n addonButtonOuterStart: \"pl-1\",\n addonButtonOuterEnd: \"pr-1\",\n suffixPad: \"pr-2\",\n fontSize: \"text-xs\",\n iconSize: 13,\n },\n base: {\n inputOuter: \"px-3\",\n addonOuterStart: \"pl-2\",\n addonOuterEnd: \"pr-2\",\n addonButtonOuterStart: \"pl-1\",\n addonButtonOuterEnd: \"pr-1\",\n suffixPad: \"pr-3\",\n fontSize: \"text-base\",\n iconSize: 18,\n },\n lg: {\n inputOuter: \"px-4\",\n addonOuterStart: \"pl-2.5\",\n addonOuterEnd: \"pr-2.5\",\n addonButtonOuterStart: \"pl-1.5\",\n addonButtonOuterEnd: \"pr-1.5\",\n suffixPad: \"pr-4\",\n fontSize: \"text-base\",\n iconSize: 20,\n },\n};\n\n// Build the has-[] container classes that reduce input padding when addons\n// are present. These are static strings so Tailwind JIT can detect them.\nexport const INPUT_GROUP_HAS_CLASSES: Record<KumoInputSize, string> = {\n xs: [\n \"has-[[data-slot=input-group-addon-start]]:[&_input]:pl-1\",\n \"has-[[data-slot=input-group-addon-end]]:[&_input]:pr-1\",\n ].join(\" \"),\n sm: [\n \"has-[[data-slot=input-group-addon-start]]:[&_input]:pl-1.5\",\n \"has-[[data-slot=input-group-addon-end]]:[&_input]:pr-1.5\",\n ].join(\" \"),\n base: [\n \"has-[[data-slot=input-group-addon-start]]:[&_input]:pl-2\",\n \"has-[[data-slot=input-group-addon-end]]:[&_input]:pr-2\",\n ].join(\" \"),\n lg: [\n \"has-[[data-slot=input-group-addon-start]]:[&_input]:pl-2.5\",\n \"has-[[data-slot=input-group-addon-end]]:[&_input]:pr-2.5\",\n ].join(\" \"),\n};\n\n// Context\n\n/**\n * Props for `InputGroup.Root`. Focus mode is auto-detected from children\n * (see `detectFocusMode`), so it is not part of the public or internal API.\n */\nexport interface InputGroupRootPropsInternal\n extends HTMLAttributes<HTMLElement>,\n Partial<\n Pick<\n FieldProps,\n \"label\" | \"description\" | \"error\" | \"required\" | \"labelTooltip\"\n >\n > {\n size?: KumoInputSize | undefined;\n disabled?: boolean;\n}\n\n/** Public InputGroup.Root props — identical to the internal type. */\nexport type InputGroupRootProps = InputGroupRootPropsInternal;\n\nexport interface InputGroupContextValue {\n size?: KumoInputSize;\n focusMode: \"container\" | \"individual\" | \"hybrid\";\n disabled: boolean;\n error?: FieldProps[\"error\"];\n /** Auto-generated id for the input element; used by the invisible label overlay. */\n inputId: string;\n}\n\nexport const InputGroupContext = createContext<InputGroupContextValue | null>(\n null,\n);\n\n/**\n * Set to `true` by `InputGroup.Addon` so that `InputGroup.Button` can detect\n * whether it's wrapped in an Addon. Ghost buttons should always live inside\n * an Addon for correct spacing.\n */\nexport const InputGroupAddonContext = createContext(false);\n\n/**\n * Reads InputGroupContext and warns in development when the context is null\n * (i.e. when a sub-component is rendered outside of `<InputGroup>`).\n */\nexport function useInputGroupContext(componentName: string) {\n const context = useContext(InputGroupContext);\n if (process.env.NODE_ENV !== \"production\" && !context) {\n console.warn(\n `<InputGroup.${componentName}> must be used within <InputGroup>. Falling back to default values.`,\n );\n }\n return context;\n}\n\n/**\n * Partitions InputGroup children for hybrid focus mode.\n *\n * Container zone: Addon, Input, Suffix, text nodes — everything that should\n * share a single container-style border.\n *\n * Individual zone: Direct `InputGroup.Button` elements that manage their own\n * border and focus ring.\n *\n * Uses `displayName` comparison to identify elements, avoiding circular\n * imports between `context.ts` and the sub-component files.\n */\nexport function partitionChildren(children: ReactNode): {\n containerZone: ReactNode[];\n individualZone: ReactNode[];\n} {\n const containerZone: ReactNode[] = [];\n const individualZone: ReactNode[] = [];\n\n Children.forEach(children, (child) => {\n if (\n isValidElement(child) &&\n (child.type as { displayName?: string })?.displayName ===\n \"InputGroup.Button\"\n ) {\n individualZone.push(child);\n } else {\n containerZone.push(child);\n }\n });\n\n return { containerZone, individualZone };\n}\n\n/**\n * Analyzes the direct children of `InputGroup` to determine the focus mode.\n *\n * Returns `\"hybrid\"` when BOTH an `InputGroup.Addon` AND a non-ghost direct\n * `InputGroup.Button` are present. In hybrid mode, Addon+Input share a\n * container-style border while Buttons get individual borders.\n *\n * Returns `\"individual\"` when a non-ghost direct `InputGroup.Button` is\n * present WITHOUT any `InputGroup.Addon`. This signals a toolbar/pagination\n * layout where each element manages its own focus ring.\n *\n * Returns `\"container\"` (default) in all other cases — the container owns a\n * single shared focus ring.\n *\n * Uses `displayName` comparison to identify elements, avoiding circular\n * imports between `context.ts` and the sub-component files.\n */\nexport function detectFocusMode(\n children: ReactNode,\n): \"container\" | \"individual\" | \"hybrid\" {\n let hasNonGhostDirectButton = false;\n let hasAddon = false;\n\n Children.forEach(children, (child) => {\n if (!isValidElement(child)) return;\n\n // Identify components by displayName to avoid circular imports.\n const type = child.type;\n const displayName =\n typeof type === \"function\" || typeof type === \"object\"\n ? (type as { displayName?: string }).displayName\n : undefined;\n\n if (displayName === \"InputGroup.Addon\") {\n hasAddon = true;\n return;\n }\n\n if (displayName !== \"InputGroup.Button\") return;\n\n // A direct-child Button is by definition NOT inside an Addon (Addon's\n // children are children of the Addon element, not of InputGroup).\n // Check whether the variant is explicitly non-ghost.\n const variant = (child.props as { variant?: string }).variant;\n if (variant !== undefined && variant !== \"ghost\") {\n hasNonGhostDirectButton = true;\n }\n });\n\n if (hasNonGhostDirectButton && hasAddon) return \"hybrid\";\n if (hasNonGhostDirectButton) return \"individual\";\n return \"container\";\n}\n","import { forwardRef } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Input as InputExternal, type InputProps } from \"../input/input\";\nimport { useInputGroupContext, INPUT_GROUP_SIZE } from \"./context\";\n\n/** Props for InputGroup.Input — omits Field props since InputGroup handles them. */\nexport type InputGroupInputProps = Omit<\n InputProps,\n \"label\" | \"labelTooltip\" | \"description\" | \"error\" | \"size\" | \"disabled\"\n>;\n\n/**\n * Text input that inherits size, disabled, and error state from InputGroup context.\n * Automatically sets `aria-invalid` when parent has an error.\n */\nexport const Input = forwardRef<HTMLInputElement, InputGroupInputProps>(\n (props, ref) => {\n const context = useInputGroupContext(\"Input\");\n\n // Warn when props that belong on <InputGroup> are passed directly\n if (process.env.NODE_ENV !== \"production\" && context) {\n if ((props as any).size !== undefined) {\n console.warn(\n \"InputGroup.Input: Set `size` on <InputGroup> instead of <InputGroup.Input>.\",\n );\n }\n if ((props as any).disabled !== undefined) {\n console.warn(\n \"InputGroup.Input: Set `disabled` on <InputGroup> instead of <InputGroup.Input>.\",\n );\n }\n if ((props as any).label !== undefined) {\n console.warn(\n \"InputGroup.Input: Use the `label` prop on <InputGroup> instead of <InputGroup.Input>.\",\n );\n }\n if ((props as any).description !== undefined) {\n console.warn(\n \"InputGroup.Input: Use <InputGroup.Suffix> instead of passing `description` to <InputGroup.Input>.\",\n );\n }\n }\n\n const size = context?.size ?? \"base\";\n const tokens = INPUT_GROUP_SIZE[size];\n const isIndividual = context?.focusMode === \"individual\";\n\n // Auto-set aria-invalid when error is present in context\n const hasError = Boolean(context?.error);\n\n // Use explicit id if provided, otherwise fall back to context id\n // (links the input to the invisible label overlay for click-to-focus).\n const inputId = props.id ?? context?.inputId;\n\n return (\n <InputExternal\n ref={ref}\n size={context?.size}\n disabled={context?.disabled || (props as any).disabled}\n aria-invalid={hasError || props[\"aria-invalid\"]}\n {...props}\n id={inputId}\n className={cn(\n // Base input layout: fill height, allow shrinking, strip native border/radius\n \"flex h-full min-w-0 grow items-center rounded-none border-0 bg-transparent font-sans\",\n // Always use full outer padding — the container's has-[] rules reduce pl/pr to inputSeam on sides that touch an addon.\n tokens.inputOuter,\n // Truncate overflowing text with \"…\" instead of expanding the input\n \"text-ellipsis\",\n // Individual mode: each element owns its own border instead of sharing a container ring\n isIndividual\n ? [\n // Own border replaces the container's shared ring; suppress the base Input's focus:ring so only the border-swap shows\n \"relative ring-0 focus:ring-0 border border-kumo-line\",\n \"first:rounded-l-[inherit] last:rounded-r-[inherit]\",\n // Negative margin (not border-l-0) so the border is still paintable on focus\n \"not-first:-ml-px\",\n \"hover:z-1 hover:border-kumo-line\",\n // z-[2] lifts above hovered siblings so focus border isn't clipped\n \"focus:z-2 focus:border-kumo-focus/50\",\n ].join(\" \")\n : // Container mode: kill all focus indicators — the container handles them z-1 lifts the input above the invisible label overlay so cursor/selection work\n \"relative z-1 ring-0! shadow-none outline-none focus:ring-0! focus:outline-none\",\n props.className,\n )}\n />\n );\n },\n);\nInput.displayName = \"InputGroup.Input\";\n","import React, {\n forwardRef,\n useContext,\n type PropsWithChildren,\n type ReactNode,\n} from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { type ButtonProps, Button as ButtonExternal } from \"../button/button\";\nimport { Tooltip, type KumoTooltipSide } from \"../tooltip/tooltip\";\nimport type { KumoInputSize } from \"../input/input\";\nimport {\n INPUT_GROUP_SIZE,\n InputGroupAddonContext,\n useInputGroupContext,\n} from \"./context\";\n\n/**\n * In container mode, buttons render \"one size down\" so they stay visually\n * subordinate to the input. In individual mode the size passes through\n * unchanged (pagination / toolbar buttons should match the input height).\n */\nconst COMPACT_BUTTON_SIZE: Record<KumoInputSize, KumoInputSize> = {\n xs: \"xs\",\n sm: \"xs\",\n base: \"sm\",\n lg: \"base\",\n};\n\nexport type InputGroupButtonProps = ButtonProps & {\n /**\n * When provided, wraps the button in a `Tooltip` showing this content on hover.\n * Automatically sets `aria-label` from a string value when no `aria-label` is set.\n *\n * @example\n * ```tsx\n * <InputGroup.Addon align=\"end\">\n * <InputGroup.Button tooltip=\"Query language help\" aria-label=\"Query language help\">\n * <QuestionIcon size={16} />\n * </InputGroup.Button>\n * </InputGroup.Addon>\n * ```\n */\n tooltip?: ReactNode;\n /**\n * Preferred side for the tooltip popup.\n * @default \"bottom\"\n */\n tooltipSide?: KumoTooltipSide;\n};\n\n/**\n * Button for secondary actions rendered inside `InputGroup.Addon`\n * (toggle, copy, help).\n *\n * In `focusMode=\"container\"` (default), renders as a compact ghost button\n * subordinate to the input. In `focusMode=\"individual\"`, renders as a full\n * standalone button with its own focus ring, matching toolbar/pagination usage.\n *\n * Pass a `tooltip` prop to show a tooltip on hover.\n */\nexport const Button = forwardRef<\n HTMLButtonElement,\n PropsWithChildren<InputGroupButtonProps>\n>(\n (\n {\n children,\n className,\n variant,\n size,\n disabled,\n tooltip,\n tooltipSide = \"bottom\",\n icon,\n ...props\n }: PropsWithChildren<InputGroupButtonProps>,\n ref: React.ForwardedRef<HTMLButtonElement>,\n ) => {\n const context = useInputGroupContext(\"Button\");\n const isInsideAddon = useContext(InputGroupAddonContext);\n const isDisabled = disabled ?? context?.disabled;\n const isIndividual =\n context?.focusMode === \"individual\" || context?.focusMode === \"hybrid\";\n const effectiveVariant = variant ?? \"ghost\";\n\n if (\n process.env.NODE_ENV !== \"production\" &&\n context &&\n effectiveVariant === \"ghost\" &&\n !isInsideAddon\n ) {\n console.warn(\n \"InputGroup.Button: Ghost buttons should be wrapped in <InputGroup.Addon> for correct spacing.\",\n );\n }\n\n if (\n process.env.NODE_ENV !== \"production\" &&\n context &&\n size !== undefined\n ) {\n console.warn(\n \"InputGroup.Button: Set `size` on <InputGroup> instead of <InputGroup.Button>.\",\n );\n }\n\n // Derive aria-label from tooltip string when the button has no explicit label.\n // Icon-only buttons require an aria-label for a11y.\n const tooltipAriaLabel =\n typeof tooltip === \"string\" && !props[\"aria-label\"] ? tooltip : undefined;\n\n // Pre-render the icon with the context-derived size so it matches the\n // Addon icon sizing (e.g. 18px at \"base\"). Without this, Button's\n // internal renderIconNode renders `<Icon />` with no size prop,\n // falling back to CSS font-size (~14px).\n const contextIconSize = context\n ? INPUT_GROUP_SIZE[context.size ?? \"base\"].iconSize\n : undefined;\n\n const sizedIcon =\n icon &&\n contextIconSize &&\n (typeof icon === \"function\" ||\n (typeof icon === \"object\" &&\n icon !== null &&\n !React.isValidElement(icon)))\n ? React.createElement(icon as React.ComponentType<{ size?: number }>, {\n size: contextIconSize,\n })\n : icon;\n\n const btn = (\n <ButtonExternal\n ref={ref}\n type=\"button\"\n disabled={isDisabled}\n aria-label={tooltipAriaLabel}\n {...props}\n icon={sizedIcon}\n variant={variant ?? \"ghost\"}\n // Individual: use the group's size directly so buttons match the input height.\n // Container: render one size down so the button stays subordinate to the input.\n size={\n size ??\n (isIndividual\n ? (context?.size ?? \"sm\")\n : (COMPACT_BUTTON_SIZE[context?.size ?? \"base\"] ?? \"sm\"))\n }\n className={cn(\n // Ensure clicks register even when parent has pointer-events-none (e.g. disabled overlay)\n \"pointer-events-auto\",\n // Suppress the base Button's non-visible focus ring in all modes\n \"focus:ring-0\",\n // Container-zone buttons: use a subtle ring as focus indicator\n // (outline doesn't work because the base Button's `focus:outline-none`\n // sets `outline-style: none` which our outline-width/color can't override)\n !isIndividual &&\n \"focus-visible:ring-[1.5px] focus-visible:ring-kumo-focus/50\",\n // Individual mode: each button owns its own border and focus indicator\n isIndividual && [\n // Own border replaces the container's shared ring; force full height\n \"relative h-full! rounded-none ring-0 focus-visible:ring-0 border border-kumo-line\",\n \"first:rounded-l-[inherit] last:rounded-r-[inherit]\",\n // Negative margin (not border-l-0) so the border is still paintable on focus\n \"not-first:-ml-px\",\n \"hover:z-1\",\n // z-2 lifts above hovered siblings so focus border isn't clipped\n \"focus:z-2\",\n \"focus-visible:border-kumo-focus/50\",\n \"disabled:bg-kumo-overlay disabled:text-kumo-inactive!\",\n ],\n className,\n )}\n >\n {children}\n </ButtonExternal>\n );\n\n if (tooltip) {\n return (\n <Tooltip content={tooltip} side={tooltipSide} asChild>\n {btn}\n </Tooltip>\n );\n }\n\n return btn;\n },\n);\nButton.displayName = \"InputGroup.Button\";\n","import {\n Children,\n cloneElement,\n forwardRef,\n isValidElement,\n type ReactElement,\n type ReactNode,\n} from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport {\n useInputGroupContext,\n INPUT_GROUP_SIZE,\n InputGroupAddonContext,\n} from \"./context\";\nimport { Button } from \"./input-group-button\";\n\nexport interface InputGroupAddonProps {\n /** Position relative to the input. @default \"start\" */\n align?: \"start\" | \"end\";\n /** Additional CSS classes. */\n className?: string;\n /** Addon content: icons, buttons, spinners, text. */\n children?: ReactNode;\n}\n\n/**\n * Container for icons, text, or compact buttons positioned at the start or end\n * of the input. Automatically sizes icon children to match the input size.\n */\nexport const Addon = forwardRef<HTMLDivElement, InputGroupAddonProps>(\n ({ align = \"start\", className, children }, ref) => {\n const context = useInputGroupContext(\"Addon\");\n\n const size = context?.size ?? \"base\";\n const tokens = INPUT_GROUP_SIZE[size];\n\n // Inject size into direct icon children that don't already have one set.\n // Skips buttons (which have their own size handling) and non-element nodes.\n // Also tracks whether a Button is present so we can reduce outer padding.\n let containsButton = false;\n const sizedChildren = Children.map(children, (child) => {\n if (!isValidElement(child)) return child;\n if (child.type === Button) {\n containsButton = true;\n return child;\n }\n const props = child.props as { size?: unknown };\n if (props.size !== undefined) return child;\n return cloneElement(child as ReactElement<{ size?: number }>, {\n size: tokens.iconSize,\n });\n });\n\n // Always use flex-based positioning. CSS order controls visual placement.\n return (\n <div\n ref={ref}\n data-slot={\n align === \"start\"\n ? \"input-group-addon-start\"\n : \"input-group-addon-end\"\n }\n className={cn(\n \"relative z-[1] pointer-events-none flex shrink-0 items-center gap-1.5\",\n \"text-kumo-subtle\",\n tokens.fontSize,\n \"*:pointer-events-auto\",\n align === \"start\"\n ? cn(\n \"-order-1\",\n containsButton\n ? tokens.addonButtonOuterStart\n : tokens.addonOuterStart,\n \"pr-0\",\n )\n : cn(\n \"order-1\",\n \"pl-0\",\n containsButton\n ? tokens.addonButtonOuterEnd\n : tokens.addonOuterEnd,\n ),\n className,\n )}\n >\n <InputGroupAddonContext.Provider value={true}>\n {sizedChildren}\n </InputGroupAddonContext.Provider>\n </div>\n );\n },\n);\nAddon.displayName = \"InputGroup.Addon\";\n","import { forwardRef, type ReactNode } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { useInputGroupContext, INPUT_GROUP_SIZE } from \"./context\";\n\nexport interface InputGroupSuffixProps {\n /** Additional CSS classes. */\n className?: string;\n /** Suffix content (e.g., \".workers.dev\"). */\n children?: ReactNode;\n}\n\n/**\n * Inline suffix that flows seamlessly next to the typed input value.\n * Input width adjusts automatically via CSS `field-sizing: content`.\n */\nexport const Suffix = forwardRef<HTMLDivElement, InputGroupSuffixProps>(\n ({ className, children }, ref) => {\n const context = useInputGroupContext(\"Suffix\");\n\n const size = context?.size ?? \"base\";\n const tokens = INPUT_GROUP_SIZE[size];\n\n return (\n <div\n ref={ref}\n data-slot=\"input-group-suffix\"\n className={cn(\n \"pointer-events-none flex min-w-0 grow select-none items-center text-kumo-subtle\",\n tokens.fontSize,\n tokens.suffixPad,\n className,\n )}\n >\n <span className=\"truncate\">{children}</span>\n </div>\n );\n },\n);\nSuffix.displayName = \"InputGroup.Suffix\";\n","import {\n forwardRef,\n useId,\n useMemo,\n type ComponentPropsWithoutRef,\n type PropsWithChildren,\n} from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { inputVariants } from \"../input/input\";\nimport { Field } from \"../field/field\";\nimport {\n InputGroupContext,\n INPUT_GROUP_HAS_CLASSES,\n detectFocusMode,\n partitionChildren,\n type InputGroupRootPropsInternal,\n} from \"./context\";\nimport { Input } from \"./input-group-input\";\nimport { Button } from \"./input-group-button\";\nimport { Addon } from \"./input-group-addon\";\nimport { Suffix } from \"./input-group-suffix\";\n\nexport { type InputGroupRootProps } from \"./context\";\nexport { type InputGroupInputProps } from \"./input-group-input\";\nexport { type InputGroupButtonProps } from \"./input-group-button\";\nexport { type InputGroupAddonProps } from \"./input-group-addon\";\nexport { type InputGroupSuffixProps } from \"./input-group-suffix\";\n\nexport const KUMO_INPUT_GROUP_VARIANTS = {\n size: {\n xs: {\n classes: \"h-6 text-xs\",\n description: \"Extra small size.\",\n },\n sm: {\n classes: \"h-7 text-xs\",\n description: \"Small size.\",\n },\n base: {\n classes: \"h-9 text-base\",\n description: \"Default size.\",\n },\n lg: {\n classes: \"h-11 text-base\",\n description: \"Large size.\",\n },\n },\n} as const;\n\nexport const KUMO_INPUT_GROUP_DEFAULT_VARIANTS = {\n size: \"base\",\n} as const;\n\n/**\n * Compound input component for building inputs with icons, addons, inline\n * suffixes, and action buttons. Accepts Field props and wraps content in\n * Field when label is provided.\n *\n * Renders as `<label>` only in standalone container mode (single input, no\n * sibling buttons) so clicking empty space focuses the input. Otherwise\n * renders as `<div>` to avoid nested `<label>` (when Field provides one) or\n * the browser's `:hover` propagation from `<label>` to its first labelable\n * descendant (when multiple labelable controls are siblings).\n *\n * @note Do not wrap InputGroup inside an external Field without using the `label` prop —\n * this creates invalid nested `<label>` elements. Use InputGroup's own `label` prop instead.\n *\n * @example\n * ```tsx\n * <InputGroup label=\"Email\" error={{ message: \"Invalid\", match: true }}>\n * <InputGroup.Addon><EnvelopeIcon /></InputGroup.Addon>\n * <InputGroup.Input placeholder=\"you@example.com\" />\n * </InputGroup>\n * ```\n *\n * @example\n * ```tsx\n * <InputGroup>\n * <InputGroup.Input placeholder=\"my-worker\" />\n * <InputGroup.Suffix>.workers.dev</InputGroup.Suffix>\n * </InputGroup>\n * ```\n */\nconst Root = forwardRef<\n HTMLElement,\n PropsWithChildren<InputGroupRootPropsInternal>\n>(\n (\n {\n size = \"base\",\n children,\n className,\n disabled = false,\n label,\n description,\n error,\n required,\n labelTooltip,\n ...rest\n },\n forwardedRef,\n ) => {\n const inputId = useId();\n const focusMode = detectFocusMode(children);\n\n const contextValue = useMemo(\n () => ({\n size,\n focusMode,\n disabled,\n error,\n inputId,\n }),\n [size, focusMode, disabled, error, inputId],\n );\n\n // When label is provided, Field already renders a <label> with htmlFor\n // that handles click-to-focus. Using <div> avoids nested <label> elements\n // (invalid HTML with undefined assistive technology behavior).\n // When standalone (no label), a native <label> preserves click-to-focus.\n const containerClassName = cn(\n // Establish positioning context and make the whole area a click target\n \"relative w-full cursor-text\",\n // inputVariants provides base ring-kumo-line; must come before state overrides\n inputVariants({ size }),\n // Subtle drop shadow to separate the group from the page surface\n \"shadow-xs\",\n // Disabled state: prevent interaction and dim the entire group\n \"data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n // Container mode: clip children to rounded corners and show a shared focus ring\n // Individual mode: disable container ring/shadow so each child owns its own border\n focusMode === \"container\"\n ? [\n \"overflow-hidden\",\n // Focus state must come AFTER inputVariants to override ring-kumo-line\n \"focus-within:ring-kumo-focus/50 focus-within:ring-[1.5px]\",\n ]\n : // isolate creates a new stacking context so z-index in children doesn't leak out\n \"isolate overflow-visible ring-0 shadow-none\",\n // Error state must also come after inputVariants\n \"has-[input[aria-invalid=true]]:ring-kumo-danger\",\n // Reset horizontal padding — children handle their own spacing\n \"px-0\",\n // Horizontal layout with no gap — children control their own internal spacing\n \"flex items-center gap-0\",\n // When a suffix is present, let the input shrink to its content width\n // so the suffix stays visually adjacent\n \"has-[[data-slot=input-group-suffix]]:[&_input]:[field-sizing:content]\",\n \"has-[[data-slot=input-group-suffix]]:[&_input]:max-w-full\",\n \"has-[[data-slot=input-group-suffix]]:[&_input]:grow-0\",\n \"has-[[data-slot=input-group-suffix]]:[&_input]:pr-0\",\n // Size-specific padding adjustments when addons or suffixes are present\n INPUT_GROUP_HAS_CLASSES[size],\n // Reset bottom margin to avoid inherited spacing from parent <label> styles\n \"!mb-0\",\n className,\n );\n\n // Data attributes drive CSS selectors in kumo-binding.css (focus outline)\n // and enable child components to query their parent's state.\n const dataProps = {\n \"data-slot\": \"input-group\" as const,\n \"data-focus-mode\": focusMode,\n \"data-disabled\": disabled ? (\"\" as const) : undefined,\n };\n\n // Hybrid mode: splits children into two rendering zones:\n // 1. Container zone (Addon + Input + Suffix) — shares a single border/ring\n // 2. Individual zone (standalone Buttons) — each button owns its own border\n // This lets inputs and addons look unified while buttons remain independent.\n if (focusMode === \"hybrid\") {\n // Partition children by type: addons/inputs/suffixes → container, buttons → individual\n const { containerZone, individualZone } = partitionChildren(children);\n\n // Override focusMode to \"container\" for children inside the zone\n // so InputGroup.Input uses container-mode styling (ring-0!, no own border).\n const containerZoneContext = {\n ...contextValue,\n focusMode: \"container\" as const,\n };\n\n const hybridContent = (\n <>\n {/* Container zone wrapper — shares a single border/ring */}\n <InputGroupContext.Provider value={containerZoneContext}>\n <div\n data-slot=\"input-group-container-zone\"\n className={cn(\n // Base input sizing/shape from shared variant function\n inputVariants({ size }),\n // Clip children to rounded corners within the zone\n \"overflow-hidden\",\n // Show red ring on validation error\n \"has-[input[aria-invalid=true]]:ring-kumo-danger\",\n // Reset horizontal padding — children handle their own spacing\n \"px-0\",\n // Fill available width but allow shrinking when sibling buttons are present\n \"flex min-w-0 flex-1 items-center gap-0\",\n // Use a clean 1px CSS border instead of ring+shadow from inputVariants\n // so the zone matches adjacent individual-mode buttons exactly.\n \"ring-0 shadow-none\",\n \"border border-kumo-line\",\n \"focus-within:border-kumo-focus/50\",\n // z-[2] lifts above adjacent button's -ml-px overlap so focus border shows\n \"focus-within:z-2\",\n // Negative margin (not border-l-0) so the border is still paintable on focus\n \"not-first:-ml-px\",\n // Outer edges inherit radius; inner edges are flat against sibling buttons\n \"first:rounded-l-[inherit] last:rounded-r-[inherit] rounded-none\",\n // Size-specific padding adjustments when addons or suffixes are present\n INPUT_GROUP_HAS_CLASSES[size],\n // When a suffix is present, let the input shrink to its content width\n \"has-data-[slot=input-group-suffix]:[&_input]:field-sizing-content\",\n \"has-data-[slot=input-group-suffix]:[&_input]:max-w-full\",\n \"has-data-[slot=input-group-suffix]:[&_input]:grow-0\",\n \"has-data-[slot=input-group-suffix]:[&_input]:pr-0\",\n )}\n >\n {/* When label exists, an invisible <label> overlay enables click-to-focus inside the container zone without nesting visible <label> elements */}\n {label && (\n // Invisible overlay for click-to-focus; the visible Field label handles a11y\n // eslint-disable-next-line jsx-a11y/label-has-associated-control\n <label\n htmlFor={inputId}\n // Positioned behind children (z-0) so it catches clicks on empty space\n className=\"absolute inset-0 z-0 cursor-text mb-0!\"\n aria-hidden=\"true\"\n />\n )}\n {containerZone}\n </div>\n </InputGroupContext.Provider>\n {/* Individual zone — buttons with their own borders */}\n {individualZone}\n </>\n );\n\n // Hybrid always uses a <div> container (never <label>) because individual-zone buttons are siblings — wrapping them in a <label> would be semantically incorrect.\n const hybridContainer = (\n <InputGroupContext.Provider value={contextValue}>\n <div\n ref={forwardedRef as React.Ref<HTMLDivElement>}\n {...dataProps}\n className={containerClassName}\n {...rest}\n >\n {hybridContent}\n </div>\n </InputGroupContext.Provider>\n );\n\n if (label) {\n return (\n <Field\n label={label}\n description={description}\n error={error}\n required={required}\n labelTooltip={labelTooltip}\n >\n {hybridContainer}\n </Field>\n );\n }\n\n return hybridContainer;\n }\n\n // Container / Individual mode (non-hybrid)\n // Use <label> only when there's exactly one labelable descendant; otherwise <label> would propagate :hover to its first labelable descendant.\n const useLabelContainer = !label && focusMode === \"container\";\n const container = (\n <InputGroupContext.Provider value={contextValue}>\n {/* When label is set, use <div> to avoid nested <label> (Field provides one). An invisible <label> overlay handles click-to-focus on empty space. */}\n {label ? (\n <div\n ref={forwardedRef as React.Ref<HTMLDivElement>}\n {...dataProps}\n className={containerClassName}\n {...rest}\n >\n {/* eslint-disable-next-line jsx-a11y/label-has-associated-control -- invisible overlay for click-to-focus; the visible Field label handles a11y */}\n <label\n htmlFor={inputId}\n // Positioned behind children (z-0) so it catches clicks on empty space\n className=\"absolute inset-0 z-0 mb-0!\"\n aria-hidden=\"true\"\n />\n {children}\n </div>\n ) : useLabelContainer ? (\n // Standalone container mode: <label> enables click-to-focus on empty space.\n <label\n ref={forwardedRef as React.Ref<HTMLLabelElement>}\n {...dataProps}\n className={cn(containerClassName, \"mb-0!\")}\n {...rest}\n >\n {children}\n </label>\n ) : (\n // Individual mode: <div> avoids :hover propagating to the first labelable sibling.\n <div\n ref={forwardedRef as React.Ref<HTMLDivElement>}\n {...dataProps}\n className={containerClassName}\n {...rest}\n >\n {children}\n </div>\n )}\n </InputGroupContext.Provider>\n );\n\n if (label) {\n return (\n <Field\n label={label}\n description={description}\n error={error}\n required={required}\n labelTooltip={labelTooltip}\n >\n {container}\n </Field>\n );\n }\n\n return container;\n },\n);\nRoot.displayName = \"InputGroup\";\n\n/** @deprecated Use `InputGroup.Addon` instead. */\nconst Label = forwardRef<\n HTMLDivElement,\n ComponentPropsWithoutRef<typeof Addon>\n>((props, ref) => <Addon ref={ref} align=\"start\" {...props} />);\nLabel.displayName = \"InputGroup.Label\";\n\n/** @deprecated Use `InputGroup.Suffix` instead. */\nconst Description = forwardRef<\n HTMLDivElement,\n ComponentPropsWithoutRef<typeof Suffix>\n>((props, ref) => <Suffix ref={ref} {...props} />);\nDescription.displayName = \"InputGroup.Description\";\n\nexport const InputGroup = Object.assign(Root, {\n Input,\n Button,\n Addon,\n Suffix,\n /** @deprecated Use `InputGroup.Addon` instead. */\n Label,\n /** @deprecated Use `InputGroup.Suffix` instead. */\n Description,\n});\n"],"names":["INPUT_GROUP_SIZE","INPUT_GROUP_HAS_CLASSES","InputGroupContext","createContext","InputGroupAddonContext","useInputGroupContext","componentName","context","useContext","partitionChildren","children","containerZone","individualZone","Children","child","isValidElement","detectFocusMode","hasNonGhostDirectButton","hasAddon","type","displayName","variant","Input","forwardRef","props","ref","size","tokens","isIndividual","hasError","inputId","jsx","InputExternal","cn","COMPACT_BUTTON_SIZE","Button","className","disabled","tooltip","tooltipSide","icon","isInsideAddon","isDisabled","effectiveVariant","tooltipAriaLabel","contextIconSize","sizedIcon","React","btn","ButtonExternal","Tooltip","Addon","align","containsButton","sizedChildren","cloneElement","Suffix","KUMO_INPUT_GROUP_VARIANTS","KUMO_INPUT_GROUP_DEFAULT_VARIANTS","Root","label","description","error","required","labelTooltip","rest","forwardedRef","useId","focusMode","contextValue","useMemo","containerClassName","inputVariants","dataProps","containerZoneContext","hybridContent","jsxs","Fragment","hybridContainer","Field","useLabelContainer","container","Label","Description","InputGroup"],"mappings":"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"}
|
|
@@ -3,7 +3,7 @@ import { jsx as d } from "react/jsx-runtime";
|
|
|
3
3
|
import { c as g } from "./cn-ct4n7r74mh8y0f48.js";
|
|
4
4
|
import { r as f } from "./resolve-variant-gw6eh7fa4st8ej7m.js";
|
|
5
5
|
import { forwardRef as w } from "react";
|
|
6
|
-
import { F as E, n as N } from "./field-
|
|
6
|
+
import { F as E, n as N } from "./field-m57qcw5b1zt1ohfz.js";
|
|
7
7
|
import { I as y } from "./vendor-base-ui-knphx7dts1vm1x37.js";
|
|
8
8
|
const m = {
|
|
9
9
|
size: {
|
|
@@ -127,4 +127,4 @@ export {
|
|
|
127
127
|
m as K,
|
|
128
128
|
z as i
|
|
129
129
|
};
|
|
130
|
-
//# sourceMappingURL=input-
|
|
130
|
+
//# sourceMappingURL=input-iahz0dpc9xdar2ju.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"input-en8hhb14mmt3tfwn.js","sources":["../../src/components/input/input.tsx"],"sourcesContent":["import { cn } from \"../../utils/cn\";\nimport { resolveVariant } from \"../../utils/resolve-variant\";\nimport {\n forwardRef,\n type ComponentPropsWithoutRef,\n type ReactNode,\n} from \"react\";\nimport { Input as BaseInput } from \"@base-ui/react/input\";\nimport { Field, normalizeFieldError, 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-focus/50 focus:ring-[1.5px]\",\n description: \"Default input appearance\",\n },\n error: {\n classes: \"!ring-kumo-danger focus:ring-kumo-danger/50 focus:ring-[1.5px]\",\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 outline-none focus:outline-none\",\n // Disabled state and placeholder styles (using vanilla CSS class for Chrome compatibility)\n \"kumo-input-placeholder disabled:text-kumo-disabled\",\n // Apply size styles from KUMO_INPUT_VARIANTS\n resolveVariant(\n KUMO_INPUT_VARIANTS.size,\n size,\n KUMO_INPUT_DEFAULT_VARIANTS.size,\n ).classes,\n // Apply variant styles from KUMO_INPUT_VARIANTS\n resolveVariant(\n KUMO_INPUT_VARIANTS.variant,\n variant,\n KUMO_INPUT_DEFAULT_VARIANTS.variant,\n ).classes,\n // Focus state handling\n parentFocusIndicator &&\n (variant === \"error\"\n ? \"focus-within:ring-kumo-danger/50 focus-within:ring-[1.5px]\"\n : \"focus-within:ring-kumo-focus/50 focus-within:ring-[1.5px]\"),\n focusIndicator &&\n (variant === \"error\"\n ? \"focus:ring-kumo-danger/50 focus:ring-[1.5px]\"\n : \"focus:ring-kumo-focus/50 focus:ring-[1.5px]\"),\n );\n}\n\nexport const Input = forwardRef<HTMLInputElement, InputProps>((props, ref) => {\n const {\n className,\n size = \"base\",\n variant: variantProp,\n label,\n labelTooltip,\n description,\n error,\n passwordManagerIgnore = false,\n ...inputProps\n } = props;\n\n // Deprecation warning for variant=\"error\"\n if (process.env.NODE_ENV !== \"production\" && variantProp === \"error\") {\n console.warn(\n '[Kumo Input]: variant=\"error\" is deprecated. ' +\n \"Error styling is now automatically applied when the `error` prop is truthy. \" +\n \"Simply remove the variant prop and pass an error message instead.\",\n );\n }\n\n // Auto-apply error styling when error prop is truthy\n // Explicit variant prop takes precedence for backwards compatibility\n const variant = variantProp ?? (error ? \"error\" : \"default\");\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 hasAriaLabel = Boolean(inputProps[\"aria-label\"]);\n const hasAriaLabelledBy = Boolean(inputProps[\"aria-labelledby\"]);\n\n if (!hasLabel && !hasAriaLabel && !hasAriaLabelledBy) {\n console.warn(\n \"[Kumo Input]: Input must have an accessible name. Provide either:\\n\" +\n \" - label prop: <Input label='Email' />\\n\" +\n \" - aria-label: <Input 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 passwordManagerIgnore && \"keeper-ignore\",\n className,\n )}\n {...(passwordManagerIgnore\n ? {\n \"data-1p-ignore\": \"true\",\n \"data-bwignore\": \"true\",\n \"data-form-type\": \"other\",\n \"data-lpignore\": \"true\",\n }\n : {})}\n {...inputProps}\n />\n );\n\n // Render with Field wrapper if label, error, or description is provided\n if (label || error || description) {\n return (\n <Field\n label={label}\n required={required}\n labelTooltip={labelTooltip}\n description={description}\n error={normalizeFieldError(error)}\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 * />\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 /** Suppress browser extension password manager overlays on non-credential inputs. */\n passwordManagerIgnore?: boolean;\n };\n"],"names":["KUMO_INPUT_VARIANTS","KUMO_INPUT_DEFAULT_VARIANTS","inputVariants","variant","size","parentFocusIndicator","focusIndicator","cn","resolveVariant","Input","forwardRef","props","ref","className","variantProp","label","labelTooltip","description","error","passwordManagerIgnore","inputProps","required","hasLabel","hasAriaLabel","hasAriaLabelledBy","input","jsx","BaseInput","Field","normalizeFieldError"],"mappings":";;;;;;;AAWO,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,IAEAC;AAAA,MACER,EAAoB;AAAA,MACpBI;AAAA,MACAH,EAA4B;AAAA,IAAA,EAC5B;AAAA;AAAA,IAEFO;AAAA,MACER,EAAoB;AAAA,MACpBG;AAAA,MACAF,EAA4B;AAAA,IAAA,EAC5B;AAAA;AAAA,IAEFI,MACGF,MAAY,UACT,+DACA;AAAA,IACNG,MACGH,MAAY,UACT,iDACA;AAAA,EAAA;AAEV;AAEO,MAAMM,IAAQC,EAAyC,CAACC,GAAOC,MAAQ;AAC5E,QAAM;AAAA,IACJ,WAAAC;AAAA,IACA,MAAAT,IAAO;AAAA,IACP,SAASU;AAAA,IACT,OAAAC;AAAA,IACA,cAAAC;AAAA,IACA,aAAAC;AAAA,IACA,OAAAC;AAAA,IACA,uBAAAC,IAAwB;AAAA,IACxB,GAAGC;AAAA,EAAA,IACDT;AAGJ,EAAI,QAAQ,IAAI,aAAa,gBAAgBG,MAAgB,WAC3D,QAAQ;AAAA,IACN;AAAA,EAAA;AAQJ,QAAMX,IAAUW,MAAgBI,IAAQ,UAAU,YAG5C,EAAE,UAAAG,MAAaD;AAGrB,MAAI,QAAQ,IAAI,aAAa,cAAc;AACzC,UAAME,IAAW,EAAQP,GACnBQ,IAAe,EAAQH,EAAW,YAAY,GAC9CI,IAAoB,EAAQJ,EAAW,iBAAiB;AAE9D,IAAI,CAACE,KAAY,CAACC,KAAgB,CAACC,KACjC,QAAQ;AAAA,MACN;AAAA;AAAA;AAAA;AAAA,IAAA;AAAA,EAMN;AAEA,QAAMC,IACJ,gBAAAC;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,KAAAf;AAAA,MACA,WAAWL;AAAA,QACTL,EAAc,EAAE,MAAAE,GAAM,SAAAD,GAAS,gBAAgB,IAAM;AAAA,QACrDgB,KAAyB;AAAA,QACzBN;AAAA,MAAA;AAAA,MAED,GAAIM,IACD;AAAA,QACE,kBAAkB;AAAA,QAClB,iBAAiB;AAAA,QACjB,kBAAkB;AAAA,QAClB,iBAAiB;AAAA,MAAA,IAEnB,CAAA;AAAA,MACH,GAAGC;AAAA,IAAA;AAAA,EAAA;AAKR,SAAIL,KAASG,KAASD,IAElB,gBAAAS;AAAA,IAACE;AAAA,IAAA;AAAA,MACC,OAAAb;AAAA,MACA,UAAAM;AAAA,MACA,cAAAL;AAAA,MACA,aAAAC;AAAA,MACA,OAAOY,EAAoBX,CAAK;AAAA,MAE/B,UAAAO;AAAA,IAAA;AAAA,EAAA,IAMAA;AACT,CAAC;AAEDhB,EAAM,cAAc;"}
|
|
1
|
+
{"version":3,"file":"input-iahz0dpc9xdar2ju.js","sources":["../../src/components/input/input.tsx"],"sourcesContent":["import { cn } from \"../../utils/cn\";\nimport { resolveVariant } from \"../../utils/resolve-variant\";\nimport {\n forwardRef,\n type ComponentPropsWithoutRef,\n type ReactNode,\n} from \"react\";\nimport { Input as BaseInput } from \"@base-ui/react/input\";\nimport { Field, normalizeFieldError, 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-focus/50 focus:ring-[1.5px]\",\n description: \"Default input appearance\",\n },\n error: {\n classes: \"!ring-kumo-danger focus:ring-kumo-danger/50 focus:ring-[1.5px]\",\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 outline-none focus:outline-none\",\n // Disabled state and placeholder styles (using vanilla CSS class for Chrome compatibility)\n \"kumo-input-placeholder disabled:text-kumo-disabled\",\n // Apply size styles from KUMO_INPUT_VARIANTS\n resolveVariant(\n KUMO_INPUT_VARIANTS.size,\n size,\n KUMO_INPUT_DEFAULT_VARIANTS.size,\n ).classes,\n // Apply variant styles from KUMO_INPUT_VARIANTS\n resolveVariant(\n KUMO_INPUT_VARIANTS.variant,\n variant,\n KUMO_INPUT_DEFAULT_VARIANTS.variant,\n ).classes,\n // Focus state handling\n parentFocusIndicator &&\n (variant === \"error\"\n ? \"focus-within:ring-kumo-danger/50 focus-within:ring-[1.5px]\"\n : \"focus-within:ring-kumo-focus/50 focus-within:ring-[1.5px]\"),\n focusIndicator &&\n (variant === \"error\"\n ? \"focus:ring-kumo-danger/50 focus:ring-[1.5px]\"\n : \"focus:ring-kumo-focus/50 focus:ring-[1.5px]\"),\n );\n}\n\nexport const Input = forwardRef<HTMLInputElement, InputProps>((props, ref) => {\n const {\n className,\n size = \"base\",\n variant: variantProp,\n label,\n labelTooltip,\n description,\n error,\n passwordManagerIgnore = false,\n ...inputProps\n } = props;\n\n // Deprecation warning for variant=\"error\"\n if (process.env.NODE_ENV !== \"production\" && variantProp === \"error\") {\n console.warn(\n '[Kumo Input]: variant=\"error\" is deprecated. ' +\n \"Error styling is now automatically applied when the `error` prop is truthy. \" +\n \"Simply remove the variant prop and pass an error message instead.\",\n );\n }\n\n // Auto-apply error styling when error prop is truthy\n // Explicit variant prop takes precedence for backwards compatibility\n const variant = variantProp ?? (error ? \"error\" : \"default\");\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 hasAriaLabel = Boolean(inputProps[\"aria-label\"]);\n const hasAriaLabelledBy = Boolean(inputProps[\"aria-labelledby\"]);\n\n if (!hasLabel && !hasAriaLabel && !hasAriaLabelledBy) {\n console.warn(\n \"[Kumo Input]: Input must have an accessible name. Provide either:\\n\" +\n \" - label prop: <Input label='Email' />\\n\" +\n \" - aria-label: <Input 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 passwordManagerIgnore && \"keeper-ignore\",\n className,\n )}\n {...(passwordManagerIgnore\n ? {\n \"data-1p-ignore\": \"true\",\n \"data-bwignore\": \"true\",\n \"data-form-type\": \"other\",\n \"data-lpignore\": \"true\",\n }\n : {})}\n {...inputProps}\n />\n );\n\n // Render with Field wrapper if label, error, or description is provided\n if (label || error || description) {\n return (\n <Field\n label={label}\n required={required}\n labelTooltip={labelTooltip}\n description={description}\n error={normalizeFieldError(error)}\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 * />\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 /** Suppress browser extension password manager overlays on non-credential inputs. */\n passwordManagerIgnore?: boolean;\n };\n"],"names":["KUMO_INPUT_VARIANTS","KUMO_INPUT_DEFAULT_VARIANTS","inputVariants","variant","size","parentFocusIndicator","focusIndicator","cn","resolveVariant","Input","forwardRef","props","ref","className","variantProp","label","labelTooltip","description","error","passwordManagerIgnore","inputProps","required","hasLabel","hasAriaLabel","hasAriaLabelledBy","input","jsx","BaseInput","Field","normalizeFieldError"],"mappings":";;;;;;;AAWO,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,IAEAC;AAAA,MACER,EAAoB;AAAA,MACpBI;AAAA,MACAH,EAA4B;AAAA,IAAA,EAC5B;AAAA;AAAA,IAEFO;AAAA,MACER,EAAoB;AAAA,MACpBG;AAAA,MACAF,EAA4B;AAAA,IAAA,EAC5B;AAAA;AAAA,IAEFI,MACGF,MAAY,UACT,+DACA;AAAA,IACNG,MACGH,MAAY,UACT,iDACA;AAAA,EAAA;AAEV;AAEO,MAAMM,IAAQC,EAAyC,CAACC,GAAOC,MAAQ;AAC5E,QAAM;AAAA,IACJ,WAAAC;AAAA,IACA,MAAAT,IAAO;AAAA,IACP,SAASU;AAAA,IACT,OAAAC;AAAA,IACA,cAAAC;AAAA,IACA,aAAAC;AAAA,IACA,OAAAC;AAAA,IACA,uBAAAC,IAAwB;AAAA,IACxB,GAAGC;AAAA,EAAA,IACDT;AAGJ,EAAI,QAAQ,IAAI,aAAa,gBAAgBG,MAAgB,WAC3D,QAAQ;AAAA,IACN;AAAA,EAAA;AAQJ,QAAMX,IAAUW,MAAgBI,IAAQ,UAAU,YAG5C,EAAE,UAAAG,MAAaD;AAGrB,MAAI,QAAQ,IAAI,aAAa,cAAc;AACzC,UAAME,IAAW,EAAQP,GACnBQ,IAAe,EAAQH,EAAW,YAAY,GAC9CI,IAAoB,EAAQJ,EAAW,iBAAiB;AAE9D,IAAI,CAACE,KAAY,CAACC,KAAgB,CAACC,KACjC,QAAQ;AAAA,MACN;AAAA;AAAA;AAAA;AAAA,IAAA;AAAA,EAMN;AAEA,QAAMC,IACJ,gBAAAC;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,KAAAf;AAAA,MACA,WAAWL;AAAA,QACTL,EAAc,EAAE,MAAAE,GAAM,SAAAD,GAAS,gBAAgB,IAAM;AAAA,QACrDgB,KAAyB;AAAA,QACzBN;AAAA,MAAA;AAAA,MAED,GAAIM,IACD;AAAA,QACE,kBAAkB;AAAA,QAClB,iBAAiB;AAAA,QACjB,kBAAkB;AAAA,QAClB,iBAAiB;AAAA,MAAA,IAEnB,CAAA;AAAA,MACH,GAAGC;AAAA,IAAA;AAAA,EAAA;AAKR,SAAIL,KAASG,KAASD,IAElB,gBAAAS;AAAA,IAACE;AAAA,IAAA;AAAA,MACC,OAAAb;AAAA,MACA,UAAAM;AAAA,MACA,cAAAL;AAAA,MACA,aAAAC;AAAA,MACA,OAAOY,EAAoBX,CAAK;AAAA,MAE/B,UAAAO;AAAA,IAAA;AAAA,EAAA,IAMAA;AACT,CAAC;AAEDhB,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-ov39dxshqbqrthhd.js";
|
|
6
6
|
import { T as b } from "./tooltip-ken77ixya0qpidie.js";
|
|
7
7
|
const T = {
|
|
8
8
|
// Label currently has no variant options but structure is ready for future additions
|
|
@@ -65,4 +65,4 @@ export {
|
|
|
65
65
|
B as b,
|
|
66
66
|
d as l
|
|
67
67
|
};
|
|
68
|
-
//# sourceMappingURL=label-
|
|
68
|
+
//# sourceMappingURL=label-kib2hn4pkbn28c31.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"label-
|
|
1
|
+
{"version":3,"file":"label-kib2hn4pkbn28c31.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-subtle\">(optional)</span>\n )}\n {tooltip && (\n <Tooltip\n content={tooltip}\n render={\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 }\n />\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;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,SAASR;AAAA,QACT,QACE,gBAAAO;AAAA,UAACE;AAAA,UAAA;AAAA,YACC,SAAQ;AAAA,YACR,MAAK;AAAA,YACL,OAAM;AAAA,YACN,cAAW;AAAA,YAEX,UAAA,gBAAAF,EAACG,GAAA,EAAK,WAAU,SAAA,CAAS;AAAA,UAAA;AAAA,QAAA;AAAA,MAC3B;AAAA,IAAA;AAAA,EAEJ,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 p, Fragment as E } from "react/jsx-runtime";
|
|
3
3
|
import { useState as T, useMemo as N, useEffect as B, createContext as D, useContext as R } from "react";
|
|
4
|
-
import { I as m } from "./input-group-
|
|
4
|
+
import { I as m } from "./input-group-os810pmsqcftt6mq.js";
|
|
5
5
|
import { CaretDoubleLeftIcon as F, CaretLeftIcon as V, CaretRightIcon as U, CaretDoubleRightIcon as j } from "@phosphor-icons/react";
|
|
6
6
|
import { c as d } from "./cn-ct4n7r74mh8y0f48.js";
|
|
7
|
-
import { S as P } from "./select-
|
|
7
|
+
import { S as P } from "./select-c79vjqmcytn2oujb.js";
|
|
8
8
|
const G = [25, 50, 100, 250], y = (n, l, o) => Math.min(Math.max(n, l), o), K = {
|
|
9
9
|
navigation: "Pagination",
|
|
10
10
|
firstPage: "First page",
|
|
@@ -263,4 +263,4 @@ const W = Object.assign(L, {
|
|
|
263
263
|
export {
|
|
264
264
|
W as P
|
|
265
265
|
};
|
|
266
|
-
//# sourceMappingURL=pagination-
|
|
266
|
+
//# sourceMappingURL=pagination-mvvg7qfvoqr5l4vt.js.map
|
package/dist/chunks/{pagination-bw7vwca4wrfjm8vb.js.map → pagination-mvvg7qfvoqr5l4vt.js.map}
RENAMED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"pagination-bw7vwca4wrfjm8vb.js","sources":["../../src/components/pagination/pagination.tsx"],"sourcesContent":["import {\n createContext,\n useContext,\n useEffect,\n useMemo,\n useState,\n type KeyboardEvent,\n type ReactNode,\n} from \"react\";\nimport { InputGroup } from \"../input-group\";\nimport {\n CaretDoubleLeftIcon,\n CaretDoubleRightIcon,\n CaretLeftIcon,\n CaretRightIcon,\n} from \"@phosphor-icons/react\";\nimport { cn } from \"../../utils/cn\";\nimport { resolveVariant } from \"../../utils/resolve-variant\";\nimport { Select } from \"../select\";\n\nconst DEFAULT_PAGE_SIZE_OPTIONS = [25, 50, 100, 250] as const;\n\nconst clamp = (value: number, min: number, max: number) =>\n Math.min(Math.max(value, min), max);\n\n// ============================================================================\n// i18n Labels\n// ============================================================================\n\n/**\n * Labels for internationalization of Pagination component.\n * All labels have English defaults and can be overridden for other locales.\n *\n * Note: To customize the \"Showing X-Y of Z\" text, use the `children` render prop\n * on `Pagination.Info` instead. To customize the \"Per page:\" label, use the\n * `label` prop on `Pagination.PageSize`.\n */\nexport interface PaginationLabels {\n /** Aria label for the navigation landmark. @default \"Pagination\" */\n navigation?: string;\n /** Aria label for the first page button. @default \"First page\" */\n firstPage?: string;\n /** Aria label for the previous page button. @default \"Previous page\" */\n previousPage?: string;\n /** Aria label for the next page button. @default \"Next page\" */\n nextPage?: string;\n /** Aria label for the last page button. @default \"Last page\" */\n lastPage?: string;\n /** Aria label for the page number input/select. @default \"Page number\" */\n pageNumber?: string;\n /** Aria label for the page size select. @default \"Page size\" */\n pageSize?: string;\n}\n\nconst DEFAULT_LABELS: Required<PaginationLabels> = {\n navigation: \"Pagination\",\n firstPage: \"First page\",\n previousPage: \"Previous page\",\n nextPage: \"Next page\",\n lastPage: \"Last page\",\n pageNumber: \"Page number\",\n pageSize: \"Page size\",\n};\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 resolveVariant(KUMO_PAGINATION_VARIANTS.controls, controls, KUMO_PAGINATION_DEFAULT_VARIANTS.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 labels: Required<PaginationLabels>;\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-subtle\", 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 /**\n * Label text shown before the selector.\n * @default \"Per page:\"\n */\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 const { labels } = usePaginationContext();\n\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-subtle\">{label}</span>}\n <Select\n aria-label={labels.pageSize}\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 /**\n * How the page number selector is rendered in \"full\" controls mode.\n * - `\"input\"` (default): A text input where users type a page number.\n * - `\"dropdown\"`: A dropdown select with all page numbers as options.\n *\n * **Note:** `\"dropdown\"` renders an option for every page, so it is best\n * suited for small page counts. For large datasets (hundreds of pages or\n * more) prefer `\"input\"` to avoid rendering performance overhead.\n */\n pageSelector?: \"input\" | \"dropdown\";\n /** Additional CSS classes */\n className?: string;\n}\n\nfunction PaginationControls({\n controls = KUMO_PAGINATION_DEFAULT_VARIANTS.controls,\n pageSelector = \"input\",\n className,\n}: PaginationControlsProps) {\n const { page, maxPage, setPage, editingPage, setEditingPage, labels } =\n usePaginationContext();\n\n return (\n <div\n data-slot=\"pagination-controls\"\n className={cn(\"grow flex flex-col items-end\", className)}\n >\n <nav aria-label={labels.navigation}>\n <InputGroup>\n {controls === \"full\" && (\n <InputGroup.Button\n variant=\"secondary\"\n aria-label={labels.firstPage}\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={labels.previousPage}\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 (pageSelector === \"dropdown\" ? (\n <Select\n aria-label={labels.pageNumber}\n className=\"rounded-none ring-kumo-hairline\"\n value={page}\n onValueChange={(value) => {\n const num = value as number;\n setPage(num);\n setEditingPage(num);\n }}\n >\n {Array.from({ length: maxPage }, (_, i) => i + 1).map((p) => (\n <Select.Option key={p} value={p}>\n {p}\n </Select.Option>\n ))}\n </Select>\n ) : (\n <InputGroup.Input\n style={{ width: 50 }}\n className=\"text-center\"\n aria-label={labels.pageNumber}\n value={editingPage}\n onValueChange={(value: string) => {\n setEditingPage(Number(value));\n }}\n onBlur={() => {\n const clamped = clamp(editingPage, 1, maxPage);\n setPage(clamped);\n setEditingPage(clamped);\n }}\n onKeyDown={(e: KeyboardEvent) => {\n if (e.key === \"Enter\") {\n const clamped = clamp(editingPage, 1, maxPage);\n setPage(clamped);\n setEditingPage(clamped);\n }\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={labels.nextPage}\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={labels.lastPage}\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 </nav>\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-hairline\", 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 * Labels for internationalization of aria-labels. All labels have English defaults.\n *\n * For visible text like \"Showing X of Y\", use render props on sub-components:\n * - `Pagination.Info` children for the info text\n * - `Pagination.PageSize` label prop for the \"Per page:\" text\n *\n * @example\n * ```tsx\n * <Pagination\n * labels={{\n * firstPage: \"Première page\",\n * previousPage: \"Page précédente\",\n * nextPage: \"Page suivante\",\n * lastPage: \"Dernière page\",\n * pageNumber: \"Numéro de page\",\n * pageSize: \"Taille de page\",\n * }}\n * // ...\n * />\n * ```\n */\n labels?: PaginationLabels;\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, 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 {\n page = 1,\n perPage,\n totalCount,\n setPage,\n children,\n className,\n labels: labelsProp,\n } = 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 // Merge provided labels with defaults\n const labels = useMemo<Required<PaginationLabels>>(\n () => ({ ...DEFAULT_LABELS, ...labelsProp }),\n [labelsProp],\n );\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 labels,\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 aria-live=\"polite\"\n aria-atomic=\"true\"\n data-slot=\"pagination-info\"\n className=\"grow text-sm text-kumo-subtle\"\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","clamp","value","min","max","DEFAULT_LABELS","KUMO_PAGINATION_DEFAULT_VARIANTS","PaginationContext","createContext","usePaginationContext","context","useContext","PaginationInfo","children","className","page","perPage","totalCount","pageShowingRange","content","jsxs","Fragment","jsx","cn","PaginationPageSize","onChange","options","label","labels","Select","v","size","PaginationControls","controls","pageSelector","maxPage","setPage","editingPage","setEditingPage","InputGroup","CaretDoubleLeftIcon","previousPage","CaretLeftIcon","num","_","i","p","clamped","e","nextPage","CaretRightIcon","CaretDoubleRightIcon","PaginationSeparator","PaginationRoot","props","labelsProp","text","useState","useMemo","useEffect","lower","upper","contextValue","getPaginationText","Pagination"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"pagination-mvvg7qfvoqr5l4vt.js","sources":["../../src/components/pagination/pagination.tsx"],"sourcesContent":["import {\n createContext,\n useContext,\n useEffect,\n useMemo,\n useState,\n type KeyboardEvent,\n type ReactNode,\n} from \"react\";\nimport { InputGroup } from \"../input-group\";\nimport {\n CaretDoubleLeftIcon,\n CaretDoubleRightIcon,\n CaretLeftIcon,\n CaretRightIcon,\n} from \"@phosphor-icons/react\";\nimport { cn } from \"../../utils/cn\";\nimport { resolveVariant } from \"../../utils/resolve-variant\";\nimport { Select } from \"../select\";\n\nconst DEFAULT_PAGE_SIZE_OPTIONS = [25, 50, 100, 250] as const;\n\nconst clamp = (value: number, min: number, max: number) =>\n Math.min(Math.max(value, min), max);\n\n// ============================================================================\n// i18n Labels\n// ============================================================================\n\n/**\n * Labels for internationalization of Pagination component.\n * All labels have English defaults and can be overridden for other locales.\n *\n * Note: To customize the \"Showing X-Y of Z\" text, use the `children` render prop\n * on `Pagination.Info` instead. To customize the \"Per page:\" label, use the\n * `label` prop on `Pagination.PageSize`.\n */\nexport interface PaginationLabels {\n /** Aria label for the navigation landmark. @default \"Pagination\" */\n navigation?: string;\n /** Aria label for the first page button. @default \"First page\" */\n firstPage?: string;\n /** Aria label for the previous page button. @default \"Previous page\" */\n previousPage?: string;\n /** Aria label for the next page button. @default \"Next page\" */\n nextPage?: string;\n /** Aria label for the last page button. @default \"Last page\" */\n lastPage?: string;\n /** Aria label for the page number input/select. @default \"Page number\" */\n pageNumber?: string;\n /** Aria label for the page size select. @default \"Page size\" */\n pageSize?: string;\n}\n\nconst DEFAULT_LABELS: Required<PaginationLabels> = {\n navigation: \"Pagination\",\n firstPage: \"First page\",\n previousPage: \"Previous page\",\n nextPage: \"Next page\",\n lastPage: \"Last page\",\n pageNumber: \"Page number\",\n pageSize: \"Page size\",\n};\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 resolveVariant(KUMO_PAGINATION_VARIANTS.controls, controls, KUMO_PAGINATION_DEFAULT_VARIANTS.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 labels: Required<PaginationLabels>;\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-subtle\", 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 /**\n * Label text shown before the selector.\n * @default \"Per page:\"\n */\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 const { labels } = usePaginationContext();\n\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-subtle\">{label}</span>}\n <Select\n aria-label={labels.pageSize}\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 /**\n * How the page number selector is rendered in \"full\" controls mode.\n * - `\"input\"` (default): A text input where users type a page number.\n * - `\"dropdown\"`: A dropdown select with all page numbers as options.\n *\n * **Note:** `\"dropdown\"` renders an option for every page, so it is best\n * suited for small page counts. For large datasets (hundreds of pages or\n * more) prefer `\"input\"` to avoid rendering performance overhead.\n */\n pageSelector?: \"input\" | \"dropdown\";\n /** Additional CSS classes */\n className?: string;\n}\n\nfunction PaginationControls({\n controls = KUMO_PAGINATION_DEFAULT_VARIANTS.controls,\n pageSelector = \"input\",\n className,\n}: PaginationControlsProps) {\n const { page, maxPage, setPage, editingPage, setEditingPage, labels } =\n usePaginationContext();\n\n return (\n <div\n data-slot=\"pagination-controls\"\n className={cn(\"grow flex flex-col items-end\", className)}\n >\n <nav aria-label={labels.navigation}>\n <InputGroup>\n {controls === \"full\" && (\n <InputGroup.Button\n variant=\"secondary\"\n aria-label={labels.firstPage}\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={labels.previousPage}\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 (pageSelector === \"dropdown\" ? (\n <Select\n aria-label={labels.pageNumber}\n className=\"rounded-none ring-kumo-hairline\"\n value={page}\n onValueChange={(value) => {\n const num = value as number;\n setPage(num);\n setEditingPage(num);\n }}\n >\n {Array.from({ length: maxPage }, (_, i) => i + 1).map((p) => (\n <Select.Option key={p} value={p}>\n {p}\n </Select.Option>\n ))}\n </Select>\n ) : (\n <InputGroup.Input\n style={{ width: 50 }}\n className=\"text-center\"\n aria-label={labels.pageNumber}\n value={editingPage}\n onValueChange={(value: string) => {\n setEditingPage(Number(value));\n }}\n onBlur={() => {\n const clamped = clamp(editingPage, 1, maxPage);\n setPage(clamped);\n setEditingPage(clamped);\n }}\n onKeyDown={(e: KeyboardEvent) => {\n if (e.key === \"Enter\") {\n const clamped = clamp(editingPage, 1, maxPage);\n setPage(clamped);\n setEditingPage(clamped);\n }\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={labels.nextPage}\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={labels.lastPage}\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 </nav>\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-hairline\", 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 * Labels for internationalization of aria-labels. All labels have English defaults.\n *\n * For visible text like \"Showing X of Y\", use render props on sub-components:\n * - `Pagination.Info` children for the info text\n * - `Pagination.PageSize` label prop for the \"Per page:\" text\n *\n * @example\n * ```tsx\n * <Pagination\n * labels={{\n * firstPage: \"Première page\",\n * previousPage: \"Page précédente\",\n * nextPage: \"Page suivante\",\n * lastPage: \"Dernière page\",\n * pageNumber: \"Numéro de page\",\n * pageSize: \"Taille de page\",\n * }}\n * // ...\n * />\n * ```\n */\n labels?: PaginationLabels;\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, 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 {\n page = 1,\n perPage,\n totalCount,\n setPage,\n children,\n className,\n labels: labelsProp,\n } = 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 // Merge provided labels with defaults\n const labels = useMemo<Required<PaginationLabels>>(\n () => ({ ...DEFAULT_LABELS, ...labelsProp }),\n [labelsProp],\n );\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 labels,\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 aria-live=\"polite\"\n aria-atomic=\"true\"\n data-slot=\"pagination-info\"\n className=\"grow text-sm text-kumo-subtle\"\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","clamp","value","min","max","DEFAULT_LABELS","KUMO_PAGINATION_DEFAULT_VARIANTS","PaginationContext","createContext","usePaginationContext","context","useContext","PaginationInfo","children","className","page","perPage","totalCount","pageShowingRange","content","jsxs","Fragment","jsx","cn","PaginationPageSize","onChange","options","label","labels","Select","v","size","PaginationControls","controls","pageSelector","maxPage","setPage","editingPage","setEditingPage","InputGroup","CaretDoubleLeftIcon","previousPage","CaretLeftIcon","num","_","i","p","clamped","e","nextPage","CaretRightIcon","CaretDoubleRightIcon","PaginationSeparator","PaginationRoot","props","labelsProp","text","useState","useMemo","useEffect","lower","upper","contextValue","getPaginationText","Pagination"],"mappings":";;;;;;;AAoBA,MAAMA,IAA4B,CAAC,IAAI,IAAI,KAAK,GAAG,GAE7CC,IAAQ,CAACC,GAAeC,GAAaC,MACzC,KAAK,IAAI,KAAK,IAAIF,GAAOC,CAAG,GAAGC,CAAG,GA+B9BC,IAA6C;AAAA,EACjD,YAAY;AAAA,EACZ,WAAW;AAAA,EACX,cAAc;AAAA,EACd,UAAU;AAAA,EACV,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,UAAU;AACZ,GAqBaC,IAAmC;AAAA,EAC9C,UAAU;AACZ,GA+BMC,IAAoBC,EAA6C,IAAI;AAE3E,SAASC,IAAuB;AAC9B,QAAMC,IAAUC,EAAWJ,CAAiB;AAC5C,MAAI,CAACG;AACH,UAAM,IAAI;AAAA,MACR;AAAA,IAAA;AAGJ,SAAOA;AACT;AAkBA,SAASE,EAAe,EAAE,UAAAC,GAAU,WAAAC,KAAkC;AACpE,QAAM,EAAE,MAAAC,GAAM,SAAAC,GAAS,YAAAC,GAAY,kBAAAC,EAAA,IACjCT,EAAA,GAEIU,IAAUN,IACdA,EAAS,EAAE,MAAAE,GAAM,SAAAC,GAAS,YAAAC,GAAY,kBAAAC,EAAA,CAAkB,IACtDD,KAAcA,IAAa,IAC7B,gBAAAG,EAAAC,GAAA,EAAE,UAAA;AAAA,IAAA;AAAA,IACQ,gBAAAC,EAAC,QAAA,EAAK,WAAU,gBAAgB,UAAAJ,GAAiB;AAAA,IAAO;AAAA,IAAI;AAAA,IACpE,gBAAAI,EAAC,QAAA,EAAK,WAAU,gBAAgB,UAAAL,EAAA,CAAW;AAAA,EAAA,EAAA,CAC7C,IACE;AAEJ,SACE,gBAAAK;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAWC,EAAG,4BAA4BT,CAAS;AAAA,MAElD,UAAAK;AAAA,IAAA;AAAA,EAAA;AAGP;AAEAP,EAAe,cAAc;AAsB7B,SAASY,EAAmB;AAAA,EAC1B,OAAAtB;AAAA,EACA,UAAAuB;AAAA,EACA,SAAAC,IAAU1B;AAAA,EACV,OAAA2B,IAAQ;AAAA,EACR,WAAAb;AACF,GAA4B;AAC1B,QAAM,EAAE,QAAAc,EAAA,IAAWnB,EAAA;AAEnB,SACE,gBAAAW;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAWG,EAAG,2BAA2BT,CAAS;AAAA,MAEjD,UAAA;AAAA,QAAAa,KAAS,gBAAAL,EAAC,QAAA,EAAK,WAAU,4BAA4B,UAAAK,GAAM;AAAA,QAC5D,gBAAAL;AAAA,UAACO;AAAA,UAAA;AAAA,YACC,cAAYD,EAAO;AAAA,YACnB,OAAA1B;AAAA,YACA,eAAe,CAAC4B,MAAML,EAASK,CAAW;AAAA,YAEzC,UAAAJ,EAAQ,IAAI,CAACK,MACZ,gBAAAT,EAACO,EAAO,QAAP,EAAyB,OAAOE,GAC9B,UAAAA,EAAA,GADiBA,CAEpB,CACD;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EAAA;AAGN;AAEAP,EAAmB,cAAc;AAqBjC,SAASQ,EAAmB;AAAA,EAC1B,UAAAC,IAAW3B,EAAiC;AAAA,EAC5C,cAAA4B,IAAe;AAAA,EACf,WAAApB;AACF,GAA4B;AAC1B,QAAM,EAAE,MAAAC,GAAM,SAAAoB,GAAS,SAAAC,GAAS,aAAAC,GAAa,gBAAAC,GAAgB,QAAAV,EAAA,IAC3DnB,EAAA;AAEF,SACE,gBAAAa;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAWC,EAAG,gCAAgCT,CAAS;AAAA,MAEvD,4BAAC,OAAA,EAAI,cAAYc,EAAO,YACtB,4BAACW,GAAA,EACE,UAAA;AAAA,QAAAN,MAAa,UACZ,gBAAAX;AAAA,UAACiB,EAAW;AAAA,UAAX;AAAA,YACC,SAAQ;AAAA,YACR,cAAYX,EAAO;AAAA,YACnB,UAAUb,KAAQ;AAAA,YAClB,SAAS,MAAM;AACb,cAAAqB,EAAQ,CAAC,GACTE,EAAe,CAAC;AAAA,YAClB;AAAA,YAEA,UAAA,gBAAAhB,EAACkB,GAAA,EAAoB,MAAM,GAAA,CAAI;AAAA,UAAA;AAAA,QAAA;AAAA,QAGnC,gBAAAlB;AAAA,UAACiB,EAAW;AAAA,UAAX;AAAA,YACC,SAAQ;AAAA,YACR,cAAYX,EAAO;AAAA,YACnB,UAAUb,KAAQ;AAAA,YAClB,SAAS,MAAM;AACb,oBAAM0B,IAAe,KAAK,IAAI1B,IAAO,GAAG,CAAC;AACzC,cAAAqB,EAAQK,CAAY,GACpBH,EAAeG,CAAY;AAAA,YAC7B;AAAA,YAEA,UAAA,gBAAAnB,EAACoB,GAAA,EAAc,MAAM,GAAA,CAAI;AAAA,UAAA;AAAA,QAAA;AAAA,QAE1BT,MAAa,WACXC,MAAiB,aAChB,gBAAAZ;AAAA,UAACO;AAAA,UAAA;AAAA,YACC,cAAYD,EAAO;AAAA,YACnB,WAAU;AAAA,YACV,OAAOb;AAAA,YACP,eAAe,CAACb,MAAU;AACxB,oBAAMyC,IAAMzC;AACZ,cAAAkC,EAAQO,CAAG,GACXL,EAAeK,CAAG;AAAA,YACpB;AAAA,YAEC,UAAA,MAAM,KAAK,EAAE,QAAQR,KAAW,CAACS,GAAGC,MAAMA,IAAI,CAAC,EAAE,IAAI,CAACC,MACrD,gBAAAxB,EAACO,EAAO,QAAP,EAAsB,OAAOiB,GAC3B,UAAAA,EAAA,GADiBA,CAEpB,CACD;AAAA,UAAA;AAAA,QAAA,IAGH,gBAAAxB;AAAA,UAACiB,EAAW;AAAA,UAAX;AAAA,YACC,OAAO,EAAE,OAAO,GAAA;AAAA,YAChB,WAAU;AAAA,YACV,cAAYX,EAAO;AAAA,YACnB,OAAOS;AAAA,YACP,eAAe,CAACnC,MAAkB;AAChC,cAAAoC,EAAe,OAAOpC,CAAK,CAAC;AAAA,YAC9B;AAAA,YACA,QAAQ,MAAM;AACZ,oBAAM6C,IAAU9C,EAAMoC,GAAa,GAAGF,CAAO;AAC7C,cAAAC,EAAQW,CAAO,GACfT,EAAeS,CAAO;AAAA,YACxB;AAAA,YACA,WAAW,CAACC,MAAqB;AAC/B,kBAAIA,EAAE,QAAQ,SAAS;AACrB,sBAAMD,IAAU9C,EAAMoC,GAAa,GAAGF,CAAO;AAC7C,gBAAAC,EAAQW,CAAO,GACfT,EAAeS,CAAO;AAAA,cACxB;AAAA,YACF;AAAA,YAEA,cAAa;AAAA,YACb,kBAAc;AAAA,YACd,iBAAc;AAAA,YACd,kBAAe;AAAA,UAAA;AAAA,QAAA;AAAA,QAGrB,gBAAAzB;AAAA,UAACiB,EAAW;AAAA,UAAX;AAAA,YACC,SAAQ;AAAA,YACR,cAAYX,EAAO;AAAA,YACnB,UAAUb,MAASoB;AAAA,YACnB,SAAS,MAAM;AACb,oBAAMc,IAAW,KAAK,IAAIlC,IAAO,GAAGoB,CAAO;AAC3C,cAAAC,EAAQa,CAAQ,GAChBX,EAAeW,CAAQ;AAAA,YACzB;AAAA,YAEA,UAAA,gBAAA3B,EAAC4B,GAAA,EAAe,MAAM,GAAA,CAAI;AAAA,UAAA;AAAA,QAAA;AAAA,QAE3BjB,MAAa,UACZ,gBAAAX;AAAA,UAACiB,EAAW;AAAA,UAAX;AAAA,YACC,SAAQ;AAAA,YACR,cAAYX,EAAO;AAAA,YACnB,UAAUb,MAASoB;AAAA,YACnB,SAAS,MAAM;AACb,cAAAC,EAAQD,CAAO,GACfG,EAAeH,CAAO;AAAA,YACxB;AAAA,YAEA,UAAA,gBAAAb,EAAC6B,GAAA,EAAqB,MAAM,GAAA,CAAI;AAAA,UAAA;AAAA,QAAA;AAAA,MAClC,EAAA,CAEJ,EAAA,CACF;AAAA,IAAA;AAAA,EAAA;AAGN;AAEAnB,EAAmB,cAAc;AAWjC,SAASoB,EAAoB,EAAE,WAAAtC,KAAuC;AACpE,SACE,gBAAAQ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAWC,EAAG,0CAA0CT,CAAS;AAAA,IAAA;AAAA,EAAA;AAGvE;AAEAsC,EAAoB,cAAc;AAsIlC,SAASC,EAAeC,GAAwB;AAC9C,QAAM;AAAA,IACJ,MAAAvC,IAAO;AAAA,IACP,SAAAC;AAAA,IACA,YAAAC;AAAA,IACA,SAAAmB;AAAA,IACA,UAAAvB;AAAA,IACA,WAAAC;AAAA,IACA,QAAQyC;AAAA,EAAA,IACND,GAGEE,IAAO,UAAUF,IAAQA,EAAM,OAAO,QACtCrB,IACJ,cAAcqB,IACTA,EAAM,YAAYhD,EAAiC,WACpDA,EAAiC,UACjC,CAAC+B,GAAaC,CAAc,IAAImB,EAAiB,CAAC,GAGlD7B,IAAS8B;AAAA,IACb,OAAO,EAAE,GAAGrD,GAAgB,GAAGkD;IAC/B,CAACA,CAAU;AAAA,EAAA;AAGb,EAAAI,EAAU,MAAM;AACd,IAAArB,EAAevB,CAAI;AAAA,EACrB,GAAG,CAACA,CAAI,CAAC;AAET,QAAMG,IAAmBwC,EAAQ,MAAM;AACrC,QAAIE,IAAQ7C,KAAQC,KAAW,MAAMA,KAAW,KAAK,GACjD6C,IAAQ,KAAK,IAAI9C,KAAQC,KAAW,IAAIC,KAAc,CAAC;AAE3D,WAAI,OAAO,MAAM2C,CAAK,MAAGA,IAAQ,IAC7B,OAAO,MAAMC,CAAK,MAAGA,IAAQ,IAE1B,GAAGD,CAAK,IAAIC,CAAK;AAAA,EAC1B,GAAG,CAAC9C,GAAMC,GAASC,CAAU,CAAC,GAExBkB,IAAUuB,EAAQ,MACf,KAAK,MAAMzC,KAAc,MAAMD,KAAW,EAAE,GAClD,CAACC,GAAYD,CAAO,CAAC,GAElB8C,IAAuC;AAAA,IAC3C,MAAA/C;AAAA,IACA,SAAAC;AAAA,IACA,YAAAC;AAAA,IACA,SAAAkB;AAAA,IACA,kBAAAjB;AAAA,IACA,SAAAkB;AAAA,IACA,aAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,QAAAV;AAAA,EAAA;AAIF,MAAIf;AACF,WACE,gBAAAS,EAACf,EAAkB,UAAlB,EAA2B,OAAOuD,GACjC,UAAA,gBAAAxC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,aAAU;AAAA,QACV,WAAWC,EAAG,kCAAkCT,CAAS;AAAA,QAExD,UAAAD;AAAA,MAAA;AAAA,IAAA,GAEL;AAKJ,QAAMkD,IAAoB,MACpBP,IACKA,EAAK,EAAE,MAAAzC,GAAM,SAAAC,GAAS,YAAAC,GAAY,kBAAAC,GAAkB,IAClDD,KAAcA,IAAa,IAElC,gBAAAG,EAAAC,GAAA,EAAE,UAAA;AAAA,IAAA;AAAA,IACQ,gBAAAC,EAAC,QAAA,EAAK,WAAU,gBAAgB,UAAAJ,GAAiB;AAAA,IAAO;AAAA,IAAI;AAAA,IACpE,gBAAAI,EAAC,QAAA,EAAK,WAAU,gBAAgB,UAAAL,EAAA,CAAW;AAAA,EAAA,GAC7C,IAGG;AAGT,SACE,gBAAAK,EAACf,EAAkB,UAAlB,EAA2B,OAAOuD,GACjC,UAAA,gBAAA1C;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAWG,EAAG,kCAAkCT,CAAS;AAAA,MAEzD,UAAA;AAAA,QAAA,gBAAAQ;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,aAAU;AAAA,YACV,eAAY;AAAA,YACZ,aAAU;AAAA,YACV,WAAU;AAAA,YAET,UAAAyC,EAAA;AAAA,UAAkB;AAAA,QAAA;AAAA,QAErB,gBAAAzC,EAACU,KAAmB,UAAAC,EAAA,CAAoB;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,GAE5C;AAEJ;AAEAoB,EAAe,cAAc;AAMtB,MAAMW,IAAa,OAAO,OAAOX,GAAgB;AAAA,EACtD,MAAMzC;AAAA,EACN,UAAUY;AAAA,EACV,UAAUQ;AAAA,EACV,WAAWoB;AACb,CAAC;"}
|
|
@@ -3,11 +3,11 @@ import { jsxs as m, jsx as a } from "react/jsx-runtime";
|
|
|
3
3
|
import { CaretUpDownIcon as H, CheckIcon as J } from "@phosphor-icons/react";
|
|
4
4
|
import { useId as Q, forwardRef as g } from "react";
|
|
5
5
|
import { c as l } from "./cn-ct4n7r74mh8y0f48.js";
|
|
6
|
-
import { b as X } from "./button-
|
|
7
|
-
import { K as Y } from "./input-
|
|
6
|
+
import { b as X } from "./button-ov39dxshqbqrthhd.js";
|
|
7
|
+
import { K as Y } from "./input-iahz0dpc9xdar2ju.js";
|
|
8
8
|
import { S as Z } from "./skeleton-line-epxenksfesr2fkcv.js";
|
|
9
|
-
import { L as q } from "./label-
|
|
10
|
-
import { F as ee } from "./field-
|
|
9
|
+
import { L as q } from "./label-kib2hn4pkbn28c31.js";
|
|
10
|
+
import { F as ee } from "./field-m57qcw5b1zt1ohfz.js";
|
|
11
11
|
import { u as te } from "./portal-provider-hwmkdmkpvct0cb76.js";
|
|
12
12
|
import { b1 as ae, b2 as oe, b3 as se, b4 as ne, b5 as le, b6 as ie, b7 as re, b8 as ce, b9 as de, ba as ue, bb as me, bc as be, bd as fe, be as pe, S as ge } from "./vendor-base-ui-knphx7dts1vm1x37.js";
|
|
13
13
|
Y.size;
|
|
@@ -234,4 +234,4 @@ d.Option.displayName = "Select.Option";
|
|
|
234
234
|
export {
|
|
235
235
|
d as S
|
|
236
236
|
};
|
|
237
|
-
//# sourceMappingURL=select-
|
|
237
|
+
//# sourceMappingURL=select-c79vjqmcytn2oujb.js.map
|