npm - @keboola/design - Versions diffs - 13.1.3 → 14.0.0 - Mend

@keboola/design 13.1.3 → 14.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (347) hide show

package/dist/{Search-DmkQo716.js.map → Search-aaUMI4ix.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Search-DmkQo716.js","names":["SearchIcon"],"sources":["../src/components/Search/ClearButton.tsx","../src/components/Search/styles.ts","../src/components/Search/utils.ts","../src/components/Search/Search.tsx","../src/components/Search/SearchForm.tsx"],"sourcesContent":["import type { MouseEventHandler } from 'react';\n\nimport { X } from '../../icons';\nimport { cn } from '../../utils';\n\ntype Props = {\n onClick: MouseEventHandler<HTMLButtonElement>;\n testId?: string;\n};\n\nexport const ClearButton = ({ onClick, testId }: Props) => {\n // Prevent default, as we do not want to lose input focus.\n const handleMouseDown: MouseEventHandler<HTMLButtonElement> = (event) => {\n event.preventDefault();\n };\n\n return (\n <button\n type=\"button\"\n onClick={onClick}\n tabIndex={-1} // clear button should not be focusable\n onMouseDown={handleMouseDown}\n className={cn(\n // reset\n 'tw:border-none',\n 'tw:bg-transparent',\n 'tw:p-0',\n\n // positioning\n 'tw:flex',\n 'tw:items-center',\n\n 'tw:cursor-pointer',\n 'tw:text-muted-foreground',\n 'tw:hover:text-foreground',\n )}\n data-testid={testId}\n >\n <X className=\"tw:size-4\" />\n </button>\n );\n};\n","import { cva } from 'class-variance-authority';\n\nexport const searchWrapperVariants = cva(\n [\n // positioning\n 'tw:flex',\n 'tw:items-center',\n 'tw:gap-2.5',\n\n // base\n 'tw:text-card-foreground',\n 'tw:transition-all',\n 'tw:font-sans',\n\n // readonly — `secondary` over `muted`, which is too close to the `card` fill to\n // read as non-editable in either scheme\n 'tw:has-[input[readonly]]:bg-secondary',\n 'tw:has-[input[readonly]]:focus-within:ring-0',\n 'tw:has-[input[readonly]]:outline-0',\n\n // disabled\n 'tw:disabled:opacity-40',\n\n // default input padding (was sizing.default)\n 'tw:[&>input]:py-[15px]',\n ],\n {\n defaultVariants: {\n variant: 'default',\n },\n variants: {\n variant: {\n default: [\n 'tw:rounded-lg',\n 'tw:px-5',\n 'tw:bg-card',\n 'tw:shadow-raised',\n // outline\n 'tw:outline',\n 'tw:outline-1',\n 'tw:outline-transparent',\n // focus\n 'tw:has-[input:focus]:outline-1',\n 'tw:has-[input:focus]:ring-4',\n 'tw:has-[input:focus]:outline-ring',\n 'tw:has-[input:focus]:ring-ring/30',\n ],\n ai: [\n 'tailwindcss-preflight',\n 'tw:relative',\n 'tw:rounded-card',\n 'tw:px-4',\n 'tw:cursor-text',\n 'tw:border-2',\n 'tw:border-transparent',\n 'tw:bg-gradient-to-br',\n 'tw:from-secondary-600',\n 'tw:to-purple-600',\n 'tw:bg-origin-border',\n // Floods the interior so the gradient shows only in the 2px border box.\n 'tw:shadow-[inset_0_100vw_rgb(var(--card))]',\n // focus\n 'tw:has-[input:focus]:ring-4',\n 'tw:has-[input:focus]:ring-ring/30',\n ],\n },\n },\n },\n);\n\nexport const searchInputClassnames = [\n // reset\n 'tw:border-none',\n 'tw:bg-transparent',\n 'tw:outline-hidden',\n 'tw:w-full',\n 'tw:p-0',\n\n // base\n 'tw:text-base',\n 'tw:leading-6',\n 'tw:font-normal',\n 'tw:font-sans',\n\n // placeholder\n 'tw:placeholder:text-muted-foreground',\n\n // disabled\n 'tw:disabled:cursor-not-allowed',\n].join(' ');\n","import { createPrefixedString } from '../../utils';\n\nexport const genSearchTestId = (prefix: string = '') => {\n const ps = createPrefixedString(prefix);\n return {\n toString: () => prefix,\n wrapper: ps`search-wrapper`,\n input: ps`search-input`,\n clearButton: ps`search-clear-button`,\n };\n};\n","import { useEffect, useMemo, useState } from 'react';\nimport type {\n ChangeEvent,\n ChangeEventHandler,\n ComponentProps,\n FocusEvent,\n FocusEventHandler,\n MouseEvent,\n MouseEventHandler,\n ReactNode,\n} from 'react';\n\nimport { Search as SearchIcon, Sparkles } from '../../icons';\nimport { cn, debounce, noop } from '../../utils';\n\nimport { ClearButton } from './ClearButton';\nimport { searchInputClassnames, searchWrapperVariants } from './styles';\nimport { genSearchTestId } from './utils';\n\ntype SearchChangeEventHandler = (\n value: string,\n event: ChangeEvent<HTMLInputElement> \| MouseEvent<HTMLButtonElement>,\n) => void;\n\ntype SearchBlurEventHandler = (value: string, event: FocusEvent<HTMLInputElement, Element>) => void;\n\ntype Props = {\n suffix?: ReactNode;\n disableDebounce?: boolean;\n debounceDelay?: number;\n onChange?: SearchChangeEventHandler;\n onBlur?: SearchBlurEventHandler;\n value?: string \| null;\n defaultValue?: string \| null;\n testId?: string;\n onClear?: () => void;\n variant?: 'default' \| 'ai';\n} & Omit<\n ComponentProps<'input'>,\n 'type' \| 'onBlur' \| 'onChange' \| 'value' \| 'defaultValue' \| 'prefix' \| 'suffix'\n>;\n\n/*\n @deprecated Use `SearchInput` instead. `Search` is kept only for the legacy (non-sidebar) layout.\n /\nexport const Search = ({\n ref,\n suffix,\n className,\n onBlur,\n onChange = noop,\n disabled = false,\n readOnly = false,\n disableDebounce = false,\n debounceDelay = 300,\n value: externalValue,\n defaultValue,\n testId: prefixTestId = '',\n placeholder = 'Search',\n onClear,\n variant = 'default',\n ...rest\n}: Props) => {\n const [internalValue, setInternalValue] = useState(() =>\n externalValue != null ? externalValue : defaultValue,\n );\n const hasValue = internalValue !== '';\n\n const isClearButtonVisible = hasValue && !disabled && !readOnly;\n const testId = genSearchTestId(prefixTestId);\n\n const debouncedOnChange = useMemo(\n () => (disableDebounce ? onChange : debounce(onChange, debounceDelay)),\n [disableDebounce, debounceDelay, onChange],\n );\n\n useEffect(() => {\n if (externalValue == null) return; // uncontrolled state\n // oxlint-disable-next-line react-x/set-state-in-effect\n setInternalValue(externalValue);\n }, [externalValue]);\n\n const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n const currentValue = event.target.value;\n setInternalValue(currentValue);\n debouncedOnChange(currentValue, event);\n };\n\n const handleBlur: FocusEventHandler<HTMLInputElement> = (event) => {\n const currentValue = event.target.value;\n setInternalValue(currentValue);\n onBlur?.(currentValue, event);\n };\n\n const handleClear: MouseEventHandler<HTMLButtonElement> = (event) => {\n setInternalValue('');\n onChange?.('', event);\n onClear?.();\n };\n\n // Clicking anywhere in the field that isn't an interactive control (the leading icon,\n // the empty chrome) focuses the input — the whole pill acts as one click target.\n const handleWrapperMouseDown: MouseEventHandler<HTMLDivElement> = (event) => {\n if (disabled \|\| readOnly) return;\n if ((event.target as HTMLElement).closest('button, a, input, textarea, [role=\"button\"]')) {\n return;\n }\n event.preventDefault();\n event.currentTarget.querySelector('input')?.focus();\n };\n\n return (\n // Mouse-only convenience: clicking the chrome focuses the input. The input itself is the\n // real interactive/focusable target, so no extra role or key handler is needed here.\n // oxlint-disable-next-line jsx-a11y/no-static-element-interactions\n <div\n className={cn(\n searchWrapperVariants({ variant }),\n {\n 'tw:cursor-not-allowed tw:opacity-40': disabled,\n },\n className,\n )}\n data-testid={testId.wrapper}\n onMouseDown={handleWrapperMouseDown}\n >\n {variant === 'ai' ? (\n <Sparkles className=\"tw:size-4 tw:shrink-0 tw:[&_]:stroke-aigradient-600\" />\n ) : (\n <SearchIcon className=\"tw:size-4 tw:shrink-0 tw:text-neutral-400\" />\n )}\n\n <input\n {...rest}\n ref={ref}\n placeholder={placeholder}\n data-testid={testId.input}\n type=\"text\"\n value={internalValue ?? ''}\n onChange={handleChange}\n onBlur={handleBlur}\n className={searchInputClassnames}\n disabled={disabled}\n readOnly={readOnly}\n />\n\n {isClearButtonVisible && <ClearButton onClick={handleClear} testId={testId.clearButton} />}\n\n {suffix}\n </div>\n );\n};\n","import type { ComponentProps, FormEventHandler } from 'react';\n\nimport { Search } from './Search';\n\ntype Props = {\n onSubmit: (value: string) => void;\n} & Omit<ComponentProps<typeof Search>, 'onClear' \| 'onBlur' \| 'onSubmit'>;\n\nexport const SearchForm = ({ ref, onSubmit, name = 'search-field', ...props }: Props) => {\n const handleSubmit: FormEventHandler<HTMLFormElement> = (event) => {\n event.preventDefault();\n const searchEl = event.currentTarget.elements.namedItem(name) as HTMLInputElement;\n onSubmit(searchEl.value);\n };\n\n const onClear = () => {\n onSubmit('');\n };\n\n return (\n <form onSubmit={handleSubmit}>\n <Search\n {...props}\n ref={ref}\n onClear={onClear}\n name={name}\n // Debounce has no meaning when we use submit, which is triggered by pressing enter.\n disableDebounce\n />\n </form>\n );\n};\n"],"mappings":";;;;;;;AAUA,MAAa,eAAe,EAAE,SAAS,aAAoB;CAEzD,MAAM,mBAAyD,UAAU;EACvE,MAAM,eAAe;CACvB;CAEA,OACE,oBAAC,UAAD;EACE,MAAK;EACI;EACT,UAAU;EACV,aAAa;EACb,WAAW,GAET,kBACA,qBACA,UAGA,WACA,mBAEA,qBACA,4BACA,0BACF;EACA,eAAa;EAEb,UAAA,oBAAC,GAAD,EAAG,WAAU,YAAa,CAAA;CACpB,CAAA;AAEZ;;;ACvCA,MAAa,wBAAwB,IACnC;CAEE;CACA;CACA;CAGA;CACA;CACA;CAIA;CACA;CACA;CAGA;CAGA;AACF,GACA;CACE,iBAAiB,EACf,SAAS,UACX;CACA,UAAU,EACR,SAAS;EACP,SAAS;GACP;GACA;GACA;GACA;GAEA;GACA;GACA;GAEA;GACA;GACA;GACA;EACF;EACA,IAAI;GACF;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GAEA;GAEA;GACA;EACF;CACF,EACF;AACF,CACF;AAEA,MAAa,wBAAwB;CAEnC;CACA;CACA;CACA;CACA;CAGA;CACA;CACA;CACA;CAGA;CAGA;AACF,CAAC,CAAC,KAAK,GAAG;;;ACvFV,MAAa,mBAAmB,SAAiB,OAAO;CACtD,MAAM,KAAK,qBAAqB,MAAM;CACtC,OAAO;EACL,gBAAgB;EAChB,SAAS,EAAE;EACX,OAAO,EAAE;EACT,aAAa,EAAE;CACjB;AACF;;;;;;ACmCA,MAAa,UAAU,EACrB,KACA,QACA,WACA,QACA,WAAW,MACX,WAAW,OACX,WAAW,OACX,kBAAkB,OAClB,gBAAgB,KAChB,OAAO,eACP,cACA,QAAQ,eAAe,IACvB,cAAc,UACd,SACA,UAAU,WACV,GAAG,WACQ;CACX,MAAM,CAAC,eAAe,oBAAoB,eACxC,iBAAiB,OAAO,gBAAgB,YAC1C;CAGA,MAAM,uBAFW,kBAAkB,MAEM,CAAC,YAAY,CAAC;CACvD,MAAM,SAAS,gBAAgB,YAAY;CAE3C,MAAM,oBAAoB,cACjB,kBAAkB,WAAW,SAAS,UAAU,aAAa,GACpE;EAAC;EAAiB;EAAe;CAAQ,CAC3C;CAEA,gBAAgB;EACd,IAAI,iBAAiB,MAAM;EAE3B,iBAAiB,aAAa;CAChC,GAAG,CAAC,aAAa,CAAC;CAElB,MAAM,gBAAsD,UAAU;EACpE,MAAM,eAAe,MAAM,OAAO;EAClC,iBAAiB,YAAY;EAC7B,kBAAkB,cAAc,KAAK;CACvC;CAEA,MAAM,cAAmD,UAAU;EACjE,MAAM,eAAe,MAAM,OAAO;EAClC,iBAAiB,YAAY;EAC7B,SAAS,cAAc,KAAK;CAC9B;CAEA,MAAM,eAAqD,UAAU;EACnE,iBAAiB,EAAE;EACnB,WAAW,IAAI,KAAK;EACpB,UAAU;CACZ;CAIA,MAAM,0BAA6D,UAAU;EAC3E,IAAI,YAAY,UAAU;EAC1B,IAAK,MAAM,OAAuB,QAAQ,+CAA6C,GACrF;EAEF,MAAM,eAAe;EACrB,MAAM,cAAc,cAAc,OAAO,CAAC,EAAE,MAAM;CACpD;CAEA,OAIE,qBAAC,OAAD;EACE,WAAW,GACT,sBAAsB,EAAE,QAAQ,CAAC,GACjC,EACE,uCAAuC,SACzC,GACA,SACF;EACA,eAAa,OAAO;EACpB,aAAa;EATf,UAAA;GAWG,YAAY,OACX,oBAAC,UAAD,EAAU,WAAU,uDAAwD,CAAA,IAE5E,oBAACA,UAAD,EAAY,WAAU,4CAA6C,CAAA;GAGrE,oBAAC,SAAD;IACE,GAAI;IACC;IACQ;IACb,eAAa,OAAO;IACpB,MAAK;IACL,OAAO,iBAAiB;IACxB,UAAU;IACV,QAAQ;IACR,WAAW;IACD;IACA;GACX,CAAA;GAEA,wBAAwB,oBAAC,aAAD;IAAa,SAAS;IAAa,QAAQ,OAAO;GAAc,CAAA;GAExF;EACE;;AAET;;;AC/IA,MAAa,cAAc,EAAE,KAAK,UAAU,OAAO,gBAAgB,GAAG,YAAmB;CACvF,MAAM,gBAAmD,UAAU;EACjE,MAAM,eAAe;EAErB,SADiB,MAAM,cAAc,SAAS,UAAU,IACxC,CAAC,CAAC,KAAK;CACzB;CAEA,MAAM,gBAAgB;EACpB,SAAS,EAAE;CACb;CAEA,OACE,oBAAC,QAAD;EAAM,UAAU;EACd,UAAA,oBAAC,QAAD;GACE,GAAI;GACC;GACI;GACH;GAEN,iBAAA;EACD,CAAA;CACG,CAAA;AAEV"}
1	+ {"version":3,"file":"Search-aaUMI4ix.js","names":["SearchIcon"],"sources":["../src/components/Search/ClearButton.tsx","../src/components/Search/styles.ts","../src/components/Search/utils.ts","../src/components/Search/Search.tsx","../src/components/Search/SearchForm.tsx"],"sourcesContent":["import type { MouseEventHandler } from 'react';\n\nimport { X } from '../../icons';\nimport { cn } from '../../utils';\n\ntype Props = {\n onClick: MouseEventHandler<HTMLButtonElement>;\n testId?: string;\n};\n\nexport const ClearButton = ({ onClick, testId }: Props) => {\n // Prevent default, as we do not want to lose input focus.\n const handleMouseDown: MouseEventHandler<HTMLButtonElement> = (event) => {\n event.preventDefault();\n };\n\n return (\n <button\n type=\"button\"\n onClick={onClick}\n tabIndex={-1} // clear button should not be focusable\n onMouseDown={handleMouseDown}\n className={cn(\n // reset\n 'tw:border-none',\n 'tw:bg-transparent',\n 'tw:p-0',\n\n // positioning\n 'tw:flex',\n 'tw:items-center',\n\n 'tw:cursor-pointer',\n 'tw:text-muted-foreground',\n 'tw:hover:text-foreground',\n )}\n data-testid={testId}\n >\n <X className=\"tw:size-4\" />\n </button>\n );\n};\n","import { cva } from 'class-variance-authority';\n\nexport const searchWrapperVariants = cva(\n [\n // positioning\n 'tw:flex',\n 'tw:items-center',\n 'tw:gap-2.5',\n\n // base\n 'tw:text-card-foreground',\n 'tw:transition-all',\n 'tw:font-sans',\n\n // readonly — `secondary` over `muted`, which is too close to the `card` fill to\n // read as non-editable in either scheme\n 'tw:has-[input[readonly]]:bg-secondary',\n 'tw:has-[input[readonly]]:focus-within:ring-0',\n 'tw:has-[input[readonly]]:outline-0',\n\n // disabled\n 'tw:disabled:opacity-40',\n\n // default input padding (was sizing.default)\n 'tw:[&>input]:py-[15px]',\n ],\n {\n defaultVariants: {\n variant: 'default',\n },\n variants: {\n variant: {\n default: [\n 'tw:rounded-lg',\n 'tw:px-5',\n 'tw:bg-card',\n 'tw:shadow-raised',\n // outline\n 'tw:outline',\n 'tw:outline-1',\n 'tw:outline-transparent',\n // focus\n 'tw:has-[input:focus]:outline-1',\n 'tw:has-[input:focus]:ring-4',\n 'tw:has-[input:focus]:outline-ring',\n 'tw:has-[input:focus]:ring-ring/30',\n ],\n ai: [\n 'tailwindcss-preflight',\n 'tw:relative',\n 'tw:rounded-card',\n 'tw:px-4',\n 'tw:cursor-text',\n 'tw:border-2',\n 'tw:border-transparent',\n 'tw:bg-gradient-to-br',\n 'tw:from-secondary-600',\n 'tw:to-purple-600',\n 'tw:bg-origin-border',\n // Floods the interior so the gradient shows only in the 2px border box.\n 'tw:shadow-[inset_0_100vw_rgb(var(--card))]',\n // focus\n 'tw:has-[input:focus]:ring-4',\n 'tw:has-[input:focus]:ring-ring/30',\n ],\n },\n },\n },\n);\n\nexport const searchInputClassnames = [\n // reset\n 'tw:border-none',\n 'tw:bg-transparent',\n 'tw:outline-hidden',\n 'tw:w-full',\n 'tw:p-0',\n\n // base\n 'tw:text-base',\n 'tw:leading-6',\n 'tw:font-normal',\n 'tw:font-sans',\n\n // placeholder\n 'tw:placeholder:text-muted-foreground',\n\n // disabled\n 'tw:disabled:cursor-not-allowed',\n].join(' ');\n","import { createPrefixedString } from '../../utils';\n\nexport const genSearchTestId = (prefix: string = '') => {\n const ps = createPrefixedString(prefix);\n return {\n toString: () => prefix,\n wrapper: ps`search-wrapper`,\n input: ps`search-input`,\n clearButton: ps`search-clear-button`,\n };\n};\n","import { useEffect, useMemo, useState } from 'react';\nimport type {\n ChangeEvent,\n ChangeEventHandler,\n ComponentProps,\n FocusEvent,\n FocusEventHandler,\n MouseEvent,\n MouseEventHandler,\n ReactNode,\n} from 'react';\n\nimport { Search as SearchIcon, Sparkles } from '../../icons';\nimport { cn, debounce, noop } from '../../utils';\n\nimport { ClearButton } from './ClearButton';\nimport { searchInputClassnames, searchWrapperVariants } from './styles';\nimport { genSearchTestId } from './utils';\n\ntype SearchChangeEventHandler = (\n value: string,\n event: ChangeEvent<HTMLInputElement> \| MouseEvent<HTMLButtonElement>,\n) => void;\n\ntype SearchBlurEventHandler = (value: string, event: FocusEvent<HTMLInputElement, Element>) => void;\n\ntype Props = {\n suffix?: ReactNode;\n disableDebounce?: boolean;\n debounceDelay?: number;\n onChange?: SearchChangeEventHandler;\n onBlur?: SearchBlurEventHandler;\n value?: string \| null;\n defaultValue?: string \| null;\n testId?: string;\n onClear?: () => void;\n variant?: 'default' \| 'ai';\n} & Omit<\n ComponentProps<'input'>,\n 'type' \| 'onBlur' \| 'onChange' \| 'value' \| 'defaultValue' \| 'prefix' \| 'suffix'\n>;\n\n/*\n @deprecated Use `SearchInput` instead. `Search` is kept only for the legacy (non-sidebar) layout.\n /\nexport const Search = ({\n ref,\n suffix,\n className,\n onBlur,\n onChange = noop,\n disabled = false,\n readOnly = false,\n disableDebounce = false,\n debounceDelay = 300,\n value: externalValue,\n defaultValue,\n testId: prefixTestId = '',\n placeholder = 'Search',\n onClear,\n variant = 'default',\n ...rest\n}: Props) => {\n const [internalValue, setInternalValue] = useState(() =>\n externalValue != null ? externalValue : defaultValue,\n );\n const hasValue = internalValue !== '';\n\n const isClearButtonVisible = hasValue && !disabled && !readOnly;\n const testId = genSearchTestId(prefixTestId);\n\n const debouncedOnChange = useMemo(\n () => (disableDebounce ? onChange : debounce(onChange, debounceDelay)),\n [disableDebounce, debounceDelay, onChange],\n );\n\n useEffect(() => {\n if (externalValue == null) return; // uncontrolled state\n // oxlint-disable-next-line react-x/set-state-in-effect\n setInternalValue(externalValue);\n }, [externalValue]);\n\n const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n const currentValue = event.target.value;\n setInternalValue(currentValue);\n debouncedOnChange(currentValue, event);\n };\n\n const handleBlur: FocusEventHandler<HTMLInputElement> = (event) => {\n const currentValue = event.target.value;\n setInternalValue(currentValue);\n onBlur?.(currentValue, event);\n };\n\n const handleClear: MouseEventHandler<HTMLButtonElement> = (event) => {\n setInternalValue('');\n onChange?.('', event);\n onClear?.();\n };\n\n // Clicking anywhere in the field that isn't an interactive control (the leading icon,\n // the empty chrome) focuses the input — the whole pill acts as one click target.\n const handleWrapperMouseDown: MouseEventHandler<HTMLDivElement> = (event) => {\n if (disabled \|\| readOnly) return;\n if ((event.target as HTMLElement).closest('button, a, input, textarea, [role=\"button\"]')) {\n return;\n }\n event.preventDefault();\n event.currentTarget.querySelector('input')?.focus();\n };\n\n return (\n // Mouse-only convenience: clicking the chrome focuses the input. The input itself is the\n // real interactive/focusable target, so no extra role or key handler is needed here.\n // oxlint-disable-next-line jsx-a11y/no-static-element-interactions\n <div\n className={cn(\n searchWrapperVariants({ variant }),\n {\n 'tw:cursor-not-allowed tw:opacity-40': disabled,\n },\n className,\n )}\n data-testid={testId.wrapper}\n onMouseDown={handleWrapperMouseDown}\n >\n {variant === 'ai' ? (\n <Sparkles className=\"tw:size-4 tw:shrink-0 tw:[&_]:stroke-aigradient-600\" />\n ) : (\n <SearchIcon className=\"tw:size-4 tw:shrink-0 tw:text-neutral-400\" />\n )}\n\n <input\n {...rest}\n ref={ref}\n placeholder={placeholder}\n data-testid={testId.input}\n type=\"text\"\n value={internalValue ?? ''}\n onChange={handleChange}\n onBlur={handleBlur}\n className={searchInputClassnames}\n disabled={disabled}\n readOnly={readOnly}\n />\n\n {isClearButtonVisible && <ClearButton onClick={handleClear} testId={testId.clearButton} />}\n\n {suffix}\n </div>\n );\n};\n","import type { ComponentProps, FormEventHandler } from 'react';\n\nimport { Search } from './Search';\n\ntype Props = {\n onSubmit: (value: string) => void;\n} & Omit<ComponentProps<typeof Search>, 'onClear' \| 'onBlur' \| 'onSubmit'>;\n\nexport const SearchForm = ({ ref, onSubmit, name = 'search-field', ...props }: Props) => {\n const handleSubmit: FormEventHandler<HTMLFormElement> = (event) => {\n event.preventDefault();\n const searchEl = event.currentTarget.elements.namedItem(name) as HTMLInputElement;\n onSubmit(searchEl.value);\n };\n\n const onClear = () => {\n onSubmit('');\n };\n\n return (\n <form onSubmit={handleSubmit}>\n <Search\n {...props}\n ref={ref}\n onClear={onClear}\n name={name}\n // Debounce has no meaning when we use submit, which is triggered by pressing enter.\n disableDebounce\n />\n </form>\n );\n};\n"],"mappings":"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"}

package/dist/{SearchInput-D3qMkHaW.js → SearchInput-Dxi2GK4n.js} RENAMED Viewed

@@ -1,6 +1,6 @@
-import { debounce } from "./utils-Bd28bWgm.js";
-import { Search, X } from "./icons-wcA70iQx.js";
-import { InputGroup } from "./InputGroup-CrlMRz4X.js";
+import { debounce } from "./utils-LQ4jJA-9.js";
+import { Search, X } from "./icons-ZIeZXXS7.js";
+import { InputGroup } from "./InputGroup-Dm014ruw.js";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/blocks/SearchInput/SearchInput.tsx
@@ -94,4 +94,4 @@ const SearchInput = ({ ref, state, variant, focusVariant, sizing, className, val
 //#endregion
 export { SearchInput };
-//# sourceMappingURL=SearchInput-D3qMkHaW.js.map
+//# sourceMappingURL=SearchInput-Dxi2GK4n.js.map

package/dist/{SearchInput-D3qMkHaW.js.map → SearchInput-Dxi2GK4n.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SearchInput-~~D3qMkHaW~~.js","names":[],"sources":["../src/blocks/SearchInput/SearchInput.tsx"],"sourcesContent":["import { useEffect, useMemo, useRef, useState } from 'react';\nimport type { ChangeEventHandler, ComponentProps, FocusEventHandler } from 'react';\n\nimport { InputGroup } from '../../components/InputGroup';\nimport { Search, X } from '../../icons';\nimport { debounce } from '../../utils';\n\ntype InputGroupProps = Pick<\n ComponentProps<typeof InputGroup>,\n 'variant' \| 'focusVariant' \| 'state' \| 'sizing'\n>;\n\ntype InputGroupInputProps = Omit<ComponentProps<typeof InputGroup.Input>, 'value' \| 'defaultValue'>;\n\n/*\n - `onValueChange` is debounced by default (300ms).\n * - `value={null}` / `undefined` is uncontrolled (falls back to `defaultValue`, else empty).\n * - `value={\"\"}` is controlled-empty.\n /\ntype Props = InputGroupProps &\n InputGroupInputProps & {\n value?: string \| null;\n defaultValue?: string \| null;\n /* Debounced; fires synchronously on clear and with `disableDebounce`. Use `onChange` per keystroke. /\n onValueChange?: (value: string) => void;\n /* Called with the value on blur. /\n onValueBlur?: (value: string) => void;\n onClear?: () => void;\n /* Shows the clear (x) button while the value is non-empty. /\n allowClear?: boolean;\n /* `onValueChange` fires on every keystroke. /\n disableDebounce?: boolean;\n /* In ms, default 300; ignored with `disableDebounce`. /\n debounceDelay?: number;\n };\n\n/\n Debounced search input with a search icon and optional clear button.\n \n - Use for list / table search and free-text filters, e.g. in `PageToolbar.Search`.\n * - Not for plain text (`TextInput`) or picking from a known list (`Combobox`).\n \n @see RECIPES.md#filter-toolbar\n */\nexport const SearchInput = ({\n ref,\n\n // group props\n state,\n variant,\n focusVariant,\n sizing,\n className,\n\n // own props\n value: valueProp,\n defaultValue,\n onValueChange,\n onValueBlur,\n onChange,\n onBlur,\n onClear,\n allowClear = false,\n disableDebounce = false,\n debounceDelay = 300,\n\n // input props\n disabled,\n readOnly,\n ...restInputProps\n}: Props) => {\n const [internalValue, setInternalValue] = useState<string>(\n valueProp != null ? valueProp : (defaultValue ?? ''),\n );\n\n // A pending debounced call; the controlled-value sync skips while set so typed characters survive.\n const debounceInFlightRef = useRef(false);\n const cancelRef = useRef<() => void>(() => {});\n\n const debouncedOnValueChange = useMemo(() => {\n if (!onValueChange \|\| disableDebounce) {\n cancelRef.current = () => {};\n return onValueChange;\n }\n const d = debounce((val: string) => {\n debounceInFlightRef.current = false;\n onValueChange(val);\n }, debounceDelay);\n cancelRef.current = d.cancel;\n return d;\n }, [onValueChange, disableDebounce, debounceDelay]);\n\n useEffect(() => {\n return () => cancelRef.current();\n }, [debouncedOnValueChange]);\n\n // Skipped while a debounced call is in flight, so the input doesn't snap back mid-typing.\n useEffect(() => {\n if (valueProp == null) return;\n if (debounceInFlightRef.current) return;\n setInternalValue(valueProp);\n }, [valueProp]);\n\n const canClear = allowClear && !!internalValue && !disabled && !readOnly;\n\n const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n const val = event.target.value;\n setInternalValue(val);\n if (!disableDebounce && debouncedOnValueChange) debounceInFlightRef.current = true;\n debouncedOnValueChange?.(val);\n onChange?.(event);\n };\n\n const handleBlur: FocusEventHandler<HTMLInputElement> = (event) => {\n onValueBlur?.(event.target.value);\n onBlur?.(event);\n };\n\n const handleClear = () => {\n cancelRef.current();\n debounceInFlightRef.current = false;\n setInternalValue('');\n onValueChange?.('');\n onClear?.();\n };\n\n return (\n <InputGroup\n state={state}\n variant={variant}\n sizing={sizing}\n focusVariant={focusVariant}\n className={className}\n >\n <InputGroup.Addon align=\"inline-start\">\n <Search className=\"tw:size-4 tw:shrink-0 tw:text-muted-foreground\" />\n </InputGroup.Addon>\n\n <InputGroup.Input\n {...restInputProps}\n ref={ref}\n value={internalValue}\n onChange={handleChange}\n onBlur={handleBlur}\n disabled={disabled}\n readOnly={readOnly}\n />\n\n {canClear && (\n <InputGroup.Addon align=\"inline-end\">\n <InputGroup.Button\n aria-label=\"Clear search\"\n onMouseDown={(event) => event.preventDefault()}\n onClick={handleClear}\n >\n <X className=\"tw:size-4\" />\n </InputGroup.Button>\n </InputGroup.Addon>\n )}\n </InputGroup>\n );\n};\n"],"mappings":";;;;;;;;;;;;;;AA4CA,MAAa,eAAe,EAC1B,KAGA,OACA,SACA,cACA,QACA,WAGA,OAAO,WACP,cACA,eACA,aACA,UACA,QACA,SACA,aAAa,OACb,kBAAkB,OAClB,gBAAgB,KAGhB,UACA,UACA,GAAG,qBACQ;CACX,MAAM,CAAC,eAAe,oBAAoB,SACxC,aAAa,OAAO,YAAa,gBAAgB,EACnD;CAGA,MAAM,sBAAsB,OAAO,KAAK;CACxC,MAAM,YAAY,aAAyB,CAAC,CAAC;CAE7C,MAAM,yBAAyB,cAAc;EAC3C,IAAI,CAAC,iBAAiB,iBAAiB;GACrC,UAAU,gBAAgB,CAAC;GAC3B,OAAO;EACT;EACA,MAAM,IAAI,UAAU,QAAgB;GAClC,oBAAoB,UAAU;GAC9B,cAAc,GAAG;EACnB,GAAG,aAAa;EAChB,UAAU,UAAU,EAAE;EACtB,OAAO;CACT,GAAG;EAAC;EAAe;EAAiB;CAAa,CAAC;CAElD,gBAAgB;EACd,aAAa,UAAU,QAAQ;CACjC,GAAG,CAAC,sBAAsB,CAAC;CAG3B,gBAAgB;EACd,IAAI,aAAa,MAAM;EACvB,IAAI,oBAAoB,SAAS;EACjC,iBAAiB,SAAS;CAC5B,GAAG,CAAC,SAAS,CAAC;CAEd,MAAM,WAAW,cAAc,CAAC,CAAC,iBAAiB,CAAC,YAAY,CAAC;CAEhE,MAAM,gBAAsD,UAAU;EACpE,MAAM,MAAM,MAAM,OAAO;EACzB,iBAAiB,GAAG;EACpB,IAAI,CAAC,mBAAmB,wBAAwB,oBAAoB,UAAU;EAC9E,yBAAyB,GAAG;EAC5B,WAAW,KAAK;CAClB;CAEA,MAAM,cAAmD,UAAU;EACjE,cAAc,MAAM,OAAO,KAAK;EAChC,SAAS,KAAK;CAChB;CAEA,MAAM,oBAAoB;EACxB,UAAU,QAAQ;EAClB,oBAAoB,UAAU;EAC9B,iBAAiB,EAAE;EACnB,gBAAgB,EAAE;EAClB,UAAU;CACZ;CAEA,OACE,qBAAC,YAAD;EACS;EACE;EACD;EACM;EACH;EALb,UAAA;GAOE,oBAAC,WAAW,OAAZ;IAAkB,OAAM;IACtB,UAAA,oBAAC,QAAD,EAAQ,WAAU,iDAAkD,CAAA;GACpD,CAAA;GAElB,oBAAC,WAAW,OAAZ;IACE,GAAI;IACC;IACL,OAAO;IACP,UAAU;IACV,QAAQ;IACE;IACA;GACX,CAAA;GAEA,YACC,oBAAC,WAAW,OAAZ;IAAkB,OAAM;IACtB,UAAA,oBAAC,WAAW,QAAZ;KACE,cAAW;KACX,cAAc,UAAU,MAAM,eAAe;KAC7C,SAAS;KAET,UAAA,oBAAC,GAAD,EAAG,WAAU,YAAa,CAAA;IACT,CAAA;GACH,CAAA;EAEV;;AAEhB"}
1	+ {"version":3,"file":"SearchInput-Dxi2GK4n.js","names":[],"sources":["../src/blocks/SearchInput/SearchInput.tsx"],"sourcesContent":["import { useEffect, useMemo, useRef, useState } from 'react';\nimport type { ChangeEventHandler, ComponentProps, FocusEventHandler } from 'react';\n\nimport { InputGroup } from '../../components/InputGroup';\nimport { Search, X } from '../../icons';\nimport { debounce } from '../../utils';\n\ntype InputGroupProps = Pick<\n ComponentProps<typeof InputGroup>,\n 'variant' \| 'focusVariant' \| 'state' \| 'sizing'\n>;\n\ntype InputGroupInputProps = Omit<ComponentProps<typeof InputGroup.Input>, 'value' \| 'defaultValue'>;\n\n/*\n - `onValueChange` is debounced by default (300ms).\n * - `value={null}` / `undefined` is uncontrolled (falls back to `defaultValue`, else empty).\n * - `value={\"\"}` is controlled-empty.\n /\ntype Props = InputGroupProps &\n InputGroupInputProps & {\n value?: string \| null;\n defaultValue?: string \| null;\n /* Debounced; fires synchronously on clear and with `disableDebounce`. Use `onChange` per keystroke. /\n onValueChange?: (value: string) => void;\n /* Called with the value on blur. /\n onValueBlur?: (value: string) => void;\n onClear?: () => void;\n /* Shows the clear (x) button while the value is non-empty. /\n allowClear?: boolean;\n /* `onValueChange` fires on every keystroke. /\n disableDebounce?: boolean;\n /* In ms, default 300; ignored with `disableDebounce`. /\n debounceDelay?: number;\n };\n\n/\n Debounced search input with a search icon and optional clear button.\n \n - Use for list / table search and free-text filters, e.g. in `PageToolbar.Search`.\n * - Not for plain text (`TextInput`) or picking from a known list (`Combobox`).\n \n @see RECIPES.md#filter-toolbar\n */\nexport const SearchInput = ({\n ref,\n\n // group props\n state,\n variant,\n focusVariant,\n sizing,\n className,\n\n // own props\n value: valueProp,\n defaultValue,\n onValueChange,\n onValueBlur,\n onChange,\n onBlur,\n onClear,\n allowClear = false,\n disableDebounce = false,\n debounceDelay = 300,\n\n // input props\n disabled,\n readOnly,\n ...restInputProps\n}: Props) => {\n const [internalValue, setInternalValue] = useState<string>(\n valueProp != null ? valueProp : (defaultValue ?? ''),\n );\n\n // A pending debounced call; the controlled-value sync skips while set so typed characters survive.\n const debounceInFlightRef = useRef(false);\n const cancelRef = useRef<() => void>(() => {});\n\n const debouncedOnValueChange = useMemo(() => {\n if (!onValueChange \|\| disableDebounce) {\n cancelRef.current = () => {};\n return onValueChange;\n }\n const d = debounce((val: string) => {\n debounceInFlightRef.current = false;\n onValueChange(val);\n }, debounceDelay);\n cancelRef.current = d.cancel;\n return d;\n }, [onValueChange, disableDebounce, debounceDelay]);\n\n useEffect(() => {\n return () => cancelRef.current();\n }, [debouncedOnValueChange]);\n\n // Skipped while a debounced call is in flight, so the input doesn't snap back mid-typing.\n useEffect(() => {\n if (valueProp == null) return;\n if (debounceInFlightRef.current) return;\n setInternalValue(valueProp);\n }, [valueProp]);\n\n const canClear = allowClear && !!internalValue && !disabled && !readOnly;\n\n const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n const val = event.target.value;\n setInternalValue(val);\n if (!disableDebounce && debouncedOnValueChange) debounceInFlightRef.current = true;\n debouncedOnValueChange?.(val);\n onChange?.(event);\n };\n\n const handleBlur: FocusEventHandler<HTMLInputElement> = (event) => {\n onValueBlur?.(event.target.value);\n onBlur?.(event);\n };\n\n const handleClear = () => {\n cancelRef.current();\n debounceInFlightRef.current = false;\n setInternalValue('');\n onValueChange?.('');\n onClear?.();\n };\n\n return (\n <InputGroup\n state={state}\n variant={variant}\n sizing={sizing}\n focusVariant={focusVariant}\n className={className}\n >\n <InputGroup.Addon align=\"inline-start\">\n <Search className=\"tw:size-4 tw:shrink-0 tw:text-muted-foreground\" />\n </InputGroup.Addon>\n\n <InputGroup.Input\n {...restInputProps}\n ref={ref}\n value={internalValue}\n onChange={handleChange}\n onBlur={handleBlur}\n disabled={disabled}\n readOnly={readOnly}\n />\n\n {canClear && (\n <InputGroup.Addon align=\"inline-end\">\n <InputGroup.Button\n aria-label=\"Clear search\"\n onMouseDown={(event) => event.preventDefault()}\n onClick={handleClear}\n >\n <X className=\"tw:size-4\" />\n </InputGroup.Button>\n </InputGroup.Addon>\n )}\n </InputGroup>\n );\n};\n"],"mappings":";;;;;;;;;;;;;;AA4CA,MAAa,eAAe,EAC1B,KAGA,OACA,SACA,cACA,QACA,WAGA,OAAO,WACP,cACA,eACA,aACA,UACA,QACA,SACA,aAAa,OACb,kBAAkB,OAClB,gBAAgB,KAGhB,UACA,UACA,GAAG,qBACQ;CACX,MAAM,CAAC,eAAe,oBAAoB,SACxC,aAAa,OAAO,YAAa,gBAAgB,EACnD;CAGA,MAAM,sBAAsB,OAAO,KAAK;CACxC,MAAM,YAAY,aAAyB,CAAC,CAAC;CAE7C,MAAM,yBAAyB,cAAc;EAC3C,IAAI,CAAC,iBAAiB,iBAAiB;GACrC,UAAU,gBAAgB,CAAC;GAC3B,OAAO;EACT;EACA,MAAM,IAAI,UAAU,QAAgB;GAClC,oBAAoB,UAAU;GAC9B,cAAc,GAAG;EACnB,GAAG,aAAa;EAChB,UAAU,UAAU,EAAE;EACtB,OAAO;CACT,GAAG;EAAC;EAAe;EAAiB;CAAa,CAAC;CAElD,gBAAgB;EACd,aAAa,UAAU,QAAQ;CACjC,GAAG,CAAC,sBAAsB,CAAC;CAG3B,gBAAgB;EACd,IAAI,aAAa,MAAM;EACvB,IAAI,oBAAoB,SAAS;EACjC,iBAAiB,SAAS;CAC5B,GAAG,CAAC,SAAS,CAAC;CAEd,MAAM,WAAW,cAAc,CAAC,CAAC,iBAAiB,CAAC,YAAY,CAAC;CAEhE,MAAM,gBAAsD,UAAU;EACpE,MAAM,MAAM,MAAM,OAAO;EACzB,iBAAiB,GAAG;EACpB,IAAI,CAAC,mBAAmB,wBAAwB,oBAAoB,UAAU;EAC9E,yBAAyB,GAAG;EAC5B,WAAW,KAAK;CAClB;CAEA,MAAM,cAAmD,UAAU;EACjE,cAAc,MAAM,OAAO,KAAK;EAChC,SAAS,KAAK;CAChB;CAEA,MAAM,oBAAoB;EACxB,UAAU,QAAQ;EAClB,oBAAoB,UAAU;EAC9B,iBAAiB,EAAE;EACnB,gBAAgB,EAAE;EAClB,UAAU;CACZ;CAEA,OACE,qBAAC,YAAD;EACS;EACE;EACD;EACM;EACH;EALb,UAAA;GAOE,oBAAC,WAAW,OAAZ;IAAkB,OAAM;IACtB,UAAA,oBAAC,QAAD,EAAQ,WAAU,iDAAkD,CAAA;GACpD,CAAA;GAElB,oBAAC,WAAW,OAAZ;IACE,GAAI;IACC;IACL,OAAO;IACP,UAAU;IACV,QAAQ;IACE;IACA;GACX,CAAA;GAEA,YACC,oBAAC,WAAW,OAAZ;IAAkB,OAAM;IACtB,UAAA,oBAAC,WAAW,QAAZ;KACE,cAAW;KACX,cAAc,UAAU,MAAM,eAAe;KAC7C,SAAS;KAET,UAAA,oBAAC,GAAD,EAAG,WAAU,YAAa,CAAA;IACT,CAAA;GACH,CAAA;EAEV;;AAEhB"}

package/dist/{SectionNav-I2p2uXTd.js → SectionNav-BnHOMLtE.js} RENAMED Viewed

@@ -1,10 +1,10 @@
-import { cn } from "./classNames-BzrkDnOD.js";
-import { noop } from "./utils-Bd28bWgm.js";
-import { ChevronDown } from "./icons-wcA70iQx.js";
-import { Button } from "./Button-B21oVcPU.js";
-import { DropdownMenu } from "./DropdownMenu-BJGLjpVc.js";
-import { Badge } from "./Badge-Dz0cj6rj.js";
-import { Collapsible } from "./Collapsible-BQXWEOBC.js";
+import { cn } from "./classNames-DcGnTh2N.js";
+import { noop } from "./utils-LQ4jJA-9.js";
+import { ChevronDown } from "./icons-ZIeZXXS7.js";
+import { Button } from "./Button-D2JqBAq7.js";
+import { DropdownMenu } from "./DropdownMenu-B1gGvZoh.js";
+import { Badge } from "./Badge-Ba3epgcI.js";
+import { Collapsible } from "./Collapsible-DD4xTL75.js";
 import { useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/blocks/SectionNav/SectionNavItemContent.tsx
@@ -18,7 +18,7 @@ const SectionNavItemContent = ({ item, active, showDescription = false, expanded
 			children: [
 				showIcon && Icon && /* @__PURE__ */ jsx(Icon, { className: "tw:size-4 tw:shrink-0" }),
 				/* @__PURE__ */ jsx("span", {
-					className: cn("tw:flex-1 tw:truncate tw:text-sm", active ? "tw:font-medium tw:text-accent-foreground" : "tw:text-foreground"),
+					className: cn("tw:flex-1 tw:truncate tw:text-sm", active ? "tw:font-medium tw:text-selected-foreground" : "tw:text-foreground"),
 					children: item.title
 				}),
 				item.isNew && /* @__PURE__ */ jsx(Badge, {
@@ -45,8 +45,8 @@ const SectionNavItemContent = ({ item, active, showDescription = false, expanded
 * inside the box cannot be clipped, at any column width, by any ancestor.
 */
 const FOCUS_RING = "tw:focus-visible:outline-hidden tw:focus-visible:ring-2 tw:focus-visible:ring-inset tw:focus-visible:ring-ring";
-const rowClass = (active) => cn("tw:flex tw:w-full tw:cursor-pointer tw:items-center tw:gap-2 tw:rounded-md tw:border-none tw:px-3 tw:py-2 tw:text-left tw:text-sm tw:no-underline tw:transition-colors", FOCUS_RING, active ? "tw:bg-accent tw:font-medium tw:text-accent-foreground" : "tw:bg-transparent tw:text-foreground tw:hover:bg-muted");
-const childRowClass = (active) => cn("tw:flex tw:w-full tw:cursor-pointer tw:rounded-md tw:border-none tw:px-3 tw:py-1.5 tw:text-left tw:no-underline tw:transition-colors", FOCUS_RING, active ? "tw:bg-accent" : "tw:bg-transparent tw:hover:bg-muted");
+const rowClass = (active) => cn("tw:flex tw:w-full tw:cursor-pointer tw:items-center tw:gap-2 tw:rounded-md tw:border-none tw:px-3 tw:py-2 tw:text-left tw:text-sm tw:no-underline tw:transition-colors", FOCUS_RING, active ? "tw:bg-selected tw:font-medium tw:text-selected-foreground" : "tw:bg-transparent tw:text-foreground tw:hover:bg-[var(--hover,rgb(var(--muted)))]");
+const childRowClass = (active) => cn("tw:flex tw:w-full tw:cursor-pointer tw:rounded-md tw:border-none tw:px-3 tw:py-1.5 tw:text-left tw:no-underline tw:transition-colors", FOCUS_RING, active ? "tw:bg-selected" : "tw:bg-transparent tw:hover:bg-[var(--hover,rgb(var(--muted)))]");
 /**
 * One group row and its sub-sections. The row is a single control: it opens the group **and** goes to
 * its first section, and only collapses once you are already there — so the chevron never becomes a
@@ -241,4 +241,4 @@ const SectionNav = ({ groups, activeId, renderItem, showDescriptions = false, la
 //#endregion
 export { SectionNav };
-//# sourceMappingURL=SectionNav-I2p2uXTd.js.map
+//# sourceMappingURL=SectionNav-BnHOMLtE.js.map

package/dist/{SectionNav-I2p2uXTd.js.map → SectionNav-BnHOMLtE.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SectionNav-I2p2uXTd.js","names":[],"sources":["../src/blocks/SectionNav/SectionNavItemContent.tsx","../src/blocks/SectionNav/SectionNavGroupRow.tsx","../src/blocks/SectionNav/SectionNav.tsx"],"sourcesContent":["import { Badge } from '../../components/Badge';\nimport { ChevronDown } from '../../icons';\nimport { cn } from '../../utils';\n\nimport type { SectionNavItem } from './types';\n\ntype Props = {\n item: SectionNavItem;\n active: boolean;\n showDescription?: boolean;\n /** Group rows only — renders the chevron. /\n expanded?: boolean;\n /* `false` on sub-section rows: the group's icon covers them; `icon` stays for flattened surfaces. /\n showIcon?: boolean;\n};\n\n/* One row's body, shared by the tree and the collapsed dropdown. /\nexport const SectionNavItemContent = ({\n item,\n active,\n showDescription = false,\n expanded,\n showIcon = true,\n}: Props) => {\n const Icon = item.icon;\n\n return (\n <span className=\"tw:flex tw:min-w-0 tw:flex-1 tw:flex-col tw:gap-0.5\">\n <span className=\"tw:flex tw:items-center tw:gap-2\">\n {showIcon && Icon && <Icon className=\"tw:size-4 tw:shrink-0\" />}\n <span\n className={cn(\n 'tw:flex-1 tw:truncate tw:text-sm',\n active ? 'tw:font-medium tw:text-accent-foreground' : 'tw:text-foreground',\n )}\n >\n {item.title}\n </span>\n {item.isNew && (\n <Badge\n color=\"blue-inverse\"\n className=\"tw:min-h-0 tw:text-[10px]\"\n labelClassName=\"tw:px-1.5 tw:py-0\"\n >\n New\n </Badge>\n )}\n {expanded !== undefined && (\n <ChevronDown\n className={cn(\n 'tw:size-4 tw:shrink-0 tw:text-muted-foreground tw:transition-transform tw:duration-200',\n expanded && 'tw:rotate-180',\n )}\n />\n )}\n </span>\n {/ Wraps, and breaks unbreakable tokens that would overflow the 256px column. /}\n {showDescription && item.description && (\n <span className=\"tw:text-xs tw:break-words tw:text-muted-foreground\">\n {item.description}\n </span>\n )}\n </span>\n );\n};\n","import { useState } from 'react';\nimport type { MouseEvent, ReactNode } from 'react';\n\nimport { Collapsible } from '../../components/Collapsible';\nimport { cn, noop } from '../../utils';\n\nimport { SectionNavItemContent } from './SectionNavItemContent';\nimport type { SectionNavGroup, SectionNavItemRenderProps } from './types';\n\ntype Props = {\n group: SectionNavGroup;\n activeId: string \| undefined;\n renderItem: (props: SectionNavItemRenderProps) => ReactNode;\n showDescriptions: boolean;\n};\n\n/\n The ring is inset, not an outline. A row is exactly as wide as the nav column, and\n * `PageLayout.Content nav` makes that column a scroll container (`overflow-y-auto`, which forces\n * `overflow-x` to `auto` too) — so there is 0px of slack for anything painted outside the border\n * box, and the browser's default `outline-offset: 1px` ring gets clipped on both edges. Painting\n * inside the box cannot be clipped, at any column width, by any ancestor.\n /\nconst FOCUS_RING =\n 'tw:focus-visible:outline-hidden tw:focus-visible:ring-2 tw:focus-visible:ring-inset tw:focus-visible:ring-ring';\n\nconst rowClass = (active: boolean) =>\n cn(\n 'tw:flex tw:w-full tw:cursor-pointer tw:items-center tw:gap-2 tw:rounded-md tw:border-none tw:px-3 tw:py-2 tw:text-left tw:text-sm tw:no-underline tw:transition-colors',\n FOCUS_RING,\n active\n ? 'tw:bg-accent tw:font-medium tw:text-accent-foreground'\n : 'tw:bg-transparent tw:text-foreground tw:hover:bg-muted',\n );\n\nconst childRowClass = (active: boolean) =>\n cn(\n 'tw:flex tw:w-full tw:cursor-pointer tw:rounded-md tw:border-none tw:px-3 tw:py-1.5 tw:text-left tw:no-underline tw:transition-colors',\n FOCUS_RING,\n active ? 'tw:bg-accent' : 'tw:bg-transparent tw:hover:bg-muted',\n );\n\n/\n One group row and its sub-sections. The row is a single control: it opens the group and goes to\n * its first section, and only collapses once you are already there — so the chevron never becomes a\n * separate thing to aim at, and one click always makes progress.\n /\nexport const SectionNavGroupRow = ({ group, activeId, renderItem, showDescriptions }: Props) => {\n // Open on arrival: the nav is short enough that hiding any of it costs more than it saves.\n const [open, setOpen] = useState(true);\n\n const hasChildren = group.children.length > 0;\n const targetId = group.children[0]?.id ?? group.id;\n const isCurrent = group.id === activeId;\n const holdsCurrent = isCurrent \|\| group.children.some((child) => child.id === activeId);\n\n const onClick = (event: MouseEvent<HTMLElement>) => {\n if (!hasChildren) return;\n\n // Already on the row's target, so navigating would be a no-op and the only thing left for the\n // click to do is toggle. `preventDefault` is what tells the caller's link not to navigate.\n if (activeId === targetId) {\n event.preventDefault();\n setOpen((isOpen) => !isOpen);\n\n return;\n }\n\n setOpen(true);\n };\n\n return (\n <Collapsible open={open} onOpenChange={setOpen} className=\"tw:flex tw:flex-col tw:gap-0.5\">\n {renderItem({\n targetId,\n isActive: isCurrent,\n children: (\n <SectionNavItemContent\n item={group}\n active={holdsCurrent}\n expanded={hasChildren ? open : undefined}\n />\n ),\n itemProps: {\n className: rowClass(holdsCurrent),\n 'aria-current': isCurrent ? 'page' : undefined,\n 'aria-expanded': hasChildren ? open : undefined,\n 'data-active': holdsCurrent && !isCurrent ? true : undefined,\n onClick,\n },\n })}\n\n {hasChildren && (\n <Collapsible.Content>\n {/ `pl-1` keeps each row's background box off the group's rule — without it an active\n row's `bg-accent` sits flush against the line. 4px is also what lines the child titles\n (20 + 1 + 4 + 12 = 37px) up with the parent's, which its icon puts at 12 + 16 + 8 = 36px. /}\n {/ `my-0 mr-0` and not `m-0`: a host app emits its own `.tw\\:m-0` from its own source, and\n its stylesheet is the later one — shorthand and longhand at equal specificity means the\n app's `m-0` would land after this `ml-5` and flatten the indent. Longhands only, so\n nothing here can be overridden by a copy of a class this block also uses. /}\n <ul className=\"tw:my-0 tw:mr-0 tw:ml-5 tw:flex tw:list-none tw:flex-col tw:gap-0.5 tw:border-l tw:border-border tw:py-0.5 tw:pl-1\">\n {group.children.map((child) => {\n const active = child.id === activeId;\n\n return (\n <li key={child.id}>\n {renderItem({\n targetId: child.id,\n isActive: active,\n children: (\n <SectionNavItemContent\n item={child}\n active={active}\n showDescription={showDescriptions}\n showIcon={false}\n />\n ),\n itemProps: {\n className: childRowClass(active),\n 'aria-current': active ? 'page' : undefined,\n 'aria-expanded': undefined,\n 'data-active': undefined,\n onClick: noop,\n },\n })}\n </li>\n );\n })}\n {group.note && (\n <li className=\"tw:py-1 tw:pl-3 tw:text-xs tw:text-muted-foreground\">{group.note}</li>\n )}\n </ul>\n </Collapsible.Content>\n )}\n </Collapsible>\n );\n};\n","import type { ReactNode } from 'react';\n\nimport { Button } from '../../components/Button';\nimport { DropdownMenu } from '../../components/DropdownMenu';\nimport { ChevronDown } from '../../icons';\nimport { cn, noop } from '../../utils';\n\nimport { SectionNavGroupRow } from './SectionNavGroupRow';\nimport { SectionNavItemContent } from './SectionNavItemContent';\nimport type { SectionNavGroup, SectionNavItemRenderProps } from './types';\n\ntype Props = {\n /* Already filtered: visibility, permissions and flags stay in the app; rendered as given. /\n groups: SectionNavGroup[];\n /* `id` of the current section: a child's, or a childless group's. /\n activeId?: string;\n /* Return a router link / `<a>` to `targetId` with `itemProps` spread on it. /\n renderItem: (props: SectionNavItemRenderProps) => ReactNode;\n /* Show each section's `description` under its title. /\n showDescriptions?: boolean;\n /* Accessible name for the tree's `<nav>`, and the collapsed label with nothing active. /\n label?: string;\n /* Applied to the tree's `<nav>`; the column geometry belongs to `PageLayout.Content nav`. /\n className?: string;\n};\n\n/\n One page's grouped section nav: a tree when wide, a dropdown when narrow, both rendered via `renderItem`.\n \n - Not `Sidebar` (the app-level rail); this lives in `PageLayout.Content` and owns no global state.\n * - The switch is a container query; standalone, put `tw:@container/section-nav` on an ancestor.\n \n @see RECIPES.md#section-nav\n /\nexport const SectionNav = ({\n groups,\n activeId,\n renderItem,\n showDescriptions = false,\n label = 'Sections',\n className,\n}: Props) => {\n // The collapsed trigger names a sub-section with its group: \"Developer settings / CLI agents\".\n const activeChild = groups\n .flatMap((group) => group.children.map((child) => ({ group, child })))\n .find(({ child }) => child.id === activeId);\n const activeGroup = groups.find((group) => group.id === activeId);\n const current = activeChild\n ? {\n icon: activeChild.group.icon,\n title: activeChild.child.title,\n parent: activeChild.group.title,\n }\n : { icon: activeGroup?.icon, title: activeGroup?.title ?? label, parent: undefined };\n const CurrentIcon = current.icon;\n // Tinted like the tree's row, but not `aria-current`.\n const holdsActive = (group: SectionNavGroup) =>\n group.id === activeId \|\| group.children.some((child) => child.id === activeId);\n\n return (\n <>\n {/ - `tailwindcss-preflight` covers the caller's `<a>` rows; without it they're `content-box`\n and overflow the column.\n - `display` comes only from the two container variants: a plain `tw:flex` / `tw:hidden`\n would lose to the host app's identical, later rule. /}\n <nav\n aria-label={label}\n className={cn(\n 'tailwindcss-preflight',\n 'tw:w-full tw:flex-col tw:gap-0.5 tw:@[640px]/section-nav:flex tw:@max-[640px]/section-nav:hidden',\n className,\n )}\n >\n {groups.map((group) => (\n <SectionNavGroupRow\n key={group.id}\n group={group}\n activeId={activeId}\n renderItem={renderItem}\n showDescriptions={showDescriptions}\n />\n ))}\n </nav>\n\n <div className=\"tw:w-full tw:bg-background tw:@[640px]/section-nav:hidden tw:@max-[640px]/section-nav:block\">\n <DropdownMenu>\n <DropdownMenu.Trigger asChild>\n <Button variant=\"outline\" className=\"tw:w-full tw:justify-between\">\n <span className=\"tw:flex tw:min-w-0 tw:items-center tw:gap-2\">\n {CurrentIcon && <CurrentIcon className=\"tw:size-4 tw:shrink-0\" />}\n {current.parent && (\n <>\n <span className=\"tw:truncate tw:font-normal tw:text-muted-foreground\">\n {current.parent}\n </span>\n <span className=\"tw:text-border\">/</span>\n </>\n )}\n <span className=\"tw:truncate tw:font-medium tw:text-foreground\">\n {current.title}\n </span>\n </span>\n <ChevronDown className=\"tw:size-4 tw:shrink-0\" />\n </Button>\n </DropdownMenu.Trigger>\n\n <DropdownMenu.Content\n align=\"start\"\n className=\"tw:w-(--radix-dropdown-menu-trigger-width)\"\n >\n {groups.map((group) =>\n group.children.length > 0 ? (\n <DropdownMenu.Group key={group.id}>\n {/ A clickable item, not a label: in the tree it navigates to the first section. */}\n <DropdownMenu.Item asChild>\n {renderItem({\n targetId: group.children[0]?.id ?? group.id,\n isActive: false,\n children: <SectionNavItemContent item={group} active={holdsActive(group)} />,\n itemProps: {\n className: 'tw:no-underline',\n 'aria-current': undefined,\n 'aria-expanded': undefined,\n 'data-active': holdsActive(group) ? true : undefined,\n onClick: noop,\n },\n })}\n </DropdownMenu.Item>\n <div className=\"tw:ml-5 tw:border-l tw:border-border tw:py-0.5 tw:pl-1\">\n {group.children.map((child) => (\n <DropdownMenu.Item key={child.id} asChild>\n {renderItem({\n targetId: child.id,\n isActive: child.id === activeId,\n children: (\n <SectionNavItemContent\n item={child}\n active={child.id === activeId}\n showDescription={showDescriptions}\n showIcon={false}\n />\n ),\n itemProps: {\n className: 'tw:no-underline',\n 'aria-current': child.id === activeId ? 'page' : undefined,\n 'aria-expanded': undefined,\n 'data-active': undefined,\n onClick: noop,\n },\n })}\n </DropdownMenu.Item>\n ))}\n </div>\n </DropdownMenu.Group>\n ) : (\n <DropdownMenu.Item key={group.id} asChild>\n {renderItem({\n targetId: group.id,\n isActive: group.id === activeId,\n children: <SectionNavItemContent item={group} active={group.id === activeId} />,\n itemProps: {\n className: 'tw:no-underline',\n 'aria-current': group.id === activeId ? 'page' : undefined,\n 'aria-expanded': undefined,\n 'data-active': undefined,\n onClick: noop,\n },\n })}\n </DropdownMenu.Item>\n ),\n )}\n </DropdownMenu.Content>\n </DropdownMenu>\n </div>\n </>\n );\n};\n"],"mappings":"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"}
1	+ {"version":3,"file":"SectionNav-BnHOMLtE.js","names":[],"sources":["../src/blocks/SectionNav/SectionNavItemContent.tsx","../src/blocks/SectionNav/SectionNavGroupRow.tsx","../src/blocks/SectionNav/SectionNav.tsx"],"sourcesContent":["import { Badge } from '../../components/Badge';\nimport { ChevronDown } from '../../icons';\nimport { cn } from '../../utils';\n\nimport type { SectionNavItem } from './types';\n\ntype Props = {\n item: SectionNavItem;\n active: boolean;\n showDescription?: boolean;\n /** Group rows only — renders the chevron. /\n expanded?: boolean;\n /* `false` on sub-section rows: the group's icon covers them; `icon` stays for flattened surfaces. /\n showIcon?: boolean;\n};\n\n/* One row's body, shared by the tree and the collapsed dropdown. /\nexport const SectionNavItemContent = ({\n item,\n active,\n showDescription = false,\n expanded,\n showIcon = true,\n}: Props) => {\n const Icon = item.icon;\n\n return (\n <span className=\"tw:flex tw:min-w-0 tw:flex-1 tw:flex-col tw:gap-0.5\">\n <span className=\"tw:flex tw:items-center tw:gap-2\">\n {showIcon && Icon && <Icon className=\"tw:size-4 tw:shrink-0\" />}\n <span\n className={cn(\n 'tw:flex-1 tw:truncate tw:text-sm',\n active ? 'tw:font-medium tw:text-selected-foreground' : 'tw:text-foreground',\n )}\n >\n {item.title}\n </span>\n {item.isNew && (\n <Badge\n color=\"blue-inverse\"\n className=\"tw:min-h-0 tw:text-[10px]\"\n labelClassName=\"tw:px-1.5 tw:py-0\"\n >\n New\n </Badge>\n )}\n {expanded !== undefined && (\n <ChevronDown\n className={cn(\n 'tw:size-4 tw:shrink-0 tw:text-muted-foreground tw:transition-transform tw:duration-200',\n expanded && 'tw:rotate-180',\n )}\n />\n )}\n </span>\n {/ Wraps, and breaks unbreakable tokens that would overflow the 256px column. /}\n {showDescription && item.description && (\n <span className=\"tw:text-xs tw:break-words tw:text-muted-foreground\">\n {item.description}\n </span>\n )}\n </span>\n );\n};\n","import { useState } from 'react';\nimport type { MouseEvent, ReactNode } from 'react';\n\nimport { Collapsible } from '../../components/Collapsible';\nimport { cn, noop } from '../../utils';\n\nimport { SectionNavItemContent } from './SectionNavItemContent';\nimport type { SectionNavGroup, SectionNavItemRenderProps } from './types';\n\ntype Props = {\n group: SectionNavGroup;\n activeId: string \| undefined;\n renderItem: (props: SectionNavItemRenderProps) => ReactNode;\n showDescriptions: boolean;\n};\n\n/\n The ring is inset, not an outline. A row is exactly as wide as the nav column, and\n * `PageLayout.Content nav` makes that column a scroll container (`overflow-y-auto`, which forces\n * `overflow-x` to `auto` too) — so there is 0px of slack for anything painted outside the border\n * box, and the browser's default `outline-offset: 1px` ring gets clipped on both edges. Painting\n * inside the box cannot be clipped, at any column width, by any ancestor.\n /\nconst FOCUS_RING =\n 'tw:focus-visible:outline-hidden tw:focus-visible:ring-2 tw:focus-visible:ring-inset tw:focus-visible:ring-ring';\n\nconst rowClass = (active: boolean) =>\n cn(\n 'tw:flex tw:w-full tw:cursor-pointer tw:items-center tw:gap-2 tw:rounded-md tw:border-none tw:px-3 tw:py-2 tw:text-left tw:text-sm tw:no-underline tw:transition-colors',\n FOCUS_RING,\n active\n ? 'tw:bg-selected tw:font-medium tw:text-selected-foreground'\n : 'tw:bg-transparent tw:text-foreground tw:hover:bg-[var(--hover,rgb(var(--muted)))]',\n );\n\nconst childRowClass = (active: boolean) =>\n cn(\n 'tw:flex tw:w-full tw:cursor-pointer tw:rounded-md tw:border-none tw:px-3 tw:py-1.5 tw:text-left tw:no-underline tw:transition-colors',\n FOCUS_RING,\n active ? 'tw:bg-selected' : 'tw:bg-transparent tw:hover:bg-[var(--hover,rgb(var(--muted)))]',\n );\n\n/\n One group row and its sub-sections. The row is a single control: it opens the group and goes to\n * its first section, and only collapses once you are already there — so the chevron never becomes a\n * separate thing to aim at, and one click always makes progress.\n /\nexport const SectionNavGroupRow = ({ group, activeId, renderItem, showDescriptions }: Props) => {\n // Open on arrival: the nav is short enough that hiding any of it costs more than it saves.\n const [open, setOpen] = useState(true);\n\n const hasChildren = group.children.length > 0;\n const targetId = group.children[0]?.id ?? group.id;\n const isCurrent = group.id === activeId;\n const holdsCurrent = isCurrent \|\| group.children.some((child) => child.id === activeId);\n\n const onClick = (event: MouseEvent<HTMLElement>) => {\n if (!hasChildren) return;\n\n // Already on the row's target, so navigating would be a no-op and the only thing left for the\n // click to do is toggle. `preventDefault` is what tells the caller's link not to navigate.\n if (activeId === targetId) {\n event.preventDefault();\n setOpen((isOpen) => !isOpen);\n\n return;\n }\n\n setOpen(true);\n };\n\n return (\n <Collapsible open={open} onOpenChange={setOpen} className=\"tw:flex tw:flex-col tw:gap-0.5\">\n {renderItem({\n targetId,\n isActive: isCurrent,\n children: (\n <SectionNavItemContent\n item={group}\n active={holdsCurrent}\n expanded={hasChildren ? open : undefined}\n />\n ),\n itemProps: {\n className: rowClass(holdsCurrent),\n 'aria-current': isCurrent ? 'page' : undefined,\n 'aria-expanded': hasChildren ? open : undefined,\n 'data-active': holdsCurrent && !isCurrent ? true : undefined,\n onClick,\n },\n })}\n\n {hasChildren && (\n <Collapsible.Content>\n {/ `pl-1` keeps each row's background box off the group's rule — without it an active\n row's `bg-selected` sits flush against the line. 4px is also what lines the child titles\n (20 + 1 + 4 + 12 = 37px) up with the parent's, which its icon puts at 12 + 16 + 8 = 36px. /}\n {/ `my-0 mr-0` and not `m-0`: a host app emits its own `.tw\\:m-0` from its own source, and\n its stylesheet is the later one — shorthand and longhand at equal specificity means the\n app's `m-0` would land after this `ml-5` and flatten the indent. Longhands only, so\n nothing here can be overridden by a copy of a class this block also uses. /}\n <ul className=\"tw:my-0 tw:mr-0 tw:ml-5 tw:flex tw:list-none tw:flex-col tw:gap-0.5 tw:border-l tw:border-border tw:py-0.5 tw:pl-1\">\n {group.children.map((child) => {\n const active = child.id === activeId;\n\n return (\n <li key={child.id}>\n {renderItem({\n targetId: child.id,\n isActive: active,\n children: (\n <SectionNavItemContent\n item={child}\n active={active}\n showDescription={showDescriptions}\n showIcon={false}\n />\n ),\n itemProps: {\n className: childRowClass(active),\n 'aria-current': active ? 'page' : undefined,\n 'aria-expanded': undefined,\n 'data-active': undefined,\n onClick: noop,\n },\n })}\n </li>\n );\n })}\n {group.note && (\n <li className=\"tw:py-1 tw:pl-3 tw:text-xs tw:text-muted-foreground\">{group.note}</li>\n )}\n </ul>\n </Collapsible.Content>\n )}\n </Collapsible>\n );\n};\n","import type { ReactNode } from 'react';\n\nimport { Button } from '../../components/Button';\nimport { DropdownMenu } from '../../components/DropdownMenu';\nimport { ChevronDown } from '../../icons';\nimport { cn, noop } from '../../utils';\n\nimport { SectionNavGroupRow } from './SectionNavGroupRow';\nimport { SectionNavItemContent } from './SectionNavItemContent';\nimport type { SectionNavGroup, SectionNavItemRenderProps } from './types';\n\ntype Props = {\n /* Already filtered: visibility, permissions and flags stay in the app; rendered as given. /\n groups: SectionNavGroup[];\n /* `id` of the current section: a child's, or a childless group's. /\n activeId?: string;\n /* Return a router link / `<a>` to `targetId` with `itemProps` spread on it. /\n renderItem: (props: SectionNavItemRenderProps) => ReactNode;\n /* Show each section's `description` under its title. /\n showDescriptions?: boolean;\n /* Accessible name for the tree's `<nav>`, and the collapsed label with nothing active. /\n label?: string;\n /* Applied to the tree's `<nav>`; the column geometry belongs to `PageLayout.Content nav`. /\n className?: string;\n};\n\n/\n One page's grouped section nav: a tree when wide, a dropdown when narrow, both rendered via `renderItem`.\n \n - Not `Sidebar` (the app-level rail); this lives in `PageLayout.Content` and owns no global state.\n * - The switch is a container query; standalone, put `tw:@container/section-nav` on an ancestor.\n \n @see RECIPES.md#section-nav\n /\nexport const SectionNav = ({\n groups,\n activeId,\n renderItem,\n showDescriptions = false,\n label = 'Sections',\n className,\n}: Props) => {\n // The collapsed trigger names a sub-section with its group: \"Developer settings / CLI agents\".\n const activeChild = groups\n .flatMap((group) => group.children.map((child) => ({ group, child })))\n .find(({ child }) => child.id === activeId);\n const activeGroup = groups.find((group) => group.id === activeId);\n const current = activeChild\n ? {\n icon: activeChild.group.icon,\n title: activeChild.child.title,\n parent: activeChild.group.title,\n }\n : { icon: activeGroup?.icon, title: activeGroup?.title ?? label, parent: undefined };\n const CurrentIcon = current.icon;\n // Tinted like the tree's row, but not `aria-current`.\n const holdsActive = (group: SectionNavGroup) =>\n group.id === activeId \|\| group.children.some((child) => child.id === activeId);\n\n return (\n <>\n {/ - `tailwindcss-preflight` covers the caller's `<a>` rows; without it they're `content-box`\n and overflow the column.\n - `display` comes only from the two container variants: a plain `tw:flex` / `tw:hidden`\n would lose to the host app's identical, later rule. /}\n <nav\n aria-label={label}\n className={cn(\n 'tailwindcss-preflight',\n 'tw:w-full tw:flex-col tw:gap-0.5 tw:@[640px]/section-nav:flex tw:@max-[640px]/section-nav:hidden',\n className,\n )}\n >\n {groups.map((group) => (\n <SectionNavGroupRow\n key={group.id}\n group={group}\n activeId={activeId}\n renderItem={renderItem}\n showDescriptions={showDescriptions}\n />\n ))}\n </nav>\n\n <div className=\"tw:w-full tw:bg-background tw:@[640px]/section-nav:hidden tw:@max-[640px]/section-nav:block\">\n <DropdownMenu>\n <DropdownMenu.Trigger asChild>\n <Button variant=\"outline\" className=\"tw:w-full tw:justify-between\">\n <span className=\"tw:flex tw:min-w-0 tw:items-center tw:gap-2\">\n {CurrentIcon && <CurrentIcon className=\"tw:size-4 tw:shrink-0\" />}\n {current.parent && (\n <>\n <span className=\"tw:truncate tw:font-normal tw:text-muted-foreground\">\n {current.parent}\n </span>\n <span className=\"tw:text-border\">/</span>\n </>\n )}\n <span className=\"tw:truncate tw:font-medium tw:text-foreground\">\n {current.title}\n </span>\n </span>\n <ChevronDown className=\"tw:size-4 tw:shrink-0\" />\n </Button>\n </DropdownMenu.Trigger>\n\n <DropdownMenu.Content\n align=\"start\"\n className=\"tw:w-(--radix-dropdown-menu-trigger-width)\"\n >\n {groups.map((group) =>\n group.children.length > 0 ? (\n <DropdownMenu.Group key={group.id}>\n {/ A clickable item, not a label: in the tree it navigates to the first section. */}\n <DropdownMenu.Item asChild>\n {renderItem({\n targetId: group.children[0]?.id ?? group.id,\n isActive: false,\n children: <SectionNavItemContent item={group} active={holdsActive(group)} />,\n itemProps: {\n className: 'tw:no-underline',\n 'aria-current': undefined,\n 'aria-expanded': undefined,\n 'data-active': holdsActive(group) ? true : undefined,\n onClick: noop,\n },\n })}\n </DropdownMenu.Item>\n <div className=\"tw:ml-5 tw:border-l tw:border-border tw:py-0.5 tw:pl-1\">\n {group.children.map((child) => (\n <DropdownMenu.Item key={child.id} asChild>\n {renderItem({\n targetId: child.id,\n isActive: child.id === activeId,\n children: (\n <SectionNavItemContent\n item={child}\n active={child.id === activeId}\n showDescription={showDescriptions}\n showIcon={false}\n />\n ),\n itemProps: {\n className: 'tw:no-underline',\n 'aria-current': child.id === activeId ? 'page' : undefined,\n 'aria-expanded': undefined,\n 'data-active': undefined,\n onClick: noop,\n },\n })}\n </DropdownMenu.Item>\n ))}\n </div>\n </DropdownMenu.Group>\n ) : (\n <DropdownMenu.Item key={group.id} asChild>\n {renderItem({\n targetId: group.id,\n isActive: group.id === activeId,\n children: <SectionNavItemContent item={group} active={group.id === activeId} />,\n itemProps: {\n className: 'tw:no-underline',\n 'aria-current': group.id === activeId ? 'page' : undefined,\n 'aria-expanded': undefined,\n 'data-active': undefined,\n onClick: noop,\n },\n })}\n </DropdownMenu.Item>\n ),\n )}\n </DropdownMenu.Content>\n </DropdownMenu>\n </div>\n </>\n );\n};\n"],"mappings":"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"}

package/dist/{Select-B4uK0QVm.js → Select-CjQgU_6K.js} RENAMED Viewed

@@ -1,8 +1,8 @@
-import { cn } from "./classNames-BzrkDnOD.js";
+import { cn } from "./classNames-DcGnTh2N.js";
 import { useArgoDesign } from "./context-U293r3v-.js";
-import { Check, ChevronDown, ChevronUp } from "./icons-wcA70iQx.js";
-import { Button } from "./Button-B21oVcPU.js";
-import { overlayTriggerVariants } from "./styles-gzcjOyKv.js";
+import { Check, ChevronDown, ChevronUp } from "./icons-ZIeZXXS7.js";
+import { Button } from "./Button-D2JqBAq7.js";
+import { overlayTriggerVariants } from "./styles-YQdM7G8c.js";
 import { forwardAccessibleName } from "./internal/utils/accessibleName.js";
 import { useId } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -57,7 +57,7 @@ const SelectItem = ({ ref, className, children, icon, hint, "aria-describedby":
 		...props,
 		ref,
 		"aria-describedby": [ariaDescribedBy, hint ? hintId : null].filter(Boolean).join(" ") || void 0,
-		className: cn("tw:group/select-item", "tw:relative", "tw:flex", "tw:flex-1", "tw:items-center", "tw:gap-2", "tw:py-2", "tw:px-2", "tw:group-data-[variant=default]/select-content:px-4", "tw:rounded-lg", "tw:group-data-[variant=default]/select-content:rounded-none", "tw:text-sm", "tw:select-none", "tw:cursor-default", "tw:outline-hidden", "tw:focus:outline-hidden", "tw:data-[highlighted]:bg-accent", "tw:group-data-[variant=default]/select-content:data-[highlighted]:bg-secondary", "tw:data-[highlighted]:text-accent-foreground", "tw:group-data-[variant=default]/select-content:data-[highlighted]:text-secondary-foreground", "tw:data-[disabled]:pointer-events-none", "tw:data-[disabled]:opacity-50", "tw:[&_svg]:pointer-events-none", "tw:[&_svg]:shrink-0", "tw:[&_svg]:text-muted-foreground", "tw:[&_svg:not([class*='tw:size-'])]:size-4", className),
+		className: cn("tw:group/select-item", "tw:relative", "tw:flex", "tw:flex-1", "tw:items-center", "tw:gap-2", "tw:py-2", "tw:px-2", "tw:group-data-[variant=default]/select-content:px-4", "tw:rounded-lg", "tw:group-data-[variant=default]/select-content:rounded-none", "tw:text-sm", "tw:select-none", "tw:cursor-default", "tw:outline-hidden", "tw:focus:outline-hidden", "tw:data-[highlighted]:bg-hover", "tw:group-data-[variant=default]/select-content:data-[highlighted]:bg-secondary", "tw:data-[highlighted]:text-hover-foreground", "tw:group-data-[variant=default]/select-content:data-[highlighted]:text-secondary-foreground", "tw:data-[disabled]:pointer-events-none", "tw:data-[disabled]:opacity-disabled", "tw:[&_svg]:pointer-events-none", "tw:[&_svg]:shrink-0", "tw:[&_svg]:text-muted-foreground", "tw:[&_svg:not([class*='tw:size-'])]:size-4", className),
 		children: [
 			icon,
 			/* @__PURE__ */ jsx("span", {
@@ -186,4 +186,4 @@ Select.Separator = SelectSeparator;
 //#endregion
 export { Select };
-//# sourceMappingURL=Select-B4uK0QVm.js.map
+//# sourceMappingURL=Select-CjQgU_6K.js.map

package/dist/Select-CjQgU_6K.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"Select-CjQgU_6K.js","names":["SelectItemComponent"],"sources":["../src/components/Select/SelectContent.tsx","../src/components/Select/SelectGroup.tsx","../src/components/Select/SelectItem.tsx","../src/components/Select/SelectLabel.tsx","../src/components/Select/SelectRoot.tsx","../src/components/Select/SelectSeparator.tsx","../src/components/Select/SelectTrigger.tsx","../src/components/Select/Select.tsx"],"sourcesContent":["import type { ComponentProps } from 'react';\nimport * as SelectPrimitive from '@radix-ui/react-select';\n\nimport { ChevronDown, ChevronUp } from '../../icons';\nimport { cn } from '../../utils';\nimport { useArgoDesign } from '../ThemeProvider/context';\n\nconst scrollButtonStyles = cn(\n 'tw:flex',\n 'tw:items-center',\n 'tw:justify-center',\n 'tw:rounded-sm',\n 'tw:p-1',\n 'tw:[&_svg:not([class*=\"tw:size-\"])]:size-5',\n);\n\ntype Variant = 'default' | 'argo';\n\n/**\n * Props for `Select.Content`. `container` portals the listbox into a custom element (useful inside modals).\n */\ntype Props = ComponentProps<typeof SelectPrimitive.Content> & {\n container?: HTMLElement | null;\n};\n\n/**\n * Listbox container for `Select`. Portals items into a popover sized to the trigger.\n * Normally rendered implicitly by `Select`; use directly only when composing custom item layouts via\n * the `Select.Root` / `Select.Trigger` / `Select.Content` compound parts.\n */\nexport const SelectContent = ({\n ref,\n className,\n children,\n container,\n position = 'popper',\n sideOffset = 4,\n ...props\n}: Props) => {\n const effectiveVariant: Variant = useArgoDesign() ? 'argo' : 'default';\n return (\n <SelectPrimitive.Portal container={container}>\n <SelectPrimitive.Content\n {...props}\n ref={ref}\n position={position}\n sideOffset={sideOffset}\n data-variant={effectiveVariant}\n className={cn(\n 'tailwindcss-preflight',\n 'tw:group/select-content',\n // Floating tier above Modal (1051): Tooltip 1060 / Combobox·Popover·Select 1055 / Modal 1051 / DropdownMenu.SubContent 1041 / FullScreenModal 1039\n 'tw:z-[1055]',\n\n // layout\n 'tw:flex tw:flex-col',\n 'tw:p-1',\n 'tw:data-[variant=default]:p-0',\n 'tw:overflow-hidden',\n 'tw:origin-(--radix-select-content-transform-origin)',\n\n // sizing\n 'tw:max-h-[var(--radix-select-content-available-height)]',\n 'tw:min-w-[var(--radix-select-trigger-width)]',\n\n // appearance\n 'tw:bg-popover',\n 'tw:text-popover-foreground',\n 'tw:shadow-md',\n 'tw:ring-1',\n 'tw:ring-foreground/10',\n 'tw:rounded-lg',\n 'tw:data-[variant=default]:rounded',\n\n // open animation\n 'tw:data-[state=open]:animate-in',\n 'tw:data-[state=open]:fade-in-0',\n 'tw:data-[state=open]:zoom-in-95',\n\n // closed animation\n 'tw:data-[state=closed]:animate-out',\n 'tw:data-[state=closed]:fade-out-0',\n 'tw:data-[state=closed]:zoom-out-95',\n\n // position animations\n 'tw:data-[side=bottom]:slide-in-from-top-2',\n 'tw:data-[side=left]:slide-in-from-right-2',\n 'tw:data-[side=right]:slide-in-from-left-2',\n 'tw:data-[side=top]:slide-in-from-bottom-2',\n className,\n )}\n >\n <SelectPrimitive.ScrollUpButton className={scrollButtonStyles}>\n <ChevronUp />\n </SelectPrimitive.ScrollUpButton>\n\n <SelectPrimitive.Viewport\n className={cn({\n 'tw:h-[var(--radix-select-trigger-height)] tw:w-full tw:min-w-[var(--radix-select-trigger-width)]':\n position === 'popper',\n })}\n >\n {children}\n </SelectPrimitive.Viewport>\n\n <SelectPrimitive.ScrollDownButton className={scrollButtonStyles}>\n <ChevronDown />\n </SelectPrimitive.ScrollDownButton>\n </SelectPrimitive.Content>\n </SelectPrimitive.Portal>\n );\n};\n","import type { ComponentProps } from 'react';\nimport * as SelectPrimitive from '@radix-ui/react-select';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<typeof SelectPrimitive.Group>;\n\nexport const SelectGroup = ({ className, ...props }: Props) => (\n <SelectPrimitive.Group {...props} className={cn('tw:flex tw:flex-col tw:gap-0.5', className)} />\n);\n","import { useId } from 'react';\nimport type { ComponentProps, ReactNode } from 'react';\nimport * as SelectPrimitive from '@radix-ui/react-select';\n\nimport { Check } from '../../icons';\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<typeof SelectPrimitive.Item> & {\n icon?: ReactNode;\n hint?: ReactNode;\n};\n\nexport const SelectItem = ({\n ref,\n className,\n children,\n icon,\n hint,\n 'aria-describedby': ariaDescribedBy,\n ...props\n}: Props) => {\n const hintId = useId();\n\n return (\n <SelectPrimitive.Item\n {...props}\n ref={ref}\n // Radix names the option from `ItemText` alone (`aria-labelledby`), so the hint is\n // described rather than named — it reaches a screen reader without joining the label.\n aria-describedby={\n [ariaDescribedBy, hint ? hintId : null].filter(Boolean).join(' ') || undefined\n }\n className={cn(\n 'tw:group/select-item',\n\n // layout\n 'tw:relative',\n 'tw:flex',\n 'tw:flex-1',\n 'tw:items-center',\n 'tw:gap-2',\n\n // spacing — default variant uses tighter radius and wider horizontal padding\n 'tw:py-2',\n 'tw:px-2',\n 'tw:group-data-[variant=default]/select-content:px-4',\n 'tw:rounded-lg',\n 'tw:group-data-[variant=default]/select-content:rounded-none',\n\n // typography\n 'tw:text-sm',\n 'tw:select-none',\n 'tw:cursor-default',\n 'tw:outline-hidden',\n\n // highlighted (keyboard / hover)\n 'tw:focus:outline-hidden',\n 'tw:data-[highlighted]:bg-hover',\n // The legacy highlight is a neutral step, not the argo accent.\n //\n // - `secondary` carries its own foreground, so fill and ink move together.\n // - `muted` is unusable: in dark it equals `popover`, so the band would disappear\n // into the listbox.\n 'tw:group-data-[variant=default]/select-content:data-[highlighted]:bg-secondary',\n 'tw:data-[highlighted]:text-hover-foreground',\n 'tw:group-data-[variant=default]/select-content:data-[highlighted]:text-secondary-foreground',\n\n // disabled\n 'tw:data-[disabled]:pointer-events-none',\n 'tw:data-[disabled]:opacity-disabled',\n\n // child svg defaults\n 'tw:[&_svg]:pointer-events-none',\n 'tw:[&_svg]:shrink-0',\n 'tw:[&_svg]:text-muted-foreground',\n \"tw:[&_svg:not([class*='tw:size-'])]:size-4\",\n className,\n )}\n >\n {icon}\n <span className=\"tw:flex-1 tw:truncate\">\n <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n </span>\n {/* Outside `ItemText`, so the trigger shows the label alone once the option is picked. */}\n {hint && (\n <span id={hintId} className=\"tw:shrink-0 tw:text-xs tw:text-muted-foreground\">\n {hint}\n </span>\n )}\n <SelectPrimitive.ItemIndicator className=\"tw:pointer-events-none\">\n <Check className=\"tw:size-4\" />\n </SelectPrimitive.ItemIndicator>\n </SelectPrimitive.Item>\n );\n};\n","import type { ComponentProps } from 'react';\nimport * as SelectPrimitive from '@radix-ui/react-select';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<typeof SelectPrimitive.Label>;\n\nexport const SelectLabel = ({ className, ...props }: Props) => (\n <SelectPrimitive.Label\n {...props}\n className={cn(\n // Base (argo variant) — soft gray section label\n 'tw:px-2',\n 'tw:py-1.5',\n 'tw:text-xs',\n 'tw:font-medium',\n 'tw:leading-none',\n 'tw:text-muted-foreground',\n\n // Default variant — uppercase tracked label, matches Combobox default\n 'tw:group-data-[variant=default]/select-content:uppercase',\n 'tw:group-data-[variant=default]/select-content:font-semibold',\n 'tw:group-data-[variant=default]/select-content:tracking-wider',\n 'tw:group-data-[variant=default]/select-content:text-[11px]',\n 'tw:group-data-[variant=default]/select-content:text-black',\n 'tw:group-data-[variant=default]/select-content:pt-2',\n 'tw:group-data-[variant=default]/select-content:px-4',\n\n className,\n )}\n />\n);\n","import type { ReactNode } from 'react';\nimport { Root } from '@radix-ui/react-select';\n\n// Mirror Radix's `SelectProps` as an explicit list. We can't infer via\n// `ComponentProps<typeof Root>` or reuse Radix's `SelectProps` directly: both\n// transitively reference the un-exported `SelectSharedProps` interface, and\n// TS4023 fires when DTS emits anything that consumes it (e.g. `useAppForm`).\n// Keep this in sync with `@radix-ui/react-select`'s `SelectProps` shape.\nexport type SelectRootProps = {\n // SelectSharedProps\n children?: ReactNode;\n open?: boolean;\n defaultOpen?: boolean;\n onOpenChange?(open: boolean): void;\n dir?: 'ltr' | 'rtl';\n name?: string;\n autoComplete?: string;\n disabled?: boolean;\n required?: boolean;\n form?: string;\n // SelectProps\n value?: string;\n defaultValue?: string;\n onValueChange?(value: string): void;\n};\n\nexport const SelectRoot = (props: SelectRootProps) => <Root {...props} />;\n","import type { ComponentProps } from 'react';\nimport * as SelectPrimitive from '@radix-ui/react-select';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<typeof SelectPrimitive.Separator>;\n\nexport const SelectSeparator = ({ className, ...props }: Props) => (\n <SelectPrimitive.Separator\n {...props}\n className={cn('tw:mx-2 tw:my-1 tw:h-px tw:bg-border', className)}\n />\n);\n","import type { ComponentProps } from 'react';\nimport * as SelectPrimitive from '@radix-ui/react-select';\nimport { type VariantProps } from 'class-variance-authority';\n\nimport { ChevronDown } from '../../icons';\nimport { cn } from '../../utils';\nimport type { WithAccessibleName } from '../../utils/accessibleName';\nimport { Button } from '../Button';\nimport { overlayTriggerVariants } from '../OverlayTrigger/styles';\nimport { useArgoDesign } from '../ThemeProvider/context';\n\ntype BaseProps = ComponentProps<typeof SelectPrimitive.Trigger> &\n Omit<VariantProps<typeof overlayTriggerVariants>, 'variant'> & {\n variant?: Exclude<VariantProps<typeof overlayTriggerVariants>['variant'], 'argo'> | 'inline';\n } & Pick<ComponentProps<typeof SelectPrimitive.Value>, 'placeholder'>;\n\n/** `role=\"combobox\"` is not named from content: neither the item label nor `placeholder` names it. */\ntype SelectTriggerProps = WithAccessibleName<BaseProps>;\n\nexport const SelectTrigger = ({\n ref,\n className,\n variant,\n state,\n sizing,\n placeholder,\n ...props\n}: SelectTriggerProps) => {\n const isArgoDesign = useArgoDesign();\n const effectiveVariant = (() => {\n if (variant === 'inline') return 'inline';\n if (isArgoDesign) return 'argo';\n return variant;\n })();\n const isInlineVariant = effectiveVariant === 'inline';\n\n if (isInlineVariant)\n return (\n <SelectPrimitive.Trigger {...props} ref={ref} className={cn(className)} asChild>\n <Button variant=\"inline\">\n <SelectPrimitive.Value placeholder={placeholder} />\n <SelectPrimitive.Icon asChild>\n <ChevronDown />\n </SelectPrimitive.Icon>\n </Button>\n </SelectPrimitive.Trigger>\n );\n\n return (\n <SelectPrimitive.Trigger\n {...props}\n ref={ref}\n className={cn(\n overlayTriggerVariants({ variant: effectiveVariant, state, sizing }),\n className,\n )}\n >\n <SelectPrimitive.Value placeholder={placeholder} />\n <SelectPrimitive.Icon asChild>\n <ChevronDown className=\"tw:size-4 tw:text-muted-foreground\" />\n </SelectPrimitive.Icon>\n </SelectPrimitive.Trigger>\n );\n};\n","import { useId } from 'react';\nimport type { ComponentProps, ReactNode } from 'react';\n\nimport { forwardAccessibleName, type WithAccessibleName } from '../../utils/accessibleName';\n\nimport { SelectContent } from './SelectContent';\nimport { SelectGroup } from './SelectGroup';\nimport { SelectItem as SelectItemComponent } from './SelectItem';\nimport { SelectLabel } from './SelectLabel';\nimport { SelectRoot, type SelectRootProps } from './SelectRoot';\nimport { SelectSeparator } from './SelectSeparator';\nimport { SelectTrigger } from './SelectTrigger';\n\nexport type SelectItem = {\n value: string;\n label: ReactNode;\n icon?: ReactNode;\n /** Trailing muted note shown in the listbox only — never in the trigger. */\n hint?: ReactNode;\n disabled?: boolean;\n};\n\nexport type SelectItemGroup = {\n label?: ReactNode;\n items: readonly SelectItem[];\n};\n\nconst isGroup = (itemOrGroup: SelectItem | SelectItemGroup): itemOrGroup is SelectItemGroup =>\n 'items' in itemOrGroup;\n\ntype TriggerProps = ComponentProps<typeof SelectTrigger>;\n\ntype BaseProps = Pick<\n SelectRootProps,\n | 'value'\n | 'defaultValue'\n | 'onValueChange'\n | 'disabled'\n | 'name'\n | 'required'\n | 'open'\n | 'defaultOpen'\n | 'onOpenChange'\n | 'dir'\n | 'autoComplete'\n | 'form'\n> &\n Pick<\n TriggerProps,\n | 'variant'\n | 'state'\n | 'sizing'\n | 'placeholder'\n | 'id'\n | 'className'\n | 'onBlur'\n | 'aria-label'\n | 'aria-labelledby'\n | 'aria-describedby'\n | 'aria-invalid'\n | 'aria-required'\n > & {\n items?: readonly (SelectItem | SelectItemGroup)[];\n };\n\n/** `role=\"combobox\"` is not named from content: neither the item label nor `placeholder` names it. */\nexport type SelectProps = WithAccessibleName<BaseProps>;\n\n/**\n * Single selection from a short enumerated list. Built on Radix Select.\n *\n * - Use for ~10 or fewer options where search adds nothing; else `Combobox` / `MultiCombobox`.\n * - In forms: `FormGroup`, or `useAppForm` + `field.SelectField` for validation.\n * - Compound parts (`Select.Root`, `.Trigger`, `.Content`, `.Item`) for custom item layouts.\n */\nexport const Select = ({\n value,\n defaultValue,\n onValueChange,\n disabled,\n name,\n required,\n open,\n defaultOpen,\n onOpenChange,\n dir,\n autoComplete,\n form,\n variant,\n state,\n sizing,\n placeholder,\n className,\n onBlur,\n 'aria-describedby': ariaDescribedBy,\n 'aria-invalid': ariaInvalid,\n 'aria-required': ariaRequired,\n items = [],\n // Kept grouped: destructured apart, the required-one-of union becomes three optional props.\n ...accessibleName\n}: SelectProps) => {\n const groupKeyId = useId();\n\n const renderItem = (item: SelectItem) => (\n <SelectItemComponent\n key={item.value}\n value={item.value}\n icon={item.icon}\n hint={item.hint}\n disabled={item.disabled}\n >\n {item.label}\n </SelectItemComponent>\n );\n\n return (\n <SelectRoot\n value={value}\n defaultValue={defaultValue}\n onValueChange={onValueChange}\n disabled={disabled}\n name={name}\n required={required}\n open={open}\n defaultOpen={defaultOpen}\n onOpenChange={onOpenChange}\n dir={dir}\n autoComplete={autoComplete}\n form={form}\n >\n <SelectTrigger\n {...forwardAccessibleName(accessibleName)}\n variant={variant}\n state={state}\n sizing={sizing}\n placeholder={placeholder}\n className={className}\n onBlur={onBlur}\n aria-describedby={ariaDescribedBy}\n aria-invalid={ariaInvalid}\n aria-required={ariaRequired}\n />\n <SelectContent>\n {items.map((itemOrGroup, index) => {\n if (isGroup(itemOrGroup)) {\n return (\n <SelectGroup key={`${groupKeyId}-group-${index}`}>\n {itemOrGroup.label && <SelectLabel>{itemOrGroup.label}</SelectLabel>}\n {itemOrGroup.items.map(renderItem)}\n </SelectGroup>\n );\n }\n\n return renderItem(itemOrGroup);\n })}\n </SelectContent>\n </SelectRoot>\n );\n};\n\nSelect.Root = SelectRoot;\nSelect.Trigger = SelectTrigger;\nSelect.Content = SelectContent;\nSelect.Item = SelectItemComponent;\nSelect.Group = SelectGroup;\nSelect.Label = SelectLabel;\nSelect.Separator = SelectSeparator;\n"],"mappings":"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"}

package/dist/{Sheet-D0fAE14T.js → Sheet-utw4_rUa.js} RENAMED Viewed

@@ -1,8 +1,8 @@
-import { cn } from "./classNames-BzrkDnOD.js";
+import { cn } from "./classNames-DcGnTh2N.js";
 import { useArgoDesign } from "./context-U293r3v-.js";
-import { X } from "./icons-wcA70iQx.js";
-import { Button } from "./Button-B21oVcPU.js";
-import { ModalDescription, ModalOverlay, ModalTitle } from "./ModalTitle-BxopkIoQ.js";
+import { X } from "./icons-ZIeZXXS7.js";
+import { Button } from "./Button-D2JqBAq7.js";
+import { ModalDescription, ModalOverlay, ModalTitle } from "./ModalTitle-CTECVgL8.js";
 import { cva } from "class-variance-authority";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Close, Content, Portal, Root, Title, Trigger } from "@radix-ui/react-dialog";
@@ -53,7 +53,7 @@ const sheetContentVariants = cva([
 				"tw:h-auto",
 				"tw:data-[state=closed]:slide-out-to-top",
 				"tw:data-[state=open]:slide-in-from-top",
-				"tw:data-[argo=true]:rounded-b-lg"
+				"tw:data-[argo=true]:rounded-b-sheet"
 			],
 			right: [
 				"tw:inset-y-0",
@@ -61,7 +61,7 @@ const sheetContentVariants = cva([
 				"tw:h-full",
 				"tw:data-[state=closed]:slide-out-to-right",
 				"tw:data-[state=open]:slide-in-from-right",
-				"tw:data-[argo=true]:rounded-l-lg"
+				"tw:data-[argo=true]:rounded-l-sheet"
 			],
 			bottom: [
 				"tw:inset-x-0",
@@ -70,7 +70,7 @@ const sheetContentVariants = cva([
 				"tw:data-[state=closed]:slide-out-to-bottom",
 				"tw:data-[state=open]:slide-in-from-bottom",
 				"tw:drop-shadow-2xl",
-				"tw:data-[argo=true]:rounded-t-lg"
+				"tw:data-[argo=true]:rounded-t-sheet"
 			],
 			left: [
 				"tw:inset-y-0",
@@ -78,7 +78,7 @@ const sheetContentVariants = cva([
 				"tw:h-full",
 				"tw:data-[state=closed]:slide-out-to-left",
 				"tw:data-[state=open]:slide-in-from-left",
-				"tw:data-[argo=true]:rounded-r-lg"
+				"tw:data-[argo=true]:rounded-r-sheet"
 			]
 		}
 	}
@@ -162,4 +162,4 @@ Sheet.Body = SheetBody;
 //#endregion
 export { Sheet };
-//# sourceMappingURL=Sheet-D0fAE14T.js.map
+//# sourceMappingURL=Sheet-utw4_rUa.js.map

package/dist/Sheet-utw4_rUa.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"Sheet-utw4_rUa.js","names":[],"sources":["../src/components/Sheet/SheetBody.tsx","../src/components/Sheet/SheetOverlay.tsx","../src/components/Sheet/SheetContent.tsx","../src/components/Sheet/SheetFooter.tsx","../src/components/Sheet/SheetHeader.tsx","../src/components/Sheet/SheetTitle.tsx","../src/components/Sheet/Sheet.tsx"],"sourcesContent":["import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<'div'>;\n\nexport const SheetBody = ({ className, ...rest }: Props) => (\n <div\n {...rest}\n className={cn('tw:flex', 'tw:flex-col', 'tw:overflow-x-hidden', 'tw:px-4', className)}\n />\n);\n","import type { ComponentProps } from 'react';\n\nimport { ModalOverlay } from '../Modal/ModalOverlay';\n\ntype Props = ComponentProps<typeof ModalOverlay>;\n\n// Assuming it should have the same style as standard modal, if not remove the modal dependency and style it separately.\nexport const SheetOverlay = ({ ref, ...props }: Props) => <ModalOverlay ref={ref} {...props} />;\n","import type { ComponentProps } from 'react';\nimport { Content, Portal } from '@radix-ui/react-dialog';\nimport type { VariantProps } from 'class-variance-authority';\nimport { cva } from 'class-variance-authority';\n\nimport { cn } from '../../utils';\nimport { useArgoDesign } from '../ThemeProvider/context';\n\nimport { SheetOverlay } from './SheetOverlay';\n\nconst sheetContentVariants = cva(\n [\n 'tailwindcss-preflight',\n\n 'tw:fixed',\n\n 'tw:z-[1051]',\n\n 'tw:flex',\n 'tw:flex-col',\n\n 'tw:bg-card',\n 'tw:text-card-foreground',\n 'tw:shadow-lg',\n\n 'tw:data-[argo=true]:border',\n 'tw:data-[argo=true]:border-border',\n 'tw:data-[argo=true]:focus-visible:outline-hidden',\n 'tw:data-[argo=true]:focus-visible:ring-2',\n 'tw:data-[argo=true]:focus-visible:ring-ring/50',\n\n 'tw:ease-in-out',\n 'tw:data-[state=open]:duration-200',\n 'tw:data-[state=closed]:duration-200',\n ],\n {\n defaultVariants: {\n side: 'right',\n disableTransition: false,\n },\n variants: {\n disableTransition: {\n true: [],\n false: ['tw:data-[state=open]:animate-in', 'tw:data-[state=closed]:animate-out'],\n },\n side: {\n top: [\n 'tw:inset-x-0',\n 'tw:top-0',\n 'tw:h-auto',\n 'tw:data-[state=closed]:slide-out-to-top',\n 'tw:data-[state=open]:slide-in-from-top',\n 'tw:data-[argo=true]:rounded-b-sheet',\n ],\n right: [\n 'tw:inset-y-0',\n 'tw:right-0',\n 'tw:h-full',\n 'tw:data-[state=closed]:slide-out-to-right',\n 'tw:data-[state=open]:slide-in-from-right',\n 'tw:data-[argo=true]:rounded-l-sheet',\n ],\n\n bottom: [\n 'tw:inset-x-0',\n 'tw:bottom-0',\n 'tw:h-auto',\n 'tw:data-[state=closed]:slide-out-to-bottom',\n 'tw:data-[state=open]:slide-in-from-bottom',\n 'tw:drop-shadow-2xl', // standard tailwindcss shadow is invisible for a bottom sheet because of positioning\n 'tw:data-[argo=true]:rounded-t-sheet',\n ],\n\n left: [\n 'tw:inset-y-0',\n 'tw:left-0',\n 'tw:h-full',\n 'tw:data-[state=closed]:slide-out-to-left',\n 'tw:data-[state=open]:slide-in-from-left',\n 'tw:data-[argo=true]:rounded-r-sheet',\n ],\n },\n },\n },\n);\n\ntype Props = ComponentProps<typeof Content> & {\n side?: 'top' | 'right' | 'bottom' | 'left';\n hideOverlay?: boolean;\n keepOpenOnPointerDownOutside?: boolean;\n} & VariantProps<typeof sheetContentVariants> &\n Pick<ComponentProps<typeof Portal>, 'container'>;\n\nexport const SheetContent = ({\n className,\n children,\n side = 'right',\n disableTransition = false,\n hideOverlay = false,\n keepOpenOnPointerDownOutside = false,\n onPointerDownOutside,\n onInteractOutside,\n container,\n ...props\n}: Props) => {\n const renderArgo = useArgoDesign();\n\n const handleOnPointerDownOutside: ComponentProps<typeof Content>['onPointerDownOutside'] = (\n event,\n ) => {\n if (keepOpenOnPointerDownOutside) event.preventDefault();\n onPointerDownOutside?.(event);\n };\n\n const handleOnInteractOutside: ComponentProps<typeof Content>['onInteractOutside'] = (event) => {\n if (keepOpenOnPointerDownOutside) event.preventDefault();\n onInteractOutside?.(event);\n };\n\n return (\n <Portal container={container}>\n {!hideOverlay && <SheetOverlay disableTransition={disableTransition ?? false} />}\n <Content\n {...props}\n // Silences Radix's missing-description warning; no sheet uses a description.\n aria-describedby={undefined}\n className={cn(sheetContentVariants({ side, className, disableTransition }))}\n onPointerDownOutside={handleOnPointerDownOutside}\n onInteractOutside={handleOnInteractOutside}\n data-side={side}\n data-argo={renderArgo}\n >\n {children}\n </Content>\n </Portal>\n );\n};\n","import type { ComponentProps } from 'react';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<'div'>;\n\nexport const SheetFooter = ({ className, ...props }: Props) => (\n <div className={cn('tw:mt-auto tw:flex tw:flex-col tw:gap-2 tw:p-4', className)} {...props} />\n);\n","import type { ComponentProps, ReactNode } from 'react';\nimport { Close } from '@radix-ui/react-dialog';\n\nimport { X } from '../../icons';\nimport { cn } from '../../utils';\nimport { Button } from '../Button';\nimport { ModalDescription } from '../Modal/ModalDescription';\nimport { ModalTitle } from '../Modal/ModalTitle';\n\ntype Props = {\n title?: ReactNode;\n description?: ReactNode;\n hideCloseIcon?: boolean;\n} & ComponentProps<'div'>;\n\nexport const SheetHeader = ({\n className,\n children,\n hideCloseIcon = false,\n title,\n description,\n ...props\n}: Props) => {\n const isHeaderRendered = title || description || !hideCloseIcon;\n\n return (\n <div className={cn('tw:flex', 'tw:flex-col', 'tw:gap-1.5', 'tw:p-4', className)} {...props}>\n {isHeaderRendered && (\n <div className=\"tw:flex tw:flex-col\">\n <div className=\"tw:flex tw:justify-end tw:gap-2\">\n {title && <ModalTitle>{title}</ModalTitle>}\n {!hideCloseIcon && (\n <Close asChild>\n <Button variant=\"invisible\" size=\"icon-sm\">\n <X />\n <span className=\"tw:sr-only\">Close</span>\n </Button>\n </Close>\n )}\n </div>\n {description && <ModalDescription>{description}</ModalDescription>}\n </div>\n )}\n\n {children}\n </div>\n );\n};\n","import type { ComponentProps } from 'react';\nimport { Title } from '@radix-ui/react-dialog';\n\nimport { cn } from '../../utils';\n\ntype Props = ComponentProps<typeof Title> & {\n visuallyHidden?: boolean;\n};\n\nexport const SheetTitle = ({ className, visuallyHidden = false, ...props }: Props) => (\n <Title className={cn({ 'tw:sr-only': visuallyHidden }, className)} {...props} />\n);\n","import type { ComponentProps } from 'react';\nimport { Close, Root, Trigger } from '@radix-ui/react-dialog';\n\nimport { SheetBody } from './SheetBody';\nimport { SheetContent } from './SheetContent';\nimport { SheetFooter } from './SheetFooter';\nimport { SheetHeader } from './SheetHeader';\nimport { SheetTitle } from './SheetTitle';\n\ntype Props = ComponentProps<typeof Root>;\n\nexport const Sheet = (props: Props) => <Root {...props} />;\n\nSheet.Close = Close;\nSheet.Trigger = Trigger;\nSheet.Content = SheetContent;\nSheet.Title = SheetTitle;\n\nSheet.Header = SheetHeader;\nSheet.Footer = SheetFooter;\nSheet.Body = SheetBody;\n"],"mappings":";;;;;;;;;AAMA,MAAa,aAAa,EAAE,WAAW,GAAG,WACxC,oBAAC,OAAD;CACE,GAAI;CACJ,WAAW,GAAG,WAAW,eAAe,wBAAwB,WAAW,SAAS;AACrF,CAAA;;;ACHH,MAAa,gBAAgB,EAAE,KAAK,GAAG,YAAmB,oBAAC,cAAD;CAAmB;CAAK,GAAI;AAAQ,CAAA;;;ACG9F,MAAM,uBAAuB,IAC3B;CACE;CAEA;CAEA;CAEA;CACA;CAEA;CACA;CACA;CAEA;CACA;CACA;CACA;CACA;CAEA;CACA;CACA;AACF,GACA;CACE,iBAAiB;EACf,MAAM;EACN,mBAAmB;CACrB;CACA,UAAU;EACR,mBAAmB;GACjB,MAAM,CAAC;GACP,OAAO,CAAC,mCAAmC,oCAAoC;EACjF;EACA,MAAM;GACJ,KAAK;IACH;IACA;IACA;IACA;IACA;IACA;GACF;GACA,OAAO;IACL;IACA;IACA;IACA;IACA;IACA;GACF;GAEA,QAAQ;IACN;IACA;IACA;IACA;IACA;IACA;IACA;GACF;GAEA,MAAM;IACJ;IACA;IACA;IACA;IACA;IACA;GACF;EACF;CACF;AACF,CACF;AASA,MAAa,gBAAgB,EAC3B,WACA,UACA,OAAO,SACP,oBAAoB,OACpB,cAAc,OACd,+BAA+B,OAC/B,sBACA,mBACA,WACA,GAAG,YACQ;CACX,MAAM,aAAa,cAAc;CAEjC,MAAM,8BACJ,UACG;EACH,IAAI,8BAA8B,MAAM,eAAe;EACvD,uBAAuB,KAAK;CAC9B;CAEA,MAAM,2BAAgF,UAAU;EAC9F,IAAI,8BAA8B,MAAM,eAAe;EACvD,oBAAoB,KAAK;CAC3B;CAEA,OACE,qBAAC,QAAD;EAAmB;EAAnB,UAAA,CACG,CAAC,eAAe,oBAAC,cAAD,EAAc,mBAAmB,qBAAqB,MAAQ,CAAA,GAC/E,oBAAC,SAAD;GACE,GAAI;GAEJ,oBAAkB,KAAA;GAClB,WAAW,GAAG,qBAAqB;IAAE;IAAM;IAAW;GAAkB,CAAC,CAAC;GAC1E,sBAAsB;GACtB,mBAAmB;GACnB,aAAW;GACX,aAAW;GAEV;EACM,CAAA,CACH;;AAEZ;;;AClIA,MAAa,eAAe,EAAE,WAAW,GAAG,YAC1C,oBAAC,OAAD;CAAK,WAAW,GAAG,kDAAkD,SAAS;CAAG,GAAI;AAAQ,CAAA;;;ACQ/F,MAAa,eAAe,EAC1B,WACA,UACA,gBAAgB,OAChB,OACA,aACA,GAAG,YACQ;CACX,MAAM,mBAAmB,SAAS,eAAe,CAAC;CAElD,OACE,qBAAC,OAAD;EAAK,WAAW,GAAG,WAAW,eAAe,cAAc,UAAU,SAAS;EAAG,GAAI;EAArF,UAAA,CACG,oBACC,qBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACE,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACG,SAAS,oBAAC,YAAD,EAAA,UAAa,MAAkB,CAAA,GACxC,CAAC,iBACA,oBAAC,OAAD;KAAO,SAAA;KACL,UAAA,qBAAC,QAAD;MAAQ,SAAQ;MAAY,MAAK;MAAjC,UAAA,CACE,oBAAC,GAAD,CAAI,CAAA,GACJ,oBAAC,QAAD;OAAM,WAAU;OAAa,UAAA;MAAW,CAAA,CAClC;;IACH,CAAA,CAEN;GACJ,CAAA,GAAA,eAAe,oBAAC,kBAAD,EAAA,UAAmB,YAA8B,CAAA,CAC9D;EAGN,CAAA,GAAA,QACE;;AAET;;;ACtCA,MAAa,cAAc,EAAE,WAAW,iBAAiB,OAAO,GAAG,YACjE,oBAAC,OAAD;CAAO,WAAW,GAAG,EAAE,cAAc,eAAe,GAAG,SAAS;CAAG,GAAI;AAAQ,CAAA;;;ACCjF,MAAa,SAAS,UAAiB,oBAAC,MAAD,EAAM,GAAI,MAAQ,CAAA;AAEzD,MAAM,QAAQ;AACd,MAAM,UAAU;AAChB,MAAM,UAAU;AAChB,MAAM,QAAQ;AAEd,MAAM,SAAS;AACf,MAAM,SAAS;AACf,MAAM,OAAO"}

package/dist/{Sidebar-D9ytIs8V.js → Sidebar-BAmux2Uj.js} RENAMED Viewed

@@ -1,19 +1,19 @@
-import { cn } from "./classNames-BzrkDnOD.js";
-import { Tooltip, TooltipProvider } from "./utils-Bd28bWgm.js";
+import { cn } from "./classNames-DcGnTh2N.js";
+import { Tooltip, TooltipProvider } from "./utils-LQ4jJA-9.js";
 import { mergeRefs } from "./internal/utils/mergeRefs.js";
-import { ChevronDown, Search } from "./icons-wcA70iQx.js";
-import { DropdownMenu } from "./DropdownMenu-BJGLjpVc.js";
+import { ChevronDown, Search } from "./icons-ZIeZXXS7.js";
+import { DropdownMenu } from "./DropdownMenu-B1gGvZoh.js";
 import { ScrollArea } from "./internal/components/ScrollArea.js";
 import { Separator } from "./internal/components/Separator.js";
-import { Sheet } from "./Sheet-D0fAE14T.js";
-import { HoverCard } from "./HoverCard-B8OKu9XZ.js";
+import { Sheet } from "./Sheet-utw4_rUa.js";
+import { HoverCard } from "./HoverCard-BBdPYqEf.js";
 import { useElement } from "./useElement-D-RjrGa4.js";
-import { Collapsible } from "./Collapsible-BQXWEOBC.js";
-import { useThemeScopeContainer } from "./ThemeProvider-VF38VfUa.js";
-import { BrandLogo } from "./BrandLogo-CKpVSZb6.js";
+import { Collapsible } from "./Collapsible-DD4xTL75.js";
+import { useThemeScopeContainer } from "./ThemeProvider-C8yaKlM1.js";
+import { BrandLogo } from "./BrandLogo-BfITD0im.js";
 import { useScrollbarPosition } from "./internal/hooks/useScrollbarPosition.js";
-import { Root, Slot, Slottable } from "@radix-ui/react-slot";
 import { createContext, use, useCallback, useEffect, useLayoutEffect, useMemo, useReducer, useRef, useState, useSyncExternalStore } from "react";
+import { Root, Slot, Slottable } from "@radix-ui/react-slot";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/Sidebar/SidebarProvider/useTransitionPresence.ts
 const FALLBACK_TIMEOUT_MS = 500;
@@ -495,6 +495,8 @@ const useDestinationDismiss = (props, onClick) => {
 };
 //#endregion
 //#region src/components/Sidebar/SidebarMenu/SidebarMenuButton.tsx
+/** A collapsed rail is icon-only, so its labels appear almost at once instead of after the default 300ms. */
+const COLLAPSED_TOOLTIP_DELAY_MS = 50;
 const SidebarMenuButton = ({ ref, "aria-selected": selected, className, children, asChild = false, icon, tooltip, onClick, ...props }) => {
 	const Component = asChild ? Root : "button";
 	const { state, mode, side } = useSidebarInstance();
@@ -506,13 +508,14 @@ const SidebarMenuButton = ({ ref, "aria-selected": selected, className, children
 		"data-slot": "sidebar-menu-button",
 		...asChild ? {} : { type: "button" },
 		...selected === void 0 ? {} : { "aria-selected": selected },
-		className: cn("tw:peer/sidebar-menu-button", "tw:group/sidebar-menu-button", "tw:group-data-[state=expanded]/sidebar:group-has-[[data-slot=sidebar-menu-action][data-hover-only=false]]/sidebar-menu-item:pr-8", "tw:group-data-[state=expanded]/sidebar:[&:has(+[data-slot=\"sidebar-menu-action\"])]:group-hover/sidebar-menu-item:pr-8", "tw:group-data-[state=expanded]/sidebar:[&:has(+[data-slot=\"sidebar-menu-action\"])]:group-focus-within/sidebar-menu-item:pr-8", "tw:group-data-[state=expanded]/sidebar:[&:has(+[data-slot=\"sidebar-menu-action\"][data-hover-only=true][data-state=open])]:pr-8", "tw:flex", "tw:w-full", "tw:gap-2", "tw:items-center", "tw:z-10", "tw:font-normal", "tw:text-sidebar-foreground", "tw:p-2", "tw:whitespace-nowrap", "tw:overflow-hidden", "tw:rounded-lg", "tw:text-start", "tw:no-underline", "tw:select-none", "tw:hover:not-disabled:bg-sidebar-accent", "tw:hover:text-sidebar-accent-foreground", "tw:focus:text-sidebar-accent-foreground", "tw:data-[slot=dropdown-menu-trigger]:data-[state=open]:bg-sidebar-accent", "tw:disabled:opacity-50", "tw:disabled:cursor-not-allowed", "tw:aria-selected:font-medium", "tw:aria-selected:bg-sidebar-accent", "tw:aria-selected:cursor-default", "tw:aria-[current=page]:bg-sidebar-accent", "tw:aria-[current=page]:font-medium", "tw:aria-[current=page]:focus:text-sidebar-accent-foreground", "tw:focus-visible:outline-hidden", "tw:focus-visible:z-10", "tw:focus-visible:ring-2", "tw:focus-visible:ring-sidebar-ring/50", "tw:focus-visible:text-sidebar-foreground", className),
+		className: cn("tw:peer/sidebar-menu-button", "tw:group/sidebar-menu-button", "tw:group-data-[state=expanded]/sidebar:group-has-[[data-slot=sidebar-menu-action][data-hover-only=false]]/sidebar-menu-item:pr-8", "tw:group-data-[state=expanded]/sidebar:[&:has(+[data-slot=\"sidebar-menu-action\"])]:group-hover/sidebar-menu-item:pr-8", "tw:group-data-[state=expanded]/sidebar:[&:has(+[data-slot=\"sidebar-menu-action\"])]:group-focus-within/sidebar-menu-item:pr-8", "tw:group-data-[state=expanded]/sidebar:[&:has(+[data-slot=\"sidebar-menu-action\"][data-hover-only=true][data-state=open])]:pr-8", "tw:flex", "tw:w-full", "tw:gap-2", "tw:items-center", "tw:z-10", "tw:font-normal", "tw:text-sidebar-foreground", "tw:p-2", "tw:whitespace-nowrap", "tw:overflow-hidden", "tw:rounded-lg", "tw:text-start", "tw:no-underline", "tw:select-none", "tw:hover:not-disabled:bg-sidebar-hover", "tw:hover:text-sidebar-hover-foreground", "tw:focus:text-sidebar-hover-foreground", "tw:data-[slot=dropdown-menu-trigger]:data-[state=open]:bg-sidebar-hover", "tw:disabled:opacity-disabled", "tw:disabled:cursor-not-allowed", "tw:aria-selected:font-medium", "tw:aria-selected:bg-sidebar-selected", "tw:aria-selected:hover:not-disabled:bg-sidebar-selected", "tw:aria-selected:text-[var(--sidebar-selected-foreground,rgb(var(--sidebar-foreground)))]", "tw:aria-selected:hover:text-[var(--sidebar-selected-foreground,rgb(var(--sidebar-accent-foreground)))]", "tw:aria-selected:focus:text-[var(--sidebar-selected-foreground,rgb(var(--sidebar-accent-foreground)))]", "tw:aria-selected:cursor-default", "tw:aria-[current=page]:bg-sidebar-selected", "tw:aria-[current=page]:hover:not-disabled:bg-sidebar-selected", "tw:aria-[current=page]:text-[var(--sidebar-selected-foreground,rgb(var(--sidebar-foreground)))]", "tw:aria-[current=page]:hover:text-[var(--sidebar-selected-foreground,rgb(var(--sidebar-accent-foreground)))]", "tw:aria-[current=page]:font-medium", "tw:aria-[current=page]:focus:text-sidebar-selected-foreground", "tw:focus-visible:outline-hidden", "tw:focus-visible:z-10", "tw:focus-visible:ring-2", "tw:focus-visible:ring-sidebar-ring/50", "tw:focus-visible:text-sidebar-foreground", className),
 		tabIndex: 0,
 		children: [icon && /* @__PURE__ */ jsx(SidebarMenuIcon, { children: icon }), /* @__PURE__ */ jsx(Slottable, { children })]
 	});
 	if (state === "collapsed" && mode !== "expand-on-hover" && tooltip) return /* @__PURE__ */ jsx(Tooltip, {
 		tooltip,
 		placement: side === "right" ? "left" : "right",
+		delayDuration: COLLAPSED_TOOLTIP_DELAY_MS,
 		triggerAsChild: true,
 		children: button
 	});
@@ -538,7 +541,7 @@ const SidebarMenuAction = ({ ref, className, asChild = false, showOnHover = fals
 };
 //#endregion
 //#region src/components/Sidebar/SidebarMenu/SidebarSearchInput.tsx
-const wrapperClassnames = cn("tw:group/search-input", "tw:relative", "tw:flex", "tw:items-center", "tw:min-h-9", "tw:rounded-lg", "tw:border", "tw:transition-all", "tw:group-data-[state=collapsed]/sidebar:cursor-pointer", "tw:group-data-[state=collapsed]/sidebar:border-transparent", "tw:group-data-[state=collapsed]/sidebar:hover:bg-sidebar-accent", "tw:group-data-[state=expanded]/sidebar:cursor-text", "tw:group-data-[state=expanded]/sidebar:px-2", "tw:group-data-[state=expanded]/sidebar:border-neutral-200", "tw:focus-within:ring-2", "tw:focus-within:ring-sidebar-ring/50", "tw:focus-within:text-sidebar-foreground");
+const wrapperClassnames = cn("tw:group/search-input", "tw:relative", "tw:flex", "tw:items-center", "tw:min-h-9", "tw:rounded-lg", "tw:border", "tw:transition-all", "tw:group-data-[state=collapsed]/sidebar:cursor-pointer", "tw:group-data-[state=collapsed]/sidebar:border-transparent", "tw:group-data-[state=collapsed]/sidebar:hover:bg-sidebar-hover", "tw:group-data-[state=expanded]/sidebar:cursor-text", "tw:group-data-[state=expanded]/sidebar:px-2", "tw:group-data-[state=expanded]/sidebar:border-neutral-200", "tw:focus-within:ring-2", "tw:focus-within:ring-sidebar-ring/50", "tw:focus-within:text-sidebar-foreground");
 const SidebarSearchInput = ({ ref: forwardedRef, className, ...inputProps }) => {
 	const { side } = useSidebarInstance();
 	const { setMode } = useSidebar(side);
@@ -586,7 +589,7 @@ const SidebarMenuCard = ({ children, className, icon, title, ...rest }) => {
 				...rest,
 				"data-slot": "sidebar-menu-card",
 				tabIndex: isExpanded ? -1 : 0,
-				className: cn("tw:group/sidebar-menu-card", "tw:peer/sidebar-menu-card", "tw:overflow-hidden", "tw:border", "tw:border-sidebar-border", "tw:rounded-2xl", "tw:grid", "tw:grid-rows-[1fr]", "tw:flex-1", "tw:p-4", "tw:group-data-[fill=false]/sidebar:group-data-[state=collapsed]/sidebar:group-data-[collapsible=icon]/sidebar:p-2", "tw:group-data-[fill=false]/sidebar:group-data-[state=collapsed]/sidebar:group-data-[collapsible=icon]/sidebar:border-transparent", "tw:group-data-[fill=false]/sidebar:group-data-[state=collapsed]/sidebar:group-data-[collapsible=icon]/sidebar:grid-rows-[18px]", "tw:group-data-[fill=false]/sidebar:group-data-[state=collapsed]/sidebar:group-data-[collapsible=icon]/sidebar:rounded-md", "tw:outline-hidden", "tw:group-data-[fill=false]/sidebar:group-data-[state=collapsed]/sidebar:group-data-[collapsible=icon]/sidebar:hover:bg-sidebar-accent", "tw:group-data-[fill=false]/sidebar:group-data-[state=collapsed]/sidebar:group-data-[collapsible=icon]/sidebar:focus-visible:ring-2", "tw:group-data-[fill=false]/sidebar:group-data-[state=collapsed]/sidebar:group-data-[collapsible=icon]/sidebar:focus-visible:ring-sidebar-ring/50", "tw:transition-[padding,border]", "tw:duration-(--sidebar-motion-duration)", "tw:ease-(--sidebar-motion-easing)", "tw:motion-reduce:transition-none"),
+				className: cn("tw:group/sidebar-menu-card", "tw:peer/sidebar-menu-card", "tw:overflow-hidden", "tw:border", "tw:border-sidebar-border", "tw:rounded-2xl", "tw:grid", "tw:grid-rows-[1fr]", "tw:flex-1", "tw:p-4", "tw:group-data-[fill=false]/sidebar:group-data-[state=collapsed]/sidebar:group-data-[collapsible=icon]/sidebar:p-2", "tw:group-data-[fill=false]/sidebar:group-data-[state=collapsed]/sidebar:group-data-[collapsible=icon]/sidebar:border-transparent", "tw:group-data-[fill=false]/sidebar:group-data-[state=collapsed]/sidebar:group-data-[collapsible=icon]/sidebar:grid-rows-[18px]", "tw:group-data-[fill=false]/sidebar:group-data-[state=collapsed]/sidebar:group-data-[collapsible=icon]/sidebar:rounded-md", "tw:outline-hidden", "tw:group-data-[fill=false]/sidebar:group-data-[state=collapsed]/sidebar:group-data-[collapsible=icon]/sidebar:hover:bg-sidebar-hover", "tw:group-data-[fill=false]/sidebar:group-data-[state=collapsed]/sidebar:group-data-[collapsible=icon]/sidebar:focus-visible:ring-2", "tw:group-data-[fill=false]/sidebar:group-data-[state=collapsed]/sidebar:group-data-[collapsible=icon]/sidebar:focus-visible:ring-sidebar-ring/50", "tw:transition-[padding,border]", "tw:duration-(--sidebar-motion-duration)", "tw:ease-(--sidebar-motion-easing)", "tw:motion-reduce:transition-none"),
 				children: /* @__PURE__ */ jsxs("div", {
 					className: "tw:flex tw:flex-col tw:gap-2",
 					children: [/* @__PURE__ */ jsxs(Title, { children: [/* @__PURE__ */ jsx(SidebarMenuIcon, {
@@ -659,7 +662,7 @@ const SidebarMenuSub = ({ children, icon, isActive = false, label, defaultOpen =
 					children: /* @__PURE__ */ jsx(SidebarMenuButton, {
 						icon,
 						"data-active": isActive,
-						className: cn("tw:data-[active=true]:bg-sidebar-accent", "tw:data-[active=true]:font-medium"),
+						className: cn("tw:data-[active=true]:bg-sidebar-selected", "tw:data-[active=true]:hover:not-disabled:bg-sidebar-selected", "tw:data-[active=true]:text-[var(--sidebar-selected-foreground,rgb(var(--sidebar-foreground)))]", "tw:data-[active=true]:hover:text-[var(--sidebar-selected-foreground,rgb(var(--sidebar-accent-foreground)))]", "tw:data-[active=true]:font-medium"),
 						children: label
 					})
 				})
@@ -682,7 +685,7 @@ const SidebarMenuSub = ({ children, icon, isActive = false, label, defaultOpen =
 			children: /* @__PURE__ */ jsxs(SidebarMenuButton, {
 				icon,
 				"data-active": isActive && !isCollapsibleOpen,
-				className: cn("tw:group", "tw:data-[active=true]:bg-sidebar-accent", "tw:data-[active=true]:font-medium"),
+				className: cn("tw:group", "tw:data-[active=true]:bg-sidebar-selected", "tw:data-[active=true]:hover:not-disabled:bg-sidebar-selected", "tw:data-[active=true]:text-[var(--sidebar-selected-foreground,rgb(var(--sidebar-foreground)))]", "tw:data-[active=true]:hover:text-[var(--sidebar-selected-foreground,rgb(var(--sidebar-accent-foreground)))]", "tw:data-[active=true]:font-medium"),
 				children: [label, /* @__PURE__ */ jsx(ChevronDown, { className: "tw:ml-auto tw:size-5 tw:transition-transform tw:duration-200 tw:group-data-[state=open]:rotate-180" })]
 			})
 		}), /* @__PURE__ */ jsx(Collapsible.Content, { children: /* @__PURE__ */ jsx("ul", {
@@ -701,7 +704,7 @@ const SidebarMenuSubItem = ({ ref, className, asChild = false, children, disable
 		"aria-current": ariaCurrent,
 		asChild,
 		disabled,
-		className: cn("tw:focus:!bg-sidebar-accent", "tw:aria-[current=page]:bg-sidebar-accent", "tw:aria-[current=page]:focus:text-sidebar-accent-foreground", className),
+		className: cn("tw:focus:!bg-sidebar-hover", "tw:aria-[current=page]:bg-sidebar-selected", "tw:aria-[current=page]:focus:!bg-sidebar-selected", "tw:aria-[current=page]:focus:text-sidebar-selected-foreground", className),
 		children
 	});
 	return /* @__PURE__ */ jsx("li", {
@@ -714,7 +717,7 @@ const SidebarMenuSubItem = ({ ref, className, asChild = false, children, disable
 			"data-slot": "sidebar-menu-sub-button",
 			type: "button",
 			disabled,
-			className: cn("tw:flex", "tw:items-center", "tw:gap-2", "tw:h-7", "tw:w-full", "tw:min-w-0", "tw:px-2", "tw:text-sidebar-foreground", "tw:text-sm", "tw:font-normal", "tw:text-start", "tw:whitespace-nowrap", "tw:overflow-hidden", "tw:rounded-md", "tw:no-underline", "tw:select-none", "tw:outline-hidden", "tw:hover:not-disabled:bg-sidebar-accent", "tw:hover:text-sidebar-accent-foreground", "tw:focus:text-sidebar-accent-foreground", "tw:aria-selected:font-medium", "tw:aria-selected:bg-sidebar-accent", "tw:aria-[current=page]:bg-sidebar-accent", "tw:aria-[current=page]:font-medium", "tw:disabled:opacity-50", "tw:disabled:cursor-not-allowed", "tw:focus-visible:outline-hidden", "tw:focus-visible:ring-2", "tw:focus-visible:ring-sidebar-ring/50", className),
+			className: cn("tw:flex", "tw:items-center", "tw:gap-2", "tw:h-7", "tw:w-full", "tw:min-w-0", "tw:px-2", "tw:text-sidebar-foreground", "tw:text-sm", "tw:font-normal", "tw:text-start", "tw:whitespace-nowrap", "tw:overflow-hidden", "tw:rounded-md", "tw:no-underline", "tw:select-none", "tw:outline-hidden", "tw:hover:not-disabled:bg-sidebar-hover", "tw:hover:text-sidebar-hover-foreground", "tw:focus:text-sidebar-hover-foreground", "tw:aria-selected:font-medium", "tw:aria-selected:bg-sidebar-selected", "tw:aria-selected:hover:not-disabled:bg-sidebar-selected", "tw:aria-selected:text-[var(--sidebar-selected-foreground,rgb(var(--sidebar-foreground)))]", "tw:aria-selected:hover:text-[var(--sidebar-selected-foreground,rgb(var(--sidebar-accent-foreground)))]", "tw:aria-selected:focus:text-[var(--sidebar-selected-foreground,rgb(var(--sidebar-accent-foreground)))]", "tw:aria-[current=page]:bg-sidebar-selected", "tw:aria-[current=page]:hover:not-disabled:bg-sidebar-selected", "tw:aria-[current=page]:text-[var(--sidebar-selected-foreground,rgb(var(--sidebar-foreground)))]", "tw:aria-[current=page]:hover:text-[var(--sidebar-selected-foreground,rgb(var(--sidebar-accent-foreground)))]", "tw:aria-[current=page]:focus:text-[var(--sidebar-selected-foreground,rgb(var(--sidebar-accent-foreground)))]", "tw:aria-[current=page]:font-medium", "tw:disabled:opacity-disabled", "tw:disabled:cursor-not-allowed", "tw:focus-visible:outline-hidden", "tw:focus-visible:ring-2", "tw:focus-visible:ring-sidebar-ring/50", className),
 			children: /* @__PURE__ */ jsx(Slottable, { children })
 		})
 	});
@@ -970,4 +973,4 @@ Sidebar.SubItem = SidebarMenuSubItem;
 //#endregion
 export { Sidebar, SidebarProvider, useOptionalSidebar, useSidebar };
-//# sourceMappingURL=Sidebar-D9ytIs8V.js.map
+//# sourceMappingURL=Sidebar-BAmux2Uj.js.map