@smwb/ui-solid 0.11.2 → 0.12.1

package/dist/source/components/inputs/slider/slider.jsx.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/inputs/slider/slider.tsx"],"sourcesContent":["import \"@smwb/ui-styles/less/components/slider/slider.entry.less\";\nimport { type JSX, For, Show, createSignal, mergeProps, onCleanup, onMount, splitProps } from \"solid-js\";\nimport { isServer } from \"solid-js/web\";\nimport cn from \"clsx\";\nimport { rescale, toPercent, coordX, coordY } from \"./utils\";\nimport { TextField, TextFieldWrapper } from \"../textField\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport type SliderValue = number | [number, number];\n\nexport interface SliderMark {\n  value: number;\n  label?: JSX.Element;\n}\n\nexport interface SliderProps extends Omit<JSX.HTMLAttributes<HTMLSpanElement>, \"onChange\"> {\n  value?: SliderValue;\n  onChange?: (event: Event, value: SliderValue, data: SliderProps) => void;\n  min?: number;\n  max?: number;\n  step?: number;\n  name?: string;\n  defaultValue?: SliderValue;\n  disabled?: boolean;\n  variant?: \"continuous\" | \"discrete\";\n  valueField?: boolean;\n  withTicks?: boolean;\n  label?: string;\n  helperText?: JSX.Element;\n  error?: boolean;\n  size?: \"small\" | \"medium\" | \"large\";\n  color?: \"primary\" | \"secondary\" | \"error\" | \"success\" | \"warning\" | \"info\";\n  /** Enables a two-thumb range slider (value becomes `[number, number]`). */\n  range?: boolean;\n  orientation?: \"horizontal\" | \"vertical\";\n  marks?: boolean | SliderMark[];\n  \"aria-label\"?: string;\n  getAriaValueText?: (value: number) => string;\n  ref?: Ref<HTMLSpanElement>;\n}\n\nfunction resolveMarks(marks: boolean | SliderMark[] | undefined, min: number, max: number, step?: number): SliderMark[] {\n  if (!marks) return [];\n  if (Array.isArray(marks)) return marks;\n  const s = step && step > 0 ? step : (max - min) / 10;\n  const result: SliderMark[] = [];\n  for (let v = min; v <= max + 1e-9; v += s) {\n    result.push({ value: Math.round(v * 1e6) / 1e6 });\n  }\n  return result;\n}\n\nfunction RangeSlider(props: SliderProps): JSX.Element {\n  const merged = mergeProps(\n    { min: 0, max: 100, disabled: false, size: \"medium\" as const, color: \"primary\" as const, orientation: \"horizontal\" as const },\n    props\n  );\n  const [local, rest] = splitProps(merged, [\n    \"defaultValue\",\n    \"value\",\n    \"onChange\",\n    \"min\",\n    \"max\",\n    \"name\",\n    \"disabled\",\n    \"class\",\n    \"step\",\n    \"label\",\n    \"helperText\",\n    \"error\",\n    \"size\",\n    \"color\",\n    \"orientation\",\n    \"marks\",\n    \"getAriaValueText\",\n    \"aria-label\",\n    \"range\",\n    \"variant\",\n    \"valueField\",\n    \"withTicks\",\n    \"ref\",\n  ]);\n\n  const isVertical = (): boolean => local.orientation === \"vertical\";\n  const normalize = (v: SliderValue | undefined): [number, number] => {\n    const arr = Array.isArray(v) ? v : [local.min, local.max];\n    const lo = Math.min(arr[0] ?? local.min, arr[1] ?? local.max);\n    const hi = Math.max(arr[0] ?? local.min, arr[1] ?? local.max);\n    return [lo, hi];\n  };\n\n  const isControlled = local.value !== undefined;\n  const [valueState, setValueState] = createSignal<[number, number]>(normalize(local.defaultValue));\n  const value = (): [number, number] => (isControlled ? normalize(local.value) : valueState());\n\n  let containerEl: HTMLSpanElement | undefined;\n  let activeThumb: 0 | 1 = 0;\n  let isPressed = false;\n\n  const markList = (): SliderMark[] => resolveMarks(local.marks, local.min, local.max, local.step);\n\n  const positionToValue = (event: MouseEvent | TouchEvent): number => {\n    const rect = containerEl?.getBoundingClientRect();\n    if (!rect) return local.min;\n    if (isVertical()) {\n      const y = coordY(event) - rect.top;\n      return rescale(rect.height - y, [0, rect.height], [local.min, local.max], { step: local.step });\n    }\n    const x = coordX(event) - rect.left;\n    return rescale(x, [0, rect.width], [local.min, local.max], { step: local.step });\n  };\n\n  const commit = (next: [number, number], event: Event): void => {\n    const lo = Math.min(next[0], next[1]);\n    const hi = Math.max(next[0], next[1]);\n    const clamped: [number, number] = [Math.max(local.min, lo), Math.min(local.max, hi)];\n    if (!isControlled) setValueState(clamped);\n    local.onChange?.(event, clamped, props);\n  };\n\n  const moveThumb = (raw: number, event: Event): void => {\n    const current = value();\n    const next: [number, number] = [current[0], current[1]];\n    next[activeThumb] = Math.max(local.min, Math.min(local.max, raw));\n    commit(next, event);\n  };\n\n  const pickThumb = (raw: number): void => {\n    const current = value();\n    activeThumb = Math.abs(raw - current[0]) <= Math.abs(raw - current[1]) ? 0 : 1;\n  };\n\n  const onMouseMove = (event: MouseEvent | TouchEvent): void => {\n    if (!isPressed) return;\n    event.preventDefault();\n    moveThumb(positionToValue(event), event);\n  };\n  const onMouseEnd = (): void => {\n    isPressed = false;\n    // Registered as a body-scope onCleanup, which Solid also runs when the SSR\n    // root is disposed — guard the document access so it never runs server-side.\n    if (isServer) return;\n    document.removeEventListener(\"mousemove\", onMouseMove);\n    document.removeEventListener(\"mouseup\", onMouseEnd);\n    document.removeEventListener(\"touchmove\", onMouseMove);\n    document.removeEventListener(\"touchend\", onMouseEnd);\n  };\n  const onMouseDown: JSX.EventHandler<HTMLSpanElement, MouseEvent> = (event) => {\n    if (local.disabled || event.button !== 0) return;\n    const raw = positionToValue(event);\n    pickThumb(raw);\n    isPressed = true;\n    moveThumb(raw, event);\n    document.addEventListener(\"mousemove\", onMouseMove);\n    document.addEventListener(\"mouseup\", onMouseEnd);\n  };\n  const onTouchStartNative = (event: TouchEvent): void => {\n    if (local.disabled) return;\n    const raw = positionToValue(event);\n    pickThumb(raw);\n    isPressed = true;\n    moveThumb(raw, event);\n    document.addEventListener(\"touchmove\", onMouseMove);\n    document.addEventListener(\"touchend\", onMouseEnd);\n  };\n\n  onMount(() => {\n    if (!containerEl) return;\n    containerEl.addEventListener(\"touchstart\", onTouchStartNative);\n    onCleanup(() => containerEl?.removeEventListener(\"touchstart\", onTouchStartNative));\n  });\n  onCleanup(onMouseEnd);\n\n  const onThumbKeyDown = (idx: 0 | 1): JSX.EventHandler<HTMLInputElement, KeyboardEvent> => (event) => {\n    if (local.disabled) return;\n    const delta = local.step && local.step > 0 ? local.step : 1;\n    const current = value();\n    let next: number | null = null;\n    if (event.key === \"ArrowLeft\" || event.key === \"ArrowDown\") next = current[idx] - delta;\n    else if (event.key === \"ArrowRight\" || event.key === \"ArrowUp\") next = current[idx] + delta;\n    else if (event.key === \"Home\") next = local.min;\n    else if (event.key === \"End\") next = local.max;\n    if (next !== null) {\n      event.preventDefault();\n      activeThumb = idx;\n      moveThumb(next, event);\n    }\n  };\n\n  const classes = (): string =>\n    cn(\"smwb-slider\", \"smwb-slider--range\", local.class, {\n      \"smwb-slider--disabled\": local.disabled,\n      \"smwb-slider--vertical\": isVertical(),\n    }, local.size !== \"medium\" && `smwb-slider_size-${local.size}`, local.color !== \"primary\" && `smwb-slider_color-${local.color}`);\n\n  return (\n    <TextFieldWrapper label={local.label} helperText={local.helperText} disabled={local.disabled} error={local.error} fullWidth shrink>\n      <div class=\"smwb-slider__container\">\n        <span ref={mergeRefs(local.ref, (el) => (containerEl = el as HTMLSpanElement))} onMouseDown={onMouseDown} class={classes()} {...rest}>\n          <Show when={markList().length > 0}>\n            <span class=\"smwb-slider__marks\" aria-hidden=\"true\">\n              <For each={markList()}>\n                {(m) => (\n                  <span class=\"smwb-slider__mark\" style={isVertical() ? { bottom: `${toPercent(m.value, local.min, local.max)}%` } : { left: `${toPercent(m.value, local.min, local.max)}%` }}>\n                    <Show when={m.label != null}>\n                      <span class=\"smwb-slider__mark-label\">{m.label}</span>\n                    </Show>\n                  </span>\n                )}\n              </For>\n            </span>\n          </Show>\n          <span class=\"smwb-slider__rail\" />\n          <span\n            class=\"smwb-slider__track\"\n            style={(() => {\n              const p0 = toPercent(value()[0], local.min, local.max);\n              const p1 = toPercent(value()[1], local.min, local.max);\n              const startPct = `${Math.min(p0, p1)}%`;\n              const spanPct = `${Math.abs(p1 - p0)}%`;\n              return isVertical() ? { bottom: startPct, height: spanPct } : { left: startPct, width: spanPct };\n            })()}\n          />\n          <For each={[0, 1] as const}>\n            {(idx) => (\n              <span\n                class={cn(\"smwb-slider__thumb\", `smwb-slider__thumb--${idx === 0 ? \"start\" : \"end\"}`)}\n                style={isVertical() ? { bottom: `${toPercent(value()[idx], local.min, local.max)}%` } : { left: `${toPercent(value()[idx], local.min, local.max)}%` }}\n              >\n                <input\n                  data-testid={`slider-input-${idx}`}\n                  class=\"smwb-slider__input\"\n                  type=\"range\"\n                  min={local.min}\n                  max={local.max}\n                  step={local.step}\n                  name={local.name ? `${local.name}[${idx}]` : undefined}\n                  value={value()[idx]}\n                  disabled={local.disabled}\n                  onChange={() => undefined}\n                  onKeyDown={onThumbKeyDown(idx)}\n                  tabindex={local.disabled ? -1 : 0}\n                  aria-label={local[\"aria-label\"] ? `${local[\"aria-label\"]} ${idx === 0 ? \"minimum\" : \"maximum\"}` : undefined}\n                  aria-orientation={local.orientation}\n                  aria-valuenow={value()[idx]}\n                  aria-valuemin={idx === 0 ? local.min : value()[0]}\n                  aria-valuemax={idx === 0 ? value()[1] : local.max}\n                  aria-valuetext={local.getAriaValueText ? local.getAriaValueText(value()[idx]) : undefined}\n                  aria-disabled={local.disabled || undefined}\n                />\n              </span>\n            )}\n          </For>\n        </span>\n      </div>\n    </TextFieldWrapper>\n  );\n}\n\nfunction SingleSlider(props: SliderProps): JSX.Element {\n  const merged = mergeProps(\n    {\n      min: 0,\n      max: 100,\n      disabled: false,\n      variant: \"continuous\" as const,\n      size: \"medium\" as const,\n      color: \"primary\" as const,\n      orientation: \"horizontal\" as const,\n    },\n    props\n  );\n  const [local, rest] = splitProps(merged, [\n    \"defaultValue\",\n    \"value\",\n    \"onChange\",\n    \"min\",\n    \"max\",\n    \"name\",\n    \"disabled\",\n    \"class\",\n    \"step\",\n    \"variant\",\n    \"valueField\",\n    \"withTicks\",\n    \"label\",\n    \"helperText\",\n    \"error\",\n    \"size\",\n    \"color\",\n    \"orientation\",\n    \"marks\",\n    \"range\",\n    \"getAriaValueText\",\n    \"aria-label\",\n    \"ref\",\n  ]);\n\n  const singleDefault = typeof local.defaultValue === \"number\" ? local.defaultValue : undefined;\n  const singleValue = (): number | undefined => (typeof local.value === \"number\" ? local.value : undefined);\n  const isVertical = (): boolean => local.orientation === \"vertical\";\n  const isControlled = typeof local.value === \"number\";\n  const isDiscrete = (): boolean => local.variant === \"discrete\";\n\n  const [valueState, setValueState] = createSignal<number>(singleDefault ?? local.min);\n  const [isDragging, setIsDragging] = createSignal(false);\n  const [isActive, setIsActive] = createSignal(false);\n  const [isFocused, setIsFocused] = createSignal(false);\n\n  let containerEl: HTMLSpanElement | undefined;\n  let isPressed = false;\n  const value = (): number => (isControlled ? (singleValue() as number) : valueState());\n\n  const updateValue = (next: number, event: Event): void => {\n    if (next < local.min || next > local.max) return;\n    if (!isControlled) setValueState(next);\n    local.onChange?.(event, next, props);\n  };\n\n  const offsetToValue = (absolute: number, containerSize: number): number =>\n    rescale(absolute, [0, containerSize], [local.min, local.max], { step: local.step });\n\n  const onMouseMove = (event: MouseEvent | TouchEvent): void => {\n    if (!isPressed || !containerEl) return;\n    const rect = containerEl.getBoundingClientRect();\n    const clientX = coordX(event);\n    const clientY = coordY(event);\n    const absolute = isVertical() ? rect.height - (clientY - rect.top) : clientX - rect.left;\n    const next = offsetToValue(absolute, isVertical() ? rect.height : rect.width);\n    if (!isActive()) setIsActive(true);\n    if (value() === next) return;\n    if (!isDragging()) setIsDragging(true);\n    updateValue(next, event);\n  };\n  const removeListeners = (): void => {\n    // Registered as a body-scope onCleanup, which Solid also runs when the SSR\n    // root is disposed — guard the document access so it never runs server-side.\n    if (isServer) return;\n    document.removeEventListener(\"mousemove\", onMouseMove);\n    document.removeEventListener(\"mouseup\", onMouseEnd);\n    document.removeEventListener(\"touchmove\", onMouseMove);\n    document.removeEventListener(\"touchend\", onMouseEnd);\n  };\n  const onMouseEnd = (): void => {\n    isPressed = false;\n    if (isDragging()) setIsDragging(false);\n    if (isActive()) setIsActive(false);\n    removeListeners();\n  };\n  const onMouseDown: JSX.EventHandler<HTMLSpanElement, MouseEvent> = (event) => {\n    if (local.disabled || event.button !== 0 || !containerEl) return;\n    isPressed = true;\n    const rect = containerEl.getBoundingClientRect();\n    const absolute = isVertical() ? rect.height - (event.clientY - rect.top) : event.clientX - rect.left;\n    const next = offsetToValue(absolute, isVertical() ? rect.height : rect.width);\n    if (!isActive()) setIsActive(true);\n    updateValue(next, event);\n    document.addEventListener(\"mousemove\", onMouseMove);\n    document.addEventListener(\"mouseup\", onMouseEnd);\n  };\n  const onTouchStartNative = (event: TouchEvent): void => {\n    if (local.disabled || !containerEl) return;\n    isPressed = true;\n    const rect = containerEl.getBoundingClientRect();\n    const touch = event.changedTouches?.[0];\n    if (!touch) return;\n    const absolute = isVertical() ? rect.height - (touch.clientY - rect.top) : touch.clientX - rect.left;\n    const next = offsetToValue(absolute, isVertical() ? rect.height : rect.width);\n    if (!isActive()) setIsActive(true);\n    updateValue(next, event);\n    document.addEventListener(\"touchmove\", onMouseMove);\n    document.addEventListener(\"touchend\", onMouseEnd);\n  };\n\n  onMount(() => {\n    if (!containerEl) return;\n    containerEl.addEventListener(\"touchstart\", onTouchStartNative);\n    onCleanup(() => containerEl?.removeEventListener(\"touchstart\", onTouchStartNative));\n  });\n  onCleanup(removeListeners);\n\n  const handleArrows: JSX.EventHandler<HTMLSpanElement, KeyboardEvent> = (event) => {\n    if (!isFocused() || local.disabled) return;\n    if (event.key === \"ArrowLeft\" || event.key === \"ArrowDown\") updateValue(value() - (local.step || 1), event);\n    if (event.key === \"ArrowRight\" || event.key === \"ArrowUp\") updateValue(value() + (local.step || 1), event);\n  };\n\n  const classes = (): string =>\n    cn(\"smwb-slider\", local.class, {\n      \"smwb-slider--disabled\": local.disabled,\n      \"smwb-slider--dragging\": isDragging(),\n      \"smwb-slider--discrete\": isDiscrete(),\n      \"smwb-slider--vertical\": isVertical(),\n    }, local.size !== \"medium\" && `smwb-slider_size-${local.size}`, local.color !== \"primary\" && `smwb-slider_color-${local.color}`);\n\n  const pct = (): string => `${toPercent(value(), local.min, local.max)}%`;\n  const markList = (): SliderMark[] => resolveMarks(local.marks, local.min, local.max, local.step);\n  const ticks = (): number[] => Array(Math.round(local.max / (local.step || 1)) + 1).fill(1) as number[];\n\n  return (\n    <TextFieldWrapper label={local.label} helperText={local.helperText} disabled={local.disabled} error={local.error} fullWidth shrink>\n      <div class=\"smwb-slider__container\">\n        <span\n          onKeyDown={handleArrows}\n          ref={mergeRefs(local.ref, (el) => (containerEl = el as HTMLSpanElement))}\n          onMouseDown={onMouseDown}\n          class={classes()}\n          tabindex={local.disabled ? -1 : 0}\n          onFocus={() => setIsFocused(true)}\n          onBlur={() => setIsFocused(false)}\n          {...rest}\n        >\n          <Show when={local.withTicks}>\n            <span class=\"smwb-slider__ticks\" style={{ gap: `${local.step}` }}>\n              <For each={ticks()}>{() => <span class=\"smwb-slider__tick\" />}</For>\n            </span>\n          </Show>\n          <Show when={markList().length > 0}>\n            <span class=\"smwb-slider__marks\" aria-hidden=\"true\">\n              <For each={markList()}>\n                {(m) => (\n                  <span class=\"smwb-slider__mark\" style={isVertical() ? { bottom: `${toPercent(m.value, local.min, local.max)}%` } : { left: `${toPercent(m.value, local.min, local.max)}%` }}>\n                    <Show when={m.label != null}>\n                      <span class=\"smwb-slider__mark-label\">{m.label}</span>\n                    </Show>\n                  </span>\n                )}\n              </For>\n            </span>\n          </Show>\n          <span class=\"smwb-slider__rail\" />\n          <span class=\"smwb-slider__track\" style={isVertical() ? { height: pct() } : { width: pct() }} />\n          <span\n            class={cn(\"smwb-slider__thumb\", { \"smwb-slider__thumb--active\": isActive(), \"smwb-slider__thumb--discrete\": isDiscrete() })}\n            style={isVertical() ? { bottom: pct() } : { left: pct() }}\n          >\n            <Show when={isDiscrete()}>\n              <span class=\"smwb-slider__thumb-tooltip\">{Math.round(value())}</span>\n            </Show>\n            <input\n              data-testid=\"slider-input\"\n              class=\"smwb-slider__input\"\n              type=\"range\"\n              min={local.min}\n              max={local.max}\n              name={local.name}\n              value={value()}\n              readonly\n              aria-label={local[\"aria-label\"]}\n              aria-orientation={local.orientation}\n              aria-valuenow={value()}\n              aria-valuemin={local.min}\n              aria-valuemax={local.max}\n              aria-valuetext={local.getAriaValueText ? local.getAriaValueText(value()) : undefined}\n              aria-disabled={local.disabled || undefined}\n            />\n          </span>\n        </span>\n        <Show when={local.valueField && isDiscrete()}>\n          <TextField\n            type=\"number\"\n            value={value()}\n            onChange={(event) => updateValue(+event.currentTarget.value, event)}\n            variant=\"filled\"\n          />\n        </Show>\n      </div>\n    </TextFieldWrapper>\n  );\n}\n\nexport function Slider(props: SliderProps): JSX.Element {\n  const isRangeMode = props.range === true || Array.isArray(props.value) || Array.isArray(props.defaultValue);\n  return (\n    <Show when={isRangeMode} fallback={<SingleSlider {...props} />}>\n      <RangeSlider {...props} />\n    </Show>\n  );\n}\n\nexport default Slider;\n"],"mappings":"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","names":[],"file":"slider.jsx"}
+{"version":3,"sources":["../../../../../src/components/inputs/slider/slider.tsx"],"sourcesContent":["import \"@smwb/ui-styles/less/tokens.entry.less\";\nimport \"@smwb/ui-styles/less/components/slider/slider.entry.less\";\nimport { type JSX, For, Show, createSignal, mergeProps, onCleanup, onMount, splitProps } from \"solid-js\";\nimport { isServer } from \"solid-js/web\";\nimport cn from \"clsx\";\nimport { rescale, toPercent, coordX, coordY } from \"./utils\";\nimport { TextField, TextFieldWrapper } from \"../textField\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport type SliderValue = number | [number, number];\n\nexport interface SliderMark {\n  value: number;\n  label?: JSX.Element;\n}\n\nexport interface SliderProps extends Omit<JSX.HTMLAttributes<HTMLSpanElement>, \"onChange\"> {\n  value?: SliderValue;\n  onChange?: (event: Event, value: SliderValue, data: SliderProps) => void;\n  min?: number;\n  max?: number;\n  step?: number;\n  name?: string;\n  defaultValue?: SliderValue;\n  disabled?: boolean;\n  variant?: \"continuous\" | \"discrete\";\n  valueField?: boolean;\n  withTicks?: boolean;\n  label?: string;\n  helperText?: JSX.Element;\n  error?: boolean;\n  size?: \"small\" | \"medium\" | \"large\";\n  color?: \"primary\" | \"secondary\" | \"error\" | \"success\" | \"warning\" | \"info\";\n  /** Enables a two-thumb range slider (value becomes `[number, number]`). */\n  range?: boolean;\n  orientation?: \"horizontal\" | \"vertical\";\n  marks?: boolean | SliderMark[];\n  \"aria-label\"?: string;\n  getAriaValueText?: (value: number) => string;\n  ref?: Ref<HTMLSpanElement>;\n}\n\nfunction resolveMarks(marks: boolean | SliderMark[] | undefined, min: number, max: number, step?: number): SliderMark[] {\n  if (!marks) return [];\n  if (Array.isArray(marks)) return marks;\n  const s = step && step > 0 ? step : (max - min) / 10;\n  const result: SliderMark[] = [];\n  for (let v = min; v <= max + 1e-9; v += s) {\n    result.push({ value: Math.round(v * 1e6) / 1e6 });\n  }\n  return result;\n}\n\nfunction RangeSlider(props: SliderProps): JSX.Element {\n  const merged = mergeProps(\n    { min: 0, max: 100, disabled: false, size: \"medium\" as const, color: \"primary\" as const, orientation: \"horizontal\" as const },\n    props\n  );\n  const [local, rest] = splitProps(merged, [\n    \"defaultValue\",\n    \"value\",\n    \"onChange\",\n    \"min\",\n    \"max\",\n    \"name\",\n    \"disabled\",\n    \"class\",\n    \"step\",\n    \"label\",\n    \"helperText\",\n    \"error\",\n    \"size\",\n    \"color\",\n    \"orientation\",\n    \"marks\",\n    \"getAriaValueText\",\n    \"aria-label\",\n    \"range\",\n    \"variant\",\n    \"valueField\",\n    \"withTicks\",\n    \"ref\",\n  ]);\n\n  const isVertical = (): boolean => local.orientation === \"vertical\";\n  const normalize = (v: SliderValue | undefined): [number, number] => {\n    const arr = Array.isArray(v) ? v : [local.min, local.max];\n    const lo = Math.min(arr[0] ?? local.min, arr[1] ?? local.max);\n    const hi = Math.max(arr[0] ?? local.min, arr[1] ?? local.max);\n    return [lo, hi];\n  };\n\n  const isControlled = local.value !== undefined;\n  const [valueState, setValueState] = createSignal<[number, number]>(normalize(local.defaultValue));\n  const value = (): [number, number] => (isControlled ? normalize(local.value) : valueState());\n\n  let containerEl: HTMLSpanElement | undefined;\n  let activeThumb: 0 | 1 = 0;\n  let isPressed = false;\n\n  const markList = (): SliderMark[] => resolveMarks(local.marks, local.min, local.max, local.step);\n\n  const positionToValue = (event: MouseEvent | TouchEvent): number => {\n    const rect = containerEl?.getBoundingClientRect();\n    if (!rect) return local.min;\n    if (isVertical()) {\n      const y = coordY(event) - rect.top;\n      return rescale(rect.height - y, [0, rect.height], [local.min, local.max], { step: local.step });\n    }\n    const x = coordX(event) - rect.left;\n    return rescale(x, [0, rect.width], [local.min, local.max], { step: local.step });\n  };\n\n  const commit = (next: [number, number], event: Event): void => {\n    const lo = Math.min(next[0], next[1]);\n    const hi = Math.max(next[0], next[1]);\n    const clamped: [number, number] = [Math.max(local.min, lo), Math.min(local.max, hi)];\n    if (!isControlled) setValueState(clamped);\n    local.onChange?.(event, clamped, props);\n  };\n\n  const moveThumb = (raw: number, event: Event): void => {\n    const current = value();\n    const next: [number, number] = [current[0], current[1]];\n    next[activeThumb] = Math.max(local.min, Math.min(local.max, raw));\n    commit(next, event);\n  };\n\n  const pickThumb = (raw: number): void => {\n    const current = value();\n    activeThumb = Math.abs(raw - current[0]) <= Math.abs(raw - current[1]) ? 0 : 1;\n  };\n\n  const onMouseMove = (event: MouseEvent | TouchEvent): void => {\n    if (!isPressed) return;\n    event.preventDefault();\n    moveThumb(positionToValue(event), event);\n  };\n  const onMouseEnd = (): void => {\n    isPressed = false;\n    // Registered as a body-scope onCleanup, which Solid also runs when the SSR\n    // root is disposed — guard the document access so it never runs server-side.\n    if (isServer) return;\n    document.removeEventListener(\"mousemove\", onMouseMove);\n    document.removeEventListener(\"mouseup\", onMouseEnd);\n    document.removeEventListener(\"touchmove\", onMouseMove);\n    document.removeEventListener(\"touchend\", onMouseEnd);\n  };\n  const onMouseDown: JSX.EventHandler<HTMLSpanElement, MouseEvent> = (event) => {\n    if (local.disabled || event.button !== 0) return;\n    const raw = positionToValue(event);\n    pickThumb(raw);\n    isPressed = true;\n    moveThumb(raw, event);\n    document.addEventListener(\"mousemove\", onMouseMove);\n    document.addEventListener(\"mouseup\", onMouseEnd);\n  };\n  const onTouchStartNative = (event: TouchEvent): void => {\n    if (local.disabled) return;\n    const raw = positionToValue(event);\n    pickThumb(raw);\n    isPressed = true;\n    moveThumb(raw, event);\n    document.addEventListener(\"touchmove\", onMouseMove);\n    document.addEventListener(\"touchend\", onMouseEnd);\n  };\n\n  onMount(() => {\n    if (!containerEl) return;\n    containerEl.addEventListener(\"touchstart\", onTouchStartNative);\n    onCleanup(() => containerEl?.removeEventListener(\"touchstart\", onTouchStartNative));\n  });\n  onCleanup(onMouseEnd);\n\n  const onThumbKeyDown = (idx: 0 | 1): JSX.EventHandler<HTMLInputElement, KeyboardEvent> => (event) => {\n    if (local.disabled) return;\n    const delta = local.step && local.step > 0 ? local.step : 1;\n    const current = value();\n    let next: number | null = null;\n    if (event.key === \"ArrowLeft\" || event.key === \"ArrowDown\") next = current[idx] - delta;\n    else if (event.key === \"ArrowRight\" || event.key === \"ArrowUp\") next = current[idx] + delta;\n    else if (event.key === \"Home\") next = local.min;\n    else if (event.key === \"End\") next = local.max;\n    if (next !== null) {\n      event.preventDefault();\n      activeThumb = idx;\n      moveThumb(next, event);\n    }\n  };\n\n  const classes = (): string =>\n    cn(\"smwb-slider\", \"smwb-slider--range\", local.class, {\n      \"smwb-slider--disabled\": local.disabled,\n      \"smwb-slider--vertical\": isVertical(),\n    }, local.size !== \"medium\" && `smwb-slider_size-${local.size}`, local.color !== \"primary\" && `smwb-slider_color-${local.color}`);\n\n  return (\n    <TextFieldWrapper label={local.label} helperText={local.helperText} disabled={local.disabled} error={local.error} fullWidth shrink>\n      <div class=\"smwb-slider__container\">\n        <span ref={mergeRefs(local.ref, (el) => (containerEl = el as HTMLSpanElement))} onMouseDown={onMouseDown} class={classes()} {...rest}>\n          <Show when={markList().length > 0}>\n            <span class=\"smwb-slider__marks\" aria-hidden=\"true\">\n              <For each={markList()}>\n                {(m) => (\n                  <span class=\"smwb-slider__mark\" style={isVertical() ? { bottom: `${toPercent(m.value, local.min, local.max)}%` } : { left: `${toPercent(m.value, local.min, local.max)}%` }}>\n                    <Show when={m.label != null}>\n                      <span class=\"smwb-slider__mark-label\">{m.label}</span>\n                    </Show>\n                  </span>\n                )}\n              </For>\n            </span>\n          </Show>\n          <span class=\"smwb-slider__rail\" />\n          <span\n            class=\"smwb-slider__track\"\n            style={(() => {\n              const p0 = toPercent(value()[0], local.min, local.max);\n              const p1 = toPercent(value()[1], local.min, local.max);\n              const startPct = `${Math.min(p0, p1)}%`;\n              const spanPct = `${Math.abs(p1 - p0)}%`;\n              return isVertical() ? { bottom: startPct, height: spanPct } : { left: startPct, width: spanPct };\n            })()}\n          />\n          <For each={[0, 1] as const}>\n            {(idx) => (\n              <span\n                class={cn(\"smwb-slider__thumb\", `smwb-slider__thumb--${idx === 0 ? \"start\" : \"end\"}`)}\n                style={isVertical() ? { bottom: `${toPercent(value()[idx], local.min, local.max)}%` } : { left: `${toPercent(value()[idx], local.min, local.max)}%` }}\n              >\n                <input\n                  data-testid={`slider-input-${idx}`}\n                  class=\"smwb-slider__input\"\n                  type=\"range\"\n                  min={local.min}\n                  max={local.max}\n                  step={local.step}\n                  name={local.name ? `${local.name}[${idx}]` : undefined}\n                  value={value()[idx]}\n                  disabled={local.disabled}\n                  onChange={() => undefined}\n                  onKeyDown={onThumbKeyDown(idx)}\n                  tabindex={local.disabled ? -1 : 0}\n                  aria-label={local[\"aria-label\"] ? `${local[\"aria-label\"]} ${idx === 0 ? \"minimum\" : \"maximum\"}` : undefined}\n                  aria-orientation={local.orientation}\n                  aria-valuenow={value()[idx]}\n                  aria-valuemin={idx === 0 ? local.min : value()[0]}\n                  aria-valuemax={idx === 0 ? value()[1] : local.max}\n                  aria-valuetext={local.getAriaValueText ? local.getAriaValueText(value()[idx]) : undefined}\n                  aria-disabled={local.disabled || undefined}\n                />\n              </span>\n            )}\n          </For>\n        </span>\n      </div>\n    </TextFieldWrapper>\n  );\n}\n\nfunction SingleSlider(props: SliderProps): JSX.Element {\n  const merged = mergeProps(\n    {\n      min: 0,\n      max: 100,\n      disabled: false,\n      variant: \"continuous\" as const,\n      size: \"medium\" as const,\n      color: \"primary\" as const,\n      orientation: \"horizontal\" as const,\n    },\n    props\n  );\n  const [local, rest] = splitProps(merged, [\n    \"defaultValue\",\n    \"value\",\n    \"onChange\",\n    \"min\",\n    \"max\",\n    \"name\",\n    \"disabled\",\n    \"class\",\n    \"step\",\n    \"variant\",\n    \"valueField\",\n    \"withTicks\",\n    \"label\",\n    \"helperText\",\n    \"error\",\n    \"size\",\n    \"color\",\n    \"orientation\",\n    \"marks\",\n    \"range\",\n    \"getAriaValueText\",\n    \"aria-label\",\n    \"ref\",\n  ]);\n\n  const singleDefault = typeof local.defaultValue === \"number\" ? local.defaultValue : undefined;\n  const singleValue = (): number | undefined => (typeof local.value === \"number\" ? local.value : undefined);\n  const isVertical = (): boolean => local.orientation === \"vertical\";\n  const isControlled = typeof local.value === \"number\";\n  const isDiscrete = (): boolean => local.variant === \"discrete\";\n\n  const [valueState, setValueState] = createSignal<number>(singleDefault ?? local.min);\n  const [isDragging, setIsDragging] = createSignal(false);\n  const [isActive, setIsActive] = createSignal(false);\n  const [isFocused, setIsFocused] = createSignal(false);\n\n  let containerEl: HTMLSpanElement | undefined;\n  let isPressed = false;\n  const value = (): number => (isControlled ? (singleValue() as number) : valueState());\n\n  const updateValue = (next: number, event: Event): void => {\n    if (next < local.min || next > local.max) return;\n    if (!isControlled) setValueState(next);\n    local.onChange?.(event, next, props);\n  };\n\n  const offsetToValue = (absolute: number, containerSize: number): number =>\n    rescale(absolute, [0, containerSize], [local.min, local.max], { step: local.step });\n\n  const onMouseMove = (event: MouseEvent | TouchEvent): void => {\n    if (!isPressed || !containerEl) return;\n    const rect = containerEl.getBoundingClientRect();\n    const clientX = coordX(event);\n    const clientY = coordY(event);\n    const absolute = isVertical() ? rect.height - (clientY - rect.top) : clientX - rect.left;\n    const next = offsetToValue(absolute, isVertical() ? rect.height : rect.width);\n    if (!isActive()) setIsActive(true);\n    if (value() === next) return;\n    if (!isDragging()) setIsDragging(true);\n    updateValue(next, event);\n  };\n  const removeListeners = (): void => {\n    // Registered as a body-scope onCleanup, which Solid also runs when the SSR\n    // root is disposed — guard the document access so it never runs server-side.\n    if (isServer) return;\n    document.removeEventListener(\"mousemove\", onMouseMove);\n    document.removeEventListener(\"mouseup\", onMouseEnd);\n    document.removeEventListener(\"touchmove\", onMouseMove);\n    document.removeEventListener(\"touchend\", onMouseEnd);\n  };\n  const onMouseEnd = (): void => {\n    isPressed = false;\n    if (isDragging()) setIsDragging(false);\n    if (isActive()) setIsActive(false);\n    removeListeners();\n  };\n  const onMouseDown: JSX.EventHandler<HTMLSpanElement, MouseEvent> = (event) => {\n    if (local.disabled || event.button !== 0 || !containerEl) return;\n    isPressed = true;\n    const rect = containerEl.getBoundingClientRect();\n    const absolute = isVertical() ? rect.height - (event.clientY - rect.top) : event.clientX - rect.left;\n    const next = offsetToValue(absolute, isVertical() ? rect.height : rect.width);\n    if (!isActive()) setIsActive(true);\n    updateValue(next, event);\n    document.addEventListener(\"mousemove\", onMouseMove);\n    document.addEventListener(\"mouseup\", onMouseEnd);\n  };\n  const onTouchStartNative = (event: TouchEvent): void => {\n    if (local.disabled || !containerEl) return;\n    isPressed = true;\n    const rect = containerEl.getBoundingClientRect();\n    const touch = event.changedTouches?.[0];\n    if (!touch) return;\n    const absolute = isVertical() ? rect.height - (touch.clientY - rect.top) : touch.clientX - rect.left;\n    const next = offsetToValue(absolute, isVertical() ? rect.height : rect.width);\n    if (!isActive()) setIsActive(true);\n    updateValue(next, event);\n    document.addEventListener(\"touchmove\", onMouseMove);\n    document.addEventListener(\"touchend\", onMouseEnd);\n  };\n\n  onMount(() => {\n    if (!containerEl) return;\n    containerEl.addEventListener(\"touchstart\", onTouchStartNative);\n    onCleanup(() => containerEl?.removeEventListener(\"touchstart\", onTouchStartNative));\n  });\n  onCleanup(removeListeners);\n\n  const handleArrows: JSX.EventHandler<HTMLSpanElement, KeyboardEvent> = (event) => {\n    if (!isFocused() || local.disabled) return;\n    if (event.key === \"ArrowLeft\" || event.key === \"ArrowDown\") updateValue(value() - (local.step || 1), event);\n    if (event.key === \"ArrowRight\" || event.key === \"ArrowUp\") updateValue(value() + (local.step || 1), event);\n  };\n\n  const classes = (): string =>\n    cn(\"smwb-slider\", local.class, {\n      \"smwb-slider--disabled\": local.disabled,\n      \"smwb-slider--dragging\": isDragging(),\n      \"smwb-slider--discrete\": isDiscrete(),\n      \"smwb-slider--vertical\": isVertical(),\n    }, local.size !== \"medium\" && `smwb-slider_size-${local.size}`, local.color !== \"primary\" && `smwb-slider_color-${local.color}`);\n\n  const pct = (): string => `${toPercent(value(), local.min, local.max)}%`;\n  const markList = (): SliderMark[] => resolveMarks(local.marks, local.min, local.max, local.step);\n  const ticks = (): number[] => Array(Math.round(local.max / (local.step || 1)) + 1).fill(1) as number[];\n\n  return (\n    <TextFieldWrapper label={local.label} helperText={local.helperText} disabled={local.disabled} error={local.error} fullWidth shrink>\n      <div class=\"smwb-slider__container\">\n        <span\n          onKeyDown={handleArrows}\n          ref={mergeRefs(local.ref, (el) => (containerEl = el as HTMLSpanElement))}\n          onMouseDown={onMouseDown}\n          class={classes()}\n          tabindex={local.disabled ? -1 : 0}\n          onFocus={() => setIsFocused(true)}\n          onBlur={() => setIsFocused(false)}\n          {...rest}\n        >\n          <Show when={local.withTicks}>\n            <span class=\"smwb-slider__ticks\" style={{ gap: `${local.step}` }}>\n              <For each={ticks()}>{() => <span class=\"smwb-slider__tick\" />}</For>\n            </span>\n          </Show>\n          <Show when={markList().length > 0}>\n            <span class=\"smwb-slider__marks\" aria-hidden=\"true\">\n              <For each={markList()}>\n                {(m) => (\n                  <span class=\"smwb-slider__mark\" style={isVertical() ? { bottom: `${toPercent(m.value, local.min, local.max)}%` } : { left: `${toPercent(m.value, local.min, local.max)}%` }}>\n                    <Show when={m.label != null}>\n                      <span class=\"smwb-slider__mark-label\">{m.label}</span>\n                    </Show>\n                  </span>\n                )}\n              </For>\n            </span>\n          </Show>\n          <span class=\"smwb-slider__rail\" />\n          <span class=\"smwb-slider__track\" style={isVertical() ? { height: pct() } : { width: pct() }} />\n          <span\n            class={cn(\"smwb-slider__thumb\", { \"smwb-slider__thumb--active\": isActive(), \"smwb-slider__thumb--discrete\": isDiscrete() })}\n            style={isVertical() ? { bottom: pct() } : { left: pct() }}\n          >\n            <Show when={isDiscrete()}>\n              <span class=\"smwb-slider__thumb-tooltip\">{Math.round(value())}</span>\n            </Show>\n            <input\n              data-testid=\"slider-input\"\n              class=\"smwb-slider__input\"\n              type=\"range\"\n              min={local.min}\n              max={local.max}\n              name={local.name}\n              value={value()}\n              readonly\n              aria-label={local[\"aria-label\"]}\n              aria-orientation={local.orientation}\n              aria-valuenow={value()}\n              aria-valuemin={local.min}\n              aria-valuemax={local.max}\n              aria-valuetext={local.getAriaValueText ? local.getAriaValueText(value()) : undefined}\n              aria-disabled={local.disabled || undefined}\n            />\n          </span>\n        </span>\n        <Show when={local.valueField && isDiscrete()}>\n          <TextField\n            type=\"number\"\n            value={value()}\n            onChange={(event) => updateValue(+event.currentTarget.value, event)}\n            variant=\"filled\"\n          />\n        </Show>\n      </div>\n    </TextFieldWrapper>\n  );\n}\n\nexport function Slider(props: SliderProps): JSX.Element {\n  const isRangeMode = props.range === true || Array.isArray(props.value) || Array.isArray(props.defaultValue);\n  return (\n    <Show when={isRangeMode} fallback={<SingleSlider {...props} />}>\n      <RangeSlider {...props} />\n    </Show>\n  );\n}\n\nexport default Slider;\n"],"mappings":"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","names":[],"file":"slider.jsx"}

package/dist/source/components/inputs/textField/textField.jsx

@@ -1,5 +1,6 @@
+import "@smwb/ui-styles/less/tokens.entry.less";
 import "@smwb/ui-styles/less/components/textField/textField.entry.less";
-import { createEffect, createSignal, mergeProps, onMount, splitProps } from "solid-js";
+import { children, createEffect, createSignal, mergeProps, onMount, splitProps } from "solid-js";
 import cn from "clsx";
 import { isFilled } from "./utils";
 import { TextFieldWrapper } from "./textFieldWrapper";
@@ -84,11 +85,13 @@ function TextField(props) {
       checkDirty({ value: local.value });
     }
   });
+  const startAdornment = children(() => local.startAdornment);
+  const endAdornment = children(() => local.endAdornment);
   const inputClasses = () => cn(
     "smwb-text-field__input",
     (!local.label || local.inline) && "smwb-text-field__input--show-placeholder",
-    local.startAdornment && "smwb-text-field__input--adornment-start",
-    local.endAdornment && "smwb-text-field__input--adornment-end",
+    startAdornment() && "smwb-text-field__input--adornment-start",
+    endAdornment() && "smwb-text-field__input--adornment-end",
     local.inline && "smwb-text-field__input--inline"
   );
   return <TextFieldWrapper
@@ -102,10 +105,10 @@ function TextField(props) {
     isFilledState={isFilledState()}
     isFocused={isFocused()}
     for={local.id}
-    shrink={Boolean(local.startAdornment)}
+    shrink={Boolean(startAdornment())}
     onHolderMouseDown={onHolderMouseDown}
-    startAdornment={local.startAdornment}
-    endAdornment={local.endAdornment}
+    startAdornment={startAdornment()}
+    endAdornment={endAdornment()}
     inline={local.inline}
   >
       <input

package/dist/source/components/inputs/textField/textField.jsx.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/inputs/textField/textField.tsx"],"sourcesContent":["import \"@smwb/ui-styles/less/components/textField/textField.entry.less\";\nimport { type JSX, createEffect, createSignal, mergeProps, onMount, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { isFilled } from \"./utils\";\nimport { TextFieldWrapper } from \"./textFieldWrapper\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\ntype FocusEvt = FocusEvent & { currentTarget: HTMLInputElement; target: Element };\ntype InputEvt = InputEvent & { currentTarget: HTMLInputElement; target: Element };\n\nexport interface TextFieldProps extends Omit<JSX.InputHTMLAttributes<HTMLInputElement>, \"onChange\" | \"onBlur\" | \"size\"> {\n  label?: string | undefined;\n  helperText?: JSX.Element;\n  variant?: \"outlined\" | \"filled\";\n  size?: \"small\" | \"medium\" | \"large\";\n  required?: boolean;\n  disabled?: boolean | undefined;\n  value?: string | number | undefined;\n  placeholder?: string;\n  defaultValue?: string;\n  error?: boolean;\n  name?: string;\n  type?: string;\n  readOnly?: boolean;\n  fullWidth?: boolean;\n  onBlur?: (event: FocusEvt, data: TextFieldProps) => void;\n  onChange?: (event: InputEvt, data: TextFieldProps) => void;\n  startAdornment?: JSX.Element;\n  endAdornment?: JSX.Element;\n  id?: string;\n  inline?: boolean;\n  ref?: Ref<HTMLInputElement>;\n}\n\nexport function TextField(props: TextFieldProps): JSX.Element {\n  const merged = mergeProps({ variant: \"outlined\" as const, size: \"medium\" as const, type: \"text\" }, props);\n  const [local, rest] = splitProps(merged, [\n    \"label\",\n    \"helperText\",\n    \"variant\",\n    \"size\",\n    \"required\",\n    \"class\",\n    \"disabled\",\n    \"value\",\n    \"defaultValue\",\n    \"onChange\",\n    \"onFocus\",\n    \"onBlur\",\n    \"error\",\n    \"name\",\n    \"type\",\n    \"readOnly\",\n    \"placeholder\",\n    \"fullWidth\",\n    \"id\",\n    \"startAdornment\",\n    \"endAdornment\",\n    \"inline\",\n    \"autocomplete\",\n    \"inputmode\",\n    \"ref\",\n  ]);\n\n  const [isFocused, setIsFocused] = createSignal(false);\n  const [isFilledState, setIsFilledState] = createSignal(false);\n\n  // One-time snapshot of controlled-ness, matching the React useRef behaviour.\n  const isControlled = local.value != null;\n  let inputEl: HTMLInputElement | undefined;\n\n  const checkDirty = (obj: Parameters<typeof isFilled>[0]): void => {\n    const filled = isFilled(obj);\n    setIsFilledState((prev) => (prev === filled ? prev : filled));\n  };\n\n  const onFocus = (event: FocusEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }): void => {\n    if (local.disabled) {\n      event.stopPropagation();\n      return;\n    }\n    // local.onFocus is Solid's FocusEventHandlerUnion (function or [handler, data]).\n    const handler = local.onFocus as unknown;\n    if (typeof handler === \"function\") {\n      (handler as (e: typeof event) => void)(event);\n    } else if (Array.isArray(handler)) {\n      (handler[0] as (data: unknown, e: typeof event) => void)(handler[1], event);\n    }\n    setIsFocused(true);\n  };\n\n  const onBlur: JSX.EventHandler<HTMLInputElement, FocusEvent> = (event) => {\n    if (!isControlled) {\n      checkDirty({ value: event.currentTarget.value });\n    }\n    local.onBlur?.(event as FocusEvt, props);\n    setIsFocused(false);\n  };\n\n  const onInput: JSX.EventHandler<HTMLInputElement, InputEvent> = (event) => {\n    if (!isControlled) {\n      checkDirty({ value: event.currentTarget.value });\n    }\n    local.onChange?.(event as InputEvt, props);\n  };\n\n  const onHolderMouseDown: JSX.EventHandler<HTMLDivElement, MouseEvent> = (event) => {\n    if (inputEl && event.currentTarget === event.target) {\n      event.preventDefault();\n      inputEl.focus();\n    }\n  };\n\n  createEffect(() => {\n    if (local.disabled && isFocused()) {\n      setIsFocused(false);\n    }\n  });\n\n  onMount(() => checkDirty(inputEl ? { value: inputEl.value } : null));\n\n  createEffect(() => {\n    if (isControlled) {\n      checkDirty({ value: local.value });\n    }\n  });\n\n  const inputClasses = (): string =>\n    cn(\n      \"smwb-text-field__input\",\n      (!local.label || local.inline) && \"smwb-text-field__input--show-placeholder\",\n      local.startAdornment && \"smwb-text-field__input--adornment-start\",\n      local.endAdornment && \"smwb-text-field__input--adornment-end\",\n      local.inline && \"smwb-text-field__input--inline\"\n    );\n\n  return (\n    <TextFieldWrapper\n      label={local.label}\n      helperText={local.helperText}\n      variant={local.variant}\n      disabled={local.disabled}\n      class={cn(local.class, local.size !== \"medium\" && `smwb-text-field_size-${local.size}`)}\n      error={local.error}\n      fullWidth={local.fullWidth}\n      isFilledState={isFilledState()}\n      isFocused={isFocused()}\n      for={local.id}\n      shrink={Boolean(local.startAdornment)}\n      onHolderMouseDown={onHolderMouseDown}\n      startAdornment={local.startAdornment}\n      endAdornment={local.endAdornment}\n      inline={local.inline}\n    >\n      <input\n        {...rest}\n        type={local.type}\n        name={local.name}\n        readonly={local.readOnly}\n        required={local.required}\n        aria-invalid={local.error || undefined}\n        aria-required={local.required || undefined}\n        placeholder={local.placeholder}\n        disabled={local.disabled}\n        value={isControlled ? local.value : (local.defaultValue ?? \"\")}\n        class={inputClasses()}\n        ref={mergeRefs(local.ref, (el) => (inputEl = el))}\n        onInput={onInput}\n        onFocus={onFocus}\n        onBlur={onBlur}\n        id={local.id}\n        autocomplete={local.autocomplete}\n        inputmode={local.inputmode}\n      />\n    </TextFieldWrapper>\n  );\n}\n\nexport default TextField;\n"],"mappings":"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","names":[],"file":"textField.jsx"}
+{"version":3,"sources":["../../../../../src/components/inputs/textField/textField.tsx"],"sourcesContent":["import \"@smwb/ui-styles/less/tokens.entry.less\";\nimport \"@smwb/ui-styles/less/components/textField/textField.entry.less\";\nimport { type JSX, children, createEffect, createSignal, mergeProps, onMount, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { isFilled } from \"./utils\";\nimport { TextFieldWrapper } from \"./textFieldWrapper\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\ntype FocusEvt = FocusEvent & { currentTarget: HTMLInputElement; target: Element };\ntype InputEvt = InputEvent & { currentTarget: HTMLInputElement; target: Element };\n\nexport interface TextFieldProps extends Omit<JSX.InputHTMLAttributes<HTMLInputElement>, \"onChange\" | \"onBlur\" | \"size\"> {\n  label?: string | undefined;\n  helperText?: JSX.Element;\n  variant?: \"outlined\" | \"filled\";\n  size?: \"small\" | \"medium\" | \"large\";\n  required?: boolean;\n  disabled?: boolean | undefined;\n  value?: string | number | undefined;\n  placeholder?: string;\n  defaultValue?: string;\n  error?: boolean;\n  name?: string;\n  type?: string;\n  readOnly?: boolean;\n  fullWidth?: boolean;\n  onBlur?: (event: FocusEvt, data: TextFieldProps) => void;\n  onChange?: (event: InputEvt, data: TextFieldProps) => void;\n  startAdornment?: JSX.Element;\n  endAdornment?: JSX.Element;\n  id?: string;\n  inline?: boolean;\n  ref?: Ref<HTMLInputElement>;\n}\n\nexport function TextField(props: TextFieldProps): JSX.Element {\n  const merged = mergeProps({ variant: \"outlined\" as const, size: \"medium\" as const, type: \"text\" }, props);\n  const [local, rest] = splitProps(merged, [\n    \"label\",\n    \"helperText\",\n    \"variant\",\n    \"size\",\n    \"required\",\n    \"class\",\n    \"disabled\",\n    \"value\",\n    \"defaultValue\",\n    \"onChange\",\n    \"onFocus\",\n    \"onBlur\",\n    \"error\",\n    \"name\",\n    \"type\",\n    \"readOnly\",\n    \"placeholder\",\n    \"fullWidth\",\n    \"id\",\n    \"startAdornment\",\n    \"endAdornment\",\n    \"inline\",\n    \"autocomplete\",\n    \"inputmode\",\n    \"ref\",\n  ]);\n\n  const [isFocused, setIsFocused] = createSignal(false);\n  const [isFilledState, setIsFilledState] = createSignal(false);\n\n  // One-time snapshot of controlled-ness, matching the React useRef behaviour.\n  const isControlled = local.value != null;\n  let inputEl: HTMLInputElement | undefined;\n\n  const checkDirty = (obj: Parameters<typeof isFilled>[0]): void => {\n    const filled = isFilled(obj);\n    setIsFilledState((prev) => (prev === filled ? prev : filled));\n  };\n\n  const onFocus = (event: FocusEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }): void => {\n    if (local.disabled) {\n      event.stopPropagation();\n      return;\n    }\n    // local.onFocus is Solid's FocusEventHandlerUnion (function or [handler, data]).\n    const handler = local.onFocus as unknown;\n    if (typeof handler === \"function\") {\n      (handler as (e: typeof event) => void)(event);\n    } else if (Array.isArray(handler)) {\n      (handler[0] as (data: unknown, e: typeof event) => void)(handler[1], event);\n    }\n    setIsFocused(true);\n  };\n\n  const onBlur: JSX.EventHandler<HTMLInputElement, FocusEvent> = (event) => {\n    if (!isControlled) {\n      checkDirty({ value: event.currentTarget.value });\n    }\n    local.onBlur?.(event as FocusEvt, props);\n    setIsFocused(false);\n  };\n\n  const onInput: JSX.EventHandler<HTMLInputElement, InputEvent> = (event) => {\n    if (!isControlled) {\n      checkDirty({ value: event.currentTarget.value });\n    }\n    local.onChange?.(event as InputEvt, props);\n  };\n\n  const onHolderMouseDown: JSX.EventHandler<HTMLDivElement, MouseEvent> = (event) => {\n    if (inputEl && event.currentTarget === event.target) {\n      event.preventDefault();\n      inputEl.focus();\n    }\n  };\n\n  createEffect(() => {\n    if (local.disabled && isFocused()) {\n      setIsFocused(false);\n    }\n  });\n\n  onMount(() => checkDirty(inputEl ? { value: inputEl.value } : null));\n\n  createEffect(() => {\n    if (isControlled) {\n      checkDirty({ value: local.value });\n    }\n  });\n\n  // Read each slot once: markup passed as a prop is created anew on every read,\n  // and during hydration a copy the server never rendered has no DOM node.\n  const startAdornment = children(() => local.startAdornment);\n  const endAdornment = children(() => local.endAdornment);\n\n  const inputClasses = (): string =>\n    cn(\n      \"smwb-text-field__input\",\n      (!local.label || local.inline) && \"smwb-text-field__input--show-placeholder\",\n      startAdornment() && \"smwb-text-field__input--adornment-start\",\n      endAdornment() && \"smwb-text-field__input--adornment-end\",\n      local.inline && \"smwb-text-field__input--inline\"\n    );\n\n  return (\n    <TextFieldWrapper\n      label={local.label}\n      helperText={local.helperText}\n      variant={local.variant}\n      disabled={local.disabled}\n      class={cn(local.class, local.size !== \"medium\" && `smwb-text-field_size-${local.size}`)}\n      error={local.error}\n      fullWidth={local.fullWidth}\n      isFilledState={isFilledState()}\n      isFocused={isFocused()}\n      for={local.id}\n      shrink={Boolean(startAdornment())}\n      onHolderMouseDown={onHolderMouseDown}\n      startAdornment={startAdornment()}\n      endAdornment={endAdornment()}\n      inline={local.inline}\n    >\n      <input\n        {...rest}\n        type={local.type}\n        name={local.name}\n        readonly={local.readOnly}\n        required={local.required}\n        aria-invalid={local.error || undefined}\n        aria-required={local.required || undefined}\n        placeholder={local.placeholder}\n        disabled={local.disabled}\n        value={isControlled ? local.value : (local.defaultValue ?? \"\")}\n        class={inputClasses()}\n        ref={mergeRefs(local.ref, (el) => (inputEl = el))}\n        onInput={onInput}\n        onFocus={onFocus}\n        onBlur={onBlur}\n        id={local.id}\n        autocomplete={local.autocomplete}\n        inputmode={local.inputmode}\n      />\n    </TextFieldWrapper>\n  );\n}\n\nexport default TextField;\n"],"mappings":"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","names":[],"file":"textField.jsx"}

package/dist/source/components/inputs/textField/textFieldAdornment.jsx

@@ -1,4 +1,4 @@
-import { splitProps } from "solid-js";
+import { children, splitProps } from "solid-js";
 import cn from "clsx";
 function TextFieldAdornment(props) {
   const [local] = splitProps(props, [
@@ -9,6 +9,7 @@ function TextFieldAdornment(props) {
     "disablePointerEvents",
     "inline"
   ]);
+  const content = children(() => local.children);
   return <span
     class={cn(
       "smwb-text-field__adornment",
@@ -17,10 +18,10 @@ function TextFieldAdornment(props) {
       local.position === "end" && "smwb-text-field__adornment--end",
       local.disablePointerEvents && "smwb-text-field__adornment--disable-pointer",
       !local.inline && local.variant === "filled" && "smwb-text-field__adornment--filled",
-      typeof local.children === "string" && "smwb-text-field__adornment--text"
+      typeof content() === "string" && "smwb-text-field__adornment--text"
     )}
   >
-      {local.children}
+      {content()}
     </span>;
 }
 var textFieldAdornment_default = TextFieldAdornment;

package/dist/source/components/inputs/textField/textFieldAdornment.jsx.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/inputs/textField/textFieldAdornment.tsx"],"sourcesContent":["import { type JSX, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport type { TextFieldVariant } from \"./types\";\n\nexport interface TextFieldAdornmentProps {\n  position?: \"start\" | \"end\";\n  disablePointerEvents?: boolean;\n  variant?: TextFieldVariant | undefined;\n  inline?: boolean;\n  class?: string;\n  children?: JSX.Element;\n}\n\nexport function TextFieldAdornment(props: TextFieldAdornmentProps): JSX.Element {\n  const [local] = splitProps(props, [\n    \"position\",\n    \"variant\",\n    \"children\",\n    \"class\",\n    \"disablePointerEvents\",\n    \"inline\",\n  ]);\n\n  return (\n    <span\n      class={cn(\n        \"smwb-text-field__adornment\",\n        local.class,\n        local.position === \"start\" && \"smwb-text-field__adornment--start\",\n        local.position === \"end\" && \"smwb-text-field__adornment--end\",\n        local.disablePointerEvents && \"smwb-text-field__adornment--disable-pointer\",\n        !local.inline && local.variant === \"filled\" && \"smwb-text-field__adornment--filled\",\n        typeof local.children === \"string\" && \"smwb-text-field__adornment--text\"\n      )}\n    >\n      {local.children}\n    </span>\n  );\n}\n\nexport default TextFieldAdornment;\n"],"mappings":"AAAA,SAAmB,kBAAkB;AACrC,OAAO,QAAQ;AAYR,SAAS,mBAAmB,OAA6C;AAC9E,QAAM,CAAC,KAAK,IAAI,WAAW,OAAO;AAAA,IAChC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,SACE,CAAC;AAAA,IACC,OAAO;AAAA,MACL;AAAA,MACA,MAAM;AAAA,MACN,MAAM,aAAa,WAAW;AAAA,MAC9B,MAAM,aAAa,SAAS;AAAA,MAC5B,MAAM,wBAAwB;AAAA,MAC9B,CAAC,MAAM,UAAU,MAAM,YAAY,YAAY;AAAA,MAC/C,OAAO,MAAM,aAAa,YAAY;AAAA,IACxC;AAAA,GACD;AAAA,OACE,MAAM,SAAS;AAAA,IAClB,EAZC;AAcL;AAEA,IAAO,6BAAQ;","names":[],"file":"textFieldAdornment.jsx"}
+{"version":3,"sources":["../../../../../src/components/inputs/textField/textFieldAdornment.tsx"],"sourcesContent":["import { type JSX, children, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport type { TextFieldVariant } from \"./types\";\n\nexport interface TextFieldAdornmentProps {\n  position?: \"start\" | \"end\";\n  disablePointerEvents?: boolean;\n  variant?: TextFieldVariant | undefined;\n  inline?: boolean;\n  class?: string;\n  children?: JSX.Element;\n}\n\nexport function TextFieldAdornment(props: TextFieldAdornmentProps): JSX.Element {\n  const [local] = splitProps(props, [\n    \"position\",\n    \"variant\",\n    \"children\",\n    \"class\",\n    \"disablePointerEvents\",\n    \"inline\",\n  ]);\n\n  // Read once: markup passed as children is created anew on every read, and\n  // during hydration a copy the server never rendered has no DOM node.\n  const content = children(() => local.children);\n\n  return (\n    <span\n      class={cn(\n        \"smwb-text-field__adornment\",\n        local.class,\n        local.position === \"start\" && \"smwb-text-field__adornment--start\",\n        local.position === \"end\" && \"smwb-text-field__adornment--end\",\n        local.disablePointerEvents && \"smwb-text-field__adornment--disable-pointer\",\n        !local.inline && local.variant === \"filled\" && \"smwb-text-field__adornment--filled\",\n        typeof content() === \"string\" && \"smwb-text-field__adornment--text\"\n      )}\n    >\n      {content()}\n    </span>\n  );\n}\n\nexport default TextFieldAdornment;\n"],"mappings":"AAAA,SAAmB,UAAU,kBAAkB;AAC/C,OAAO,QAAQ;AAYR,SAAS,mBAAmB,OAA6C;AAC9E,QAAM,CAAC,KAAK,IAAI,WAAW,OAAO;AAAA,IAChC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAID,QAAM,UAAU,SAAS,MAAM,MAAM,QAAQ;AAE7C,SACE,CAAC;AAAA,IACC,OAAO;AAAA,MACL;AAAA,MACA,MAAM;AAAA,MACN,MAAM,aAAa,WAAW;AAAA,MAC9B,MAAM,aAAa,SAAS;AAAA,MAC5B,MAAM,wBAAwB;AAAA,MAC9B,CAAC,MAAM,UAAU,MAAM,YAAY,YAAY;AAAA,MAC/C,OAAO,QAAQ,MAAM,YAAY;AAAA,IACnC;AAAA,GACD;AAAA,OACE,QAAQ,EAAE;AAAA,IACb,EAZC;AAcL;AAEA,IAAO,6BAAQ;","names":[],"file":"textFieldAdornment.jsx"}

package/dist/source/components/inputs/textField/textFieldWrapper.jsx

@@ -1,4 +1,4 @@
-import { Show, splitProps } from "solid-js";
+import { Show, children, splitProps } from "solid-js";
 import cn from "clsx";
 import { TextFieldAdornment } from "./textFieldAdornment";
 function TextFieldWrapper(props) {
@@ -20,7 +20,10 @@ function TextFieldWrapper(props) {
     "endAdornment",
     "inline"
   ]);
-  const helperText = () => local.helperText ?? "\xA0";
+  const helper = children(() => local.inline ? void 0 : local.helperText);
+  const startAdornment = children(() => local.startAdornment);
+  const endAdornment = children(() => local.endAdornment);
+  const helperText = () => helper() ?? "\xA0";
   const isFilledVariant = () => local.variant === "filled";
   const isNotchedActive = () => !!local.label && (!!local.isFilledState || !!local.isFocused || !!local.shrink);
   return <div
@@ -44,14 +47,14 @@ function TextFieldWrapper(props) {
         </label>
       </Show>
       <div class="smwb-text-field__input-holder" onMouseDown={local.onHolderMouseDown}>
-        <Show when={local.startAdornment}>
+        <Show when={startAdornment()}>
           <TextFieldAdornment variant={local.variant} inline={Boolean(local.inline)} position="start">
-            {local.startAdornment}
+            {startAdornment()}
           </TextFieldAdornment>
         </Show>
         {local.children}
-        <Show when={local.endAdornment}>
-          <TextFieldAdornment position="end">{local.endAdornment}</TextFieldAdornment>
+        <Show when={endAdornment()}>
+          <TextFieldAdornment position="end">{endAdornment()}</TextFieldAdornment>
         </Show>
         <Show when={!local.inline && local.variant === "outlined"}>
           <fieldset

package/dist/source/components/inputs/textField/textFieldWrapper.jsx.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/inputs/textField/textFieldWrapper.tsx"],"sourcesContent":["import { type JSX, Show, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { TextFieldAdornment } from \"./textFieldAdornment\";\nimport type { TextFieldVariant } from \"./types\";\n\nexport interface TextFieldWrapperProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  label?: string | undefined;\n  helperText?: JSX.Element;\n  variant?: TextFieldVariant | undefined;\n  disabled?: boolean | undefined;\n  error?: boolean | undefined;\n  fullWidth?: boolean | undefined;\n  isFilledState?: boolean | undefined;\n  isFocused?: boolean | undefined;\n  for?: string | undefined;\n  shrink?: boolean | undefined;\n  onHolderMouseDown?: JSX.EventHandlerUnion<HTMLDivElement, MouseEvent>;\n  startAdornment?: JSX.Element;\n  endAdornment?: JSX.Element;\n  inline?: boolean | undefined;\n  children?: JSX.Element;\n}\n\nexport function TextFieldWrapper(props: TextFieldWrapperProps): JSX.Element {\n  const [local, rest] = splitProps(props, [\n    \"label\",\n    \"helperText\",\n    \"variant\",\n    \"disabled\",\n    \"class\",\n    \"error\",\n    \"fullWidth\",\n    \"isFilledState\",\n    \"isFocused\",\n    \"for\",\n    \"shrink\",\n    \"children\",\n    \"onHolderMouseDown\",\n    \"startAdornment\",\n    \"endAdornment\",\n    \"inline\",\n  ]);\n\n  const helperText = (): JSX.Element => local.helperText ?? \" \";\n  const isFilledVariant = (): boolean => local.variant === \"filled\";\n  const isNotchedActive = (): boolean =>\n    !!local.label && (!!local.isFilledState || !!local.isFocused || !!local.shrink);\n\n  return (\n    <div\n      {...rest}\n      class={cn(local.class, \"smwb-text-field\", {\n        \"smwb-text-field--filled\": !local.inline && isFilledVariant(),\n        \"smwb-text-field--inline\": local.inline,\n        \"smwb-text-field--focused\": !local.inline && local.isFocused,\n        \"smwb-text-field--error\": local.error,\n        \"smwb-text-field--disabled\": local.disabled,\n        \"smwb-text-field--full-width\": local.fullWidth,\n      })}\n      data-testid=\"text-field\"\n    >\n      <Show when={!local.inline && local.label}>\n        <label\n          class={cn(\"smwb-text-field__label\", { \"smwb-text-field__label--shrink\": isNotchedActive() })}\n          for={local.for || \"\"}\n        >\n          {local.label}\n        </label>\n      </Show>\n      <div class=\"smwb-text-field__input-holder\" onMouseDown={local.onHolderMouseDown}>\n        <Show when={local.startAdornment}>\n          <TextFieldAdornment variant={local.variant} inline={Boolean(local.inline)} position=\"start\">\n            {local.startAdornment}\n          </TextFieldAdornment>\n        </Show>\n        {local.children}\n        <Show when={local.endAdornment}>\n          <TextFieldAdornment position=\"end\">{local.endAdornment}</TextFieldAdornment>\n        </Show>\n        <Show when={!local.inline && local.variant === \"outlined\"}>\n          <fieldset\n            class={cn(\"smwb-text-field__notched\", {\n              \"smwb-text-field__notched--with-label\": local.label,\n              \"smwb-text-field__notched--active\": isNotchedActive(),\n            })}\n          >\n            <legend>\n              <Show when={local.label} fallback={<span class=\"smwb-notranslate\">&#8203;</span>}>\n                <span>{local.label}</span>\n              </Show>\n            </legend>\n          </fieldset>\n        </Show>\n      </div>\n      <Show when={!local.inline && helperText()}>\n        <p class=\"smwb-text-field__helper-line\">\n          <span class=\"smwb-text-field__helper-text\">{helperText()}</span>\n        </p>\n      </Show>\n    </div>\n  );\n}\n\nexport default TextFieldWrapper;\n"],"mappings":"AAAA,SAAmB,MAAM,kBAAkB;AAC3C,OAAO,QAAQ;AACf,SAAS,0BAA0B;AAqB5B,SAAS,iBAAiB,OAA2C;AAC1E,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,OAAO;AAAA,IACtC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,aAAa,MAAmB,MAAM,cAAc;AAC1D,QAAM,kBAAkB,MAAe,MAAM,YAAY;AACzD,QAAM,kBAAkB,MACtB,CAAC,CAAC,MAAM,UAAU,CAAC,CAAC,MAAM,iBAAiB,CAAC,CAAC,MAAM,aAAa,CAAC,CAAC,MAAM;AAE1E,SACE,CAAC;AAAA,QACK;AAAA,IACJ,OAAO,GAAG,MAAM,OAAO,mBAAmB;AAAA,MACxC,2BAA2B,CAAC,MAAM,UAAU,gBAAgB;AAAA,MAC5D,2BAA2B,MAAM;AAAA,MACjC,4BAA4B,CAAC,MAAM,UAAU,MAAM;AAAA,MACnD,0BAA0B,MAAM;AAAA,MAChC,6BAA6B,MAAM;AAAA,MACnC,+BAA+B,MAAM;AAAA,IACvC,CAAC;AAAA,IACD,YAAY;AAAA,GACb;AAAA,MACC,CAAC,KAAK,MAAM,CAAC,MAAM,UAAU,MAAM,OAAO;AAAA,QACxC,CAAC;AAAA,IACC,OAAO,GAAG,0BAA0B,EAAE,kCAAkC,gBAAgB,EAAE,CAAC;AAAA,IAC3F,KAAK,MAAM,OAAO;AAAA,GACnB;AAAA,WACE,MAAM,MAAM;AAAA,QACf,EALC,MAKO;AAAA,MACV,EAPC,KAOM;AAAA,MACP,CAAC,IAAI,MAAM,gCAAgC,aAAa,MAAM,mBAAmB;AAAA,QAC/E,CAAC,KAAK,MAAM,MAAM,gBAAgB;AAAA,UAChC,CAAC,mBAAmB,SAAS,MAAM,SAAS,QAAQ,QAAQ,MAAM,MAAM,GAAG,SAAS,QAAQ;AAAA,aACzF,MAAM,eAAe;AAAA,UACxB,EAFC,mBAEoB;AAAA,QACvB,EAJC,KAIM;AAAA,SACN,MAAM,SAAS;AAAA,QAChB,CAAC,KAAK,MAAM,MAAM,cAAc;AAAA,UAC9B,CAAC,mBAAmB,SAAS,OAAO,MAAM,aAAa,EAAtD,mBAA2E;AAAA,QAC9E,EAFC,KAEM;AAAA,QACP,CAAC,KAAK,MAAM,CAAC,MAAM,UAAU,MAAM,YAAY,YAAY;AAAA,UACzD,CAAC;AAAA,IACC,OAAO,GAAG,4BAA4B;AAAA,MACpC,wCAAwC,MAAM;AAAA,MAC9C,oCAAoC,gBAAgB;AAAA,IACtD,CAAC;AAAA,GACF;AAAA,YACC,CAAC,OAAO;AAAA,cACN,CAAC,KAAK,MAAM,MAAM,OAAO,UAAU,CAAC,KAAK,MAAM,mBAAmB,OAAO,EAArC,OAA8C;AAAA,gBAChF,CAAC,MAAM,MAAM,MAAM,EAAlB,KAAyB;AAAA,cAC5B,EAFC,KAEM;AAAA,YACT,EAJC,OAIQ;AAAA,UACX,EAXC,SAWU;AAAA,QACb,EAbC,KAaM;AAAA,MACT,EAxBC,IAwBK;AAAA,MACN,CAAC,KAAK,MAAM,CAAC,MAAM,UAAU,WAAW,GAAG;AAAA,QACzC,CAAC,EAAE,MAAM,+BAA+B;AAAA,UACtC,CAAC,KAAK,MAAM,gCAAgC,WAAW,EAAE,EAAxD,KAA+D;AAAA,QAClE,EAFC,EAEG;AAAA,MACN,EAJC,KAIM;AAAA,IACT,EAlDC;AAoDL;AAEA,IAAO,2BAAQ;","names":[],"file":"textFieldWrapper.jsx"}
+{"version":3,"sources":["../../../../../src/components/inputs/textField/textFieldWrapper.tsx"],"sourcesContent":["import { type JSX, Show, children, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { TextFieldAdornment } from \"./textFieldAdornment\";\nimport type { TextFieldVariant } from \"./types\";\n\nexport interface TextFieldWrapperProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  label?: string | undefined;\n  helperText?: JSX.Element;\n  variant?: TextFieldVariant | undefined;\n  disabled?: boolean | undefined;\n  error?: boolean | undefined;\n  fullWidth?: boolean | undefined;\n  isFilledState?: boolean | undefined;\n  isFocused?: boolean | undefined;\n  for?: string | undefined;\n  shrink?: boolean | undefined;\n  onHolderMouseDown?: JSX.EventHandlerUnion<HTMLDivElement, MouseEvent>;\n  startAdornment?: JSX.Element;\n  endAdornment?: JSX.Element;\n  inline?: boolean | undefined;\n  children?: JSX.Element;\n}\n\nexport function TextFieldWrapper(props: TextFieldWrapperProps): JSX.Element {\n  const [local, rest] = splitProps(props, [\n    \"label\",\n    \"helperText\",\n    \"variant\",\n    \"disabled\",\n    \"class\",\n    \"error\",\n    \"fullWidth\",\n    \"isFilledState\",\n    \"isFocused\",\n    \"for\",\n    \"shrink\",\n    \"children\",\n    \"onHolderMouseDown\",\n    \"startAdornment\",\n    \"endAdornment\",\n    \"inline\",\n  ]);\n\n  // Read each slot once: markup passed as a prop is created anew on every read,\n  // and during hydration a copy the server never rendered has no DOM node.\n  // The helper text is read only where it is drawn: not for an inline field.\n  const helper = children(() => (local.inline ? undefined : local.helperText));\n  const startAdornment = children(() => local.startAdornment);\n  const endAdornment = children(() => local.endAdornment);\n  const helperText = (): JSX.Element => helper() ?? \" \";\n  const isFilledVariant = (): boolean => local.variant === \"filled\";\n  const isNotchedActive = (): boolean =>\n    !!local.label && (!!local.isFilledState || !!local.isFocused || !!local.shrink);\n\n  return (\n    <div\n      {...rest}\n      class={cn(local.class, \"smwb-text-field\", {\n        \"smwb-text-field--filled\": !local.inline && isFilledVariant(),\n        \"smwb-text-field--inline\": local.inline,\n        \"smwb-text-field--focused\": !local.inline && local.isFocused,\n        \"smwb-text-field--error\": local.error,\n        \"smwb-text-field--disabled\": local.disabled,\n        \"smwb-text-field--full-width\": local.fullWidth,\n      })}\n      data-testid=\"text-field\"\n    >\n      <Show when={!local.inline && local.label}>\n        <label\n          class={cn(\"smwb-text-field__label\", { \"smwb-text-field__label--shrink\": isNotchedActive() })}\n          for={local.for || \"\"}\n        >\n          {local.label}\n        </label>\n      </Show>\n      <div class=\"smwb-text-field__input-holder\" onMouseDown={local.onHolderMouseDown}>\n        <Show when={startAdornment()}>\n          <TextFieldAdornment variant={local.variant} inline={Boolean(local.inline)} position=\"start\">\n            {startAdornment()}\n          </TextFieldAdornment>\n        </Show>\n        {local.children}\n        <Show when={endAdornment()}>\n          <TextFieldAdornment position=\"end\">{endAdornment()}</TextFieldAdornment>\n        </Show>\n        <Show when={!local.inline && local.variant === \"outlined\"}>\n          <fieldset\n            class={cn(\"smwb-text-field__notched\", {\n              \"smwb-text-field__notched--with-label\": local.label,\n              \"smwb-text-field__notched--active\": isNotchedActive(),\n            })}\n          >\n            <legend>\n              <Show when={local.label} fallback={<span class=\"smwb-notranslate\">&#8203;</span>}>\n                <span>{local.label}</span>\n              </Show>\n            </legend>\n          </fieldset>\n        </Show>\n      </div>\n      <Show when={!local.inline && helperText()}>\n        <p class=\"smwb-text-field__helper-line\">\n          <span class=\"smwb-text-field__helper-text\">{helperText()}</span>\n        </p>\n      </Show>\n    </div>\n  );\n}\n\nexport default TextFieldWrapper;\n"],"mappings":"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","names":[],"file":"textFieldWrapper.jsx"}

package/dist/source/components/inputs/timePicker/timePicker.jsx

@@ -1,3 +1,4 @@
+import "@smwb/ui-styles/less/tokens.entry.less";
 import "@smwb/ui-styles/less/components/timePicker/timePicker.entry.less";
 import { Show, createEffect, createSignal, onCleanup, splitProps } from "solid-js";
 import { Portal, isServer } from "solid-js/web";

package/dist/source/components/inputs/timePicker/timePicker.jsx.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/inputs/timePicker/timePicker.tsx"],"sourcesContent":["import \"@smwb/ui-styles/less/components/timePicker/timePicker.entry.less\";\nimport { type JSX, Show, createEffect, createSignal, onCleanup, splitProps } from \"solid-js\";\nimport { Portal, isServer } from \"solid-js/web\";\nimport { buildFloatingMiddleware, type Placement, resolvePlacement } from \"../../../utils/floating\";\nimport { createFloating } from \"../../../primitives/createFloating\";\nimport { ClickAwayListener } from \"../../clickAwayListener\";\nimport { TimePickerInput } from \"./timePickerInput\";\nimport { TimePickerColumns } from \"./timePickerColumns\";\nimport { isValidTimeDate } from \"./timeUtils\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\nimport type { TextFieldProps } from \"../textField\";\n\nexport interface TimePickerProps\n  extends Omit<TextFieldProps, \"onBlur\" | \"onChange\" | \"value\" | \"defaultValue\" | \"ref\" | \"onToggle\"> {\n  /** Time format pattern with tokens HH, mm, ss, e.g. \"HH:mm\" or \"HH:mm:ss\". */\n  format?: string | undefined;\n  placement?: Placement | undefined;\n  disableClock?: boolean | undefined;\n  label?: string | undefined;\n  clockAriaLabel?: string | undefined;\n  value?: Date | string | undefined;\n  clockIcon?: JSX.Element;\n  onChange?: ((event?: Event, value?: Date, data?: TimePickerProps) => void) | undefined;\n  onBlur?: ((event?: FocusEvent, value?: Date, data?: TimePickerProps) => void) | undefined;\n  ref?: Ref<HTMLInputElement>;\n}\n\nconst FADE_MS = 150;\n\nexport function TimePicker(props: TimePickerProps): JSX.Element {\n  const [local, rest] = splitProps(props, [\n    \"value\",\n    \"onChange\",\n    \"placement\",\n    \"disabled\",\n    \"disableClock\",\n    \"clockAriaLabel\",\n    \"format\",\n    \"onBlur\",\n    \"ref\",\n  ]);\n\n  const value = (): Date | undefined => (local.value === undefined ? undefined : new Date(local.value));\n  const [viewValue, setViewValue] = createSignal<Date>(isValidTimeDate(value()) ? (value() as Date) : new Date());\n  const [isOpen, setIsOpen] = createSignal(false);\n\n  let anchorEl: HTMLElement | undefined;\n  let clockEl: HTMLElement | undefined;\n\n  const resolved = () => resolvePlacement(local.placement ?? \"bottom-start\");\n  const floating = createFloating({\n    placement: () => resolved().placement,\n    middleware: () => buildFloatingMiddleware(resolved()),\n  });\n\n  createEffect(() => {\n    if (local.disabled) return;\n    const v = value();\n    setViewValue(isValidTimeDate(v) ? v : new Date());\n  });\n\n  const shouldOpen = (): boolean => isOpen() && !local.disabled && !local.disableClock;\n  const [mounted, setMounted] = createSignal(shouldOpen());\n  const [shown, setShown] = createSignal(false);\n  let raf: number | undefined;\n  let timer: ReturnType<typeof setTimeout> | undefined;\n\n  createEffect(() => {\n    if (shouldOpen()) {\n      if (timer !== undefined) clearTimeout(timer);\n      setMounted(true);\n      raf = requestAnimationFrame(() => setShown(true));\n    } else {\n      setShown(false);\n      if (mounted()) timer = setTimeout(() => setMounted(false), FADE_MS);\n    }\n  });\n  onCleanup(() => {\n    if (raf !== undefined) cancelAnimationFrame(raf);\n    if (timer !== undefined) clearTimeout(timer);\n  });\n\n  const onToggle = (): void => {\n    if (!local.disabled) setIsOpen((prev) => !prev);\n  };\n\n  const onClickAway = (event: MouseEvent | TouchEvent): void => {\n    const target = event.target as HTMLElement;\n    if (clockEl?.contains(target) || anchorEl?.contains(target)) return;\n    setIsOpen(false);\n  };\n\n  const onTimeChange = (next: Date): void => {\n    setViewValue(next);\n    local.onChange?.(undefined, next, props);\n  };\n\n  return (\n    <>\n      <TimePickerInput\n        ref={mergeRefs(local.ref, floating.setReference, (el) => (anchorEl = el as HTMLElement))}\n        value={local.value}\n        onChange={local.onChange}\n        onBlur={local.onBlur}\n        onToggle={onToggle}\n        disabled={local.disabled}\n        disableClock={local.disableClock}\n        format={local.format}\n        {...rest}\n      />\n      <Show when={mounted()}>\n        <Portal mount={(isServer ? undefined : document.body) as Node}>\n          <ClickAwayListener onClickAway={onClickAway}>\n            <div\n              ref={mergeRefs(floating.setFloating, (el) => (clockEl = el as HTMLElement))}\n              class=\"smwb-date-picker smwb-time-picker\"\n              style={{ ...floating.floatingStyles(), transition: `opacity ${FADE_MS}ms ease-in-out`, opacity: shown() ? 1 : 0 }}\n              data-testid=\"time-picker\"\n              data-smwb-overlay-layer\n              role=\"dialog\"\n              aria-modal=\"false\"\n              aria-label={local.clockAriaLabel ?? \"Choose time\"}\n            >\n              <div class=\"smwb-date-picker__inner\">\n                <TimePickerColumns\n                  value={viewValue()}\n                  format={local.format}\n                  onChange={onTimeChange}\n                  onComplete={() => {\n                    setIsOpen(false);\n                  }}\n                />\n              </div>\n            </div>\n          </ClickAwayListener>\n        </Portal>\n      </Show>\n    </>\n  );\n}\n\nexport default TimePicker;\n"],"mappings":"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","names":[],"file":"timePicker.jsx"}
+{"version":3,"sources":["../../../../../src/components/inputs/timePicker/timePicker.tsx"],"sourcesContent":["import \"@smwb/ui-styles/less/tokens.entry.less\";\nimport \"@smwb/ui-styles/less/components/timePicker/timePicker.entry.less\";\nimport { type JSX, Show, createEffect, createSignal, onCleanup, splitProps } from \"solid-js\";\nimport { Portal, isServer } from \"solid-js/web\";\nimport { buildFloatingMiddleware, type Placement, resolvePlacement } from \"../../../utils/floating\";\nimport { createFloating } from \"../../../primitives/createFloating\";\nimport { ClickAwayListener } from \"../../clickAwayListener\";\nimport { TimePickerInput } from \"./timePickerInput\";\nimport { TimePickerColumns } from \"./timePickerColumns\";\nimport { isValidTimeDate } from \"./timeUtils\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\nimport type { TextFieldProps } from \"../textField\";\n\nexport interface TimePickerProps\n  extends Omit<TextFieldProps, \"onBlur\" | \"onChange\" | \"value\" | \"defaultValue\" | \"ref\" | \"onToggle\"> {\n  /** Time format pattern with tokens HH, mm, ss, e.g. \"HH:mm\" or \"HH:mm:ss\". */\n  format?: string | undefined;\n  placement?: Placement | undefined;\n  disableClock?: boolean | undefined;\n  label?: string | undefined;\n  clockAriaLabel?: string | undefined;\n  value?: Date | string | undefined;\n  clockIcon?: JSX.Element;\n  onChange?: ((event?: Event, value?: Date, data?: TimePickerProps) => void) | undefined;\n  onBlur?: ((event?: FocusEvent, value?: Date, data?: TimePickerProps) => void) | undefined;\n  ref?: Ref<HTMLInputElement>;\n}\n\nconst FADE_MS = 150;\n\nexport function TimePicker(props: TimePickerProps): JSX.Element {\n  const [local, rest] = splitProps(props, [\n    \"value\",\n    \"onChange\",\n    \"placement\",\n    \"disabled\",\n    \"disableClock\",\n    \"clockAriaLabel\",\n    \"format\",\n    \"onBlur\",\n    \"ref\",\n  ]);\n\n  const value = (): Date | undefined => (local.value === undefined ? undefined : new Date(local.value));\n  const [viewValue, setViewValue] = createSignal<Date>(isValidTimeDate(value()) ? (value() as Date) : new Date());\n  const [isOpen, setIsOpen] = createSignal(false);\n\n  let anchorEl: HTMLElement | undefined;\n  let clockEl: HTMLElement | undefined;\n\n  const resolved = () => resolvePlacement(local.placement ?? \"bottom-start\");\n  const floating = createFloating({\n    placement: () => resolved().placement,\n    middleware: () => buildFloatingMiddleware(resolved()),\n  });\n\n  createEffect(() => {\n    if (local.disabled) return;\n    const v = value();\n    setViewValue(isValidTimeDate(v) ? v : new Date());\n  });\n\n  const shouldOpen = (): boolean => isOpen() && !local.disabled && !local.disableClock;\n  const [mounted, setMounted] = createSignal(shouldOpen());\n  const [shown, setShown] = createSignal(false);\n  let raf: number | undefined;\n  let timer: ReturnType<typeof setTimeout> | undefined;\n\n  createEffect(() => {\n    if (shouldOpen()) {\n      if (timer !== undefined) clearTimeout(timer);\n      setMounted(true);\n      raf = requestAnimationFrame(() => setShown(true));\n    } else {\n      setShown(false);\n      if (mounted()) timer = setTimeout(() => setMounted(false), FADE_MS);\n    }\n  });\n  onCleanup(() => {\n    if (raf !== undefined) cancelAnimationFrame(raf);\n    if (timer !== undefined) clearTimeout(timer);\n  });\n\n  const onToggle = (): void => {\n    if (!local.disabled) setIsOpen((prev) => !prev);\n  };\n\n  const onClickAway = (event: MouseEvent | TouchEvent): void => {\n    const target = event.target as HTMLElement;\n    if (clockEl?.contains(target) || anchorEl?.contains(target)) return;\n    setIsOpen(false);\n  };\n\n  const onTimeChange = (next: Date): void => {\n    setViewValue(next);\n    local.onChange?.(undefined, next, props);\n  };\n\n  return (\n    <>\n      <TimePickerInput\n        ref={mergeRefs(local.ref, floating.setReference, (el) => (anchorEl = el as HTMLElement))}\n        value={local.value}\n        onChange={local.onChange}\n        onBlur={local.onBlur}\n        onToggle={onToggle}\n        disabled={local.disabled}\n        disableClock={local.disableClock}\n        format={local.format}\n        {...rest}\n      />\n      <Show when={mounted()}>\n        <Portal mount={(isServer ? undefined : document.body) as Node}>\n          <ClickAwayListener onClickAway={onClickAway}>\n            <div\n              ref={mergeRefs(floating.setFloating, (el) => (clockEl = el as HTMLElement))}\n              class=\"smwb-date-picker smwb-time-picker\"\n              style={{ ...floating.floatingStyles(), transition: `opacity ${FADE_MS}ms ease-in-out`, opacity: shown() ? 1 : 0 }}\n              data-testid=\"time-picker\"\n              data-smwb-overlay-layer\n              role=\"dialog\"\n              aria-modal=\"false\"\n              aria-label={local.clockAriaLabel ?? \"Choose time\"}\n            >\n              <div class=\"smwb-date-picker__inner\">\n                <TimePickerColumns\n                  value={viewValue()}\n                  format={local.format}\n                  onChange={onTimeChange}\n                  onComplete={() => {\n                    setIsOpen(false);\n                  }}\n                />\n              </div>\n            </div>\n          </ClickAwayListener>\n        </Portal>\n      </Show>\n    </>\n  );\n}\n\nexport default TimePicker;\n"],"mappings":"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","names":[],"file":"timePicker.jsx"}

package/dist/source/components/inputs/toggle/toggle.jsx

@@ -1,3 +1,4 @@
+import "@smwb/ui-styles/less/tokens.entry.less";
 import "@smwb/ui-styles/less/components/toggle/toggle.entry.less";
 import { Show, mergeProps, splitProps } from "solid-js";
 import cn from "clsx";

package/dist/source/components/inputs/toggle/toggle.jsx.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/inputs/toggle/toggle.tsx"],"sourcesContent":["import \"@smwb/ui-styles/less/components/toggle/toggle.entry.less\";\nimport { type JSX, Show, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { TextFieldWrapper } from \"../textField/textFieldWrapper\";\nimport { createId } from \"../../../primitives/createId\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\nimport type { SelectionChangeEvent, SelectionControlColor, SelectionControlSize } from \"../checkbox/checkbox\";\n\nexport interface ToggleProps extends Omit<JSX.InputHTMLAttributes<HTMLInputElement>, \"onChange\" | \"size\"> {\n  disabled?: boolean;\n  readOnly?: boolean;\n  required?: boolean;\n  checked?: boolean;\n  id?: string;\n  label?: string;\n  labelPlacement?: \"top\" | \"left\" | \"right\";\n  size?: SelectionControlSize;\n  color?: SelectionControlColor;\n  /** Unified handler: `(event, checked, data)`. */\n  onChange?: (event: SelectionChangeEvent, checked: boolean, data: ToggleProps) => void;\n  helperText?: JSX.Element;\n  error?: boolean;\n  ref?: Ref<HTMLInputElement>;\n}\n\nexport function Toggle(props: ToggleProps): JSX.Element {\n  const merged = mergeProps({ size: \"medium\" as SelectionControlSize, color: \"primary\" as SelectionControlColor }, props);\n  const [local, args] = splitProps(merged, [\n    \"disabled\",\n    \"readOnly\",\n    \"required\",\n    \"checked\",\n    \"class\",\n    \"id\",\n    \"label\",\n    \"labelPlacement\",\n    \"size\",\n    \"color\",\n    \"helperText\",\n    \"error\",\n    \"onChange\",\n    \"ref\",\n  ]);\n  const id = createId(local.id);\n\n  const handleChange: JSX.EventHandler<HTMLInputElement, Event> = (event) => {\n    if (local.readOnly) {\n      event.preventDefault();\n      return;\n    }\n    local.onChange?.(event, event.currentTarget.checked, props);\n  };\n\n  return (\n    <TextFieldWrapper\n      helperText={local.helperText}\n      disabled={local.disabled}\n      error={local.error}\n      class=\"smwb-text-field-checkbox\"\n    >\n      <span class={cn(\"smwb-toggle__wrapper\", local.labelPlacement && `smwb-toggle__wrapper_label-${local.labelPlacement}`)}>\n        <Show when={local.label}>\n          <label for={id} class=\"smwb-toggle__label\">\n            {local.label}\n          </label>\n        </Show>\n        <label\n          class={cn(\"smwb-toggle\", `smwb-toggle_size-${local.size}`, `smwb-toggle_color-${local.color}`, local.class, {\n            \"smwb-disabled\": local.disabled,\n            \"smwb-readonly\": local.readOnly,\n          })}\n        >\n          <input\n            type=\"checkbox\"\n            id={id}\n            class=\"smwb-toggle__checkbox\"\n            aria-checked={local.checked}\n            aria-invalid={local.error || undefined}\n            aria-required={local.required || undefined}\n            role=\"switch\"\n            checked={local.checked}\n            disabled={local.disabled}\n            readonly={local.readOnly}\n            required={local.required}\n            ref={mergeRefs(local.ref)}\n            {...args}\n            onChange={handleChange}\n          />\n          <span class=\"smwb-toggle__track\" />\n          <span class=\"smwb-toggle__thumb\" />\n        </label>\n      </span>\n    </TextFieldWrapper>\n  );\n}\n\nexport default Toggle;\n"],"mappings":"AAAA,OAAO;AACP,SAAmB,MAAM,YAAY,kBAAkB;AACvD,OAAO,QAAQ;AACf,SAAS,wBAAwB;AACjC,SAAS,gBAAgB;AACzB,SAAS,iBAA2B;AAoB7B,SAAS,OAAO,OAAiC;AACtD,QAAM,SAAS,WAAW,EAAE,MAAM,UAAkC,OAAO,UAAmC,GAAG,KAAK;AACtH,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,QAAQ;AAAA,IACvC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACD,QAAM,KAAK,SAAS,MAAM,EAAE;AAE5B,QAAM,eAA0D,CAAC,UAAU;AACzE,QAAI,MAAM,UAAU;AAClB,YAAM,eAAe;AACrB;AAAA,IACF;AACA,UAAM,WAAW,OAAO,MAAM,cAAc,SAAS,KAAK;AAAA,EAC5D;AAEA,SACE,CAAC;AAAA,IACC,YAAY,MAAM;AAAA,IAClB,UAAU,MAAM;AAAA,IAChB,OAAO,MAAM;AAAA,IACb,MAAM;AAAA,GACP;AAAA,MACC,CAAC,KAAK,OAAO,GAAG,wBAAwB,MAAM,kBAAkB,8BAA8B,MAAM,cAAc,EAAE,GAAG;AAAA,QACrH,CAAC,KAAK,MAAM,MAAM,OAAO;AAAA,UACvB,CAAC,MAAM,KAAK,IAAI,MAAM,qBAAqB;AAAA,aACxC,MAAM,MAAM;AAAA,UACf,EAFC,MAEO;AAAA,QACV,EAJC,KAIM;AAAA,QACP,CAAC;AAAA,IACC,OAAO,GAAG,eAAe,oBAAoB,MAAM,IAAI,IAAI,qBAAqB,MAAM,KAAK,IAAI,MAAM,OAAO;AAAA,MAC1G,iBAAiB,MAAM;AAAA,MACvB,iBAAiB,MAAM;AAAA,IACzB,CAAC;AAAA,GACF;AAAA,UACC,CAAC;AAAA,IACC,KAAK;AAAA,IACL,IAAI;AAAA,IACJ,MAAM;AAAA,IACN,cAAc,MAAM;AAAA,IACpB,cAAc,MAAM,SAAS;AAAA,IAC7B,eAAe,MAAM,YAAY;AAAA,IACjC,KAAK;AAAA,IACL,SAAS,MAAM;AAAA,IACf,UAAU,MAAM;AAAA,IAChB,UAAU,MAAM;AAAA,IAChB,UAAU,MAAM;AAAA,IAChB,KAAK,UAAU,MAAM,GAAG;AAAA,QACpB;AAAA,IACJ,UAAU;AAAA,EACZ,EAAE;AAAA,UACF,CAAC,KAAK,MAAM,qBAAqB,EAAE;AAAA,UACnC,CAAC,KAAK,MAAM,qBAAqB,EAAE;AAAA,QACrC,EAxBC,MAwBO;AAAA,MACV,EA/BC,KA+BM;AAAA,IACT,EAtCC;AAwCL;AAEA,IAAO,iBAAQ;","names":[],"file":"toggle.jsx"}
+{"version":3,"sources":["../../../../../src/components/inputs/toggle/toggle.tsx"],"sourcesContent":["import \"@smwb/ui-styles/less/tokens.entry.less\";\nimport \"@smwb/ui-styles/less/components/toggle/toggle.entry.less\";\nimport { type JSX, Show, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { TextFieldWrapper } from \"../textField/textFieldWrapper\";\nimport { createId } from \"../../../primitives/createId\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\nimport type { SelectionChangeEvent, SelectionControlColor, SelectionControlSize } from \"../checkbox/checkbox\";\n\nexport interface ToggleProps extends Omit<JSX.InputHTMLAttributes<HTMLInputElement>, \"onChange\" | \"size\"> {\n  disabled?: boolean;\n  readOnly?: boolean;\n  required?: boolean;\n  checked?: boolean;\n  id?: string;\n  label?: string;\n  labelPlacement?: \"top\" | \"left\" | \"right\";\n  size?: SelectionControlSize;\n  color?: SelectionControlColor;\n  /** Unified handler: `(event, checked, data)`. */\n  onChange?: (event: SelectionChangeEvent, checked: boolean, data: ToggleProps) => void;\n  helperText?: JSX.Element;\n  error?: boolean;\n  ref?: Ref<HTMLInputElement>;\n}\n\nexport function Toggle(props: ToggleProps): JSX.Element {\n  const merged = mergeProps({ size: \"medium\" as SelectionControlSize, color: \"primary\" as SelectionControlColor }, props);\n  const [local, args] = splitProps(merged, [\n    \"disabled\",\n    \"readOnly\",\n    \"required\",\n    \"checked\",\n    \"class\",\n    \"id\",\n    \"label\",\n    \"labelPlacement\",\n    \"size\",\n    \"color\",\n    \"helperText\",\n    \"error\",\n    \"onChange\",\n    \"ref\",\n  ]);\n  const id = createId(local.id);\n\n  const handleChange: JSX.EventHandler<HTMLInputElement, Event> = (event) => {\n    if (local.readOnly) {\n      event.preventDefault();\n      return;\n    }\n    local.onChange?.(event, event.currentTarget.checked, props);\n  };\n\n  return (\n    <TextFieldWrapper\n      helperText={local.helperText}\n      disabled={local.disabled}\n      error={local.error}\n      class=\"smwb-text-field-checkbox\"\n    >\n      <span class={cn(\"smwb-toggle__wrapper\", local.labelPlacement && `smwb-toggle__wrapper_label-${local.labelPlacement}`)}>\n        <Show when={local.label}>\n          <label for={id} class=\"smwb-toggle__label\">\n            {local.label}\n          </label>\n        </Show>\n        <label\n          class={cn(\"smwb-toggle\", `smwb-toggle_size-${local.size}`, `smwb-toggle_color-${local.color}`, local.class, {\n            \"smwb-disabled\": local.disabled,\n            \"smwb-readonly\": local.readOnly,\n          })}\n        >\n          <input\n            type=\"checkbox\"\n            id={id}\n            class=\"smwb-toggle__checkbox\"\n            aria-checked={local.checked}\n            aria-invalid={local.error || undefined}\n            aria-required={local.required || undefined}\n            role=\"switch\"\n            checked={local.checked}\n            disabled={local.disabled}\n            readonly={local.readOnly}\n            required={local.required}\n            ref={mergeRefs(local.ref)}\n            {...args}\n            onChange={handleChange}\n          />\n          <span class=\"smwb-toggle__track\" />\n          <span class=\"smwb-toggle__thumb\" />\n        </label>\n      </span>\n    </TextFieldWrapper>\n  );\n}\n\nexport default Toggle;\n"],"mappings":"AAAA,OAAO;AACP,OAAO;AACP,SAAmB,MAAM,YAAY,kBAAkB;AACvD,OAAO,QAAQ;AACf,SAAS,wBAAwB;AACjC,SAAS,gBAAgB;AACzB,SAAS,iBAA2B;AAoB7B,SAAS,OAAO,OAAiC;AACtD,QAAM,SAAS,WAAW,EAAE,MAAM,UAAkC,OAAO,UAAmC,GAAG,KAAK;AACtH,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,QAAQ;AAAA,IACvC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACD,QAAM,KAAK,SAAS,MAAM,EAAE;AAE5B,QAAM,eAA0D,CAAC,UAAU;AACzE,QAAI,MAAM,UAAU;AAClB,YAAM,eAAe;AACrB;AAAA,IACF;AACA,UAAM,WAAW,OAAO,MAAM,cAAc,SAAS,KAAK;AAAA,EAC5D;AAEA,SACE,CAAC;AAAA,IACC,YAAY,MAAM;AAAA,IAClB,UAAU,MAAM;AAAA,IAChB,OAAO,MAAM;AAAA,IACb,MAAM;AAAA,GACP;AAAA,MACC,CAAC,KAAK,OAAO,GAAG,wBAAwB,MAAM,kBAAkB,8BAA8B,MAAM,cAAc,EAAE,GAAG;AAAA,QACrH,CAAC,KAAK,MAAM,MAAM,OAAO;AAAA,UACvB,CAAC,MAAM,KAAK,IAAI,MAAM,qBAAqB;AAAA,aACxC,MAAM,MAAM;AAAA,UACf,EAFC,MAEO;AAAA,QACV,EAJC,KAIM;AAAA,QACP,CAAC;AAAA,IACC,OAAO,GAAG,eAAe,oBAAoB,MAAM,IAAI,IAAI,qBAAqB,MAAM,KAAK,IAAI,MAAM,OAAO;AAAA,MAC1G,iBAAiB,MAAM;AAAA,MACvB,iBAAiB,MAAM;AAAA,IACzB,CAAC;AAAA,GACF;AAAA,UACC,CAAC;AAAA,IACC,KAAK;AAAA,IACL,IAAI;AAAA,IACJ,MAAM;AAAA,IACN,cAAc,MAAM;AAAA,IACpB,cAAc,MAAM,SAAS;AAAA,IAC7B,eAAe,MAAM,YAAY;AAAA,IACjC,KAAK;AAAA,IACL,SAAS,MAAM;AAAA,IACf,UAAU,MAAM;AAAA,IAChB,UAAU,MAAM;AAAA,IAChB,UAAU,MAAM;AAAA,IAChB,KAAK,UAAU,MAAM,GAAG;AAAA,QACpB;AAAA,IACJ,UAAU;AAAA,EACZ,EAAE;AAAA,UACF,CAAC,KAAK,MAAM,qBAAqB,EAAE;AAAA,UACnC,CAAC,KAAK,MAAM,qBAAqB,EAAE;AAAA,QACrC,EAxBC,MAwBO;AAAA,MACV,EA/BC,KA+BM;AAAA,IACT,EAtCC;AAwCL;AAEA,IAAO,iBAAQ;","names":[],"file":"toggle.jsx"}

package/dist/source/components/inputs/valueSlider/valueSlider.jsx

@@ -1,5 +1,6 @@
+import "@smwb/ui-styles/less/tokens.entry.less";
 import "@smwb/ui-styles/less/components/valueSlider/valueSlider.entry.less";
-import { Show, splitProps } from "solid-js";
+import { Show, children, splitProps } from "solid-js";
 import cn from "clsx";
 import { Slider } from "../slider";
 const formatReadout = (readout, value) => {
@@ -16,8 +17,9 @@ function ValueSlider(props) {
     "label",
     "class"
   ]);
+  const endAdornment = children(() => local.endAdornment);
   const hasReadout = () => local.readout !== void 0 && local.readout !== false;
-  const showHeader = () => local.label != null || hasReadout() || local.endAdornment != null || local.onReset != null;
+  const showHeader = () => local.label != null || hasReadout() || endAdornment() != null || local.onReset != null;
   return <div class={cn("smwb-value-slider", local.class)}>
       <Show when={showHeader()}>
         <div class="smwb-value-slider__header">
@@ -28,7 +30,7 @@ function ValueSlider(props) {
           <Show when={hasReadout()}>
             <span class="smwb-value-slider__readout">{formatReadout(local.readout, sliderProps.value)}</span>
           </Show>
-          {local.endAdornment}
+          {endAdornment()}
           <Show when={local.onReset != null}>
             <button
     type="button"

package/dist/source/components/inputs/valueSlider/valueSlider.jsx.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/inputs/valueSlider/valueSlider.tsx"],"sourcesContent":["import \"@smwb/ui-styles/less/components/valueSlider/valueSlider.entry.less\";\nimport { type JSX, Show, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Slider, type SliderProps, type SliderValue } from \"../slider\";\n\nexport interface ValueSliderProps extends SliderProps {\n  /**\n   * Read-only value readout beside the label. `true` shows the raw value; pass a\n   * formatter for units/precision (e.g. `(v) => `${v}%``). Reflects `props.value`.\n   */\n  readout?: boolean | ((value: SliderValue | undefined) => string);\n  /** Content at the end of the header row — a reset button, a favourite star, etc. */\n  endAdornment?: JSX.Element;\n  /** Renders a built-in reset control in the header; called on click. */\n  onReset?: () => void;\n  /** Accessible label for the reset control. */\n  resetLabel?: string;\n}\n\nconst formatReadout = (\n  readout: ValueSliderProps[\"readout\"],\n  value: SliderValue | undefined,\n): string => {\n  if (typeof readout === \"function\") return readout(value);\n  if (Array.isArray(value)) return `${value[0]} – ${value[1]}`;\n  return value == null ? \"\" : String(value);\n};\n\n/**\n * `Slider` plus the value-readout + adornment header row every app rebuilds: a\n * read-only formatted value next to the label, an optional reset \"eraser\", and an\n * `endAdornment` slot (favourite star, etc.). A drop-in preset — all `Slider`\n * props pass through; the label is rendered in the header instead of inside Slider.\n */\nexport function ValueSlider(props: ValueSliderProps): JSX.Element {\n  const [local, sliderProps] = splitProps(props, [\n    \"readout\",\n    \"endAdornment\",\n    \"onReset\",\n    \"resetLabel\",\n    \"label\",\n    \"class\",\n  ]);\n\n  const hasReadout = (): boolean => local.readout !== undefined && local.readout !== false;\n  const showHeader = (): boolean =>\n    local.label != null || hasReadout() || local.endAdornment != null || local.onReset != null;\n\n  return (\n    <div class={cn(\"smwb-value-slider\", local.class)}>\n      <Show when={showHeader()}>\n        <div class=\"smwb-value-slider__header\">\n          <Show when={local.label != null}>\n            <span class=\"smwb-value-slider__label\">{local.label}</span>\n          </Show>\n          <span class=\"smwb-value-slider__spacer\" />\n          <Show when={hasReadout()}>\n            <span class=\"smwb-value-slider__readout\">{formatReadout(local.readout, sliderProps.value)}</span>\n          </Show>\n          {local.endAdornment}\n          <Show when={local.onReset != null}>\n            <button\n              type=\"button\"\n              class=\"smwb-value-slider__reset\"\n              aria-label={local.resetLabel ?? \"Reset\"}\n              disabled={sliderProps.disabled}\n              onClick={() => local.onReset?.()}\n            >\n              <svg viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" aria-hidden=\"true\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                <path d=\"M3 12a9 9 0 1 0 3-6.7M3 4v4h4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n              </svg>\n            </button>\n          </Show>\n        </div>\n      </Show>\n      <Slider {...sliderProps} />\n    </div>\n  );\n}\n\nexport default ValueSlider;\n"],"mappings":"AAAA,OAAO;AACP,SAAmB,MAAM,kBAAkB;AAC3C,OAAO,QAAQ;AACf,SAAS,cAAkD;AAgB3D,MAAM,gBAAgB,CACpB,SACA,UACW;AACX,MAAI,OAAO,YAAY,WAAY,QAAO,QAAQ,KAAK;AACvD,MAAI,MAAM,QAAQ,KAAK,EAAG,QAAO,GAAG,MAAM,CAAC,CAAC,WAAM,MAAM,CAAC,CAAC;AAC1D,SAAO,SAAS,OAAO,KAAK,OAAO,KAAK;AAC1C;AAQO,SAAS,YAAY,OAAsC;AAChE,QAAM,CAAC,OAAO,WAAW,IAAI,WAAW,OAAO;AAAA,IAC7C;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,aAAa,MAAe,MAAM,YAAY,UAAa,MAAM,YAAY;AACnF,QAAM,aAAa,MACjB,MAAM,SAAS,QAAQ,WAAW,KAAK,MAAM,gBAAgB,QAAQ,MAAM,WAAW;AAExF,SACE,CAAC,IAAI,OAAO,GAAG,qBAAqB,MAAM,KAAK,GAAG;AAAA,MAChD,CAAC,KAAK,MAAM,WAAW,GAAG;AAAA,QACxB,CAAC,IAAI,MAAM,4BAA4B;AAAA,UACrC,CAAC,KAAK,MAAM,MAAM,SAAS,MAAM;AAAA,YAC/B,CAAC,KAAK,MAAM,4BAA4B,MAAM,MAAM,EAAnD,KAA0D;AAAA,UAC7D,EAFC,KAEM;AAAA,UACP,CAAC,KAAK,MAAM,4BAA4B,EAAE;AAAA,UAC1C,CAAC,KAAK,MAAM,WAAW,GAAG;AAAA,YACxB,CAAC,KAAK,MAAM,8BAA8B,cAAc,MAAM,SAAS,YAAY,KAAK,EAAE,EAAzF,KAAgG;AAAA,UACnG,EAFC,KAEM;AAAA,WACN,MAAM,aAAa;AAAA,UACpB,CAAC,KAAK,MAAM,MAAM,WAAW,MAAM;AAAA,YACjC,CAAC;AAAA,IACC,KAAK;AAAA,IACL,MAAM;AAAA,IACN,YAAY,MAAM,cAAc;AAAA,IAChC,UAAU,YAAY;AAAA,IACtB,SAAS,MAAM,MAAM,UAAU;AAAA,GAChC;AAAA,cACC,CAAC,IAAI,QAAQ,YAAY,MAAM,KAAK,OAAO,KAAK,YAAY,OAAO,KAAK,OAAO,OAAO,eAAe,aAAa,IAAI;AAAA,gBACpH,CAAC,KAAK,EAAE,gCAAgC,eAAe,QAAQ,gBAAgB,QAAQ,EAAE;AAAA,cAC3F,EAFC,IAEK;AAAA,YACR,EAVC,OAUQ;AAAA,UACX,EAZC,KAYM;AAAA,QACT,EAtBC,IAsBK;AAAA,MACR,EAxBC,KAwBM;AAAA,MACP,CAAC,WAAW,aAAa,EAAE;AAAA,IAC7B,EA3BC;AA6BL;AAEA,IAAO,sBAAQ;","names":[],"file":"valueSlider.jsx"}
+{"version":3,"sources":["../../../../../src/components/inputs/valueSlider/valueSlider.tsx"],"sourcesContent":["import \"@smwb/ui-styles/less/tokens.entry.less\";\nimport \"@smwb/ui-styles/less/components/valueSlider/valueSlider.entry.less\";\nimport { type JSX, Show, children, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Slider, type SliderProps, type SliderValue } from \"../slider\";\n\nexport interface ValueSliderProps extends SliderProps {\n  /**\n   * Read-only value readout beside the label. `true` shows the raw value; pass a\n   * formatter for units/precision (e.g. `(v) => `${v}%``). Reflects `props.value`.\n   */\n  readout?: boolean | ((value: SliderValue | undefined) => string);\n  /** Content at the end of the header row — a reset button, a favourite star, etc. */\n  endAdornment?: JSX.Element;\n  /** Renders a built-in reset control in the header; called on click. */\n  onReset?: () => void;\n  /** Accessible label for the reset control. */\n  resetLabel?: string;\n}\n\nconst formatReadout = (\n  readout: ValueSliderProps[\"readout\"],\n  value: SliderValue | undefined,\n): string => {\n  if (typeof readout === \"function\") return readout(value);\n  if (Array.isArray(value)) return `${value[0]} – ${value[1]}`;\n  return value == null ? \"\" : String(value);\n};\n\n/**\n * `Slider` plus the value-readout + adornment header row every app rebuilds: a\n * read-only formatted value next to the label, an optional reset \"eraser\", and an\n * `endAdornment` slot (favourite star, etc.). A drop-in preset — all `Slider`\n * props pass through; the label is rendered in the header instead of inside Slider.\n */\nexport function ValueSlider(props: ValueSliderProps): JSX.Element {\n  const [local, sliderProps] = splitProps(props, [\n    \"readout\",\n    \"endAdornment\",\n    \"onReset\",\n    \"resetLabel\",\n    \"label\",\n    \"class\",\n  ]);\n\n  // Read once: markup passed as a prop is created anew on every read, and\n  // during hydration a copy the server never rendered has no DOM node.\n  const endAdornment = children(() => local.endAdornment);\n  const hasReadout = (): boolean => local.readout !== undefined && local.readout !== false;\n  const showHeader = (): boolean =>\n    local.label != null || hasReadout() || endAdornment() != null || local.onReset != null;\n\n  return (\n    <div class={cn(\"smwb-value-slider\", local.class)}>\n      <Show when={showHeader()}>\n        <div class=\"smwb-value-slider__header\">\n          <Show when={local.label != null}>\n            <span class=\"smwb-value-slider__label\">{local.label}</span>\n          </Show>\n          <span class=\"smwb-value-slider__spacer\" />\n          <Show when={hasReadout()}>\n            <span class=\"smwb-value-slider__readout\">{formatReadout(local.readout, sliderProps.value)}</span>\n          </Show>\n          {endAdornment()}\n          <Show when={local.onReset != null}>\n            <button\n              type=\"button\"\n              class=\"smwb-value-slider__reset\"\n              aria-label={local.resetLabel ?? \"Reset\"}\n              disabled={sliderProps.disabled}\n              onClick={() => local.onReset?.()}\n            >\n              <svg viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" aria-hidden=\"true\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                <path d=\"M3 12a9 9 0 1 0 3-6.7M3 4v4h4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n              </svg>\n            </button>\n          </Show>\n        </div>\n      </Show>\n      <Slider {...sliderProps} />\n    </div>\n  );\n}\n\nexport default ValueSlider;\n"],"mappings":"AAAA,OAAO;AACP,OAAO;AACP,SAAmB,MAAM,UAAU,kBAAkB;AACrD,OAAO,QAAQ;AACf,SAAS,cAAkD;AAgB3D,MAAM,gBAAgB,CACpB,SACA,UACW;AACX,MAAI,OAAO,YAAY,WAAY,QAAO,QAAQ,KAAK;AACvD,MAAI,MAAM,QAAQ,KAAK,EAAG,QAAO,GAAG,MAAM,CAAC,CAAC,WAAM,MAAM,CAAC,CAAC;AAC1D,SAAO,SAAS,OAAO,KAAK,OAAO,KAAK;AAC1C;AAQO,SAAS,YAAY,OAAsC;AAChE,QAAM,CAAC,OAAO,WAAW,IAAI,WAAW,OAAO;AAAA,IAC7C;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAID,QAAM,eAAe,SAAS,MAAM,MAAM,YAAY;AACtD,QAAM,aAAa,MAAe,MAAM,YAAY,UAAa,MAAM,YAAY;AACnF,QAAM,aAAa,MACjB,MAAM,SAAS,QAAQ,WAAW,KAAK,aAAa,KAAK,QAAQ,MAAM,WAAW;AAEpF,SACE,CAAC,IAAI,OAAO,GAAG,qBAAqB,MAAM,KAAK,GAAG;AAAA,MAChD,CAAC,KAAK,MAAM,WAAW,GAAG;AAAA,QACxB,CAAC,IAAI,MAAM,4BAA4B;AAAA,UACrC,CAAC,KAAK,MAAM,MAAM,SAAS,MAAM;AAAA,YAC/B,CAAC,KAAK,MAAM,4BAA4B,MAAM,MAAM,EAAnD,KAA0D;AAAA,UAC7D,EAFC,KAEM;AAAA,UACP,CAAC,KAAK,MAAM,4BAA4B,EAAE;AAAA,UAC1C,CAAC,KAAK,MAAM,WAAW,GAAG;AAAA,YACxB,CAAC,KAAK,MAAM,8BAA8B,cAAc,MAAM,SAAS,YAAY,KAAK,EAAE,EAAzF,KAAgG;AAAA,UACnG,EAFC,KAEM;AAAA,WACN,aAAa,EAAE;AAAA,UAChB,CAAC,KAAK,MAAM,MAAM,WAAW,MAAM;AAAA,YACjC,CAAC;AAAA,IACC,KAAK;AAAA,IACL,MAAM;AAAA,IACN,YAAY,MAAM,cAAc;AAAA,IAChC,UAAU,YAAY;AAAA,IACtB,SAAS,MAAM,MAAM,UAAU;AAAA,GAChC;AAAA,cACC,CAAC,IAAI,QAAQ,YAAY,MAAM,KAAK,OAAO,KAAK,YAAY,OAAO,KAAK,OAAO,OAAO,eAAe,aAAa,IAAI;AAAA,gBACpH,CAAC,KAAK,EAAE,gCAAgC,eAAe,QAAQ,gBAAgB,QAAQ,EAAE;AAAA,cAC3F,EAFC,IAEK;AAAA,YACR,EAVC,OAUQ;AAAA,UACX,EAZC,KAYM;AAAA,QACT,EAtBC,IAsBK;AAAA,MACR,EAxBC,KAwBM;AAAA,MACP,CAAC,WAAW,aAAa,EAAE;AAAA,IAC7B,EA3BC;AA6BL;AAEA,IAAO,sBAAQ;","names":[],"file":"valueSlider.jsx"}

package/dist/source/components/layout/appLayout/appLayout.jsx

@@ -1,3 +1,4 @@
+import "@smwb/ui-styles/less/tokens.entry.less";
 import "@smwb/ui-styles/less/components/appLayout/appLayout.entry.less";
 import { Show, children, mergeProps, splitProps } from "solid-js";
 import cn from "clsx";
@@ -45,6 +46,7 @@ function AppLayout(props) {
   const headerSlot = children(() => local.header);
   const sidebarSlot = children(() => local.sidebar);
   const footerSlot = children(() => local.footer);
+  const collapseToggleSlot = children(() => local.collapsible ? local.collapseToggle : void 0);
   const style = () => ({
     "--smui-app-sidebar-w": collapsed() ? len(local.sidebarCollapsedWidth) : len(local.sidebarWidth),
     ...typeof local.style === "object" && local.style ? local.style : {}
@@ -69,7 +71,7 @@ function AppLayout(props) {
             <Show when={local.collapsible}>
               <div class="smwb-app-layout__collapse">
                 <Show
-    when={local.collapseToggle}
+    when={collapseToggleSlot()}
     fallback={<button
       type="button"
       class="smwb-app-layout__collapse-btn"
@@ -81,7 +83,7 @@ function AppLayout(props) {
                       <Icon name={collapsed() ? "chevron_right" : "chevron_left"} size={20} />
                     </button>}
   >
-                  {local.collapseToggle}
+                  {collapseToggleSlot()}
                 </Show>
               </div>
             </Show>

package/dist/source/components/layout/appLayout/appLayout.jsx.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/layout/appLayout/appLayout.tsx"],"sourcesContent":["import \"@smwb/ui-styles/less/components/appLayout/appLayout.entry.less\";\nimport { type JSX, type ParentProps, Show, children, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Icon } from \"../../base/icon\";\nimport { createControllableState } from \"../../../primitives/createControllableState\";\nimport { createId } from \"../../../primitives/createId\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface AppLayoutProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  /** Top bar slot (e.g. <AppBar />). Spans full width. */\n  header?: JSX.Element;\n  /** Side navigation slot (e.g. <Sidebar />). */\n  sidebar?: JSX.Element;\n  /** Footer slot, below the content. */\n  footer?: JSX.Element;\n  /** Sidebar width (px or any CSS length). */\n  sidebarWidth?: number | string;\n  /** Controlled collapsed state of the sidebar rail. */\n  sidebarCollapsed?: boolean;\n  /** Initial collapsed state (uncontrolled). */\n  defaultSidebarCollapsed?: boolean;\n  /** Called whenever the collapsed state changes. */\n  onSidebarCollapsedChange?: (collapsed: boolean) => void;\n  /** Renders a built-in toggle button to collapse/expand the sidebar. */\n  collapsible?: boolean;\n  /** Custom toggle node replacing the default icon button. */\n  collapseToggle?: JSX.Element;\n  /** Accessible label for the default toggle button. */\n  collapseToggleAriaLabel?: string;\n  /** Sidebar collapsed width. */\n  sidebarCollapsedWidth?: number | string;\n  /** Keep the header pinned while content scrolls. */\n  stickyHeader?: boolean;\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst len = (v: number | string): string => (typeof v === \"number\" ? `${v}px` : v);\n\nexport function AppLayout(props: ParentProps<AppLayoutProps>): JSX.Element {\n  const merged = mergeProps(\n    {\n      sidebarWidth: 260 as number | string,\n      defaultSidebarCollapsed: false,\n      collapsible: false,\n      collapseToggleAriaLabel: \"Toggle navigation\",\n      sidebarCollapsedWidth: 72 as number | string,\n      stickyHeader: true,\n    },\n    props\n  );\n  const [local, rest] = splitProps(merged, [\n    \"header\",\n    \"sidebar\",\n    \"footer\",\n    \"sidebarWidth\",\n    \"sidebarCollapsed\",\n    \"defaultSidebarCollapsed\",\n    \"onSidebarCollapsedChange\",\n    \"collapsible\",\n    \"collapseToggle\",\n    \"collapseToggleAriaLabel\",\n    \"sidebarCollapsedWidth\",\n    \"stickyHeader\",\n    \"class\",\n    \"style\",\n    \"children\",\n    \"ref\",\n  ]);\n\n  const [collapsed, setCollapsed] = createControllableState<boolean>({\n    value: () => local.sidebarCollapsed,\n    defaultValue: local.defaultSidebarCollapsed,\n    onChange: (next) => local.onSidebarCollapsedChange?.(next),\n  });\n\n  const sidebarId = createId();\n\n  // Resolve slot props through `children()` so each is created once, in THIS\n  // component's reactive context. A pre-created element passed straight into a\n  // <Show> gets its hydration key at the caller's position but renders at the\n  // Show's, so the hydration walk can't find it (\"Unable to find DOM nodes for\n  // key\"). Resolving here keeps the key sequence aligned on server and client.\n  const headerSlot = children(() => local.header);\n  const sidebarSlot = children(() => local.sidebar);\n  const footerSlot = children(() => local.footer);\n\n  const style = (): JSX.CSSProperties => ({\n    \"--smui-app-sidebar-w\": collapsed() ? len(local.sidebarCollapsedWidth) : len(local.sidebarWidth),\n    ...(typeof local.style === \"object\" && local.style ? local.style : {}),\n  });\n\n  return (\n    <div\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      data-testid=\"app-layout\"\n      class={cn(\n        \"smwb-app-layout\",\n        { \"smwb-app-layout_sticky-header\": local.stickyHeader, \"smwb-app-layout_collapsed\": collapsed() },\n        local.class\n      )}\n      style={style()}\n    >\n      <Show when={headerSlot()}>\n        <div class=\"smwb-app-layout__header\">{headerSlot()}</div>\n      </Show>\n      <div class=\"smwb-app-layout__body\">\n        <Show when={sidebarSlot()}>\n          <aside id={sidebarId} class=\"smwb-app-layout__sidebar\">\n            <Show when={local.collapsible}>\n              <div class=\"smwb-app-layout__collapse\">\n                <Show\n                  when={local.collapseToggle}\n                  fallback={\n                    <button\n                      type=\"button\"\n                      class=\"smwb-app-layout__collapse-btn\"\n                      aria-label={local.collapseToggleAriaLabel}\n                      aria-expanded={!collapsed()}\n                      aria-controls={sidebarId}\n                      onClick={() => setCollapsed(!collapsed())}\n                    >\n                      <Icon name={collapsed() ? \"chevron_right\" : \"chevron_left\"} size={20} />\n                    </button>\n                  }\n                >\n                  {local.collapseToggle}\n                </Show>\n              </div>\n            </Show>\n            {sidebarSlot()}\n          </aside>\n        </Show>\n        <div class=\"smwb-app-layout__content\">\n          {local.children}\n          <Show when={footerSlot()}>\n            <div class=\"smwb-app-layout__footer\">{footerSlot()}</div>\n          </Show>\n        </div>\n      </div>\n    </div>\n  );\n}\n\nexport default AppLayout;\n"],"mappings":"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","names":[],"file":"appLayout.jsx"}
+{"version":3,"sources":["../../../../../src/components/layout/appLayout/appLayout.tsx"],"sourcesContent":["import \"@smwb/ui-styles/less/tokens.entry.less\";\nimport \"@smwb/ui-styles/less/components/appLayout/appLayout.entry.less\";\nimport { type JSX, type ParentProps, Show, children, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Icon } from \"../../base/icon\";\nimport { createControllableState } from \"../../../primitives/createControllableState\";\nimport { createId } from \"../../../primitives/createId\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface AppLayoutProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  /** Top bar slot (e.g. <AppBar />). Spans full width. */\n  header?: JSX.Element;\n  /** Side navigation slot (e.g. <Sidebar />). */\n  sidebar?: JSX.Element;\n  /** Footer slot, below the content. */\n  footer?: JSX.Element;\n  /** Sidebar width (px or any CSS length). */\n  sidebarWidth?: number | string;\n  /** Controlled collapsed state of the sidebar rail. */\n  sidebarCollapsed?: boolean;\n  /** Initial collapsed state (uncontrolled). */\n  defaultSidebarCollapsed?: boolean;\n  /** Called whenever the collapsed state changes. */\n  onSidebarCollapsedChange?: (collapsed: boolean) => void;\n  /** Renders a built-in toggle button to collapse/expand the sidebar. */\n  collapsible?: boolean;\n  /** Custom toggle node replacing the default icon button. */\n  collapseToggle?: JSX.Element;\n  /** Accessible label for the default toggle button. */\n  collapseToggleAriaLabel?: string;\n  /** Sidebar collapsed width. */\n  sidebarCollapsedWidth?: number | string;\n  /** Keep the header pinned while content scrolls. */\n  stickyHeader?: boolean;\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst len = (v: number | string): string => (typeof v === \"number\" ? `${v}px` : v);\n\nexport function AppLayout(props: ParentProps<AppLayoutProps>): JSX.Element {\n  const merged = mergeProps(\n    {\n      sidebarWidth: 260 as number | string,\n      defaultSidebarCollapsed: false,\n      collapsible: false,\n      collapseToggleAriaLabel: \"Toggle navigation\",\n      sidebarCollapsedWidth: 72 as number | string,\n      stickyHeader: true,\n    },\n    props\n  );\n  const [local, rest] = splitProps(merged, [\n    \"header\",\n    \"sidebar\",\n    \"footer\",\n    \"sidebarWidth\",\n    \"sidebarCollapsed\",\n    \"defaultSidebarCollapsed\",\n    \"onSidebarCollapsedChange\",\n    \"collapsible\",\n    \"collapseToggle\",\n    \"collapseToggleAriaLabel\",\n    \"sidebarCollapsedWidth\",\n    \"stickyHeader\",\n    \"class\",\n    \"style\",\n    \"children\",\n    \"ref\",\n  ]);\n\n  const [collapsed, setCollapsed] = createControllableState<boolean>({\n    value: () => local.sidebarCollapsed,\n    defaultValue: local.defaultSidebarCollapsed,\n    onChange: (next) => local.onSidebarCollapsedChange?.(next),\n  });\n\n  const sidebarId = createId();\n\n  // Resolve slot props through `children()` so each is created once, in THIS\n  // component's reactive context. A pre-created element passed straight into a\n  // <Show> gets its hydration key at the caller's position but renders at the\n  // Show's, so the hydration walk can't find it (\"Unable to find DOM nodes for\n  // key\"). Resolving here keeps the key sequence aligned on server and client.\n  const headerSlot = children(() => local.header);\n  const sidebarSlot = children(() => local.sidebar);\n  const footerSlot = children(() => local.footer);\n  // The toggle is drawn only on a collapsible layout, so it is read only then.\n  const collapseToggleSlot = children(() => (local.collapsible ? local.collapseToggle : undefined));\n\n  const style = (): JSX.CSSProperties => ({\n    \"--smui-app-sidebar-w\": collapsed() ? len(local.sidebarCollapsedWidth) : len(local.sidebarWidth),\n    ...(typeof local.style === \"object\" && local.style ? local.style : {}),\n  });\n\n  return (\n    <div\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      data-testid=\"app-layout\"\n      class={cn(\n        \"smwb-app-layout\",\n        { \"smwb-app-layout_sticky-header\": local.stickyHeader, \"smwb-app-layout_collapsed\": collapsed() },\n        local.class\n      )}\n      style={style()}\n    >\n      <Show when={headerSlot()}>\n        <div class=\"smwb-app-layout__header\">{headerSlot()}</div>\n      </Show>\n      <div class=\"smwb-app-layout__body\">\n        <Show when={sidebarSlot()}>\n          <aside id={sidebarId} class=\"smwb-app-layout__sidebar\">\n            <Show when={local.collapsible}>\n              <div class=\"smwb-app-layout__collapse\">\n                <Show\n                  when={collapseToggleSlot()}\n                  fallback={\n                    <button\n                      type=\"button\"\n                      class=\"smwb-app-layout__collapse-btn\"\n                      aria-label={local.collapseToggleAriaLabel}\n                      aria-expanded={!collapsed()}\n                      aria-controls={sidebarId}\n                      onClick={() => setCollapsed(!collapsed())}\n                    >\n                      <Icon name={collapsed() ? \"chevron_right\" : \"chevron_left\"} size={20} />\n                    </button>\n                  }\n                >\n                  {collapseToggleSlot()}\n                </Show>\n              </div>\n            </Show>\n            {sidebarSlot()}\n          </aside>\n        </Show>\n        <div class=\"smwb-app-layout__content\">\n          {local.children}\n          <Show when={footerSlot()}>\n            <div class=\"smwb-app-layout__footer\">{footerSlot()}</div>\n          </Show>\n        </div>\n      </div>\n    </div>\n  );\n}\n\nexport default AppLayout;\n"],"mappings":"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","names":[],"file":"appLayout.jsx"}