@bitrise/bitkit-v2 0.3.376 → 0.3.377

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/AGENTS.md CHANGED
@@ -84,6 +84,9 @@ Bitkit components use consistent prop names across the library:
84
84
  <BitkitBadge colorVariant="green">Passed</BitkitBadge>
85
85
  <BitkitRibbon colorVariant="purple">…</BitkitRibbon>
86
86
  ```
87
+ - **Form fields default to `size="lg"`** — `BitkitTextInput`, `BitkitTextArea`, `BitkitSearchInput`, `BitkitSelect`, `BitkitNativeSelect`, `BitkitMultiselect`, `BitkitCombobox`, `BitkitNumberInput`, `BitkitTagsInput` and `BitkitDatePicker` all take `'md' | 'lg'` and render `lg` when you omit it, so a mixed form lines up by default.
88
+ - **A component that branches on `size` must resolve the default itself** — the recipe's `defaultVariants` applies in CSS, so an omitted `size` still reaches the component as `undefined`. Any JS that derives an icon or addon size from it then takes the wrong branch, and the element renders at one size with its icons at another. Give the prop a default where it is destructured (`size = 'lg'`), or resolve it at the point of use (`(props.size ?? 'lg') === 'lg' ? … : …`) when the component destructures in several places. Never rely on phrasing the condition so `undefined` happens to fall through — that is how `BitkitNumberInput`, `BitkitSelect`, `BitkitIconButton` and `BitkitCloseButton` each ended up mismatched.
89
+ The fallback must equal the recipe's `defaultVariants.size`; both are needed, since the recipe's is what raw Chakra and slot consumers get. And when a component calls its own recipe, pass the variant (`recipe({ size })`, never `recipe()`).
87
90
  - **`state` prop replaces `disabled`/`loading`** — use `<BitkitButton state="disabled">`, not `<BitkitButton disabled>`. Values: `'disabled' | 'loading' | 'skeleton'`.
88
91
  - **Dot notation for compound components** — sub-components are exposed as static properties on the parent, not as separate named exports:
89
92
  ```tsx
@@ -8,7 +8,7 @@ var BitkitButton = forwardRef((props, ref) => {
8
8
  const buttonRecipe = useRecipe({ key: "button" });
9
9
  const Icon = props.icon;
10
10
  const SuffixIcon = props.suffixIcon;
11
- const iconSize = props.size === "sm" || props.size === "md" ? "16" : "24";
11
+ const iconSize = (props.size ?? "lg") === "lg" ? "24" : "16";
12
12
  const isDisabled = props.state === "disabled";
13
13
  const isSkeleton = props.state === "skeleton";
14
14
  if (props.asChild) {
@@ -1 +1 @@
1
- {"version":3,"file":"BitkitButton.js","names":[],"sources":["../../../lib/components/BitkitButton/BitkitButton.tsx"],"sourcesContent":["import { Button, type ButtonProps } from '@chakra-ui/react/button';\nimport { Skeleton } from '@chakra-ui/react/skeleton';\nimport { chakra, type HTMLChakraProps, type RecipeProps, useRecipe } from '@chakra-ui/react/styled-system';\nimport {\n Children,\n cloneElement,\n forwardRef,\n type KeyboardEvent,\n type MouseEvent,\n type ReactElement,\n type ReactNode,\n type Ref,\n} from 'react';\n\nimport { type BitkitIconComponent } from '../../icons';\n\ntype BitkitButtonOmittedFromButton =\n | 'asChild'\n | 'children'\n | 'colorPalette'\n | 'disabled'\n | 'loading'\n | 'loadingText'\n | 'spinner'\n | 'spinnerPlacement';\n\ninterface BitkitButtonCommonProps {\n icon?: BitkitIconComponent;\n suffixIcon?: BitkitIconComponent;\n}\n\nexport interface BitkitButtonAsButtonProps\n extends BitkitButtonCommonProps, Omit<ButtonProps, BitkitButtonOmittedFromButton> {\n asChild?: false;\n children: string;\n href?: undefined;\n isExternal?: undefined;\n state?: 'disabled' | 'loading' | 'skeleton';\n}\n\nexport interface BitkitButtonAsAnchorProps\n extends BitkitButtonCommonProps, Omit<HTMLChakraProps<'a'>, 'children' | 'colorPalette'>, RecipeProps<'button'> {\n asChild?: false;\n children: string;\n href: string;\n isExternal?: boolean;\n state?: 'disabled' | 'skeleton';\n}\n\ninterface BitkitButtonAsChildProps extends BitkitButtonCommonProps, Omit<ButtonProps, BitkitButtonOmittedFromButton> {\n asChild: true;\n children: ReactElement;\n href?: undefined;\n isExternal?: undefined;\n state?: 'disabled' | 'loading' | 'skeleton';\n}\n\nexport type BitkitButtonProps = BitkitButtonAsButtonProps | BitkitButtonAsAnchorProps | BitkitButtonAsChildProps;\n\n// The forwarded ref is typed as HTMLElement to cover all three modes (button, anchor, slot/asChild),\n// since asChild can render any element (router Link, custom wrappers, etc.). Inner narrow casts\n// satisfy the wrapped Chakra components without affecting the consumer-visible ref shape.\nconst BitkitButton = forwardRef<HTMLElement, BitkitButtonProps>((props, ref) => {\n const buttonRecipe = useRecipe({ key: 'button' });\n const Icon = props.icon;\n const SuffixIcon = props.suffixIcon;\n // Only `lg` takes the 24px icon; `sm`/`md` take 16px. `size` is `undefined` when unset — the\n // recipe applies its `lg` default in CSS, not on the prop — so an unset button must fall through\n // to 24, which is why we enumerate the small sizes instead of checking `=== 'lg'`.\n const iconSize = props.size === 'sm' || props.size === 'md' ? '16' : '24';\n const isDisabled = props.state === 'disabled';\n const isSkeleton = props.state === 'skeleton';\n\n // --- Slot mode (asChild) ---\n if (props.asChild) {\n const { asChild: _asChild, children, icon: _icon, state, suffixIcon: _suffixIcon, ...buttonRest } = props;\n const onlyChild = Children.only(children) as ReactElement<{ children?: ReactNode }>;\n const buttonElement = (\n <Button\n asChild\n disabled={isDisabled}\n loading={state === 'loading'}\n ref={ref as Ref<HTMLButtonElement>}\n {...buttonRest}\n >\n {cloneElement(\n onlyChild,\n undefined,\n <>\n {Icon && <Icon marginInlineStart=\"-4\" size={iconSize} />}\n {onlyChild.props.children}\n {SuffixIcon && <SuffixIcon marginInlineEnd=\"-4\" size={iconSize} />}\n </>,\n )}\n </Button>\n );\n return isSkeleton ? (\n <Skeleton asChild loading>\n {buttonElement}\n </Skeleton>\n ) : (\n buttonElement\n );\n }\n\n // --- Anchor mode (href) ---\n if (props.href !== undefined) {\n const {\n children,\n css,\n href,\n icon: _icon,\n isExternal,\n onClick,\n onKeyDown,\n rel,\n size,\n state: _state,\n suffixIcon: _suffixIcon,\n target,\n variant,\n ...anchorRest\n } = props;\n const effectiveTarget = isExternal ? '_blank' : target;\n const effectiveRel = isExternal ? (rel ? `${rel} noreferrer noopener` : 'noreferrer noopener') : rel;\n const handleClick = isDisabled\n ? (e: MouseEvent<HTMLAnchorElement>) => {\n e.preventDefault();\n e.stopPropagation();\n }\n : onClick;\n const handleKeyDown = isDisabled\n ? (e: KeyboardEvent<HTMLAnchorElement>) => {\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault();\n e.stopPropagation();\n }\n }\n : onKeyDown;\n const anchorElement = (\n <chakra.a\n ref={ref as Ref<HTMLAnchorElement>}\n {...anchorRest}\n aria-disabled={isDisabled || undefined}\n // A native <a> can't be `:disabled`, so mark `data-disabled` too: it's the styling/interaction hook the\n // recipe's `_hover`/`_active` conditions exclude (`:not(…, [data-disabled])`), while `aria-disabled` stays\n // for a11y. Without it, hover/active would still match a disabled anchor and override the disabled colors.\n css={[buttonRecipe({ size, variant }), css]}\n data-disabled={isDisabled || undefined}\n href={isDisabled ? undefined : href}\n onClick={handleClick}\n onKeyDown={handleKeyDown}\n rel={effectiveRel}\n target={effectiveTarget}\n >\n {Icon && <Icon marginInlineStart=\"-4\" size={iconSize} />}\n {children}\n {SuffixIcon && <SuffixIcon marginInlineEnd=\"-4\" size={iconSize} />}\n </chakra.a>\n );\n return isSkeleton ? (\n <Skeleton asChild loading>\n {anchorElement}\n </Skeleton>\n ) : (\n anchorElement\n );\n }\n\n // --- Button mode (default) ---\n const { children, icon: _icon, state, suffixIcon: _suffixIcon, ...buttonRest } = props;\n return (\n <Skeleton asChild loading={isSkeleton}>\n <Button disabled={isDisabled} loading={state === 'loading'} ref={ref as Ref<HTMLButtonElement>} {...buttonRest}>\n {Icon && <Icon marginInlineStart=\"-4\" size={iconSize} />}\n {children}\n {SuffixIcon && <SuffixIcon marginInlineEnd=\"-4\" size={iconSize} />}\n </Button>\n </Skeleton>\n );\n});\n\nBitkitButton.displayName = 'BitkitButton';\n\nexport default BitkitButton;\n"],"mappings":";;;;;;AA8DA,IAAM,eAAe,YAA4C,OAAO,QAAQ;CAC9E,MAAM,eAAe,UAAU,EAAE,KAAK,SAAS,CAAC;CAChD,MAAM,OAAO,MAAM;CACnB,MAAM,aAAa,MAAM;CAIzB,MAAM,WAAW,MAAM,SAAS,QAAQ,MAAM,SAAS,OAAO,OAAO;CACrE,MAAM,aAAa,MAAM,UAAU;CACnC,MAAM,aAAa,MAAM,UAAU;CAGnC,IAAI,MAAM,SAAS;EACjB,MAAM,EAAE,SAAS,UAAU,UAAU,MAAM,OAAO,OAAO,YAAY,aAAa,GAAG,eAAe;EACpG,MAAM,YAAY,SAAS,KAAK,QAAQ;EACxC,MAAM,gBACJ,oBAAC,QAAD;GACE,SAAA;GACA,UAAU;GACV,SAAS,UAAU;GACd;GACL,GAAI;GAEH,UAAA,aACC,WACA,KAAA,GACA,qBAAA,YAAA,EAAA,UAAA;IACG,QAAQ,oBAAC,MAAD;KAAM,mBAAkB;KAAK,MAAM;IAAW,CAAA;IACtD,UAAU,MAAM;IAChB,cAAc,oBAAC,YAAD;KAAY,iBAAgB;KAAK,MAAM;IAAW,CAAA;GACjE,EAAA,CAAA,CACJ;EACM,CAAA;EAEV,OAAO,aACL,oBAAC,UAAD;GAAU,SAAA;GAAQ,SAAA;GACf,UAAA;EACO,CAAA,IAEV;CAEJ;CAGA,IAAI,MAAM,SAAS,KAAA,GAAW;EAC5B,MAAM,EACJ,UACA,KACA,MACA,MAAM,OACN,YACA,SACA,WACA,KACA,MACA,OAAO,QACP,YAAY,aACZ,QACA,SACA,GAAG,eACD;EACJ,MAAM,kBAAkB,aAAa,WAAW;EAChD,MAAM,eAAe,aAAc,MAAM,GAAG,IAAI,wBAAwB,wBAAyB;EACjG,MAAM,cAAc,cACf,MAAqC;GACpC,EAAE,eAAe;GACjB,EAAE,gBAAgB;EACpB,IACA;EACJ,MAAM,gBAAgB,cACjB,MAAwC;GACvC,IAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;IACtC,EAAE,eAAe;IACjB,EAAE,gBAAgB;GACpB;EACF,IACA;EACJ,MAAM,gBACJ,qBAAC,OAAO,GAAR;GACO;GACL,GAAI;GACJ,iBAAe,cAAc,KAAA;GAI7B,KAAK,CAAC,aAAa;IAAE;IAAM;GAAQ,CAAC,GAAG,GAAG;GAC1C,iBAAe,cAAc,KAAA;GAC7B,MAAM,aAAa,KAAA,IAAY;GAC/B,SAAS;GACT,WAAW;GACX,KAAK;GACL,QAAQ;GAbV,UAAA;IAeG,QAAQ,oBAAC,MAAD;KAAM,mBAAkB;KAAK,MAAM;IAAW,CAAA;IACtD;IACA,cAAc,oBAAC,YAAD;KAAY,iBAAgB;KAAK,MAAM;IAAW,CAAA;GACzD;;EAEZ,OAAO,aACL,oBAAC,UAAD;GAAU,SAAA;GAAQ,SAAA;GACf,UAAA;EACO,CAAA,IAEV;CAEJ;CAGA,MAAM,EAAE,UAAU,MAAM,OAAO,OAAO,YAAY,aAAa,GAAG,eAAe;CACjF,OACE,oBAAC,UAAD;EAAU,SAAA;EAAQ,SAAS;EACzB,UAAA,qBAAC,QAAD;GAAQ,UAAU;GAAY,SAAS,UAAU;GAAgB;GAA+B,GAAI;GAApG,UAAA;IACG,QAAQ,oBAAC,MAAD;KAAM,mBAAkB;KAAK,MAAM;IAAW,CAAA;IACtD;IACA,cAAc,oBAAC,YAAD;KAAY,iBAAgB;KAAK,MAAM;IAAW,CAAA;GAC3D;;CACA,CAAA;AAEd,CAAC;AAED,aAAa,cAAc"}
1
+ {"version":3,"file":"BitkitButton.js","names":[],"sources":["../../../lib/components/BitkitButton/BitkitButton.tsx"],"sourcesContent":["import { Button, type ButtonProps } from '@chakra-ui/react/button';\nimport { Skeleton } from '@chakra-ui/react/skeleton';\nimport { chakra, type HTMLChakraProps, type RecipeProps, useRecipe } from '@chakra-ui/react/styled-system';\nimport {\n Children,\n cloneElement,\n forwardRef,\n type KeyboardEvent,\n type MouseEvent,\n type ReactElement,\n type ReactNode,\n type Ref,\n} from 'react';\n\nimport { type BitkitIconComponent } from '../../icons';\n\ntype BitkitButtonOmittedFromButton =\n | 'asChild'\n | 'children'\n | 'colorPalette'\n | 'disabled'\n | 'loading'\n | 'loadingText'\n | 'spinner'\n | 'spinnerPlacement';\n\ninterface BitkitButtonCommonProps {\n icon?: BitkitIconComponent;\n suffixIcon?: BitkitIconComponent;\n}\n\nexport interface BitkitButtonAsButtonProps\n extends BitkitButtonCommonProps, Omit<ButtonProps, BitkitButtonOmittedFromButton> {\n asChild?: false;\n children: string;\n href?: undefined;\n isExternal?: undefined;\n state?: 'disabled' | 'loading' | 'skeleton';\n}\n\nexport interface BitkitButtonAsAnchorProps\n extends BitkitButtonCommonProps, Omit<HTMLChakraProps<'a'>, 'children' | 'colorPalette'>, RecipeProps<'button'> {\n asChild?: false;\n children: string;\n href: string;\n isExternal?: boolean;\n state?: 'disabled' | 'skeleton';\n}\n\ninterface BitkitButtonAsChildProps extends BitkitButtonCommonProps, Omit<ButtonProps, BitkitButtonOmittedFromButton> {\n asChild: true;\n children: ReactElement;\n href?: undefined;\n isExternal?: undefined;\n state?: 'disabled' | 'loading' | 'skeleton';\n}\n\nexport type BitkitButtonProps = BitkitButtonAsButtonProps | BitkitButtonAsAnchorProps | BitkitButtonAsChildProps;\n\n// The forwarded ref is typed as HTMLElement to cover all three modes (button, anchor, slot/asChild),\n// since asChild can render any element (router Link, custom wrappers, etc.). Inner narrow casts\n// satisfy the wrapped Chakra components without affecting the consumer-visible ref shape.\nconst BitkitButton = forwardRef<HTMLElement, BitkitButtonProps>((props, ref) => {\n const buttonRecipe = useRecipe({ key: 'button' });\n const Icon = props.icon;\n const SuffixIcon = props.suffixIcon;\n // Resolve the size the recipe would apply before branching on it: an unset `size` reaches us as\n // `undefined` because the recipe's default lives in CSS, not on the prop. Keep the fallback equal\n // to `defaultVariants.size` in Button.recipe.ts.\n const iconSize = (props.size ?? 'lg') === 'lg' ? '24' : '16';\n const isDisabled = props.state === 'disabled';\n const isSkeleton = props.state === 'skeleton';\n\n // --- Slot mode (asChild) ---\n if (props.asChild) {\n const { asChild: _asChild, children, icon: _icon, state, suffixIcon: _suffixIcon, ...buttonRest } = props;\n const onlyChild = Children.only(children) as ReactElement<{ children?: ReactNode }>;\n const buttonElement = (\n <Button\n asChild\n disabled={isDisabled}\n loading={state === 'loading'}\n ref={ref as Ref<HTMLButtonElement>}\n {...buttonRest}\n >\n {cloneElement(\n onlyChild,\n undefined,\n <>\n {Icon && <Icon marginInlineStart=\"-4\" size={iconSize} />}\n {onlyChild.props.children}\n {SuffixIcon && <SuffixIcon marginInlineEnd=\"-4\" size={iconSize} />}\n </>,\n )}\n </Button>\n );\n return isSkeleton ? (\n <Skeleton asChild loading>\n {buttonElement}\n </Skeleton>\n ) : (\n buttonElement\n );\n }\n\n // --- Anchor mode (href) ---\n if (props.href !== undefined) {\n const {\n children,\n css,\n href,\n icon: _icon,\n isExternal,\n onClick,\n onKeyDown,\n rel,\n size,\n state: _state,\n suffixIcon: _suffixIcon,\n target,\n variant,\n ...anchorRest\n } = props;\n const effectiveTarget = isExternal ? '_blank' : target;\n const effectiveRel = isExternal ? (rel ? `${rel} noreferrer noopener` : 'noreferrer noopener') : rel;\n const handleClick = isDisabled\n ? (e: MouseEvent<HTMLAnchorElement>) => {\n e.preventDefault();\n e.stopPropagation();\n }\n : onClick;\n const handleKeyDown = isDisabled\n ? (e: KeyboardEvent<HTMLAnchorElement>) => {\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault();\n e.stopPropagation();\n }\n }\n : onKeyDown;\n const anchorElement = (\n <chakra.a\n ref={ref as Ref<HTMLAnchorElement>}\n {...anchorRest}\n aria-disabled={isDisabled || undefined}\n // A native <a> can't be `:disabled`, so mark `data-disabled` too: it's the styling/interaction hook the\n // recipe's `_hover`/`_active` conditions exclude (`:not(…, [data-disabled])`), while `aria-disabled` stays\n // for a11y. Without it, hover/active would still match a disabled anchor and override the disabled colors.\n css={[buttonRecipe({ size, variant }), css]}\n data-disabled={isDisabled || undefined}\n href={isDisabled ? undefined : href}\n onClick={handleClick}\n onKeyDown={handleKeyDown}\n rel={effectiveRel}\n target={effectiveTarget}\n >\n {Icon && <Icon marginInlineStart=\"-4\" size={iconSize} />}\n {children}\n {SuffixIcon && <SuffixIcon marginInlineEnd=\"-4\" size={iconSize} />}\n </chakra.a>\n );\n return isSkeleton ? (\n <Skeleton asChild loading>\n {anchorElement}\n </Skeleton>\n ) : (\n anchorElement\n );\n }\n\n // --- Button mode (default) ---\n const { children, icon: _icon, state, suffixIcon: _suffixIcon, ...buttonRest } = props;\n return (\n <Skeleton asChild loading={isSkeleton}>\n <Button disabled={isDisabled} loading={state === 'loading'} ref={ref as Ref<HTMLButtonElement>} {...buttonRest}>\n {Icon && <Icon marginInlineStart=\"-4\" size={iconSize} />}\n {children}\n {SuffixIcon && <SuffixIcon marginInlineEnd=\"-4\" size={iconSize} />}\n </Button>\n </Skeleton>\n );\n});\n\nBitkitButton.displayName = 'BitkitButton';\n\nexport default BitkitButton;\n"],"mappings":";;;;;;AA8DA,IAAM,eAAe,YAA4C,OAAO,QAAQ;CAC9E,MAAM,eAAe,UAAU,EAAE,KAAK,SAAS,CAAC;CAChD,MAAM,OAAO,MAAM;CACnB,MAAM,aAAa,MAAM;CAIzB,MAAM,YAAY,MAAM,QAAQ,UAAU,OAAO,OAAO;CACxD,MAAM,aAAa,MAAM,UAAU;CACnC,MAAM,aAAa,MAAM,UAAU;CAGnC,IAAI,MAAM,SAAS;EACjB,MAAM,EAAE,SAAS,UAAU,UAAU,MAAM,OAAO,OAAO,YAAY,aAAa,GAAG,eAAe;EACpG,MAAM,YAAY,SAAS,KAAK,QAAQ;EACxC,MAAM,gBACJ,oBAAC,QAAD;GACE,SAAA;GACA,UAAU;GACV,SAAS,UAAU;GACd;GACL,GAAI;GAEH,UAAA,aACC,WACA,KAAA,GACA,qBAAA,YAAA,EAAA,UAAA;IACG,QAAQ,oBAAC,MAAD;KAAM,mBAAkB;KAAK,MAAM;IAAW,CAAA;IACtD,UAAU,MAAM;IAChB,cAAc,oBAAC,YAAD;KAAY,iBAAgB;KAAK,MAAM;IAAW,CAAA;GACjE,EAAA,CAAA,CACJ;EACM,CAAA;EAEV,OAAO,aACL,oBAAC,UAAD;GAAU,SAAA;GAAQ,SAAA;GACf,UAAA;EACO,CAAA,IAEV;CAEJ;CAGA,IAAI,MAAM,SAAS,KAAA,GAAW;EAC5B,MAAM,EACJ,UACA,KACA,MACA,MAAM,OACN,YACA,SACA,WACA,KACA,MACA,OAAO,QACP,YAAY,aACZ,QACA,SACA,GAAG,eACD;EACJ,MAAM,kBAAkB,aAAa,WAAW;EAChD,MAAM,eAAe,aAAc,MAAM,GAAG,IAAI,wBAAwB,wBAAyB;EACjG,MAAM,cAAc,cACf,MAAqC;GACpC,EAAE,eAAe;GACjB,EAAE,gBAAgB;EACpB,IACA;EACJ,MAAM,gBAAgB,cACjB,MAAwC;GACvC,IAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;IACtC,EAAE,eAAe;IACjB,EAAE,gBAAgB;GACpB;EACF,IACA;EACJ,MAAM,gBACJ,qBAAC,OAAO,GAAR;GACO;GACL,GAAI;GACJ,iBAAe,cAAc,KAAA;GAI7B,KAAK,CAAC,aAAa;IAAE;IAAM;GAAQ,CAAC,GAAG,GAAG;GAC1C,iBAAe,cAAc,KAAA;GAC7B,MAAM,aAAa,KAAA,IAAY;GAC/B,SAAS;GACT,WAAW;GACX,KAAK;GACL,QAAQ;GAbV,UAAA;IAeG,QAAQ,oBAAC,MAAD;KAAM,mBAAkB;KAAK,MAAM;IAAW,CAAA;IACtD;IACA,cAAc,oBAAC,YAAD;KAAY,iBAAgB;KAAK,MAAM;IAAW,CAAA;GACzD;;EAEZ,OAAO,aACL,oBAAC,UAAD;GAAU,SAAA;GAAQ,SAAA;GACf,UAAA;EACO,CAAA,IAEV;CAEJ;CAGA,MAAM,EAAE,UAAU,MAAM,OAAO,OAAO,YAAY,aAAa,GAAG,eAAe;CACjF,OACE,oBAAC,UAAD;EAAU,SAAA;EAAQ,SAAS;EACzB,UAAA,qBAAC,QAAD;GAAQ,UAAU;GAAY,SAAS,UAAU;GAAgB;GAA+B,GAAI;GAApG,UAAA;IACG,QAAQ,oBAAC,MAAD;KAAM,mBAAkB;KAAK,MAAM;IAAW,CAAA;IACtD;IACA,cAAc,oBAAC,YAAD;KAAY,iBAAgB;KAAK,MAAM;IAAW,CAAA;GAC3D;;CACA,CAAA;AAEd,CAAC;AAED,aAAa,cAAc"}
@@ -5,7 +5,7 @@ import { forwardRef } from "react";
5
5
  import { jsx } from "react/jsx-runtime";
6
6
  //#region lib/components/BitkitCloseButton/BitkitCloseButton.tsx
7
7
  var BitkitCloseButton = forwardRef((props, ref) => {
8
- const { "aria-label": ariaLabel = "Close", size, colorVariant, css, tooltipText, ...rest } = props;
8
+ const { "aria-label": ariaLabel = "Close", size = "xs", colorVariant, css, tooltipText, ...rest } = props;
9
9
  const style = useRecipe({ key: "closeButton" });
10
10
  return /* @__PURE__ */ jsx(BitkitLabelTooltip, {
11
11
  disabled: rest.disabled,
@@ -1 +1 @@
1
- {"version":3,"file":"BitkitCloseButton.js","names":[],"sources":["../../../lib/components/BitkitCloseButton/BitkitCloseButton.tsx"],"sourcesContent":["import { chakra, type HTMLChakraProps, type RecipeProps, useRecipe } from '@chakra-ui/react/styled-system';\nimport { forwardRef } from 'react';\n\nimport { IconCross } from '../../icons';\nimport BitkitLabelTooltip from '../BitkitLabelTooltip/BitkitLabelTooltip';\n\nexport interface BitkitCloseButtonProps\n extends Omit<HTMLChakraProps<'button'>, 'colorPalette'>, RecipeProps<'closeButton'> {\n /**\n * Hover label for the button. Defaults to `aria-label` — set it when the accessible name is\n * too long to read well as a tooltip.\n */\n tooltipText?: string;\n}\n\nconst BitkitCloseButton = forwardRef<HTMLButtonElement, BitkitCloseButtonProps>((props, ref) => {\n const { 'aria-label': ariaLabel = 'Close', size, colorVariant, css, tooltipText, ...rest } = props;\n\n const style = useRecipe({ key: 'closeButton' });\n\n return (\n <BitkitLabelTooltip disabled={rest.disabled} text={tooltipText ?? ariaLabel}>\n <chakra.button\n ref={ref}\n aria-label={ariaLabel}\n {...rest}\n css={[style({ size, colorVariant }), css]}\n color={colorVariant === 'neutral' && !rest.disabled ? 'icon/primary' : undefined}\n >\n <IconCross size={size === 'xs' ? '16' : '24'} />\n </chakra.button>\n </BitkitLabelTooltip>\n );\n});\n\nBitkitCloseButton.displayName = 'BitkitCloseButton';\n\nexport default BitkitCloseButton;\n"],"mappings":";;;;;;AAeA,IAAM,oBAAoB,YAAuD,OAAO,QAAQ;CAC9F,MAAM,EAAE,cAAc,YAAY,SAAS,MAAM,cAAc,KAAK,aAAa,GAAG,SAAS;CAE7F,MAAM,QAAQ,UAAU,EAAE,KAAK,cAAc,CAAC;CAE9C,OACE,oBAAC,oBAAD;EAAoB,UAAU,KAAK;EAAU,MAAM,eAAe;EAChE,UAAA,oBAAC,OAAO,QAAR;GACO;GACL,cAAY;GACZ,GAAI;GACJ,KAAK,CAAC,MAAM;IAAE;IAAM;GAAa,CAAC,GAAG,GAAG;GACxC,OAAO,iBAAiB,aAAa,CAAC,KAAK,WAAW,iBAAiB,KAAA;GAEvE,UAAA,oBAAC,WAAD,EAAW,MAAM,SAAS,OAAO,OAAO,KAAO,CAAA;EAClC,CAAA;CACG,CAAA;AAExB,CAAC;AAED,kBAAkB,cAAc"}
1
+ {"version":3,"file":"BitkitCloseButton.js","names":[],"sources":["../../../lib/components/BitkitCloseButton/BitkitCloseButton.tsx"],"sourcesContent":["import { chakra, type HTMLChakraProps, type RecipeProps, useRecipe } from '@chakra-ui/react/styled-system';\nimport { forwardRef } from 'react';\n\nimport { IconCross } from '../../icons';\nimport BitkitLabelTooltip from '../BitkitLabelTooltip/BitkitLabelTooltip';\n\nexport interface BitkitCloseButtonProps\n extends Omit<HTMLChakraProps<'button'>, 'colorPalette'>, RecipeProps<'closeButton'> {\n /**\n * Hover label for the button. Defaults to `aria-label` — set it when the accessible name is\n * too long to read well as a tooltip.\n */\n tooltipText?: string;\n}\n\nconst BitkitCloseButton = forwardRef<HTMLButtonElement, BitkitCloseButtonProps>((props, ref) => {\n const { 'aria-label': ariaLabel = 'Close', size = 'xs', colorVariant, css, tooltipText, ...rest } = props;\n\n const style = useRecipe({ key: 'closeButton' });\n\n return (\n <BitkitLabelTooltip disabled={rest.disabled} text={tooltipText ?? ariaLabel}>\n <chakra.button\n ref={ref}\n aria-label={ariaLabel}\n {...rest}\n css={[style({ size, colorVariant }), css]}\n color={colorVariant === 'neutral' && !rest.disabled ? 'icon/primary' : undefined}\n >\n <IconCross size={size === 'xs' ? '16' : '24'} />\n </chakra.button>\n </BitkitLabelTooltip>\n );\n});\n\nBitkitCloseButton.displayName = 'BitkitCloseButton';\n\nexport default BitkitCloseButton;\n"],"mappings":";;;;;;AAeA,IAAM,oBAAoB,YAAuD,OAAO,QAAQ;CAC9F,MAAM,EAAE,cAAc,YAAY,SAAS,OAAO,MAAM,cAAc,KAAK,aAAa,GAAG,SAAS;CAEpG,MAAM,QAAQ,UAAU,EAAE,KAAK,cAAc,CAAC;CAE9C,OACE,oBAAC,oBAAD;EAAoB,UAAU,KAAK;EAAU,MAAM,eAAe;EAChE,UAAA,oBAAC,OAAO,QAAR;GACO;GACL,cAAY;GACZ,GAAI;GACJ,KAAK,CAAC,MAAM;IAAE;IAAM;GAAa,CAAC,GAAG,GAAG;GACxC,OAAO,iBAAiB,aAAa,CAAC,KAAK,WAAW,iBAAiB,KAAA;GAEvE,UAAA,oBAAC,WAAD,EAAW,MAAM,SAAS,OAAO,OAAO,KAAO,CAAA;EAClC,CAAA;CACG,CAAA;AAExB,CAAC;AAED,kBAAkB,cAAc"}
@@ -15,7 +15,7 @@ import { Combobox } from "@chakra-ui/react/combobox";
15
15
  import { useFilter } from "@chakra-ui/react/locale";
16
16
  //#region lib/components/BitkitCombobox/BitkitCombobox.tsx
17
17
  var BitkitCombobox = forwardRef((props, ref) => {
18
- const { children, comboboxProps, defaultValue, disablePortal, emptyHelperText, emptyLabel, isLoading, items, onSearchChange, onValueChange, placeholder = "Enter a value or select", searchValue, size, state, value, ...fieldProps } = props;
18
+ const { children, comboboxProps, defaultValue, disablePortal, emptyHelperText, emptyLabel, isLoading, items, onSearchChange, onValueChange, placeholder = "Enter a value or select", searchValue, size = "lg", state, value, ...fieldProps } = props;
19
19
  const { disablePortal: disablePortalFromContext } = useContext(BitkitPortalContext);
20
20
  const { contains } = useFilter({ sensitivity: "base" });
21
21
  const [filterText, setFilterText] = useState("");
@@ -1 +1 @@
1
- {"version":3,"file":"BitkitCombobox.js","names":[],"sources":["../../../lib/components/BitkitCombobox/BitkitCombobox.tsx"],"sourcesContent":["import { createListCollection } from '@chakra-ui/react/collection';\nimport { Combobox, type ComboboxRootProps } from '@chakra-ui/react/combobox';\nimport { useFilter } from '@chakra-ui/react/locale';\nimport { Portal } from '@chakra-ui/react/portal';\nimport { forwardRef, useContext, useState } from 'react';\n\nimport IconErrorCircleFilled from '../../icons/IconErrorCircleFilled';\nimport IconWarningYellow from '../../icons/IconWarningYellow';\nimport AssetSelectChevron from '../../utilities/AssetSelectChevron';\nimport BitkitPortalContext from '../../utilities/BitkitPortalContext';\nimport { withSubComponents } from '../../utilities/withSubComponents';\nimport BitkitCloseButton from '../BitkitCloseButton/BitkitCloseButton';\nimport BitkitField, { type BitkitFieldProps } from '../BitkitField/BitkitField';\nimport BitkitSelectMenu, {\n type BitkitSelectMenuEmptyStateProps,\n type BitkitSelectMenuItemProps,\n type BitkitSelectMenuSearchProps,\n} from '../BitkitSelectMenu/BitkitSelectMenu';\nimport BitkitSelectMenuAction, { type BitkitSelectMenuActionChild } from '../BitkitSelectMenu/BitkitSelectMenuAction';\n\nexport type BitkitComboboxProps = Omit<BitkitFieldProps, 'children' | 'state'> & {\n children?: BitkitSelectMenuActionChild;\n comboboxProps?: Omit<ComboboxRootProps, 'collection' | 'defaultValue' | 'onValueChange' | 'value'>;\n defaultValue?: string;\n disablePortal?: boolean;\n isLoading?: boolean;\n items: Array<BitkitSelectMenuItemProps>;\n onValueChange?: (newVal: string | undefined) => void;\n placeholder?: string;\n size?: 'md' | 'lg';\n state?: 'disabled' | 'error' | 'readOnly' | 'warning';\n value?: string;\n} & BitkitSelectMenuSearchProps &\n BitkitSelectMenuEmptyStateProps;\n\nconst BitkitCombobox = forwardRef<HTMLDivElement, BitkitComboboxProps>((props: BitkitComboboxProps, ref) => {\n const {\n children,\n comboboxProps,\n defaultValue,\n disablePortal,\n emptyHelperText,\n emptyLabel,\n isLoading,\n items,\n onSearchChange,\n onValueChange,\n placeholder = 'Enter a value or select',\n searchValue,\n size,\n state,\n value,\n ...fieldProps\n } = props;\n\n const { disablePortal: disablePortalFromContext } = useContext(BitkitPortalContext);\n\n const { contains } = useFilter({ sensitivity: 'base' });\n\n // Derive the collection on every render rather than using useListCollection, which snapshots\n // `items` into state as `initialItems` and never syncs it again, so changing `items` actually reaches the menu.\n // Deriving also keeps callers that pass an inline array literal safe, since nothing here is keyed on items identity.\n const [filterText, setFilterText] = useState('');\n const visibleItems = filterText ? items.filter((item) => contains(item.label, filterText)) : items;\n const collection = createListCollection<BitkitSelectMenuItemProps>({\n items: visibleItems,\n isItemDisabled: (item) => !!item.disabled,\n });\n\n // A new set of items invalidates whatever the old ones were filtered by — otherwise leftover\n // filter text (which Zag also sets from the selected item's label) can hide every new item and\n // leave the menu empty. Keyed on item values, not array identity, so an inline `items={[…]}`\n // literal doesn't wipe the filter on every keystroke. Matches what useListCollection's `set()`\n // used to do for us.\n const itemsKey = JSON.stringify(items.map((item) => item.value));\n const [prevItemsKey, setPrevItemsKey] = useState(itemsKey);\n if (prevItemsKey !== itemsKey) {\n setPrevItemsKey(itemsKey);\n setFilterText('');\n }\n\n const hasWarning = state === 'warning' || !!fieldProps.warningText;\n const isInvalid = state === 'error' || !!fieldProps.errorText;\n const iconSize = size === 'md' ? '16' : '24';\n\n let statusIcon;\n if (isInvalid) {\n statusIcon = <IconErrorCircleFilled size={iconSize} color=\"icon/negative\" />;\n } else if (hasWarning) {\n statusIcon = <IconWarningYellow size={iconSize} />;\n }\n\n return (\n <BitkitField ref={ref} state={state} {...fieldProps}>\n <Combobox.Root\n {...comboboxProps}\n collection={collection}\n defaultValue={defaultValue ? [defaultValue] : undefined}\n disabled={state === 'disabled'}\n hasStatusIcon={!!statusIcon}\n invalid={isInvalid}\n onInputValueChange={(e) => {\n setFilterText(e.inputValue);\n }}\n onValueChange={(details) => onValueChange?.(details.value[0])}\n readOnly={state === 'readOnly'}\n // Bypass Zag's isScrollable(contentEl) gate — our Content is overflow:hidden flex\n // column, so the real scroll container is itemList. See BitkitMultiselect for why.\n scrollToIndexFn={({ getElement }) => getElement()?.scrollIntoView({ block: 'nearest' })}\n size={size}\n // Stay controlled whenever `value` is provided — including `''` (\"nothing selected\"). A\n // truthiness check (`value ? … : undefined`) passes `undefined` for `''`, which flips\n // Combobox.Root to uncontrolled: it then ignores `value`, so resets don't take and\n // onValueChange stops firing when the same option is re-selected.\n value={value === undefined ? undefined : value ? [value] : []}\n >\n <Combobox.Control className=\"group\">\n <Combobox.Input placeholder={placeholder} />\n <Combobox.IndicatorGroup>\n <Combobox.ClearTrigger asChild>\n <BitkitCloseButton size=\"sm\" />\n </Combobox.ClearTrigger>\n {statusIcon}\n <Combobox.Trigger asChild>\n <AssetSelectChevron />\n </Combobox.Trigger>\n </Combobox.IndicatorGroup>\n </Combobox.Control>\n <Portal disabled={disablePortal || disablePortalFromContext}>\n <Combobox.Positioner>\n <BitkitSelectMenu\n collection={collection}\n emptyHelperText={emptyHelperText}\n emptyLabel={emptyLabel}\n isLoading={isLoading}\n onSearchChange={onSearchChange}\n searchValue={searchValue}\n size={size}\n variant=\"combobox\"\n >\n {children}\n </BitkitSelectMenu>\n </Combobox.Positioner>\n </Portal>\n </Combobox.Root>\n </BitkitField>\n );\n});\n\nBitkitCombobox.displayName = 'BitkitCombobox';\n\nexport default withSubComponents(BitkitCombobox, { Action: BitkitSelectMenuAction });\n"],"mappings":";;;;;;;;;;;;;;;;AAmCA,IAAM,iBAAiB,YAAiD,OAA4B,QAAQ;CAC1G,MAAM,EACJ,UACA,eACA,cACA,eACA,iBACA,YACA,WACA,OACA,gBACA,eACA,cAAc,2BACd,aACA,MACA,OACA,OACA,GAAG,eACD;CAEJ,MAAM,EAAE,eAAe,6BAA6B,WAAW,mBAAmB;CAElF,MAAM,EAAE,aAAa,UAAU,EAAE,aAAa,OAAO,CAAC;CAKtD,MAAM,CAAC,YAAY,iBAAiB,SAAS,EAAE;CAC/C,MAAM,eAAe,aAAa,MAAM,QAAQ,SAAS,SAAS,KAAK,OAAO,UAAU,CAAC,IAAI;CAC7F,MAAM,aAAa,qBAAgD;EACjE,OAAO;EACP,iBAAiB,SAAS,CAAC,CAAC,KAAK;CACnC,CAAC;CAOD,MAAM,WAAW,KAAK,UAAU,MAAM,KAAK,SAAS,KAAK,KAAK,CAAC;CAC/D,MAAM,CAAC,cAAc,mBAAmB,SAAS,QAAQ;CACzD,IAAI,iBAAiB,UAAU;EAC7B,gBAAgB,QAAQ;EACxB,cAAc,EAAE;CAClB;CAEA,MAAM,aAAa,UAAU,aAAa,CAAC,CAAC,WAAW;CACvD,MAAM,YAAY,UAAU,WAAW,CAAC,CAAC,WAAW;CACpD,MAAM,WAAW,SAAS,OAAO,OAAO;CAExC,IAAI;CACJ,IAAI,WACF,aAAa,oBAAC,uBAAD;EAAuB,MAAM;EAAU,OAAM;CAAiB,CAAA;MACtE,IAAI,YACT,aAAa,oBAAC,mBAAD,EAAmB,MAAM,SAAW,CAAA;CAGnD,OACE,oBAAC,aAAD;EAAkB;EAAY;EAAO,GAAI;EACvC,UAAA,qBAAC,SAAS,MAAV;GACE,GAAI;GACQ;GACZ,cAAc,eAAe,CAAC,YAAY,IAAI,KAAA;GAC9C,UAAU,UAAU;GACpB,eAAe,CAAC,CAAC;GACjB,SAAS;GACT,qBAAqB,MAAM;IACzB,cAAc,EAAE,UAAU;GAC5B;GACA,gBAAgB,YAAY,gBAAgB,QAAQ,MAAM,EAAE;GAC5D,UAAU,UAAU;GAGpB,kBAAkB,EAAE,iBAAiB,WAAW,CAAC,EAAE,eAAe,EAAE,OAAO,UAAU,CAAC;GAChF;GAKN,OAAO,UAAU,KAAA,IAAY,KAAA,IAAY,QAAQ,CAAC,KAAK,IAAI,CAAC;GApB9D,UAAA,CAsBE,qBAAC,SAAS,SAAV;IAAkB,WAAU;IAA5B,UAAA,CACE,oBAAC,SAAS,OAAV,EAA6B,YAAc,CAAA,GAC3C,qBAAC,SAAS,gBAAV,EAAA,UAAA;KACE,oBAAC,SAAS,cAAV;MAAuB,SAAA;MACrB,UAAA,oBAAC,mBAAD,EAAmB,MAAK,KAAM,CAAA;KACT,CAAA;KACtB;KACD,oBAAC,SAAS,SAAV;MAAkB,SAAA;MAChB,UAAA,oBAAC,oBAAD,CAAqB,CAAA;KACL,CAAA;IACK,EAAA,CAAA,CACT;GAClB,CAAA,GAAA,oBAAC,QAAD;IAAQ,UAAU,iBAAiB;IACjC,UAAA,oBAAC,SAAS,YAAV,EAAA,UACE,oBAAC,kBAAD;KACc;KACK;KACL;KACD;KACK;KACH;KACP;KACN,SAAQ;KAEP;IACe,CAAA,EACC,CAAA;GACf,CAAA,CACK;;CACJ,CAAA;AAEjB,CAAC;AAED,eAAe,cAAc;AAE7B,IAAA,yBAAe,kBAAkB,gBAAgB,EAAE,QAAQ,uBAAuB,CAAC"}
1
+ {"version":3,"file":"BitkitCombobox.js","names":[],"sources":["../../../lib/components/BitkitCombobox/BitkitCombobox.tsx"],"sourcesContent":["import { createListCollection } from '@chakra-ui/react/collection';\nimport { Combobox, type ComboboxRootProps } from '@chakra-ui/react/combobox';\nimport { useFilter } from '@chakra-ui/react/locale';\nimport { Portal } from '@chakra-ui/react/portal';\nimport { forwardRef, useContext, useState } from 'react';\n\nimport IconErrorCircleFilled from '../../icons/IconErrorCircleFilled';\nimport IconWarningYellow from '../../icons/IconWarningYellow';\nimport AssetSelectChevron from '../../utilities/AssetSelectChevron';\nimport BitkitPortalContext from '../../utilities/BitkitPortalContext';\nimport { withSubComponents } from '../../utilities/withSubComponents';\nimport BitkitCloseButton from '../BitkitCloseButton/BitkitCloseButton';\nimport BitkitField, { type BitkitFieldProps } from '../BitkitField/BitkitField';\nimport BitkitSelectMenu, {\n type BitkitSelectMenuEmptyStateProps,\n type BitkitSelectMenuItemProps,\n type BitkitSelectMenuSearchProps,\n} from '../BitkitSelectMenu/BitkitSelectMenu';\nimport BitkitSelectMenuAction, { type BitkitSelectMenuActionChild } from '../BitkitSelectMenu/BitkitSelectMenuAction';\n\nexport type BitkitComboboxProps = Omit<BitkitFieldProps, 'children' | 'state'> & {\n children?: BitkitSelectMenuActionChild;\n comboboxProps?: Omit<ComboboxRootProps, 'collection' | 'defaultValue' | 'onValueChange' | 'value'>;\n defaultValue?: string;\n disablePortal?: boolean;\n isLoading?: boolean;\n items: Array<BitkitSelectMenuItemProps>;\n onValueChange?: (newVal: string | undefined) => void;\n placeholder?: string;\n size?: 'md' | 'lg';\n state?: 'disabled' | 'error' | 'readOnly' | 'warning';\n value?: string;\n} & BitkitSelectMenuSearchProps &\n BitkitSelectMenuEmptyStateProps;\n\nconst BitkitCombobox = forwardRef<HTMLDivElement, BitkitComboboxProps>((props: BitkitComboboxProps, ref) => {\n const {\n children,\n comboboxProps,\n defaultValue,\n disablePortal,\n emptyHelperText,\n emptyLabel,\n isLoading,\n items,\n onSearchChange,\n onValueChange,\n placeholder = 'Enter a value or select',\n searchValue,\n size = 'lg',\n state,\n value,\n ...fieldProps\n } = props;\n\n const { disablePortal: disablePortalFromContext } = useContext(BitkitPortalContext);\n\n const { contains } = useFilter({ sensitivity: 'base' });\n\n // Derive the collection on every render rather than using useListCollection, which snapshots\n // `items` into state as `initialItems` and never syncs it again, so changing `items` actually reaches the menu.\n // Deriving also keeps callers that pass an inline array literal safe, since nothing here is keyed on items identity.\n const [filterText, setFilterText] = useState('');\n const visibleItems = filterText ? items.filter((item) => contains(item.label, filterText)) : items;\n const collection = createListCollection<BitkitSelectMenuItemProps>({\n items: visibleItems,\n isItemDisabled: (item) => !!item.disabled,\n });\n\n // A new set of items invalidates whatever the old ones were filtered by — otherwise leftover\n // filter text (which Zag also sets from the selected item's label) can hide every new item and\n // leave the menu empty. Keyed on item values, not array identity, so an inline `items={[…]}`\n // literal doesn't wipe the filter on every keystroke. Matches what useListCollection's `set()`\n // used to do for us.\n const itemsKey = JSON.stringify(items.map((item) => item.value));\n const [prevItemsKey, setPrevItemsKey] = useState(itemsKey);\n if (prevItemsKey !== itemsKey) {\n setPrevItemsKey(itemsKey);\n setFilterText('');\n }\n\n const hasWarning = state === 'warning' || !!fieldProps.warningText;\n const isInvalid = state === 'error' || !!fieldProps.errorText;\n const iconSize = size === 'md' ? '16' : '24';\n\n let statusIcon;\n if (isInvalid) {\n statusIcon = <IconErrorCircleFilled size={iconSize} color=\"icon/negative\" />;\n } else if (hasWarning) {\n statusIcon = <IconWarningYellow size={iconSize} />;\n }\n\n return (\n <BitkitField ref={ref} state={state} {...fieldProps}>\n <Combobox.Root\n {...comboboxProps}\n collection={collection}\n defaultValue={defaultValue ? [defaultValue] : undefined}\n disabled={state === 'disabled'}\n hasStatusIcon={!!statusIcon}\n invalid={isInvalid}\n onInputValueChange={(e) => {\n setFilterText(e.inputValue);\n }}\n onValueChange={(details) => onValueChange?.(details.value[0])}\n readOnly={state === 'readOnly'}\n // Bypass Zag's isScrollable(contentEl) gate — our Content is overflow:hidden flex\n // column, so the real scroll container is itemList. See BitkitMultiselect for why.\n scrollToIndexFn={({ getElement }) => getElement()?.scrollIntoView({ block: 'nearest' })}\n size={size}\n // Stay controlled whenever `value` is provided — including `''` (\"nothing selected\"). A\n // truthiness check (`value ? … : undefined`) passes `undefined` for `''`, which flips\n // Combobox.Root to uncontrolled: it then ignores `value`, so resets don't take and\n // onValueChange stops firing when the same option is re-selected.\n value={value === undefined ? undefined : value ? [value] : []}\n >\n <Combobox.Control className=\"group\">\n <Combobox.Input placeholder={placeholder} />\n <Combobox.IndicatorGroup>\n <Combobox.ClearTrigger asChild>\n <BitkitCloseButton size=\"sm\" />\n </Combobox.ClearTrigger>\n {statusIcon}\n <Combobox.Trigger asChild>\n <AssetSelectChevron />\n </Combobox.Trigger>\n </Combobox.IndicatorGroup>\n </Combobox.Control>\n <Portal disabled={disablePortal || disablePortalFromContext}>\n <Combobox.Positioner>\n <BitkitSelectMenu\n collection={collection}\n emptyHelperText={emptyHelperText}\n emptyLabel={emptyLabel}\n isLoading={isLoading}\n onSearchChange={onSearchChange}\n searchValue={searchValue}\n size={size}\n variant=\"combobox\"\n >\n {children}\n </BitkitSelectMenu>\n </Combobox.Positioner>\n </Portal>\n </Combobox.Root>\n </BitkitField>\n );\n});\n\nBitkitCombobox.displayName = 'BitkitCombobox';\n\nexport default withSubComponents(BitkitCombobox, { Action: BitkitSelectMenuAction });\n"],"mappings":";;;;;;;;;;;;;;;;AAmCA,IAAM,iBAAiB,YAAiD,OAA4B,QAAQ;CAC1G,MAAM,EACJ,UACA,eACA,cACA,eACA,iBACA,YACA,WACA,OACA,gBACA,eACA,cAAc,2BACd,aACA,OAAO,MACP,OACA,OACA,GAAG,eACD;CAEJ,MAAM,EAAE,eAAe,6BAA6B,WAAW,mBAAmB;CAElF,MAAM,EAAE,aAAa,UAAU,EAAE,aAAa,OAAO,CAAC;CAKtD,MAAM,CAAC,YAAY,iBAAiB,SAAS,EAAE;CAC/C,MAAM,eAAe,aAAa,MAAM,QAAQ,SAAS,SAAS,KAAK,OAAO,UAAU,CAAC,IAAI;CAC7F,MAAM,aAAa,qBAAgD;EACjE,OAAO;EACP,iBAAiB,SAAS,CAAC,CAAC,KAAK;CACnC,CAAC;CAOD,MAAM,WAAW,KAAK,UAAU,MAAM,KAAK,SAAS,KAAK,KAAK,CAAC;CAC/D,MAAM,CAAC,cAAc,mBAAmB,SAAS,QAAQ;CACzD,IAAI,iBAAiB,UAAU;EAC7B,gBAAgB,QAAQ;EACxB,cAAc,EAAE;CAClB;CAEA,MAAM,aAAa,UAAU,aAAa,CAAC,CAAC,WAAW;CACvD,MAAM,YAAY,UAAU,WAAW,CAAC,CAAC,WAAW;CACpD,MAAM,WAAW,SAAS,OAAO,OAAO;CAExC,IAAI;CACJ,IAAI,WACF,aAAa,oBAAC,uBAAD;EAAuB,MAAM;EAAU,OAAM;CAAiB,CAAA;MACtE,IAAI,YACT,aAAa,oBAAC,mBAAD,EAAmB,MAAM,SAAW,CAAA;CAGnD,OACE,oBAAC,aAAD;EAAkB;EAAY;EAAO,GAAI;EACvC,UAAA,qBAAC,SAAS,MAAV;GACE,GAAI;GACQ;GACZ,cAAc,eAAe,CAAC,YAAY,IAAI,KAAA;GAC9C,UAAU,UAAU;GACpB,eAAe,CAAC,CAAC;GACjB,SAAS;GACT,qBAAqB,MAAM;IACzB,cAAc,EAAE,UAAU;GAC5B;GACA,gBAAgB,YAAY,gBAAgB,QAAQ,MAAM,EAAE;GAC5D,UAAU,UAAU;GAGpB,kBAAkB,EAAE,iBAAiB,WAAW,CAAC,EAAE,eAAe,EAAE,OAAO,UAAU,CAAC;GAChF;GAKN,OAAO,UAAU,KAAA,IAAY,KAAA,IAAY,QAAQ,CAAC,KAAK,IAAI,CAAC;GApB9D,UAAA,CAsBE,qBAAC,SAAS,SAAV;IAAkB,WAAU;IAA5B,UAAA,CACE,oBAAC,SAAS,OAAV,EAA6B,YAAc,CAAA,GAC3C,qBAAC,SAAS,gBAAV,EAAA,UAAA;KACE,oBAAC,SAAS,cAAV;MAAuB,SAAA;MACrB,UAAA,oBAAC,mBAAD,EAAmB,MAAK,KAAM,CAAA;KACT,CAAA;KACtB;KACD,oBAAC,SAAS,SAAV;MAAkB,SAAA;MAChB,UAAA,oBAAC,oBAAD,CAAqB,CAAA;KACL,CAAA;IACK,EAAA,CAAA,CACT;GAClB,CAAA,GAAA,oBAAC,QAAD;IAAQ,UAAU,iBAAiB;IACjC,UAAA,oBAAC,SAAS,YAAV,EAAA,UACE,oBAAC,kBAAD;KACc;KACK;KACL;KACD;KACK;KACH;KACP;KACN,SAAQ;KAEP;IACe,CAAA,EACC,CAAA;GACf,CAAA,CACK;;CACJ,CAAA;AAEjB,CAAC;AAED,eAAe,cAAc;AAE7B,IAAA,yBAAe,kBAAkB,gBAAgB,EAAE,QAAQ,uBAAuB,CAAC"}
@@ -8,7 +8,7 @@ import { IconButton } from "@chakra-ui/react/button";
8
8
  var BitkitIconButton = forwardRef((props, ref) => {
9
9
  const buttonRecipe = useRecipe({ key: "button" });
10
10
  const Icon = props.icon;
11
- const iconSize = props.size === "lg" ? "24" : "16";
11
+ const iconSize = (props.size ?? "lg") === "lg" ? "24" : "16";
12
12
  const isDisabled = props.state === "disabled";
13
13
  const isSkeleton = props.state === "skeleton";
14
14
  if (props.asChild) {
@@ -1 +1 @@
1
- {"version":3,"file":"BitkitIconButton.js","names":[],"sources":["../../../lib/components/BitkitIconButton/BitkitIconButton.tsx"],"sourcesContent":["import { IconButton, type IconButtonProps } from '@chakra-ui/react/button';\nimport { Skeleton } from '@chakra-ui/react/skeleton';\nimport { chakra, type HTMLChakraProps, type RecipeProps, useRecipe } from '@chakra-ui/react/styled-system';\nimport {\n Children,\n cloneElement,\n forwardRef,\n type KeyboardEvent,\n type MouseEvent,\n type ReactElement,\n type Ref,\n} from 'react';\n\nimport { type BitkitIconComponent } from '../../icons';\nimport BitkitLabelTooltip, { type BitkitLabelTooltipProps } from '../BitkitLabelTooltip/BitkitLabelTooltip';\n\ntype BitkitIconButtonOmittedFromButton =\n | 'aria-label'\n | 'asChild'\n | 'children'\n | 'colorPalette'\n | 'disabled'\n | 'loading'\n | 'loadingText'\n | 'spinner'\n | 'spinnerPlacement';\n\ninterface BitkitIconButtonCommonProps {\n icon: BitkitIconComponent;\n label: string;\n tooltipProps?: Partial<Omit<BitkitLabelTooltipProps, 'children' | 'text'>>;\n}\n\ninterface BitkitIconButtonAsButtonProps\n extends BitkitIconButtonCommonProps, Omit<IconButtonProps, BitkitIconButtonOmittedFromButton> {\n asChild?: false;\n href?: undefined;\n isExternal?: undefined;\n state?: 'disabled' | 'loading' | 'skeleton';\n}\n\ninterface BitkitIconButtonAsAnchorProps\n extends\n BitkitIconButtonCommonProps,\n Omit<HTMLChakraProps<'a'>, 'aria-label' | 'children' | 'colorPalette'>,\n RecipeProps<'button'> {\n asChild?: false;\n href: string;\n isExternal?: boolean;\n state?: 'disabled' | 'skeleton';\n}\n\ninterface BitkitIconButtonAsChildProps\n extends BitkitIconButtonCommonProps, Omit<IconButtonProps, BitkitIconButtonOmittedFromButton> {\n asChild: true;\n children: ReactElement;\n href?: undefined;\n isExternal?: undefined;\n state?: 'disabled' | 'loading' | 'skeleton';\n}\n\nexport type BitkitIconButtonProps =\n | BitkitIconButtonAsButtonProps\n | BitkitIconButtonAsAnchorProps\n | BitkitIconButtonAsChildProps;\n\n// The forwarded ref is typed as HTMLElement to cover all three modes (button, anchor, slot/asChild),\n// since asChild can render any element (router Link, custom wrappers, etc.). Inner narrow casts\n// satisfy the wrapped Chakra components without affecting the consumer-visible ref shape.\nconst BitkitIconButton = forwardRef<HTMLElement, BitkitIconButtonProps>((props, ref) => {\n const buttonRecipe = useRecipe({ key: 'button' });\n const Icon = props.icon;\n const iconSize = props.size === 'lg' ? '24' : '16';\n const isDisabled = props.state === 'disabled';\n const isSkeleton = props.state === 'skeleton';\n\n // --- Slot mode (asChild) ---\n if (props.asChild) {\n const { asChild: _asChild, children, icon: _icon, label, state, tooltipProps, ...buttonRest } = props;\n const onlyChild = Children.only(children) as ReactElement<{ 'aria-label'?: string }>;\n const iconButtonElement = (\n <IconButton\n asChild\n aria-label={label}\n disabled={isDisabled}\n loading={state === 'loading'}\n ref={ref as Ref<HTMLButtonElement>}\n {...buttonRest}\n >\n {cloneElement(onlyChild, { 'aria-label': onlyChild.props['aria-label'] ?? label }, <Icon size={iconSize} />)}\n </IconButton>\n );\n return (\n <BitkitLabelTooltip text={label} {...tooltipProps}>\n {isSkeleton ? (\n <Skeleton asChild loading>\n {iconButtonElement}\n </Skeleton>\n ) : (\n iconButtonElement\n )}\n </BitkitLabelTooltip>\n );\n }\n\n // --- Anchor mode (href) ---\n if (props.href !== undefined) {\n const {\n css,\n href,\n icon: _icon,\n isExternal,\n label,\n onClick,\n onKeyDown,\n rel,\n size,\n state: _state,\n target,\n tooltipProps,\n variant,\n ...anchorRest\n } = props;\n const effectiveTarget = isExternal ? '_blank' : target;\n const effectiveRel = isExternal ? (rel ? `${rel} noreferrer noopener` : 'noreferrer noopener') : rel;\n const handleClick = isDisabled\n ? (e: MouseEvent<HTMLAnchorElement>) => {\n e.preventDefault();\n e.stopPropagation();\n }\n : onClick;\n const handleKeyDown = isDisabled\n ? (e: KeyboardEvent<HTMLAnchorElement>) => {\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault();\n e.stopPropagation();\n }\n }\n : onKeyDown;\n const anchorElement = (\n <chakra.a\n ref={ref as Ref<HTMLAnchorElement>}\n {...anchorRest}\n aria-disabled={isDisabled || undefined}\n aria-label={label}\n css={[buttonRecipe({ size, variant }), { paddingBlock: 0, paddingInline: 0 }, css]}\n href={isDisabled ? undefined : href}\n onClick={handleClick}\n onKeyDown={handleKeyDown}\n rel={effectiveRel}\n target={effectiveTarget}\n >\n <Icon size={iconSize} />\n </chakra.a>\n );\n return (\n <BitkitLabelTooltip text={label} {...tooltipProps}>\n {isSkeleton ? (\n <Skeleton asChild loading>\n {anchorElement}\n </Skeleton>\n ) : (\n anchorElement\n )}\n </BitkitLabelTooltip>\n );\n }\n\n // --- Button mode (default) ---\n const { icon: _icon, label, state, tooltipProps, ...buttonRest } = props;\n return (\n <BitkitLabelTooltip text={label} {...tooltipProps}>\n <Skeleton asChild loading={isSkeleton}>\n <IconButton\n aria-label={label}\n disabled={isDisabled}\n loading={state === 'loading'}\n ref={ref as Ref<HTMLButtonElement>}\n {...buttonRest}\n >\n <Icon size={iconSize} />\n </IconButton>\n </Skeleton>\n </BitkitLabelTooltip>\n );\n});\n\nBitkitIconButton.displayName = 'BitkitIconButton';\n\nexport default BitkitIconButton;\n"],"mappings":";;;;;;;AAqEA,IAAM,mBAAmB,YAAgD,OAAO,QAAQ;CACtF,MAAM,eAAe,UAAU,EAAE,KAAK,SAAS,CAAC;CAChD,MAAM,OAAO,MAAM;CACnB,MAAM,WAAW,MAAM,SAAS,OAAO,OAAO;CAC9C,MAAM,aAAa,MAAM,UAAU;CACnC,MAAM,aAAa,MAAM,UAAU;CAGnC,IAAI,MAAM,SAAS;EACjB,MAAM,EAAE,SAAS,UAAU,UAAU,MAAM,OAAO,OAAO,OAAO,cAAc,GAAG,eAAe;EAChG,MAAM,YAAY,SAAS,KAAK,QAAQ;EACxC,MAAM,oBACJ,oBAAC,YAAD;GACE,SAAA;GACA,cAAY;GACZ,UAAU;GACV,SAAS,UAAU;GACd;GACL,GAAI;GAEH,UAAA,aAAa,WAAW,EAAE,cAAc,UAAU,MAAM,iBAAiB,MAAM,GAAG,oBAAC,MAAD,EAAM,MAAM,SAAW,CAAA,CAAC;EACjG,CAAA;EAEd,OACE,oBAAC,oBAAD;GAAoB,MAAM;GAAO,GAAI;GAClC,UAAA,aACC,oBAAC,UAAD;IAAU,SAAA;IAAQ,SAAA;IACf,UAAA;GACO,CAAA,IAEV;EAEgB,CAAA;CAExB;CAGA,IAAI,MAAM,SAAS,KAAA,GAAW;EAC5B,MAAM,EACJ,KACA,MACA,MAAM,OACN,YACA,OACA,SACA,WACA,KACA,MACA,OAAO,QACP,QACA,cACA,SACA,GAAG,eACD;EACJ,MAAM,kBAAkB,aAAa,WAAW;EAChD,MAAM,eAAe,aAAc,MAAM,GAAG,IAAI,wBAAwB,wBAAyB;EACjG,MAAM,cAAc,cACf,MAAqC;GACpC,EAAE,eAAe;GACjB,EAAE,gBAAgB;EACpB,IACA;EACJ,MAAM,gBAAgB,cACjB,MAAwC;GACvC,IAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;IACtC,EAAE,eAAe;IACjB,EAAE,gBAAgB;GACpB;EACF,IACA;EACJ,MAAM,gBACJ,oBAAC,OAAO,GAAR;GACO;GACL,GAAI;GACJ,iBAAe,cAAc,KAAA;GAC7B,cAAY;GACZ,KAAK;IAAC,aAAa;KAAE;KAAM;IAAQ,CAAC;IAAG;KAAE,cAAc;KAAG,eAAe;IAAE;IAAG;GAAG;GACjF,MAAM,aAAa,KAAA,IAAY;GAC/B,SAAS;GACT,WAAW;GACX,KAAK;GACL,QAAQ;GAER,UAAA,oBAAC,MAAD,EAAM,MAAM,SAAW,CAAA;EACf,CAAA;EAEZ,OACE,oBAAC,oBAAD;GAAoB,MAAM;GAAO,GAAI;GAClC,UAAA,aACC,oBAAC,UAAD;IAAU,SAAA;IAAQ,SAAA;IACf,UAAA;GACO,CAAA,IAEV;EAEgB,CAAA;CAExB;CAGA,MAAM,EAAE,MAAM,OAAO,OAAO,OAAO,cAAc,GAAG,eAAe;CACnE,OACE,oBAAC,oBAAD;EAAoB,MAAM;EAAO,GAAI;EACnC,UAAA,oBAAC,UAAD;GAAU,SAAA;GAAQ,SAAS;GACzB,UAAA,oBAAC,YAAD;IACE,cAAY;IACZ,UAAU;IACV,SAAS,UAAU;IACd;IACL,GAAI;IAEJ,UAAA,oBAAC,MAAD,EAAM,MAAM,SAAW,CAAA;GACb,CAAA;EACJ,CAAA;CACQ,CAAA;AAExB,CAAC;AAED,iBAAiB,cAAc"}
1
+ {"version":3,"file":"BitkitIconButton.js","names":[],"sources":["../../../lib/components/BitkitIconButton/BitkitIconButton.tsx"],"sourcesContent":["import { IconButton, type IconButtonProps } from '@chakra-ui/react/button';\nimport { Skeleton } from '@chakra-ui/react/skeleton';\nimport { chakra, type HTMLChakraProps, type RecipeProps, useRecipe } from '@chakra-ui/react/styled-system';\nimport {\n Children,\n cloneElement,\n forwardRef,\n type KeyboardEvent,\n type MouseEvent,\n type ReactElement,\n type Ref,\n} from 'react';\n\nimport { type BitkitIconComponent } from '../../icons';\nimport BitkitLabelTooltip, { type BitkitLabelTooltipProps } from '../BitkitLabelTooltip/BitkitLabelTooltip';\n\ntype BitkitIconButtonOmittedFromButton =\n | 'aria-label'\n | 'asChild'\n | 'children'\n | 'colorPalette'\n | 'disabled'\n | 'loading'\n | 'loadingText'\n | 'spinner'\n | 'spinnerPlacement';\n\ninterface BitkitIconButtonCommonProps {\n icon: BitkitIconComponent;\n label: string;\n tooltipProps?: Partial<Omit<BitkitLabelTooltipProps, 'children' | 'text'>>;\n}\n\ninterface BitkitIconButtonAsButtonProps\n extends BitkitIconButtonCommonProps, Omit<IconButtonProps, BitkitIconButtonOmittedFromButton> {\n asChild?: false;\n href?: undefined;\n isExternal?: undefined;\n state?: 'disabled' | 'loading' | 'skeleton';\n}\n\ninterface BitkitIconButtonAsAnchorProps\n extends\n BitkitIconButtonCommonProps,\n Omit<HTMLChakraProps<'a'>, 'aria-label' | 'children' | 'colorPalette'>,\n RecipeProps<'button'> {\n asChild?: false;\n href: string;\n isExternal?: boolean;\n state?: 'disabled' | 'skeleton';\n}\n\ninterface BitkitIconButtonAsChildProps\n extends BitkitIconButtonCommonProps, Omit<IconButtonProps, BitkitIconButtonOmittedFromButton> {\n asChild: true;\n children: ReactElement;\n href?: undefined;\n isExternal?: undefined;\n state?: 'disabled' | 'loading' | 'skeleton';\n}\n\nexport type BitkitIconButtonProps =\n | BitkitIconButtonAsButtonProps\n | BitkitIconButtonAsAnchorProps\n | BitkitIconButtonAsChildProps;\n\n// The forwarded ref is typed as HTMLElement to cover all three modes (button, anchor, slot/asChild),\n// since asChild can render any element (router Link, custom wrappers, etc.). Inner narrow casts\n// satisfy the wrapped Chakra components without affecting the consumer-visible ref shape.\nconst BitkitIconButton = forwardRef<HTMLElement, BitkitIconButtonProps>((props, ref) => {\n const buttonRecipe = useRecipe({ key: 'button' });\n const Icon = props.icon;\n // An unset `size` reaches us as `undefined` — the `button` recipe's `lg` default lives in CSS,\n // not on the prop — so resolve it here rather than letting it fall to the 16px branch.\n const iconSize = (props.size ?? 'lg') === 'lg' ? '24' : '16';\n const isDisabled = props.state === 'disabled';\n const isSkeleton = props.state === 'skeleton';\n\n // --- Slot mode (asChild) ---\n if (props.asChild) {\n const { asChild: _asChild, children, icon: _icon, label, state, tooltipProps, ...buttonRest } = props;\n const onlyChild = Children.only(children) as ReactElement<{ 'aria-label'?: string }>;\n const iconButtonElement = (\n <IconButton\n asChild\n aria-label={label}\n disabled={isDisabled}\n loading={state === 'loading'}\n ref={ref as Ref<HTMLButtonElement>}\n {...buttonRest}\n >\n {cloneElement(onlyChild, { 'aria-label': onlyChild.props['aria-label'] ?? label }, <Icon size={iconSize} />)}\n </IconButton>\n );\n return (\n <BitkitLabelTooltip text={label} {...tooltipProps}>\n {isSkeleton ? (\n <Skeleton asChild loading>\n {iconButtonElement}\n </Skeleton>\n ) : (\n iconButtonElement\n )}\n </BitkitLabelTooltip>\n );\n }\n\n // --- Anchor mode (href) ---\n if (props.href !== undefined) {\n const {\n css,\n href,\n icon: _icon,\n isExternal,\n label,\n onClick,\n onKeyDown,\n rel,\n size,\n state: _state,\n target,\n tooltipProps,\n variant,\n ...anchorRest\n } = props;\n const effectiveTarget = isExternal ? '_blank' : target;\n const effectiveRel = isExternal ? (rel ? `${rel} noreferrer noopener` : 'noreferrer noopener') : rel;\n const handleClick = isDisabled\n ? (e: MouseEvent<HTMLAnchorElement>) => {\n e.preventDefault();\n e.stopPropagation();\n }\n : onClick;\n const handleKeyDown = isDisabled\n ? (e: KeyboardEvent<HTMLAnchorElement>) => {\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault();\n e.stopPropagation();\n }\n }\n : onKeyDown;\n const anchorElement = (\n <chakra.a\n ref={ref as Ref<HTMLAnchorElement>}\n {...anchorRest}\n aria-disabled={isDisabled || undefined}\n aria-label={label}\n css={[buttonRecipe({ size, variant }), { paddingBlock: 0, paddingInline: 0 }, css]}\n href={isDisabled ? undefined : href}\n onClick={handleClick}\n onKeyDown={handleKeyDown}\n rel={effectiveRel}\n target={effectiveTarget}\n >\n <Icon size={iconSize} />\n </chakra.a>\n );\n return (\n <BitkitLabelTooltip text={label} {...tooltipProps}>\n {isSkeleton ? (\n <Skeleton asChild loading>\n {anchorElement}\n </Skeleton>\n ) : (\n anchorElement\n )}\n </BitkitLabelTooltip>\n );\n }\n\n // --- Button mode (default) ---\n const { icon: _icon, label, state, tooltipProps, ...buttonRest } = props;\n return (\n <BitkitLabelTooltip text={label} {...tooltipProps}>\n <Skeleton asChild loading={isSkeleton}>\n <IconButton\n aria-label={label}\n disabled={isDisabled}\n loading={state === 'loading'}\n ref={ref as Ref<HTMLButtonElement>}\n {...buttonRest}\n >\n <Icon size={iconSize} />\n </IconButton>\n </Skeleton>\n </BitkitLabelTooltip>\n );\n});\n\nBitkitIconButton.displayName = 'BitkitIconButton';\n\nexport default BitkitIconButton;\n"],"mappings":";;;;;;;AAqEA,IAAM,mBAAmB,YAAgD,OAAO,QAAQ;CACtF,MAAM,eAAe,UAAU,EAAE,KAAK,SAAS,CAAC;CAChD,MAAM,OAAO,MAAM;CAGnB,MAAM,YAAY,MAAM,QAAQ,UAAU,OAAO,OAAO;CACxD,MAAM,aAAa,MAAM,UAAU;CACnC,MAAM,aAAa,MAAM,UAAU;CAGnC,IAAI,MAAM,SAAS;EACjB,MAAM,EAAE,SAAS,UAAU,UAAU,MAAM,OAAO,OAAO,OAAO,cAAc,GAAG,eAAe;EAChG,MAAM,YAAY,SAAS,KAAK,QAAQ;EACxC,MAAM,oBACJ,oBAAC,YAAD;GACE,SAAA;GACA,cAAY;GACZ,UAAU;GACV,SAAS,UAAU;GACd;GACL,GAAI;GAEH,UAAA,aAAa,WAAW,EAAE,cAAc,UAAU,MAAM,iBAAiB,MAAM,GAAG,oBAAC,MAAD,EAAM,MAAM,SAAW,CAAA,CAAC;EACjG,CAAA;EAEd,OACE,oBAAC,oBAAD;GAAoB,MAAM;GAAO,GAAI;GAClC,UAAA,aACC,oBAAC,UAAD;IAAU,SAAA;IAAQ,SAAA;IACf,UAAA;GACO,CAAA,IAEV;EAEgB,CAAA;CAExB;CAGA,IAAI,MAAM,SAAS,KAAA,GAAW;EAC5B,MAAM,EACJ,KACA,MACA,MAAM,OACN,YACA,OACA,SACA,WACA,KACA,MACA,OAAO,QACP,QACA,cACA,SACA,GAAG,eACD;EACJ,MAAM,kBAAkB,aAAa,WAAW;EAChD,MAAM,eAAe,aAAc,MAAM,GAAG,IAAI,wBAAwB,wBAAyB;EACjG,MAAM,cAAc,cACf,MAAqC;GACpC,EAAE,eAAe;GACjB,EAAE,gBAAgB;EACpB,IACA;EACJ,MAAM,gBAAgB,cACjB,MAAwC;GACvC,IAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;IACtC,EAAE,eAAe;IACjB,EAAE,gBAAgB;GACpB;EACF,IACA;EACJ,MAAM,gBACJ,oBAAC,OAAO,GAAR;GACO;GACL,GAAI;GACJ,iBAAe,cAAc,KAAA;GAC7B,cAAY;GACZ,KAAK;IAAC,aAAa;KAAE;KAAM;IAAQ,CAAC;IAAG;KAAE,cAAc;KAAG,eAAe;IAAE;IAAG;GAAG;GACjF,MAAM,aAAa,KAAA,IAAY;GAC/B,SAAS;GACT,WAAW;GACX,KAAK;GACL,QAAQ;GAER,UAAA,oBAAC,MAAD,EAAM,MAAM,SAAW,CAAA;EACf,CAAA;EAEZ,OACE,oBAAC,oBAAD;GAAoB,MAAM;GAAO,GAAI;GAClC,UAAA,aACC,oBAAC,UAAD;IAAU,SAAA;IAAQ,SAAA;IACf,UAAA;GACO,CAAA,IAEV;EAEgB,CAAA;CAExB;CAGA,MAAM,EAAE,MAAM,OAAO,OAAO,OAAO,cAAc,GAAG,eAAe;CACnE,OACE,oBAAC,oBAAD;EAAoB,MAAM;EAAO,GAAI;EACnC,UAAA,oBAAC,UAAD;GAAU,SAAA;GAAQ,SAAS;GACzB,UAAA,oBAAC,YAAD;IACE,cAAY;IACZ,UAAU;IACV,SAAS,UAAU;IACd;IACL,GAAI;IAEJ,UAAA,oBAAC,MAAD,EAAM,MAAM,SAAW,CAAA;GACb,CAAA;EACJ,CAAA;CACQ,CAAA;AAExB,CAAC;AAED,iBAAiB,cAAc"}
@@ -18,7 +18,8 @@ export interface BitkitNativeSelectProps extends Omit<BitkitFieldProps, 'childre
18
18
  /** Placeholder option shown while no value is selected. */
19
19
  placeholder?: string;
20
20
  /** Escape hatch for the underlying Chakra `NativeSelect.Root` wrapper. */
21
- selectProps?: NativeSelectRootProps;
21
+ /** Escape hatch onto the underlying wrapper. `size` is owned by the prop above. */
22
+ selectProps?: Omit<NativeSelectRootProps, 'size'>;
22
23
  /** Field size — controls height and typography. */
23
24
  size?: 'md' | 'lg';
24
25
  /**
@@ -36,10 +36,10 @@ var READ_ONLY_PROPS = {
36
36
  * hatch for the underlying wrapper. Includes the standard label and helper/error/warning chrome.
37
37
  */
38
38
  var BitkitNativeSelect = forwardRef((props, ref) => {
39
- const { children, onValueChange, selectProps, size = "md", state, ...rest } = props;
39
+ const { children, onValueChange, selectProps, size = "lg", state, ...rest } = props;
40
40
  const isReadOnly = state === "readOnly";
41
41
  const [nativeFieldProps, bitkitFieldProps] = splitProps(rest, [...FIELD_PROPS]);
42
- const styles = useSlotRecipe({ key: "nativeSelect" })();
42
+ const styles = useSlotRecipe({ key: "nativeSelect" })({ size });
43
43
  const hasWarning = state === "warning" || !!bitkitFieldProps.warningText;
44
44
  const isInvalid = state === "error" || !!bitkitFieldProps.errorText;
45
45
  let statusIcon = void 0;
@@ -1 +1 @@
1
- {"version":3,"file":"BitkitNativeSelect.js","names":[],"sources":["../../../lib/components/BitkitNativeSelect/BitkitNativeSelect.tsx"],"sourcesContent":["import { NativeSelect, type NativeSelectRootProps } from '@chakra-ui/react/native-select';\nimport { useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { splitProps } from '@zag-js/utils';\nimport { type ChangeEventHandler, forwardRef, type KeyboardEvent, type MouseEvent, type ReactNode } from 'react';\n\nimport { IconErrorCircleFilled, IconWarningYellow } from '../../icons';\nimport AssetSelectChevron from '../../utilities/AssetSelectChevron.tsx';\nimport BitkitField, { type BitkitFieldProps } from '../BitkitField/BitkitField.tsx';\n\nconst FIELD_PROPS = ['defaultValue', 'name', 'onChange', 'placeholder', 'value'] as const;\n\n// Keys a closed `<select>` cannot change its value with, so read-only has no reason to swallow them:\n// Tab moves on, Escape dismisses an enclosing overlay, and Enter still submits the surrounding form.\nconst READ_ONLY_ALLOWED_KEYS: readonly string[] = ['Enter', 'Escape', 'Tab'];\n\n// A native `<select>` has no read-only mode: the browser ignores the `readonly` attribute on it, so\n// the state has to be enforced by hand. Blocking the interaction rather than the control is the\n// point of read-only over `disabled` — the field stays focusable and its value is still submitted.\nconst READ_ONLY_PROPS = {\n 'aria-readonly': true,\n onKeyDown: (event: KeyboardEvent<HTMLSelectElement>) => {\n // Ctrl/Cmd shortcuts belong to the browser and never reach the select's value. Alt is not on the\n // list: Alt+Arrow opens the dropdown.\n if (READ_ONLY_ALLOWED_KEYS.includes(event.key) || event.ctrlKey || event.metaKey) {\n return;\n }\n\n event.preventDefault();\n },\n // Preventing the default also suppresses the click's focus, which is what we want: Chrome treats a\n // clicked `<select>` as focus-visible, so the field would take the focus ring on a mere click. It\n // stays reachable by Tab, and BitkitSelect's read-only trigger shows nothing on click either.\n onMouseDown: (event: MouseEvent<HTMLSelectElement>) => {\n event.preventDefault();\n },\n} as const;\n\nexport interface BitkitNativeSelectProps extends Omit<\n BitkitFieldProps,\n 'children' | 'disabled' | 'invalid' | 'onChange' | 'readOnly'\n> {\n /** The `<option>` (and `<optgroup>`) elements to render inside the select. */\n children: ReactNode;\n /** Initially selected option value, for uncontrolled usage. */\n defaultValue?: string;\n /** Form field name submitted with the enclosing form. */\n name?: string;\n /**\n * Native `change` event of the underlying `<select>`. Reach for `onValueChange` when you only need\n * the selected value.\n */\n onChange?: ChangeEventHandler<HTMLSelectElement>;\n /** Convenience change handler that receives the selected value directly, without `event.target.value`. */\n onValueChange?: (value: string) => void;\n /** Placeholder option shown while no value is selected. */\n placeholder?: string;\n /** Escape hatch for the underlying Chakra `NativeSelect.Root` wrapper. */\n selectProps?: NativeSelectRootProps;\n /** Field size — controls height and typography. */\n size?: 'md' | 'lg';\n /**\n * Field state. `error`/`warning` are also implied by `errorText`/`warningText`. `disabled` takes the\n * field out of the form altogether; `readOnly` keeps it focusable and submitted, only pinning the\n * selected value.\n */\n state?: 'disabled' | 'error' | 'readOnly' | 'warning';\n /** Controlled selected value. Pair with `onValueChange` or the native `onChange`. */\n value?: string;\n}\n\n/**\n * A dropdown built on the native `<select>` — pass the `<option>` elements as children. Reflect the\n * selection with `value` + `onValueChange` (or the native `onChange`); `selectProps` is the escape\n * hatch for the underlying wrapper. Includes the standard label and helper/error/warning chrome.\n */\nconst BitkitNativeSelect = forwardRef<HTMLSelectElement, BitkitNativeSelectProps>(\n (props: BitkitNativeSelectProps, ref) => {\n const { children, onValueChange, selectProps, size = 'md', state, ...rest } = props;\n const isReadOnly = state === 'readOnly';\n const [nativeFieldProps, bitkitFieldProps] = splitProps(rest, [...FIELD_PROPS]);\n\n const recipe = useSlotRecipe({ key: 'nativeSelect' });\n const styles = recipe();\n\n const hasWarning = state === 'warning' || !!bitkitFieldProps.warningText;\n const isInvalid = state === 'error' || !!bitkitFieldProps.errorText;\n\n let statusIcon = undefined;\n if (isInvalid) {\n statusIcon = (\n <IconErrorCircleFilled size={size === 'lg' ? '24' : '16'} css={styles.statusIcon} color=\"icon/negative\" />\n );\n } else if (hasWarning) {\n statusIcon = <IconWarningYellow size={size === 'lg' ? '24' : '16'} css={styles.statusIcon} />;\n }\n\n // `onValueChange` fires alongside the native `onChange`, with the selected value.\n const { onChange: fieldOnChange, ...restFieldProps } = nativeFieldProps;\n const handleChange: ChangeEventHandler<HTMLSelectElement> | undefined =\n onValueChange || fieldOnChange\n ? (event) => {\n onValueChange?.(event.target.value);\n fieldOnChange?.(event);\n }\n : undefined;\n\n return (\n <BitkitField state={state} {...bitkitFieldProps}>\n <NativeSelect.Root size={size} {...selectProps} className=\"group\">\n <NativeSelect.Field\n ref={ref}\n onChange={handleChange}\n {...restFieldProps}\n {...(isReadOnly && READ_ONLY_PROPS)}\n >\n {children}\n </NativeSelect.Field>\n {statusIcon}\n <NativeSelect.Indicator asChild>\n {/*\n A read-only chevron is inert, so it takes BitkitSelect's read-only indicator colour and\n drops both affordances: hover, and focus-within — which a plain click triggers. Chakra's\n `NativeSelect.Indicator` forwards only `data-disabled`/`data-invalid`, so the recipe's\n `indicator` slot cannot see the read-only state and this has to live here.\n */}\n <AssetSelectChevron\n pointerEvents=\"none\"\n {...(isReadOnly && {\n _groupFocusWithin: { color: 'icon/on-disabled' },\n _groupHover: { color: 'icon/on-disabled' },\n color: 'icon/on-disabled',\n })}\n />\n </NativeSelect.Indicator>\n </NativeSelect.Root>\n </BitkitField>\n );\n },\n);\n\nBitkitNativeSelect.displayName = 'BitkitNativeSelect';\n\nexport default BitkitNativeSelect;\n"],"mappings":";;;;;;;;;;AASA,IAAM,cAAc;CAAC;CAAgB;CAAQ;CAAY;CAAe;AAAO;AAI/E,IAAM,yBAA4C;CAAC;CAAS;CAAU;AAAK;AAK3E,IAAM,kBAAkB;CACtB,iBAAiB;CACjB,YAAY,UAA4C;EAGtD,IAAI,uBAAuB,SAAS,MAAM,GAAG,KAAK,MAAM,WAAW,MAAM,SACvE;EAGF,MAAM,eAAe;CACvB;CAIA,cAAc,UAAyC;EACrD,MAAM,eAAe;CACvB;AACF;;;;;;AAwCA,IAAM,qBAAqB,YACxB,OAAgC,QAAQ;CACvC,MAAM,EAAE,UAAU,eAAe,aAAa,OAAO,MAAM,OAAO,GAAG,SAAS;CAC9E,MAAM,aAAa,UAAU;CAC7B,MAAM,CAAC,kBAAkB,oBAAoB,WAAW,MAAM,CAAC,GAAG,WAAW,CAAC;CAG9E,MAAM,SADS,cAAc,EAAE,KAAK,eAAe,CACpC,CAAA,CAAO;CAEtB,MAAM,aAAa,UAAU,aAAa,CAAC,CAAC,iBAAiB;CAC7D,MAAM,YAAY,UAAU,WAAW,CAAC,CAAC,iBAAiB;CAE1D,IAAI,aAAa,KAAA;CACjB,IAAI,WACF,aACE,oBAAC,uBAAD;EAAuB,MAAM,SAAS,OAAO,OAAO;EAAM,KAAK,OAAO;EAAY,OAAM;CAAiB,CAAA;MAEtG,IAAI,YACT,aAAa,oBAAC,mBAAD;EAAmB,MAAM,SAAS,OAAO,OAAO;EAAM,KAAK,OAAO;CAAa,CAAA;CAI9F,MAAM,EAAE,UAAU,eAAe,GAAG,mBAAmB;CACvD,MAAM,eACJ,iBAAiB,iBACZ,UAAU;EACT,gBAAgB,MAAM,OAAO,KAAK;EAClC,gBAAgB,KAAK;CACvB,IACA,KAAA;CAEN,OACE,oBAAC,aAAD;EAAoB;EAAO,GAAI;EAC7B,UAAA,qBAAC,aAAa,MAAd;GAAyB;GAAM,GAAI;GAAa,WAAU;GAA1D,UAAA;IACE,oBAAC,aAAa,OAAd;KACO;KACL,UAAU;KACV,GAAI;KACJ,GAAK,cAAc;KAElB;IACiB,CAAA;IACnB;IACD,oBAAC,aAAa,WAAd;KAAwB,SAAA;KAOtB,UAAA,oBAAC,oBAAD;MACE,eAAc;MACd,GAAK,cAAc;OACjB,mBAAmB,EAAE,OAAO,mBAAmB;OAC/C,aAAa,EAAE,OAAO,mBAAmB;OACzC,OAAO;MACT;KACD,CAAA;IACqB,CAAA;GACP;;CACR,CAAA;AAEjB,CACF;AAEA,mBAAmB,cAAc"}
1
+ {"version":3,"file":"BitkitNativeSelect.js","names":[],"sources":["../../../lib/components/BitkitNativeSelect/BitkitNativeSelect.tsx"],"sourcesContent":["import { NativeSelect, type NativeSelectRootProps } from '@chakra-ui/react/native-select';\nimport { useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { splitProps } from '@zag-js/utils';\nimport { type ChangeEventHandler, forwardRef, type KeyboardEvent, type MouseEvent, type ReactNode } from 'react';\n\nimport { IconErrorCircleFilled, IconWarningYellow } from '../../icons';\nimport AssetSelectChevron from '../../utilities/AssetSelectChevron.tsx';\nimport BitkitField, { type BitkitFieldProps } from '../BitkitField/BitkitField.tsx';\n\nconst FIELD_PROPS = ['defaultValue', 'name', 'onChange', 'placeholder', 'value'] as const;\n\n// Keys a closed `<select>` cannot change its value with, so read-only has no reason to swallow them:\n// Tab moves on, Escape dismisses an enclosing overlay, and Enter still submits the surrounding form.\nconst READ_ONLY_ALLOWED_KEYS: readonly string[] = ['Enter', 'Escape', 'Tab'];\n\n// A native `<select>` has no read-only mode: the browser ignores the `readonly` attribute on it, so\n// the state has to be enforced by hand. Blocking the interaction rather than the control is the\n// point of read-only over `disabled` — the field stays focusable and its value is still submitted.\nconst READ_ONLY_PROPS = {\n 'aria-readonly': true,\n onKeyDown: (event: KeyboardEvent<HTMLSelectElement>) => {\n // Ctrl/Cmd shortcuts belong to the browser and never reach the select's value. Alt is not on the\n // list: Alt+Arrow opens the dropdown.\n if (READ_ONLY_ALLOWED_KEYS.includes(event.key) || event.ctrlKey || event.metaKey) {\n return;\n }\n\n event.preventDefault();\n },\n // Preventing the default also suppresses the click's focus, which is what we want: Chrome treats a\n // clicked `<select>` as focus-visible, so the field would take the focus ring on a mere click. It\n // stays reachable by Tab, and BitkitSelect's read-only trigger shows nothing on click either.\n onMouseDown: (event: MouseEvent<HTMLSelectElement>) => {\n event.preventDefault();\n },\n} as const;\n\nexport interface BitkitNativeSelectProps extends Omit<\n BitkitFieldProps,\n 'children' | 'disabled' | 'invalid' | 'onChange' | 'readOnly'\n> {\n /** The `<option>` (and `<optgroup>`) elements to render inside the select. */\n children: ReactNode;\n /** Initially selected option value, for uncontrolled usage. */\n defaultValue?: string;\n /** Form field name submitted with the enclosing form. */\n name?: string;\n /**\n * Native `change` event of the underlying `<select>`. Reach for `onValueChange` when you only need\n * the selected value.\n */\n onChange?: ChangeEventHandler<HTMLSelectElement>;\n /** Convenience change handler that receives the selected value directly, without `event.target.value`. */\n onValueChange?: (value: string) => void;\n /** Placeholder option shown while no value is selected. */\n placeholder?: string;\n /** Escape hatch for the underlying Chakra `NativeSelect.Root` wrapper. */\n /** Escape hatch onto the underlying wrapper. `size` is owned by the prop above. */\n selectProps?: Omit<NativeSelectRootProps, 'size'>;\n /** Field size — controls height and typography. */\n size?: 'md' | 'lg';\n /**\n * Field state. `error`/`warning` are also implied by `errorText`/`warningText`. `disabled` takes the\n * field out of the form altogether; `readOnly` keeps it focusable and submitted, only pinning the\n * selected value.\n */\n state?: 'disabled' | 'error' | 'readOnly' | 'warning';\n /** Controlled selected value. Pair with `onValueChange` or the native `onChange`. */\n value?: string;\n}\n\n/**\n * A dropdown built on the native `<select>` — pass the `<option>` elements as children. Reflect the\n * selection with `value` + `onValueChange` (or the native `onChange`); `selectProps` is the escape\n * hatch for the underlying wrapper. Includes the standard label and helper/error/warning chrome.\n */\nconst BitkitNativeSelect = forwardRef<HTMLSelectElement, BitkitNativeSelectProps>(\n (props: BitkitNativeSelectProps, ref) => {\n const { children, onValueChange, selectProps, size = 'lg', state, ...rest } = props;\n const isReadOnly = state === 'readOnly';\n const [nativeFieldProps, bitkitFieldProps] = splitProps(rest, [...FIELD_PROPS]);\n\n const recipe = useSlotRecipe({ key: 'nativeSelect' });\n const styles = recipe({ size });\n\n const hasWarning = state === 'warning' || !!bitkitFieldProps.warningText;\n const isInvalid = state === 'error' || !!bitkitFieldProps.errorText;\n\n let statusIcon = undefined;\n if (isInvalid) {\n statusIcon = (\n <IconErrorCircleFilled size={size === 'lg' ? '24' : '16'} css={styles.statusIcon} color=\"icon/negative\" />\n );\n } else if (hasWarning) {\n statusIcon = <IconWarningYellow size={size === 'lg' ? '24' : '16'} css={styles.statusIcon} />;\n }\n\n // `onValueChange` fires alongside the native `onChange`, with the selected value.\n const { onChange: fieldOnChange, ...restFieldProps } = nativeFieldProps;\n const handleChange: ChangeEventHandler<HTMLSelectElement> | undefined =\n onValueChange || fieldOnChange\n ? (event) => {\n onValueChange?.(event.target.value);\n fieldOnChange?.(event);\n }\n : undefined;\n\n return (\n <BitkitField state={state} {...bitkitFieldProps}>\n <NativeSelect.Root size={size} {...selectProps} className=\"group\">\n <NativeSelect.Field\n ref={ref}\n onChange={handleChange}\n {...restFieldProps}\n {...(isReadOnly && READ_ONLY_PROPS)}\n >\n {children}\n </NativeSelect.Field>\n {statusIcon}\n <NativeSelect.Indicator asChild>\n {/*\n A read-only chevron is inert, so it takes BitkitSelect's read-only indicator colour and\n drops both affordances: hover, and focus-within — which a plain click triggers. Chakra's\n `NativeSelect.Indicator` forwards only `data-disabled`/`data-invalid`, so the recipe's\n `indicator` slot cannot see the read-only state and this has to live here.\n */}\n <AssetSelectChevron\n pointerEvents=\"none\"\n {...(isReadOnly && {\n _groupFocusWithin: { color: 'icon/on-disabled' },\n _groupHover: { color: 'icon/on-disabled' },\n color: 'icon/on-disabled',\n })}\n />\n </NativeSelect.Indicator>\n </NativeSelect.Root>\n </BitkitField>\n );\n },\n);\n\nBitkitNativeSelect.displayName = 'BitkitNativeSelect';\n\nexport default BitkitNativeSelect;\n"],"mappings":";;;;;;;;;;AASA,IAAM,cAAc;CAAC;CAAgB;CAAQ;CAAY;CAAe;AAAO;AAI/E,IAAM,yBAA4C;CAAC;CAAS;CAAU;AAAK;AAK3E,IAAM,kBAAkB;CACtB,iBAAiB;CACjB,YAAY,UAA4C;EAGtD,IAAI,uBAAuB,SAAS,MAAM,GAAG,KAAK,MAAM,WAAW,MAAM,SACvE;EAGF,MAAM,eAAe;CACvB;CAIA,cAAc,UAAyC;EACrD,MAAM,eAAe;CACvB;AACF;;;;;;AAyCA,IAAM,qBAAqB,YACxB,OAAgC,QAAQ;CACvC,MAAM,EAAE,UAAU,eAAe,aAAa,OAAO,MAAM,OAAO,GAAG,SAAS;CAC9E,MAAM,aAAa,UAAU;CAC7B,MAAM,CAAC,kBAAkB,oBAAoB,WAAW,MAAM,CAAC,GAAG,WAAW,CAAC;CAG9E,MAAM,SADS,cAAc,EAAE,KAAK,eAAe,CACpC,CAAA,CAAO,EAAE,KAAK,CAAC;CAE9B,MAAM,aAAa,UAAU,aAAa,CAAC,CAAC,iBAAiB;CAC7D,MAAM,YAAY,UAAU,WAAW,CAAC,CAAC,iBAAiB;CAE1D,IAAI,aAAa,KAAA;CACjB,IAAI,WACF,aACE,oBAAC,uBAAD;EAAuB,MAAM,SAAS,OAAO,OAAO;EAAM,KAAK,OAAO;EAAY,OAAM;CAAiB,CAAA;MAEtG,IAAI,YACT,aAAa,oBAAC,mBAAD;EAAmB,MAAM,SAAS,OAAO,OAAO;EAAM,KAAK,OAAO;CAAa,CAAA;CAI9F,MAAM,EAAE,UAAU,eAAe,GAAG,mBAAmB;CACvD,MAAM,eACJ,iBAAiB,iBACZ,UAAU;EACT,gBAAgB,MAAM,OAAO,KAAK;EAClC,gBAAgB,KAAK;CACvB,IACA,KAAA;CAEN,OACE,oBAAC,aAAD;EAAoB;EAAO,GAAI;EAC7B,UAAA,qBAAC,aAAa,MAAd;GAAyB;GAAM,GAAI;GAAa,WAAU;GAA1D,UAAA;IACE,oBAAC,aAAa,OAAd;KACO;KACL,UAAU;KACV,GAAI;KACJ,GAAK,cAAc;KAElB;IACiB,CAAA;IACnB;IACD,oBAAC,aAAa,WAAd;KAAwB,SAAA;KAOtB,UAAA,oBAAC,oBAAD;MACE,eAAc;MACd,GAAK,cAAc;OACjB,mBAAmB,EAAE,OAAO,mBAAmB;OAC/C,aAAa,EAAE,OAAO,mBAAmB;OACzC,OAAO;MACT;KACD,CAAA;IACqB,CAAA;GACP;;CACR,CAAA;AAEjB,CACF;AAEA,mBAAmB,cAAc"}
@@ -8,7 +8,7 @@ export interface BitkitNumberInputProps extends Omit<BitkitFieldProps, 'children
8
8
  * `formatOptions`, plus its detail-rich `onValueChange`. On conflict, values here win over the
9
9
  * top-level `value`/`onValueChange`.
10
10
  */
11
- inputProps?: NumberInputRootProps;
11
+ inputProps?: Omit<NumberInputRootProps, 'size'>;
12
12
  /**
13
13
  * Convenience change handler that receives the value directly. For Ark's full details (including
14
14
  * `valueAsNumber`), use `inputProps.onValueChange`. The object wins if both are set.
@@ -17,7 +17,7 @@ import { NumberInput } from "@chakra-ui/react/number-input";
17
17
  * the standard label and helper/error/warning chrome.
18
18
  */
19
19
  var BitkitNumberInput = forwardRef((props, ref) => {
20
- const { defaultValue, inputProps, onValueChange, size, state, value, ...fieldProps } = props;
20
+ const { defaultValue, inputProps, onValueChange, size = "lg", state, value, ...fieldProps } = props;
21
21
  const hasWarning = state === "warning" || !!fieldProps.warningText;
22
22
  const isInvalid = state === "error" || !!fieldProps.errorText;
23
23
  let statusIcon = void 0;
@@ -53,9 +53,9 @@ var BitkitNumberInput = forwardRef((props, ref) => {
53
53
  }),
54
54
  /* @__PURE__ */ jsx(NumberInput.DecrementTrigger, {
55
55
  _before: statusIcon ? triggerSeparatorStyle : void 0,
56
- children: /* @__PURE__ */ jsx(IconMinus, { size: size === "lg" ? "24" : "16" })
56
+ children: /* @__PURE__ */ jsx(IconMinus, { size: "16" })
57
57
  }),
58
- /* @__PURE__ */ jsx(NumberInput.IncrementTrigger, { children: /* @__PURE__ */ jsx(IconPlus, { size: size === "lg" ? "24" : "16" }) })
58
+ /* @__PURE__ */ jsx(NumberInput.IncrementTrigger, { children: /* @__PURE__ */ jsx(IconPlus, { size: "16" }) })
59
59
  ] }), /* @__PURE__ */ jsx(NumberInput.Input, {})]
60
60
  })
61
61
  });
@@ -1 +1 @@
1
- {"version":3,"file":"BitkitNumberInput.js","names":[],"sources":["../../../lib/components/BitkitNumberInput/BitkitNumberInput.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { NumberInput, type NumberInputRootProps } from '@chakra-ui/react/number-input';\nimport { forwardRef } from 'react';\n\nimport { IconErrorCircleFilled, IconMinus, IconPlus, IconWarningYellow } from '../../icons';\nimport { triggerSeparatorStyle } from '../../theme/slot-recipes/NumberInput.recipe';\nimport { rem } from '../../theme/themeUtils';\nimport BitkitField, { type BitkitFieldProps } from '../BitkitField/BitkitField';\n\nexport interface BitkitNumberInputProps extends Omit<\n BitkitFieldProps,\n 'children' | 'disabled' | 'invalid' | 'readOnly'\n> {\n /** Initial value for uncontrolled usage (a string, as Ark tracks the value as a string). */\n defaultValue?: string;\n /**\n * Escape hatch for Ark's `NumberInput.Root` — options like `min`, `max`, `step`, or\n * `formatOptions`, plus its detail-rich `onValueChange`. On conflict, values here win over the\n * top-level `value`/`onValueChange`.\n */\n inputProps?: NumberInputRootProps;\n /**\n * Convenience change handler that receives the value directly. For Ark's full details (including\n * `valueAsNumber`), use `inputProps.onValueChange`. The object wins if both are set.\n */\n onValueChange?: (value: string) => void;\n /** Field size — controls height and typography. */\n size?: 'md' | 'lg';\n /**\n * Field state. `error`/`warning` are also implied by `errorText`/`warningText`; `disabled` and\n * `readOnly` gate interaction.\n */\n state?: 'disabled' | 'error' | 'readOnly' | 'warning';\n /**\n * Controlled value (a string). Pair with `onValueChange`. Can also be supplied via `inputProps`,\n * which wins on conflict.\n */\n value?: string;\n}\n\n/**\n * A numeric field with increment/decrement steppers, built on Ark's NumberInput. Reflect the value\n * with `value` + `onValueChange` (a string), or start uncontrolled with `defaultValue`; use\n * `inputProps` for Ark options like `min`/`max`/`step` and its detail-rich `onValueChange`. Includes\n * the standard label and helper/error/warning chrome.\n */\nconst BitkitNumberInput = forwardRef<HTMLDivElement, BitkitNumberInputProps>((props: BitkitNumberInputProps, ref) => {\n const { defaultValue, inputProps, onValueChange, size, state, value, ...fieldProps } = props;\n\n const hasWarning = state === 'warning' || !!fieldProps.warningText;\n const isInvalid = state === 'error' || !!fieldProps.errorText;\n\n let statusIcon = undefined;\n if (isInvalid) {\n statusIcon = <IconErrorCircleFilled size={size === 'lg' ? '24' : '16'} color=\"icon/negative\" />;\n } else if (hasWarning) {\n statusIcon = <IconWarningYellow size={size === 'lg' ? '24' : '16'} />;\n }\n\n // `value` / `onValueChange` may come in at the top level or via `inputProps` — the object wins on\n // conflict. The top-level `onValueChange` gets the string value; `inputProps.onValueChange` still\n // fires with Ark's full details.\n const { onValueChange: rootOnValueChange, value: rootValue, ...restInputProps } = inputProps ?? {};\n const resolvedValue = rootValue ?? value;\n const handleValueChange: NumberInputRootProps['onValueChange'] =\n onValueChange || rootOnValueChange\n ? (details) => {\n onValueChange?.(details.value);\n rootOnValueChange?.(details);\n }\n : undefined;\n\n return (\n <BitkitField ref={ref} state={state} {...fieldProps}>\n <NumberInput.Root\n css={statusIcon ? { '--control-width': rem(150) } : undefined}\n defaultValue={defaultValue}\n onValueChange={handleValueChange}\n size={size}\n value={resolvedValue}\n {...restInputProps}\n >\n <NumberInput.Control>\n {statusIcon && (\n <Box paddingInline=\"12\" display=\"flex\" alignItems=\"center\" justifyContent=\"center\">\n {statusIcon}\n </Box>\n )}\n <NumberInput.DecrementTrigger _before={statusIcon ? triggerSeparatorStyle : undefined}>\n <IconMinus size={size === 'lg' ? '24' : '16'} />\n </NumberInput.DecrementTrigger>\n <NumberInput.IncrementTrigger>\n <IconPlus size={size === 'lg' ? '24' : '16'} />\n </NumberInput.IncrementTrigger>\n </NumberInput.Control>\n <NumberInput.Input />\n </NumberInput.Root>\n </BitkitField>\n );\n});\n\nBitkitNumberInput.displayName = 'BitkitNumberInput';\n\nexport default BitkitNumberInput;\n"],"mappings":";;;;;;;;;;;;;;;;;;AA8CA,IAAM,oBAAoB,YAAoD,OAA+B,QAAQ;CACnH,MAAM,EAAE,cAAc,YAAY,eAAe,MAAM,OAAO,OAAO,GAAG,eAAe;CAEvF,MAAM,aAAa,UAAU,aAAa,CAAC,CAAC,WAAW;CACvD,MAAM,YAAY,UAAU,WAAW,CAAC,CAAC,WAAW;CAEpD,IAAI,aAAa,KAAA;CACjB,IAAI,WACF,aAAa,oBAAC,uBAAD;EAAuB,MAAM,SAAS,OAAO,OAAO;EAAM,OAAM;CAAiB,CAAA;MACzF,IAAI,YACT,aAAa,oBAAC,mBAAD,EAAmB,MAAM,SAAS,OAAO,OAAO,KAAO,CAAA;CAMtE,MAAM,EAAE,eAAe,mBAAmB,OAAO,WAAW,GAAG,mBAAmB,cAAc,CAAC;CACjG,MAAM,gBAAgB,aAAa;CACnC,MAAM,oBACJ,iBAAiB,qBACZ,YAAY;EACX,gBAAgB,QAAQ,KAAK;EAC7B,oBAAoB,OAAO;CAC7B,IACA,KAAA;CAEN,OACE,oBAAC,aAAD;EAAkB;EAAY;EAAO,GAAI;EACvC,UAAA,qBAAC,YAAY,MAAb;GACE,KAAK,aAAa,EAAE,mBAAmB,IAAI,GAAG,EAAE,IAAI,KAAA;GACtC;GACd,eAAe;GACT;GACN,OAAO;GACP,GAAI;GANN,UAAA,CAQE,qBAAC,YAAY,SAAb,EAAA,UAAA;IACG,cACC,oBAAC,KAAD;KAAK,eAAc;KAAK,SAAQ;KAAO,YAAW;KAAS,gBAAe;KACvE,UAAA;IACE,CAAA;IAEP,oBAAC,YAAY,kBAAb;KAA8B,SAAS,aAAa,wBAAwB,KAAA;KAC1E,UAAA,oBAAC,WAAD,EAAW,MAAM,SAAS,OAAO,OAAO,KAAO,CAAA;IACnB,CAAA;IAC9B,oBAAC,YAAY,kBAAb,EAAA,UACE,oBAAC,UAAD,EAAU,MAAM,SAAS,OAAO,OAAO,KAAO,CAAA,EAClB,CAAA;GACX,EAAA,CAAA,GACrB,oBAAC,YAAY,OAAb,CAAoB,CAAA,CACJ;;CACP,CAAA;AAEjB,CAAC;AAED,kBAAkB,cAAc"}
1
+ {"version":3,"file":"BitkitNumberInput.js","names":[],"sources":["../../../lib/components/BitkitNumberInput/BitkitNumberInput.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { NumberInput, type NumberInputRootProps } from '@chakra-ui/react/number-input';\nimport { forwardRef } from 'react';\n\nimport { IconErrorCircleFilled, IconMinus, IconPlus, IconWarningYellow } from '../../icons';\nimport { triggerSeparatorStyle } from '../../theme/slot-recipes/NumberInput.recipe';\nimport { rem } from '../../theme/themeUtils';\nimport BitkitField, { type BitkitFieldProps } from '../BitkitField/BitkitField';\n\nexport interface BitkitNumberInputProps extends Omit<\n BitkitFieldProps,\n 'children' | 'disabled' | 'invalid' | 'readOnly'\n> {\n /** Initial value for uncontrolled usage (a string, as Ark tracks the value as a string). */\n defaultValue?: string;\n /**\n * Escape hatch for Ark's `NumberInput.Root` — options like `min`, `max`, `step`, or\n * `formatOptions`, plus its detail-rich `onValueChange`. On conflict, values here win over the\n * top-level `value`/`onValueChange`.\n */\n inputProps?: Omit<NumberInputRootProps, 'size'>;\n /**\n * Convenience change handler that receives the value directly. For Ark's full details (including\n * `valueAsNumber`), use `inputProps.onValueChange`. The object wins if both are set.\n */\n onValueChange?: (value: string) => void;\n /** Field size — controls height and typography. */\n size?: 'md' | 'lg';\n /**\n * Field state. `error`/`warning` are also implied by `errorText`/`warningText`; `disabled` and\n * `readOnly` gate interaction.\n */\n state?: 'disabled' | 'error' | 'readOnly' | 'warning';\n /**\n * Controlled value (a string). Pair with `onValueChange`. Can also be supplied via `inputProps`,\n * which wins on conflict.\n */\n value?: string;\n}\n\n/**\n * A numeric field with increment/decrement steppers, built on Ark's NumberInput. Reflect the value\n * with `value` + `onValueChange` (a string), or start uncontrolled with `defaultValue`; use\n * `inputProps` for Ark options like `min`/`max`/`step` and its detail-rich `onValueChange`. Includes\n * the standard label and helper/error/warning chrome.\n */\nconst BitkitNumberInput = forwardRef<HTMLDivElement, BitkitNumberInputProps>((props: BitkitNumberInputProps, ref) => {\n const { defaultValue, inputProps, onValueChange, size = 'lg', state, value, ...fieldProps } = props;\n\n const hasWarning = state === 'warning' || !!fieldProps.warningText;\n const isInvalid = state === 'error' || !!fieldProps.errorText;\n\n let statusIcon = undefined;\n if (isInvalid) {\n statusIcon = <IconErrorCircleFilled size={size === 'lg' ? '24' : '16'} color=\"icon/negative\" />;\n } else if (hasWarning) {\n statusIcon = <IconWarningYellow size={size === 'lg' ? '24' : '16'} />;\n }\n\n // `value` / `onValueChange` may come in at the top level or via `inputProps` — the object wins on\n // conflict. The top-level `onValueChange` gets the string value; `inputProps.onValueChange` still\n // fires with Ark's full details.\n const { onValueChange: rootOnValueChange, value: rootValue, ...restInputProps } = inputProps ?? {};\n const resolvedValue = rootValue ?? value;\n const handleValueChange: NumberInputRootProps['onValueChange'] =\n onValueChange || rootOnValueChange\n ? (details) => {\n onValueChange?.(details.value);\n rootOnValueChange?.(details);\n }\n : undefined;\n\n return (\n <BitkitField ref={ref} state={state} {...fieldProps}>\n <NumberInput.Root\n css={statusIcon ? { '--control-width': rem(150) } : undefined}\n defaultValue={defaultValue}\n onValueChange={handleValueChange}\n size={size}\n value={resolvedValue}\n {...restInputProps}\n >\n <NumberInput.Control>\n {statusIcon && (\n <Box paddingInline=\"12\" display=\"flex\" alignItems=\"center\" justifyContent=\"center\">\n {statusIcon}\n </Box>\n )}\n <NumberInput.DecrementTrigger _before={statusIcon ? triggerSeparatorStyle : undefined}>\n <IconMinus size=\"16\" />\n </NumberInput.DecrementTrigger>\n <NumberInput.IncrementTrigger>\n <IconPlus size=\"16\" />\n </NumberInput.IncrementTrigger>\n </NumberInput.Control>\n <NumberInput.Input />\n </NumberInput.Root>\n </BitkitField>\n );\n});\n\nBitkitNumberInput.displayName = 'BitkitNumberInput';\n\nexport default BitkitNumberInput;\n"],"mappings":";;;;;;;;;;;;;;;;;;AA8CA,IAAM,oBAAoB,YAAoD,OAA+B,QAAQ;CACnH,MAAM,EAAE,cAAc,YAAY,eAAe,OAAO,MAAM,OAAO,OAAO,GAAG,eAAe;CAE9F,MAAM,aAAa,UAAU,aAAa,CAAC,CAAC,WAAW;CACvD,MAAM,YAAY,UAAU,WAAW,CAAC,CAAC,WAAW;CAEpD,IAAI,aAAa,KAAA;CACjB,IAAI,WACF,aAAa,oBAAC,uBAAD;EAAuB,MAAM,SAAS,OAAO,OAAO;EAAM,OAAM;CAAiB,CAAA;MACzF,IAAI,YACT,aAAa,oBAAC,mBAAD,EAAmB,MAAM,SAAS,OAAO,OAAO,KAAO,CAAA;CAMtE,MAAM,EAAE,eAAe,mBAAmB,OAAO,WAAW,GAAG,mBAAmB,cAAc,CAAC;CACjG,MAAM,gBAAgB,aAAa;CACnC,MAAM,oBACJ,iBAAiB,qBACZ,YAAY;EACX,gBAAgB,QAAQ,KAAK;EAC7B,oBAAoB,OAAO;CAC7B,IACA,KAAA;CAEN,OACE,oBAAC,aAAD;EAAkB;EAAY;EAAO,GAAI;EACvC,UAAA,qBAAC,YAAY,MAAb;GACE,KAAK,aAAa,EAAE,mBAAmB,IAAI,GAAG,EAAE,IAAI,KAAA;GACtC;GACd,eAAe;GACT;GACN,OAAO;GACP,GAAI;GANN,UAAA,CAQE,qBAAC,YAAY,SAAb,EAAA,UAAA;IACG,cACC,oBAAC,KAAD;KAAK,eAAc;KAAK,SAAQ;KAAO,YAAW;KAAS,gBAAe;KACvE,UAAA;IACE,CAAA;IAEP,oBAAC,YAAY,kBAAb;KAA8B,SAAS,aAAa,wBAAwB,KAAA;KAC1E,UAAA,oBAAC,WAAD,EAAW,MAAK,KAAM,CAAA;IACM,CAAA;IAC9B,oBAAC,YAAY,kBAAb,EAAA,UACE,oBAAC,UAAD,EAAU,MAAK,KAAM,CAAA,EACO,CAAA;GACX,EAAA,CAAA,GACrB,oBAAC,YAAY,OAAb,CAAoB,CAAA,CACJ;;CACP,CAAA;AAEjB,CAAC;AAED,kBAAkB,cAAc"}
@@ -11,7 +11,7 @@ export type BitkitSelectProps = Omit<BitkitFieldProps, 'children' | 'state'> & {
11
11
  onValueChange?: (newVal: string) => void;
12
12
  placeholder?: string;
13
13
  disablePortal?: boolean;
14
- selectProps?: Omit<SelectRootProps, 'collection' | 'defaultValue' | 'onValueChange' | 'value'>;
14
+ selectProps?: Omit<SelectRootProps, 'collection' | 'defaultValue' | 'onValueChange' | 'size' | 'value'>;
15
15
  size?: 'md' | 'lg';
16
16
  state?: 'disabled' | 'error' | 'readOnly' | 'warning';
17
17
  triggerProps?: BitkitSelectTriggerProps;
@@ -25,7 +25,7 @@ declare const _default: import('react').ForwardRefExoticComponent<Omit<BitkitFie
25
25
  onValueChange?: (newVal: string) => void;
26
26
  placeholder?: string;
27
27
  disablePortal?: boolean;
28
- selectProps?: Omit<SelectRootProps, "collection" | "defaultValue" | "onValueChange" | "value">;
28
+ selectProps?: Omit<SelectRootProps, "collection" | "defaultValue" | "onValueChange" | "size" | "value">;
29
29
  size?: "md" | "lg";
30
30
  state?: "disabled" | "error" | "readOnly" | "warning";
31
31
  triggerProps?: BitkitSelectTriggerProps;
@@ -22,7 +22,7 @@ var SelectValue = ({ placeholder, state, size }) => {
22
22
  const Icon = items[0]?.icon;
23
23
  const avatar = items[0]?.avatar;
24
24
  const label = items[0]?.label;
25
- const { avatarSize, iconSize } = selectSizeMap[size ?? "lg"];
25
+ const { avatarSize, iconSize } = selectSizeMap[size];
26
26
  const styles = useSlotRecipe({ key: "select" })({ size });
27
27
  return items[0] ? /* @__PURE__ */ jsxs(Select.ValueText, {
28
28
  placeholder: placeholder ?? (state === "readOnly" ? "(not selected)" : "Select an option"),
@@ -56,7 +56,7 @@ var SelectValue = ({ placeholder, state, size }) => {
56
56
  });
57
57
  };
58
58
  var BitkitSelect = forwardRef((props, ref) => {
59
- const { children, defaultValue, emptyHelperText, emptyLabel, isLoading, items, onSearchChange, onValueChange, placeholder, disablePortal, searchValue, selectProps, size, state, triggerProps, value, ...fieldProps } = props;
59
+ const { children, defaultValue, emptyHelperText, emptyLabel, isLoading, items, onSearchChange, onValueChange, placeholder, disablePortal, searchValue, selectProps, size = "lg", state, triggerProps, value, ...fieldProps } = props;
60
60
  const collection = createListCollection({
61
61
  items,
62
62
  groupBy: (item) => item.group || "",
@@ -1 +1 @@
1
- {"version":3,"file":"BitkitSelect.js","names":[],"sources":["../../../lib/components/BitkitSelect/BitkitSelect.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { createListCollection } from '@chakra-ui/react/collection';\nimport { Portal } from '@chakra-ui/react/portal';\nimport { Select, type SelectRootProps, type SelectTriggerProps, useSelectContext } from '@chakra-ui/react/select';\nimport { useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { Text } from '@chakra-ui/react/text';\nimport { forwardRef, useContext } from 'react';\n\nimport { IconErrorCircleFilled, IconWarningYellow } from '../../icons';\nimport AssetSelectChevron from '../../utilities/AssetSelectChevron.tsx';\nimport BitkitPortalContext from '../../utilities/BitkitPortalContext';\nimport { withSubComponents } from '../../utilities/withSubComponents.ts';\nimport BitkitAvatar from '../BitkitAvatar/BitkitAvatar';\nimport BitkitField, { type BitkitFieldProps } from '../BitkitField/BitkitField.tsx';\nimport BitkitSelectMenu, {\n type BitkitSelectMenuEmptyStateProps,\n type BitkitSelectMenuItemProps,\n type BitkitSelectMenuSearchProps,\n} from '../BitkitSelectMenu/BitkitSelectMenu.tsx';\nimport BitkitSelectMenuAction, {\n type BitkitSelectMenuActionChild,\n} from '../BitkitSelectMenu/BitkitSelectMenuAction.tsx';\nimport { selectSizeMap } from '../BitkitSelectMenu/SelectMenuShell.tsx';\n\nexport type BitkitSelectTriggerProps = SelectTriggerProps;\n\nexport type BitkitSelectProps = Omit<BitkitFieldProps, 'children' | 'state'> & {\n children?: BitkitSelectMenuActionChild;\n defaultValue?: string;\n isLoading?: boolean;\n items: Array<BitkitSelectMenuItemProps>;\n onValueChange?: (newVal: string) => void;\n placeholder?: string;\n disablePortal?: boolean;\n selectProps?: Omit<SelectRootProps, 'collection' | 'defaultValue' | 'onValueChange' | 'value'>;\n size?: 'md' | 'lg';\n state?: 'disabled' | 'error' | 'readOnly' | 'warning';\n triggerProps?: BitkitSelectTriggerProps;\n value?: string;\n} & BitkitSelectMenuSearchProps &\n BitkitSelectMenuEmptyStateProps;\n\ntype SelectValueProps = {\n placeholder?: string;\n size: BitkitSelectProps['size'];\n state?: BitkitSelectProps['state'];\n};\n\nconst SelectValue = ({ placeholder, state, size }: SelectValueProps) => {\n const select = useSelectContext();\n const items = select.selectedItems as Array<BitkitSelectMenuItemProps>;\n\n const Icon = items[0]?.icon;\n const avatar = items[0]?.avatar;\n const label = items[0]?.label;\n\n const { avatarSize, iconSize } = selectSizeMap[size ?? 'lg'];\n\n const recipe = useSlotRecipe({ key: 'select' });\n const styles = recipe({ size });\n\n return items[0] ? (\n <Select.ValueText placeholder={placeholder ?? (state === 'readOnly' ? '(not selected)' : 'Select an option')}>\n {avatar ? (\n // Same avatar handling as the menu item (see BitkitSelectMenu.tsx). The `data-slot`\n // lets the trigger recipe shrink its vertical padding so the avatar row keeps the\n // 48/40 trigger height (see the `&:has([data-slot=\"avatar\"])` rule in Select.recipe.ts).\n <Box data-slot=\"avatar\" css={styles.avatar}>\n <BitkitAvatar variant=\"image\" src={avatar} name={label} size={avatarSize} />\n </Box>\n ) : (\n Icon && <Icon css={styles.valueIcon} size={iconSize} flexShrink={0} />\n )}\n <Text as=\"span\" overflow=\"hidden\" textOverflow=\"ellipsis\" whiteSpace=\"nowrap\" minWidth=\"0\">\n {label}\n </Text>\n </Select.ValueText>\n ) : (\n <Select.ValueText\n placeholder={placeholder ?? (state === 'readOnly' ? '(not selected)' : 'Select an option')}\n display=\"block\"\n overflow=\"hidden\"\n textOverflow=\"ellipsis\"\n whiteSpace=\"nowrap\"\n />\n );\n};\n\nconst BitkitSelect = forwardRef<HTMLDivElement, BitkitSelectProps>((props: BitkitSelectProps, ref) => {\n const {\n children,\n defaultValue,\n emptyHelperText,\n emptyLabel,\n isLoading,\n items,\n onSearchChange,\n onValueChange,\n placeholder,\n disablePortal,\n searchValue,\n selectProps,\n size,\n state,\n triggerProps,\n value,\n ...fieldProps\n } = props;\n\n const collection = createListCollection({\n items,\n groupBy: (item) => item.group || '',\n isItemDisabled: (item) => !!item.disabled,\n });\n\n const { disablePortal: disablePortalFromContext } = useContext(BitkitPortalContext);\n const isInvalid = state === 'error' || !!fieldProps.errorText;\n\n return (\n <BitkitField ref={ref} state={state} {...fieldProps}>\n <Select.Root\n collection={collection}\n size={size}\n {...selectProps}\n defaultValue={defaultValue ? [defaultValue] : undefined}\n disabled={state === 'disabled'}\n hasStatusIcon={state === 'error' || state === 'warning'}\n invalid={isInvalid}\n onValueChange={(newVal) => onValueChange?.(newVal.value[0])}\n readOnly={state === 'readOnly'}\n // Bypass Zag's isScrollable(contentEl) gate — our Content is overflow:hidden flex\n // column, so the real scroll container is itemList. See BitkitMultiselect for why.\n scrollToIndexFn={({ getElement }) => getElement()?.scrollIntoView({ block: 'nearest' })}\n // Stay controlled whenever `value` is provided — including `''` (\"nothing selected\"). A\n // truthiness check (`value ? … : undefined`) passes `undefined` for `''`, which flips\n // Select.Root to uncontrolled: it then ignores `value`, so resets don't take and\n // onValueChange stops firing when the same option is re-selected.\n value={value === undefined ? undefined : value ? [value] : []}\n >\n <Select.HiddenSelect />\n <Select.Control className=\"group\">\n <Select.Trigger {...triggerProps}>\n <SelectValue placeholder={placeholder} size={size} state={state} />\n </Select.Trigger>\n <Select.IndicatorGroup>\n {state === 'error' && (\n <Select.Indicator>\n <IconErrorCircleFilled size={size === 'lg' ? '24' : '16'} color=\"icon/negative\" />\n </Select.Indicator>\n )}\n {state === 'warning' && (\n <Select.Indicator>\n <IconWarningYellow size={size === 'lg' ? '24' : '16'} />\n </Select.Indicator>\n )}\n <Select.Indicator asChild>\n <AssetSelectChevron />\n </Select.Indicator>\n </Select.IndicatorGroup>\n </Select.Control>\n <Portal disabled={disablePortal || disablePortalFromContext}>\n <Select.Positioner>\n <BitkitSelectMenu\n collection={collection}\n emptyHelperText={emptyHelperText}\n emptyLabel={emptyLabel}\n isLoading={isLoading}\n onSearchChange={onSearchChange}\n searchValue={searchValue}\n size={size}\n >\n {children}\n </BitkitSelectMenu>\n </Select.Positioner>\n </Portal>\n </Select.Root>\n </BitkitField>\n );\n});\n\nBitkitSelect.displayName = 'BitkitSelect';\n\nexport default withSubComponents(BitkitSelect, { Action: BitkitSelectMenuAction });\n"],"mappings":"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"}
1
+ {"version":3,"file":"BitkitSelect.js","names":[],"sources":["../../../lib/components/BitkitSelect/BitkitSelect.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { createListCollection } from '@chakra-ui/react/collection';\nimport { Portal } from '@chakra-ui/react/portal';\nimport { Select, type SelectRootProps, type SelectTriggerProps, useSelectContext } from '@chakra-ui/react/select';\nimport { useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { Text } from '@chakra-ui/react/text';\nimport { forwardRef, useContext } from 'react';\n\nimport { IconErrorCircleFilled, IconWarningYellow } from '../../icons';\nimport AssetSelectChevron from '../../utilities/AssetSelectChevron.tsx';\nimport BitkitPortalContext from '../../utilities/BitkitPortalContext';\nimport { withSubComponents } from '../../utilities/withSubComponents.ts';\nimport BitkitAvatar from '../BitkitAvatar/BitkitAvatar';\nimport BitkitField, { type BitkitFieldProps } from '../BitkitField/BitkitField.tsx';\nimport BitkitSelectMenu, {\n type BitkitSelectMenuEmptyStateProps,\n type BitkitSelectMenuItemProps,\n type BitkitSelectMenuSearchProps,\n} from '../BitkitSelectMenu/BitkitSelectMenu.tsx';\nimport BitkitSelectMenuAction, {\n type BitkitSelectMenuActionChild,\n} from '../BitkitSelectMenu/BitkitSelectMenuAction.tsx';\nimport { selectSizeMap } from '../BitkitSelectMenu/SelectMenuShell.tsx';\n\nexport type BitkitSelectTriggerProps = SelectTriggerProps;\n\nexport type BitkitSelectProps = Omit<BitkitFieldProps, 'children' | 'state'> & {\n children?: BitkitSelectMenuActionChild;\n defaultValue?: string;\n isLoading?: boolean;\n items: Array<BitkitSelectMenuItemProps>;\n onValueChange?: (newVal: string) => void;\n placeholder?: string;\n disablePortal?: boolean;\n selectProps?: Omit<SelectRootProps, 'collection' | 'defaultValue' | 'onValueChange' | 'size' | 'value'>;\n size?: 'md' | 'lg';\n state?: 'disabled' | 'error' | 'readOnly' | 'warning';\n triggerProps?: BitkitSelectTriggerProps;\n value?: string;\n} & BitkitSelectMenuSearchProps &\n BitkitSelectMenuEmptyStateProps;\n\ntype SelectValueProps = {\n placeholder?: string;\n size: NonNullable<BitkitSelectProps['size']>;\n state?: BitkitSelectProps['state'];\n};\n\nconst SelectValue = ({ placeholder, state, size }: SelectValueProps) => {\n const select = useSelectContext();\n const items = select.selectedItems as Array<BitkitSelectMenuItemProps>;\n\n const Icon = items[0]?.icon;\n const avatar = items[0]?.avatar;\n const label = items[0]?.label;\n\n const { avatarSize, iconSize } = selectSizeMap[size];\n\n const recipe = useSlotRecipe({ key: 'select' });\n const styles = recipe({ size });\n\n return items[0] ? (\n <Select.ValueText placeholder={placeholder ?? (state === 'readOnly' ? '(not selected)' : 'Select an option')}>\n {avatar ? (\n // Same avatar handling as the menu item (see BitkitSelectMenu.tsx). The `data-slot`\n // lets the trigger recipe shrink its vertical padding so the avatar row keeps the\n // 48/40 trigger height (see the `&:has([data-slot=\"avatar\"])` rule in Select.recipe.ts).\n <Box data-slot=\"avatar\" css={styles.avatar}>\n <BitkitAvatar variant=\"image\" src={avatar} name={label} size={avatarSize} />\n </Box>\n ) : (\n Icon && <Icon css={styles.valueIcon} size={iconSize} flexShrink={0} />\n )}\n <Text as=\"span\" overflow=\"hidden\" textOverflow=\"ellipsis\" whiteSpace=\"nowrap\" minWidth=\"0\">\n {label}\n </Text>\n </Select.ValueText>\n ) : (\n <Select.ValueText\n placeholder={placeholder ?? (state === 'readOnly' ? '(not selected)' : 'Select an option')}\n display=\"block\"\n overflow=\"hidden\"\n textOverflow=\"ellipsis\"\n whiteSpace=\"nowrap\"\n />\n );\n};\n\nconst BitkitSelect = forwardRef<HTMLDivElement, BitkitSelectProps>((props: BitkitSelectProps, ref) => {\n const {\n children,\n defaultValue,\n emptyHelperText,\n emptyLabel,\n isLoading,\n items,\n onSearchChange,\n onValueChange,\n placeholder,\n disablePortal,\n searchValue,\n selectProps,\n size = 'lg',\n state,\n triggerProps,\n value,\n ...fieldProps\n } = props;\n\n const collection = createListCollection({\n items,\n groupBy: (item) => item.group || '',\n isItemDisabled: (item) => !!item.disabled,\n });\n\n const { disablePortal: disablePortalFromContext } = useContext(BitkitPortalContext);\n const isInvalid = state === 'error' || !!fieldProps.errorText;\n\n return (\n <BitkitField ref={ref} state={state} {...fieldProps}>\n <Select.Root\n collection={collection}\n size={size}\n {...selectProps}\n defaultValue={defaultValue ? [defaultValue] : undefined}\n disabled={state === 'disabled'}\n hasStatusIcon={state === 'error' || state === 'warning'}\n invalid={isInvalid}\n onValueChange={(newVal) => onValueChange?.(newVal.value[0])}\n readOnly={state === 'readOnly'}\n // Bypass Zag's isScrollable(contentEl) gate — our Content is overflow:hidden flex\n // column, so the real scroll container is itemList. See BitkitMultiselect for why.\n scrollToIndexFn={({ getElement }) => getElement()?.scrollIntoView({ block: 'nearest' })}\n // Stay controlled whenever `value` is provided — including `''` (\"nothing selected\"). A\n // truthiness check (`value ? … : undefined`) passes `undefined` for `''`, which flips\n // Select.Root to uncontrolled: it then ignores `value`, so resets don't take and\n // onValueChange stops firing when the same option is re-selected.\n value={value === undefined ? undefined : value ? [value] : []}\n >\n <Select.HiddenSelect />\n <Select.Control className=\"group\">\n <Select.Trigger {...triggerProps}>\n <SelectValue placeholder={placeholder} size={size} state={state} />\n </Select.Trigger>\n <Select.IndicatorGroup>\n {state === 'error' && (\n <Select.Indicator>\n <IconErrorCircleFilled size={size === 'lg' ? '24' : '16'} color=\"icon/negative\" />\n </Select.Indicator>\n )}\n {state === 'warning' && (\n <Select.Indicator>\n <IconWarningYellow size={size === 'lg' ? '24' : '16'} />\n </Select.Indicator>\n )}\n <Select.Indicator asChild>\n <AssetSelectChevron />\n </Select.Indicator>\n </Select.IndicatorGroup>\n </Select.Control>\n <Portal disabled={disablePortal || disablePortalFromContext}>\n <Select.Positioner>\n <BitkitSelectMenu\n collection={collection}\n emptyHelperText={emptyHelperText}\n emptyLabel={emptyLabel}\n isLoading={isLoading}\n onSearchChange={onSearchChange}\n searchValue={searchValue}\n size={size}\n >\n {children}\n </BitkitSelectMenu>\n </Select.Positioner>\n </Portal>\n </Select.Root>\n </BitkitField>\n );\n});\n\nBitkitSelect.displayName = 'BitkitSelect';\n\nexport default withSubComponents(BitkitSelect, { Action: BitkitSelectMenuAction });\n"],"mappings":"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"}
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@bitrise/bitkit-v2",
3
3
  "private": false,
4
- "version": "0.3.376",
4
+ "version": "0.3.377",
5
5
  "description": "Bitrise Design System Components built with Chakra UI V3",
6
6
  "keywords": [
7
7
  "react",