@kanso-labs/kanso-ui 0.34.11 → 0.34.13

package/dist/render/useRender.js.map

@@ -1 +1 @@
-{"version":3,"file":"useRender.js","names":["ComponentPropsWithRef","CSSProperties","HTMLAttributes","JSX","ReactElement","Ref","RefCallback","RefObject","cloneElement","createElement","isValidElement","useMemo","Handler","args","ReadonlyArray","IntrinsicTag","IntrinsicElements","RenderComponentProps","Tag","render","RenderProp","RenderFunctionProps","ref","props","UseRenderParameters","defaultTagName","Record","attach","Element","node","cleanup","current","isHandler","value","isHandlerKey","key","test","isRefCallback","isRefObject","joinClassNames","names","filter","Boolean","join","undefined","mergeElementProps","ours","theirs","merged","className","stringOf","style","mergeStyleObjects","styleOf","Object","keys","own","their","mergeRefs","a","b","detachA","detachB","refOf","useRender","t0","$","_c","t1","t2","t3","element","t4","t5","type"],"sources":["../../src/render/useRender.tsx"],"sourcesContent":["import type {\n  ComponentPropsWithRef,\n  CSSProperties,\n  HTMLAttributes,\n  JSX,\n  ReactElement,\n  Ref,\n  RefCallback,\n  RefObject,\n} from 'react'\n\nimport { cloneElement, createElement, isValidElement, useMemo } from 'react'\n\ntype Handler = (...args: ReadonlyArray<unknown>) => unknown\n\ntype IntrinsicTag = keyof JSX.IntrinsicElements\n\n/**\n * The props of a component rendered through {@link useRender}: everything the\n * element accepts, plus `render`.\n */\ntype RenderComponentProps<Tag extends IntrinsicTag> =\n  ComponentPropsWithRef<Tag> & {\n    /**\n     * Replaces the element the component renders by default: another tag, as\n     * `render={<h2 />}`, or a function returning the element to render, given\n     * the props the component would have put on its own.\n     */\n    render?: RenderProp | undefined\n  }\n\n/**\n * What a `render` function is handed: the element's props, merged and ready\n * to spread onto whatever element it returns. `any` on purpose, in the one\n * place it appears — the function may return any element, and a ref typed for\n * one of them would refuse every other.\n */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any -- see above\ntype RenderFunctionProps = HTMLAttributes<any> & { ref?: Ref<any> | undefined }\n\ntype RenderProp = ((props: RenderFunctionProps) => ReactElement) | ReactElement\n\ninterface UseRenderParameters {\n  /**\n   * The tag rendered when `render` is not given.\n   * @default 'div'\n   */\n  defaultTagName?: IntrinsicTag | undefined\n  /** The props to put on whichever element ends up rendered. */\n  props?: Record<string, unknown> | undefined\n  render?: RenderProp | undefined\n}\n\nfunction attach(ref: Ref<Element>, node: Element | null): () => void {\n  if (ref === null) {\n    return () => {}\n  }\n  if (typeof ref === 'function') {\n    const cleanup = ref(node)\n    return typeof cleanup === 'function'\n      ? cleanup\n      : () => {\n          ref(null)\n        }\n  }\n  ref.current = node\n  return () => {\n    ref.current = null\n  }\n}\n\nfunction isHandler(value: unknown): value is Handler {\n  return typeof value === 'function'\n}\n\nfunction isHandlerKey(key: string) {\n  return /^on[A-Z]/u.test(key)\n}\n\nfunction isRefCallback(value: unknown): value is RefCallback<Element> {\n  return typeof value === 'function'\n}\n\nfunction isRefObject(value: unknown): value is RefObject<Element | null> {\n  return typeof value === 'object' && value !== null && 'current' in value\n}\n\n// undefined rather than '' when there is nothing to say, so an element with\n// no classes on either side renders without a class attribute at all.\nfunction joinClassNames(...names: ReadonlyArray<string | undefined>) {\n  return names.filter(Boolean).join(' ') || undefined\n}\n\n/**\n * The component's props over the element's own. The element wins a plain\n * conflict — it is the more specific of the two — while class names, styles\n * and handlers are combined rather than chosen between. `ref` is left out:\n * the hook merges the two refs itself.\n */\nfunction mergeElementProps(\n  ours: Record<string, unknown>,\n  theirs: Record<string, unknown>,\n) {\n  const merged: Record<string, unknown> = { ...ours, ...theirs }\n\n  merged.className = joinClassNames(\n    stringOf(ours.className),\n    stringOf(theirs.className),\n  )\n  merged.style = mergeStyleObjects(styleOf(ours.style), styleOf(theirs.style))\n\n  for (const key of Object.keys(theirs)) {\n    const own = ours[key]\n    const their = theirs[key]\n    if (isHandlerKey(key) && isHandler(own) && isHandler(their)) {\n      // The element's own handler runs first, as the more specific one.\n      merged[key] = (...args: ReadonlyArray<unknown>) => {\n        their(...args)\n        own(...args)\n      }\n    }\n  }\n\n  delete merged.ref\n  return merged\n}\n\n/**\n * One ref that feeds both, or whichever one there is. Attaching through a\n * callback lets each side keep its own cleanup: React 19 calls a callback\n * ref's returned function on detach in place of calling it with `null`, so\n * the merged callback returns one that does the same for each of the two.\n */\nfunction mergeRefs(\n  a: Ref<Element> | undefined,\n  b: Ref<Element> | undefined,\n): Ref<Element> | undefined {\n  if (a === undefined) {\n    return b\n  }\n  if (b === undefined) {\n    return a\n  }\n  return (node: Element | null) => {\n    const detachA = attach(a, node)\n    const detachB = attach(b, node)\n    return () => {\n      detachA()\n      detachB()\n    }\n  }\n}\n\nfunction mergeStyleObjects(\n  ours: CSSProperties | undefined,\n  theirs: CSSProperties | undefined,\n) {\n  if (ours === undefined && theirs === undefined) {\n    return undefined\n  }\n  return { ...ours, ...theirs }\n}\n\nfunction refOf(value: unknown): Ref<Element> | undefined {\n  if (isRefCallback(value) || isRefObject(value)) {\n    return value\n  }\n  return undefined\n}\n\nfunction stringOf(value: unknown) {\n  return typeof value === 'string' ? value : undefined\n}\n\nfunction styleOf(value: unknown) {\n  return typeof value === 'object' && value !== null\n    ? (value as CSSProperties)\n    : undefined\n}\n\n/**\n * Renders a component's element, or whatever its `render` prop asks for\n * instead.\n *\n * `render` is either a React element, cloned with the component's props\n * merged over its own — class names joined, styles merged, event handlers\n * chained, the element's own value winning any other conflict — or a function\n * handed those merged props to return an element of its choosing. Without one,\n * `defaultTagName` is rendered. A default `button` is given `type=\"button\"`,\n * since a bare one submits any form it happens to sit in.\n *\n * The element form is the point of owning this. React Aria's own `render`\n * is a function that must return the element the component would have\n * rendered itself, which suits its interactive components and nothing else;\n * the non-interactive ones here take `render={<h2 />}`, and keeping that\n * contract in a hook of the library's own is what lets them stay put\n * whichever behaviour library sits underneath the rest.\n */\nfunction useRender({\n  defaultTagName = 'div',\n  props = {},\n  render,\n}: UseRenderParameters): ReactElement {\n  const element = isValidElement<Record<string, unknown>>(render)\n    ? render\n    : undefined\n\n  // Both refs, when there are two, have to land on one node. The merged\n  // callback is memoised so React does not detach and re-attach it on every\n  // render — a new identity each time would.\n  //\n  // The dependencies are the props the refs are read from rather than the\n  // refs themselves. React writes through a ref object, so the compiler reads\n  // one as a value that may be modified later and declines to preserve a\n  // memoisation keyed on it — which, under the panic threshold this lands\n  // beside, fails the build. A prop it can prove holds still.\n  const ref = useMemo(\n    () => mergeRefs(refOf(props.ref), refOf(element?.props.ref)),\n    [props.ref, element?.props.ref],\n  )\n\n  if (element !== undefined) {\n    return cloneElement(element, {\n      ...mergeElementProps(props, element.props),\n      ref,\n    })\n  }\n\n  if (typeof render === 'function') {\n    return render({ ...props, ref } as RenderFunctionProps)\n  }\n\n  return createElement(\n    defaultTagName,\n    defaultTagName === 'button'\n      ? { type: 'button', ...props, ref }\n      : { ...props, ref },\n  )\n}\n\nexport type { RenderComponentProps, RenderFunctionProps, UseRenderParameters }\n\nexport { useRender }\n"],"mappings":"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"}
+{"version":3,"file":"useRender.js","names":["ComponentPropsWithRef","CSSProperties","HTMLAttributes","JSX","ReactElement","Ref","RefCallback","RefObject","cloneElement","createElement","isValidElement","useMemo","Handler","args","ReadonlyArray","IntrinsicTag","IntrinsicElements","RenderComponentProps","Tag","render","RenderProp","RenderFunctionProps","ref","props","UseRenderParameters","defaultTagName","Record","attach","Element","node","cleanup","current","isHandler","value","isHandlerKey","key","test","isRefCallback","isRefObject","joinClassNames","names","filter","Boolean","join","undefined","mergeElementProps","ours","theirs","merged","className","stringOf","style","mergeStyleObjects","styleOf","Object","keys","own","their","mergeRefs","a","b","detachA","detachB","refOf","useRender","t0","$","_c","t1","t2","t3","element","t4","t5","type","_c"],"sources":["../../src/render/useRender.tsx"],"sourcesContent":["import type {\n  ComponentPropsWithRef,\n  CSSProperties,\n  HTMLAttributes,\n  JSX,\n  ReactElement,\n  Ref,\n  RefCallback,\n  RefObject,\n} from 'react'\n\nimport { cloneElement, createElement, isValidElement, useMemo } from 'react'\n\ntype Handler = (...args: ReadonlyArray<unknown>) => unknown\n\ntype IntrinsicTag = keyof JSX.IntrinsicElements\n\n/**\n * The props of a component rendered through {@link useRender}: everything the\n * element accepts, plus `render`.\n */\ntype RenderComponentProps<Tag extends IntrinsicTag> =\n  ComponentPropsWithRef<Tag> & {\n    /**\n     * Replaces the element the component renders by default: another tag, as\n     * `render={<h2 />}`, or a function returning the element to render, given\n     * the props the component would have put on its own.\n     */\n    render?: RenderProp | undefined\n  }\n\n/**\n * What a `render` function is handed: the element's props, merged and ready\n * to spread onto whatever element it returns. `any` on purpose, in the one\n * place it appears — the function may return any element, and a ref typed for\n * one of them would refuse every other.\n */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any -- see above\ntype RenderFunctionProps = HTMLAttributes<any> & { ref?: Ref<any> | undefined }\n\ntype RenderProp = ((props: RenderFunctionProps) => ReactElement) | ReactElement\n\ninterface UseRenderParameters {\n  /**\n   * The tag rendered when `render` is not given.\n   * @default 'div'\n   */\n  defaultTagName?: IntrinsicTag | undefined\n  /** The props to put on whichever element ends up rendered. */\n  props?: Record<string, unknown> | undefined\n  render?: RenderProp | undefined\n}\n\nfunction attach(ref: Ref<Element>, node: Element | null): () => void {\n  if (ref === null) {\n    return () => {}\n  }\n  if (typeof ref === 'function') {\n    const cleanup = ref(node)\n    return typeof cleanup === 'function'\n      ? cleanup\n      : () => {\n          ref(null)\n        }\n  }\n  ref.current = node\n  return () => {\n    ref.current = null\n  }\n}\n\nfunction isHandler(value: unknown): value is Handler {\n  return typeof value === 'function'\n}\n\nfunction isHandlerKey(key: string) {\n  return /^on[A-Z]/u.test(key)\n}\n\nfunction isRefCallback(value: unknown): value is RefCallback<Element> {\n  return typeof value === 'function'\n}\n\nfunction isRefObject(value: unknown): value is RefObject<Element | null> {\n  return typeof value === 'object' && value !== null && 'current' in value\n}\n\n// undefined rather than '' when there is nothing to say, so an element with\n// no classes on either side renders without a class attribute at all.\nfunction joinClassNames(...names: ReadonlyArray<string | undefined>) {\n  return names.filter(Boolean).join(' ') || undefined\n}\n\n/**\n * The component's props over the element's own. The element wins a plain\n * conflict — it is the more specific of the two — while class names, styles\n * and handlers are combined rather than chosen between. `ref` is left out:\n * the hook merges the two refs itself.\n */\nfunction mergeElementProps(\n  ours: Record<string, unknown>,\n  theirs: Record<string, unknown>,\n) {\n  const merged: Record<string, unknown> = { ...ours, ...theirs }\n\n  merged.className = joinClassNames(\n    stringOf(ours.className),\n    stringOf(theirs.className),\n  )\n  merged.style = mergeStyleObjects(styleOf(ours.style), styleOf(theirs.style))\n\n  for (const key of Object.keys(theirs)) {\n    const own = ours[key]\n    const their = theirs[key]\n    if (isHandlerKey(key) && isHandler(own) && isHandler(their)) {\n      // The element's own handler runs first, as the more specific one.\n      merged[key] = (...args: ReadonlyArray<unknown>) => {\n        their(...args)\n        own(...args)\n      }\n    }\n  }\n\n  delete merged.ref\n  return merged\n}\n\n/**\n * One ref that feeds both, or whichever one there is. Attaching through a\n * callback lets each side keep its own cleanup: React 19 calls a callback\n * ref's returned function on detach in place of calling it with `null`, so\n * the merged callback returns one that does the same for each of the two.\n */\nfunction mergeRefs(\n  a: Ref<Element> | undefined,\n  b: Ref<Element> | undefined,\n): Ref<Element> | undefined {\n  if (a === undefined) {\n    return b\n  }\n  if (b === undefined) {\n    return a\n  }\n  return (node: Element | null) => {\n    const detachA = attach(a, node)\n    const detachB = attach(b, node)\n    return () => {\n      detachA()\n      detachB()\n    }\n  }\n}\n\nfunction mergeStyleObjects(\n  ours: CSSProperties | undefined,\n  theirs: CSSProperties | undefined,\n) {\n  if (ours === undefined && theirs === undefined) {\n    return undefined\n  }\n  return { ...ours, ...theirs }\n}\n\nfunction refOf(value: unknown): Ref<Element> | undefined {\n  if (isRefCallback(value) || isRefObject(value)) {\n    return value\n  }\n  return undefined\n}\n\nfunction stringOf(value: unknown) {\n  return typeof value === 'string' ? value : undefined\n}\n\nfunction styleOf(value: unknown) {\n  return typeof value === 'object' && value !== null\n    ? (value as CSSProperties)\n    : undefined\n}\n\n/**\n * Renders a component's element, or whatever its `render` prop asks for\n * instead.\n *\n * `render` is either a React element, cloned with the component's props\n * merged over its own — class names joined, styles merged, event handlers\n * chained, the element's own value winning any other conflict — or a function\n * handed those merged props to return an element of its choosing. Without one,\n * `defaultTagName` is rendered. A default `button` is given `type=\"button\"`,\n * since a bare one submits any form it happens to sit in.\n *\n * The element form is the point of owning this. React Aria's own `render`\n * is a function that must return the element the component would have\n * rendered itself, which suits its interactive components and nothing else;\n * the non-interactive ones here take `render={<h2 />}`, and keeping that\n * contract in a hook of the library's own is what lets them stay put\n * whichever behaviour library sits underneath the rest.\n */\nfunction useRender({\n  defaultTagName = 'div',\n  props = {},\n  render,\n}: UseRenderParameters): ReactElement {\n  const element = isValidElement<Record<string, unknown>>(render)\n    ? render\n    : undefined\n\n  // Both refs, when there are two, have to land on one node. The merged\n  // callback is memoised so React does not detach and re-attach it on every\n  // render — a new identity each time would.\n  //\n  // The dependencies are the props the refs are read from rather than the\n  // refs themselves. React writes through a ref object, so the compiler reads\n  // one as a value that may be modified later and declines to preserve a\n  // memoisation keyed on it — which, under the panic threshold this lands\n  // beside, fails the build. A prop it can prove holds still.\n  const ref = useMemo(\n    () => mergeRefs(refOf(props.ref), refOf(element?.props.ref)),\n    [props.ref, element?.props.ref],\n  )\n\n  if (element !== undefined) {\n    return cloneElement(element, {\n      ...mergeElementProps(props, element.props),\n      ref,\n    })\n  }\n\n  if (typeof render === 'function') {\n    return render({ ...props, ref } as RenderFunctionProps)\n  }\n\n  return createElement(\n    defaultTagName,\n    defaultTagName === 'button'\n      ? { type: 'button', ...props, ref }\n      : { ...props, ref },\n  )\n}\n\nexport type { RenderComponentProps, RenderFunctionProps, UseRenderParameters }\n\nexport { useRender }\n"],"mappings":"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"}

package/dist/row/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ReactNode","stylex","rowStyles","RowContentProps","children","isDisabled","isEmphasized","isSelected","leading","overline","supporting","trailing","variant","RowVariant","RowContent","t0","$","_c","t1","t2","t3","t4","undefined","label","t5","supportingInherit","selectedSupportingTone","supportingTone","t6","props","slot","t7","Symbol","for","main","t8","t9","headlineMenu","headlineList","headlineEmphasis","t10","t11","t12","t13","t14","supportingSelectedDrawer","supportingSelectedMenu","supportingSelectedList"],"sources":["../../src/row/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport * as stylex from '@stylexjs/stylex';\nimport { rowStyles } from './styles';\ninterface RowContentProps {\n  /** The row's headline — the one thing it is mostly about. */\n  children?: ReactNode;\n  /**\n   * Whether the row is disabled. The supporting line takes the row's own\n   * faded colour when it is, rather than staying at full strength in the\n   * muted role.\n   * @default false\n   */\n  isDisabled?: boolean;\n  /**\n   * Whether the headline is drawn heavier than its variant's own weight, for\n   * a row marked without the container a selected one takes. The navigation\n   * drawer's trail to the current row is what asks for it.\n   * @default false\n   */\n  isEmphasized?: boolean;\n  /**\n   * Whether the row is selected. The supporting line takes the selected\n   * container's own content role when it is, rather than staying in the\n   * muted role it draws on the surface.\n   * @default false\n   */\n  isSelected?: boolean;\n  /** Content before the headline: an avatar, an icon, a checkbox. */\n  leading?: ReactNode;\n  /**\n   * A line above the headline, in the page's label-small and the same muted\n   * role the supporting line takes.\n   */\n  overline?: ReactNode;\n  /** A second line under the headline, in the muted role. */\n  supporting?: ReactNode;\n  /** Content after the headline, such as an amount or a control. */\n  trailing?: ReactNode;\n  /**\n   * Which spec page's row this is. A list item's headline is body-large; a\n   * menu item's label and a navigation drawer row's are label-large. The\n   * element around the content applies the matching `rowStyles.list`,\n   * `rowStyles.menu` or `rowStyles.drawer` beside `rowStyles.base`.\n   * @default 'list'\n   */\n  variant?: RowVariant;\n}\ntype RowVariant = 'drawer' | 'list' | 'menu';\n\n/**\n * The inside of a row: the leading slot, the headline with its supporting\n * line, and the trailing slot, each rendered only when given. The element\n * around it is the caller's — ListItem's div or button, a collection's item —\n * and takes `rowStyles.base`, the variant's own style, and whichever states\n * apply; this is what every one of them puts inside it, so a list, a menu, a\n * tree and a drawer draw the same row.\n *\n * Not a component of the library's own and not exported; see `src/field` for\n * the same arrangement around a field.\n */\nfunction RowContent({\n  children,\n  isDisabled = false,\n  isEmphasized = false,\n  isSelected = false,\n  leading,\n  overline,\n  supporting,\n  trailing,\n  variant = 'list'\n}: RowContentProps) {\n  // The drawer's label is the menu's, so the two share the headline style;\n  // what they do not share is the container a selected row brings, which is\n  // why the tone below still asks which variant this is.\n  const label = variant === 'drawer' || variant === 'menu';\n  // Disabled first: a disabled row's own colour is already the faded one, so\n  // it wins over the selected container's content role.\n  const supportingTone = isDisabled ? rowStyles.supportingInherit : isSelected && selectedSupportingTone(variant);\n  return <>\n      {leading === undefined ? null : <span {...stylex.props(rowStyles.slot)}>{leading}</span>}\n      <span {...stylex.props(rowStyles.main)}>\n        {overline === undefined ? null : <span {...stylex.props(rowStyles.overline, supportingTone)}>\n            {overline}\n          </span>}\n        <span {...stylex.props(label ? rowStyles.headlineMenu : rowStyles.headlineList, isEmphasized && rowStyles.headlineEmphasis)}>\n          {children}\n        </span>\n        {supporting === undefined ? null : <span {...stylex.props(rowStyles.supporting, supportingTone)}>\n            {supporting}\n          </span>}\n      </span>\n      {trailing === undefined ? null : <span {...stylex.props(rowStyles.slot)}>{trailing}</span>}\n    </>;\n}\n\n// Which on-colour a supporting line takes over a selected row's own\n// container. Each variant's container is a different colour family, and the\n// muted role is not guaranteed to be readable over any of them.\nfunction selectedSupportingTone(variant: RowVariant) {\n  if (variant === 'drawer') {\n    return rowStyles.supportingSelectedDrawer;\n  }\n  if (variant === 'menu') {\n    return rowStyles.supportingSelectedMenu;\n  }\n  return rowStyles.supportingSelectedList;\n}\nexport type { RowContentProps, RowVariant };\nexport { RowContent };"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["ReactNode","stylex","rowStyles","RowContentProps","children","isDisabled","isEmphasized","isSelected","leading","overline","supporting","trailing","variant","RowVariant","RowContent","t0","$","_c","t1","t2","t3","t4","undefined","label","t5","supportingInherit","selectedSupportingTone","supportingTone","t6","props","slot","t7","Symbol","for","main","t8","t9","headlineMenu","headlineList","headlineEmphasis","t10","t11","t12","t13","t14","supportingSelectedDrawer","supportingSelectedMenu","supportingSelectedList","_c","stylex.props"],"sources":["../../src/row/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport * as stylex from '@stylexjs/stylex';\nimport { rowStyles } from './styles';\ninterface RowContentProps {\n  /** The row's headline — the one thing it is mostly about. */\n  children?: ReactNode;\n  /**\n   * Whether the row is disabled. The supporting line takes the row's own\n   * faded colour when it is, rather than staying at full strength in the\n   * muted role.\n   * @default false\n   */\n  isDisabled?: boolean;\n  /**\n   * Whether the headline is drawn heavier than its variant's own weight, for\n   * a row marked without the container a selected one takes. The navigation\n   * drawer's trail to the current row is what asks for it.\n   * @default false\n   */\n  isEmphasized?: boolean;\n  /**\n   * Whether the row is selected. The supporting line takes the selected\n   * container's own content role when it is, rather than staying in the\n   * muted role it draws on the surface.\n   * @default false\n   */\n  isSelected?: boolean;\n  /** Content before the headline: an avatar, an icon, a checkbox. */\n  leading?: ReactNode;\n  /**\n   * A line above the headline, in the page's label-small and the same muted\n   * role the supporting line takes.\n   */\n  overline?: ReactNode;\n  /** A second line under the headline, in the muted role. */\n  supporting?: ReactNode;\n  /** Content after the headline, such as an amount or a control. */\n  trailing?: ReactNode;\n  /**\n   * Which spec page's row this is. A list item's headline is body-large; a\n   * menu item's label and a navigation drawer row's are label-large. The\n   * element around the content applies the matching `rowStyles.list`,\n   * `rowStyles.menu` or `rowStyles.drawer` beside `rowStyles.base`.\n   * @default 'list'\n   */\n  variant?: RowVariant;\n}\ntype RowVariant = 'drawer' | 'list' | 'menu';\n\n/**\n * The inside of a row: the leading slot, the headline with its supporting\n * line, and the trailing slot, each rendered only when given. The element\n * around it is the caller's — ListItem's div or button, a collection's item —\n * and takes `rowStyles.base`, the variant's own style, and whichever states\n * apply; this is what every one of them puts inside it, so a list, a menu, a\n * tree and a drawer draw the same row.\n *\n * Not a component of the library's own and not exported; see `src/field` for\n * the same arrangement around a field.\n */\nfunction RowContent({\n  children,\n  isDisabled = false,\n  isEmphasized = false,\n  isSelected = false,\n  leading,\n  overline,\n  supporting,\n  trailing,\n  variant = 'list'\n}: RowContentProps) {\n  // The drawer's label is the menu's, so the two share the headline style;\n  // what they do not share is the container a selected row brings, which is\n  // why the tone below still asks which variant this is.\n  const label = variant === 'drawer' || variant === 'menu';\n  // Disabled first: a disabled row's own colour is already the faded one, so\n  // it wins over the selected container's content role.\n  const supportingTone = isDisabled ? rowStyles.supportingInherit : isSelected && selectedSupportingTone(variant);\n  return <>\n      {leading === undefined ? null : <span {...stylex.props(rowStyles.slot)}>{leading}</span>}\n      <span {...stylex.props(rowStyles.main)}>\n        {overline === undefined ? null : <span {...stylex.props(rowStyles.overline, supportingTone)}>\n            {overline}\n          </span>}\n        <span {...stylex.props(label ? rowStyles.headlineMenu : rowStyles.headlineList, isEmphasized && rowStyles.headlineEmphasis)}>\n          {children}\n        </span>\n        {supporting === undefined ? null : <span {...stylex.props(rowStyles.supporting, supportingTone)}>\n            {supporting}\n          </span>}\n      </span>\n      {trailing === undefined ? null : <span {...stylex.props(rowStyles.slot)}>{trailing}</span>}\n    </>;\n}\n\n// Which on-colour a supporting line takes over a selected row's own\n// container. Each variant's container is a different colour family, and the\n// muted role is not guaranteed to be readable over any of them.\nfunction selectedSupportingTone(variant: RowVariant) {\n  if (variant === 'drawer') {\n    return rowStyles.supportingSelectedDrawer;\n  }\n  if (variant === 'menu') {\n    return rowStyles.supportingSelectedMenu;\n  }\n  return rowStyles.supportingSelectedList;\n}\nexport type { RowContentProps, RowVariant };\nexport { RowContent };"],"mappings":"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"}

package/dist/segments/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ReactElement","stylex","DateInput","RACDateInput","DateSegment","RACDateSegment","segmentStyles","Segment","Parameters","NonNullable","renderSegment","segment","type","props","segmentLiteral","segmentClassName","state","isDisabled","isFocused","isPlaceholder","segmentPlaceholder","segmentFocused","segmentDisabled","className"],"sources":["../../src/segments/index.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport * as stylex from '@stylexjs/stylex';\nimport { DateInput as RACDateInput, DateSegment as RACDateSegment } from 'react-aria-components';\nimport { segmentStyles } from './styles';\n\n// How a date or a time is drawn once React Aria has decided what its parts\n// are. Shared by DateField and TimeField, which differ only in the value they\n// hold: the segments, their order and their number all come from React Aria,\n// so what is here is the same for both.\n\n// What React Aria hands the input for each part of the date. Taken off the\n// component rather than imported, since the segment type is not on the\n// package's public surface.\ntype Segment = Parameters<NonNullable<Parameters<typeof RACDateInput>[0]['children']>>[0];\n\n// What each segment draws. A literal — the slash or colon between two\n// segments — takes a style of its own, since it is punctuation rather than\n// something a reader types into.\nfunction renderSegment(segment: Segment): ReactElement {\n  if (segment.type === 'literal') {\n    return <RACDateSegment {...stylex.props(segmentStyles.segment, segmentStyles.segmentLiteral)} segment={segment} />;\n  }\n  return <RACDateSegment className={segmentClassName} segment={segment} />;\n}\n\n// A segment's classes, from React Aria's render state. StyleX cannot target\n// `[data-placeholder]` on the element it is styling, so the state comes from\n// what React Aria hands the className.\n//\n// The order matters: `disabled` is last, and StyleX replaces a property\n// whole, so it wins over both the placeholder and the focused branches.\nfunction segmentClassName(state: {\n  isDisabled: boolean;\n  isFocused: boolean;\n  isPlaceholder: boolean;\n}) {\n  return stylex.props(segmentStyles.segment, state.isPlaceholder && segmentStyles.segmentPlaceholder, state.isFocused && segmentStyles.segmentFocused, state.isDisabled && segmentStyles.segmentDisabled).className ?? '';\n}\nexport { renderSegment };"],"mappings":";;;;;AAkBA,SAASU,cAAcC,SAAgC;CACrD,IAAIA,QAAQC,SAAS,WACnB,OAAO,oBAAC,aAAD;EAAgB,GAAIX,MAAaK,cAAcK,SAASL,cAAcQ,cAAc;EAAYH;CAAQ,CAAA;CAEjH,OAAO,oBAAC,aAAD;EAAgB,WAAWI;EAA2BJ;CAAQ,CAAA;AACvE;AAQA,SAASI,iBAAiBC,OAIvB;CACD,OAAOf,MAAaK,cAAcK,SAASK,MAAMG,iBAAiBb,cAAcc,oBAAoBJ,MAAME,aAAaZ,cAAce,gBAAgBL,MAAMC,cAAcX,cAAcgB,eAAe,CAAC,CAACC,aAAa;AACvN"}
+{"version":3,"file":"index.js","names":["ReactElement","stylex","DateInput","RACDateInput","DateSegment","RACDateSegment","segmentStyles","Segment","Parameters","NonNullable","renderSegment","segment","type","props","segmentLiteral","segmentClassName","state","isDisabled","isFocused","isPlaceholder","segmentPlaceholder","segmentFocused","segmentDisabled","className","RACDateSegment","stylex.props"],"sources":["../../src/segments/index.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport * as stylex from '@stylexjs/stylex';\nimport { DateInput as RACDateInput, DateSegment as RACDateSegment } from 'react-aria-components';\nimport { segmentStyles } from './styles';\n\n// How a date or a time is drawn once React Aria has decided what its parts\n// are. Shared by DateField and TimeField, which differ only in the value they\n// hold: the segments, their order and their number all come from React Aria,\n// so what is here is the same for both.\n\n// What React Aria hands the input for each part of the date. Taken off the\n// component rather than imported, since the segment type is not on the\n// package's public surface.\ntype Segment = Parameters<NonNullable<Parameters<typeof RACDateInput>[0]['children']>>[0];\n\n// What each segment draws. A literal — the slash or colon between two\n// segments — takes a style of its own, since it is punctuation rather than\n// something a reader types into.\nfunction renderSegment(segment: Segment): ReactElement {\n  if (segment.type === 'literal') {\n    return <RACDateSegment {...stylex.props(segmentStyles.segment, segmentStyles.segmentLiteral)} segment={segment} />;\n  }\n  return <RACDateSegment className={segmentClassName} segment={segment} />;\n}\n\n// A segment's classes, from React Aria's render state. StyleX cannot target\n// `[data-placeholder]` on the element it is styling, so the state comes from\n// what React Aria hands the className.\n//\n// The order matters: `disabled` is last, and StyleX replaces a property\n// whole, so it wins over both the placeholder and the focused branches.\nfunction segmentClassName(state: {\n  isDisabled: boolean;\n  isFocused: boolean;\n  isPlaceholder: boolean;\n}) {\n  return stylex.props(segmentStyles.segment, state.isPlaceholder && segmentStyles.segmentPlaceholder, state.isFocused && segmentStyles.segmentFocused, state.isDisabled && segmentStyles.segmentDisabled).className ?? '';\n}\nexport { renderSegment };"],"mappings":";;;;;AAkBA,SAASU,cAAcC,SAAgC;CACrD,IAAIA,QAAQC,SAAS,WACnB,OAAO,oBAACY,aAAD;EAAgB,GAAIvB,MAAaK,cAAcK,SAASL,cAAcQ,cAAc;EAAYH;CAAQ,CAAA;CAEjH,OAAO,oBAACa,aAAD;EAAgB,WAAWT;EAA2BJ;CAAQ,CAAA;AACvE;AAQA,SAASI,iBAAiBC,OAIvB;CACD,OAAOf,MAAaK,cAAcK,SAASK,MAAMG,iBAAiBb,cAAcc,oBAAoBJ,MAAME,aAAaZ,cAAce,gBAAgBL,MAAMC,cAAcX,cAAcgB,eAAe,CAAC,CAACC,aAAa;AACvN"}

package/dist/styles/picker.js.map

@@ -1 +1 @@
-{"version":3,"file":"picker.js","names":["stylex","colors","media","shadows","spacing","focus","iconButton","picker","group","kGNEyG","kB7OPa","k1xSpc","kOIVth","kzqmXN","k3XXqK","$$css","popover","kZKoxP","kGVxlE","krVfgx","k87sOh","kt4wiu","kLqNvP","kogj98","kskxy","ks0D6T","kVAEAm","triggerGlyph","triggerClassName","state","isDisabled","props","chrome","ring","chromeDisabled","className"],"sources":["../../src/styles/picker.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport '../tokens/design.tokens.stylex';\nimport { colors, media, shadows, spacing } from '../tokens/design.tokens.stylex';\nimport { focus } from './focus';\nimport { iconButton } from './icon-button';\n\n// What a date picker and a date range picker draw in common: the line the\n// segments and the trigger share, the trigger itself, and the surface the\n// calendar opens on. Both put the same three on screen, and the breakpoint\n// swap below is why they are here rather than written twice — a docked\n// picker and a range picker that disagreed about where the modal sits would\n// be two bugs rather than one.\n//\n// In `src/styles` rather than a `src/picker` of its own, since this is\n// styles more than one component draws, which is what that directory holds.\n// Geometry belonging to one picker alone stays with that picker.\n\nconst picker = {\n  group: {\n    kGNEyG: \"x6s0dn4\",\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kOIVth: \"x126z3so\",\n    kzqmXN: \"xh8yej3\",\n    k3XXqK: \"x1t137rt\",\n    $$css: true\n  },\n  popover: {\n    kZKoxP: \"x1poebcc\",\n    kGVxlE: \"x1os83gw x1l41d60\",\n    kzqmXN: \"xpxzbr4\",\n    krVfgx: \"xudx362\",\n    k87sOh: \"xbvrusa\",\n    kt4wiu: \"x1v0tev1\",\n    kLqNvP: \"x12sfaok\",\n    kogj98: \"xucn3ve\",\n    kskxy: \"xmjxpzh\",\n    ks0D6T: \"x1x1rfll x1493c6o\",\n    kVAEAm: \"x1mesnot\",\n    $$css: true\n  },\n  triggerGlyph: {\n    kZKoxP: \"xxk0z11\",\n    kzqmXN: \"xvy4d1p\",\n    $$css: true\n  }\n};\n\n// The trigger's classes, from React Aria's own render state. A picker's\n// trigger is disabled by the field around it rather than by a prop of its\n// own, so the fade comes off the state React Aria hands the className. It is\n// the same 38% the segments beside it take, so one disabled field fades as a\n// whole.\nfunction triggerClassName(state: {\n  isDisabled: boolean;\n}) {\n  return stylex.props(iconButton.chrome, focus.ring, state.isDisabled && iconButton.chromeDisabled).className ?? '';\n}\nexport { picker, triggerClassName };"],"mappings":";;;;AAiBA,MAAMO,SAAS;CACbC,OAAO;EACLC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,OAAO;CACT;CACAC,SAAS;EACPC,QAAQ;EACRC,QAAQ;EACRL,QAAQ;EACRM,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,OAAO;EACPC,QAAQ;EACRC,QAAQ;EACRX,OAAO;CACT;CACAY,cAAc;EACZV,QAAQ;EACRJ,QAAQ;EACRE,OAAO;CACT;AACF;AAOA,SAASa,iBAAiBC,OAEvB;CACD,OAAO7B,MAAaM,WAAW0B,QAAQ3B,MAAM4B,MAAMJ,MAAMC,cAAcxB,WAAW4B,cAAc,CAAC,CAACC,aAAa;AACjH"}
+{"version":3,"file":"picker.js","names":["stylex","colors","media","shadows","spacing","focus","iconButton","picker","group","kGNEyG","kB7OPa","k1xSpc","kOIVth","kzqmXN","k3XXqK","$$css","popover","kZKoxP","kGVxlE","krVfgx","k87sOh","kt4wiu","kLqNvP","kogj98","kskxy","ks0D6T","kVAEAm","triggerGlyph","triggerClassName","state","isDisabled","props","chrome","ring","chromeDisabled","className","stylex.props"],"sources":["../../src/styles/picker.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport '../tokens/design.tokens.stylex';\nimport { colors, media, shadows, spacing } from '../tokens/design.tokens.stylex';\nimport { focus } from './focus';\nimport { iconButton } from './icon-button';\n\n// What a date picker and a date range picker draw in common: the line the\n// segments and the trigger share, the trigger itself, and the surface the\n// calendar opens on. Both put the same three on screen, and the breakpoint\n// swap below is why they are here rather than written twice — a docked\n// picker and a range picker that disagreed about where the modal sits would\n// be two bugs rather than one.\n//\n// In `src/styles` rather than a `src/picker` of its own, since this is\n// styles more than one component draws, which is what that directory holds.\n// Geometry belonging to one picker alone stays with that picker.\n\nconst picker = {\n  group: {\n    kGNEyG: \"x6s0dn4\",\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kOIVth: \"x126z3so\",\n    kzqmXN: \"xh8yej3\",\n    k3XXqK: \"x1t137rt\",\n    $$css: true\n  },\n  popover: {\n    kZKoxP: \"x1poebcc\",\n    kGVxlE: \"x1os83gw x1l41d60\",\n    kzqmXN: \"xpxzbr4\",\n    krVfgx: \"xudx362\",\n    k87sOh: \"xbvrusa\",\n    kt4wiu: \"x1v0tev1\",\n    kLqNvP: \"x12sfaok\",\n    kogj98: \"xucn3ve\",\n    kskxy: \"xmjxpzh\",\n    ks0D6T: \"x1x1rfll x1493c6o\",\n    kVAEAm: \"x1mesnot\",\n    $$css: true\n  },\n  triggerGlyph: {\n    kZKoxP: \"xxk0z11\",\n    kzqmXN: \"xvy4d1p\",\n    $$css: true\n  }\n};\n\n// The trigger's classes, from React Aria's own render state. A picker's\n// trigger is disabled by the field around it rather than by a prop of its\n// own, so the fade comes off the state React Aria hands the className. It is\n// the same 38% the segments beside it take, so one disabled field fades as a\n// whole.\nfunction triggerClassName(state: {\n  isDisabled: boolean;\n}) {\n  return stylex.props(iconButton.chrome, focus.ring, state.isDisabled && iconButton.chromeDisabled).className ?? '';\n}\nexport { picker, triggerClassName };"],"mappings":";;;;AAiBA,MAAMO,SAAS;CACbC,OAAO;EACLC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,OAAO;CACT;CACAC,SAAS;EACPC,QAAQ;EACRC,QAAQ;EACRL,QAAQ;EACRM,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,OAAO;EACPC,QAAQ;EACRC,QAAQ;EACRX,OAAO;CACT;CACAY,cAAc;EACZV,QAAQ;EACRJ,QAAQ;EACRE,OAAO;CACT;AACF;AAOA,SAASa,iBAAiBC,OAEvB;CACD,OAAO7B,MAAaM,WAAW0B,QAAQ3B,MAAM4B,MAAMJ,MAAMC,cAAcxB,WAAW4B,cAAc,CAAC,CAACC,aAAa;AACjH"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kanso-labs/kanso-ui",
-  "version": "0.34.11",
+  "version": "0.34.13",
   "description": "A React component library built on React Aria Components primitives and styled with StyleX, with design tokens sourced from a single W3C DTCG file and compiled via Style Dictionary",
   "keywords": [
     "react",
@@ -74,7 +74,7 @@
     "@commitlint/cli": "21.2.3",
     "@commitlint/config-conventional": "21.2.3",
     "@eslint/js": "10.0.1",
-    "@kanso-labs/unplugin-style-dictionary": "0.10.14",
+    "@kanso-labs/unplugin-style-dictionary": "0.10.15",
     "@rolldown/plugin-babel": "0.2.4",
     "@storybook/addon-a11y": "10.6.1",
     "@storybook/addon-docs": "10.6.1",
@@ -91,7 +91,7 @@
     "@vitest/browser-playwright": "4.1.11",
     "@vitest/coverage-v8": "4.1.11",
     "babel-plugin-react-compiler": "1.0.0",
-    "eslint": "10.11.0",
+    "eslint": "10.12.0",
     "eslint-plugin-oxlint": "1.86.0",
     "eslint-plugin-perfectionist": "5.12.1",
     "eslint-plugin-react-hooks": "7.1.1",
@@ -106,7 +106,7 @@
     "oxlint": "1.86.0",
     "oxlint-tsgolint": "7.0.2003",
     "playwright": "1.63.0",
-    "publint": "0.3.24",
+    "publint": "0.3.25",
     "react": "19.3.0",
     "react-dom": "19.3.0",
     "rimraf": "6.1.3",
@@ -115,7 +115,7 @@
     "tsdown": "0.23.0",
     "typescript": "6.0.3",
     "typescript-eslint": "8.71.0",
-    "vite": "8.3.1",
+    "vite": "8.3.2",
     "vitest": "4.1.11"
   },
   "peerDependencies": {