@tcn/ui 0.0.1

package/src/inputs/radio/radio_row.tsx

@@ -0,0 +1,45 @@
+import { useSignalValue } from '@tcn/state';
+import React, { useState } from 'react';
+import { HField } from '../../form/field/h_field/h_field.js';
+import { FieldPresenter } from '../../form/field_presenters/field_presenter.js';
+
+export interface RadioRowProps {
+  presenter?: FieldPresenter<string>;
+  children: React.ReactNode;
+  id: string;
+}
+
+export function RadioRow({ presenter, id, ...props }: RadioRowProps) {
+  const [finalPresenter] = useState(() => {
+    if (presenter == null) {
+      return new FieldPresenter<string>('Label', '');
+    }
+    return presenter;
+  });
+
+  const { label, value, description, error } = useSignalValue(
+    finalPresenter.stateBroadcast
+  );
+
+  const children = React.Children.map(props.children, child => {
+    if (!React.isValidElement(child)) {
+      return child;
+    }
+
+    if (child.type !== 'Radio') {
+      return child;
+    }
+
+    return React.cloneElement<any>(child, {
+      ...child.props,
+      checked: value === child.props,
+      onChange: finalPresenter.setValue,
+    });
+  });
+
+  return (
+    <HField id={id} label={label} description={description} errorMessage={error}>
+      {children}
+    </HField>
+  );
+}

package/src/inputs/select/select.module.css

@@ -0,0 +1,66 @@
+.select {
+  position: relative;
+  box-sizing: border-box;
+  padding-inline-end: calc(
+    24px *
+    var(--scalar, 1)
+  ); /* Add padding to prevent text overlap with chevron */
+}
+
+.select[data-hierarchy="secondary"] {
+  border: 1px solid #aaa;
+  color: var(--font-color);
+}
+
+.select:focus {
+  outline: 3px solid color-mix(in srgb, var(--accent-color) 40%, transparent);
+}
+
+.select:dir(ltr)::after {
+  content: "";
+  position: absolute;
+  right: calc(4px * var(--scalar, 1));
+  top: 50%;
+  transform: translateY(-50%);
+  width: calc(18px * var(--scalar, 1));
+  height: calc(18px * var(--scalar, 1));
+  background-color: #808080;
+  mask-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 24 24' fill='black' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5.46967 8.46967C5.76256 8.17678 6.23744 8.17678 6.53033 8.46967L12 13.9393L17.4697 8.46967C17.7626 8.17678 18.2374 8.17678 18.5303 8.46967C18.8232 8.76256 18.8232 9.23744 18.5303 9.53033L12.5303 15.5303C12.2374 15.8232 11.7626 15.8232 11.4697 15.5303L5.46967 9.53033C5.17678 9.23744 5.17678 8.76256 5.46967 8.46967Z'%3E%3C/path%3E%3C/svg%3E");
+  mask-repeat: no-repeat;
+  mask-position: center;
+  mask-size: contain;
+  pointer-events: none; /* Ensure the chevron doesn't interfere with button clicks */
+}
+
+.select:dir(rtl)::after {
+  content: "";
+  position: absolute;
+  left: calc(4px * var(--scalar, 1));
+  top: 50%;
+  transform: translateY(-50%);
+  width: calc(18px * var(--scalar, 1));
+  height: calc(18px * var(--scalar, 1));
+  background-color: #808080;
+  mask-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 24 24' fill='black' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5.46967 8.46967C5.76256 8.17678 6.23744 8.17678 6.53033 8.46967L12 13.9393L17.4697 8.46967C17.7626 8.17678 18.2374 8.17678 18.5303 8.46967C18.8232 8.76256 18.8232 9.23744 18.5303 9.53033L12.5303 15.5303C12.2374 15.8232 11.7626 15.8232 11.4697 15.5303L5.46967 9.53033C5.17678 9.23744 5.17678 8.76256 5.46967 8.46967Z'%3E%3C/path%3E%3C/svg%3E");
+  mask-repeat: no-repeat;
+  mask-position: center;
+  mask-size: contain;
+  pointer-events: none; /* Ensure the chevron doesn't interfere with button clicks */
+}
+
+.select:hover::after {
+  background-color: var(--accent-color);
+}
+
+.select[data-hierarchy="secondary"]:hover {
+  color: var(--accent-color);
+  border-color: var(--accent-color);
+  background-color: transparent;
+}
+
+.selectedLabel {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  text-align: start;
+}

package/src/inputs/select/select.stories.tsx

@@ -0,0 +1,173 @@
+import React, { useState } from 'react';
+import { Option } from '../options/option.js';
+import { Select, SelectProps } from './select.js';
+import { HStack } from '../../stacks/h_stack.js';
+import { VStack } from '../../stacks/v_stack.js';
+import { Headline } from '../../typography/headline/headline.js';
+import { BodyText } from '../../typography/body_text/body_text.js';
+
+export default {
+  title: 'Select',
+};
+
+export function Default(_: Omit<SelectProps, 'children'>) {
+  const [value, setValue] = useState<string>('');
+
+  return (
+    <Select value={value} onChange={setValue}>
+      <Option value="apple" label="Apple" keywords={['fruit', 'red', 'sweet']}>
+        Apple
+      </Option>
+      <Option value="banana" label="Banana" keywords={['fruit', 'yellow', 'tropical']}>
+        Banana
+      </Option>
+      <Option value="cherry" label="Cherry" keywords={['fruit', 'red', 'small']}>
+        Cherry
+      </Option>
+      <Option value="date" label="Date" keywords={['fruit', 'brown', 'sweet']}>
+        Date
+      </Option>
+      <Option
+        value="elderberry"
+        label="Elderberry"
+        keywords={['fruit', 'purple', 'berry']}
+      >
+        Elderberry
+      </Option>
+      <Option value="fig" label="Fig" keywords={['fruit', 'purple', 'sweet']}>
+        Fig
+      </Option>
+      <Option
+        value="grape"
+        label="Grape"
+        keywords={['fruit', 'purple', 'green', 'small']}
+      >
+        Grape
+      </Option>
+      <Option
+        value="honeydew"
+        label="Honeydew"
+        keywords={['fruit', 'melon', 'green', 'sweet']}
+      >
+        Honeydew
+      </Option>
+      <Option
+        value="long-option"
+        label="Really Really Long Options"
+        keywords={['long', 'option', 'really', 'really', 'long', 'options']}
+      >
+        Really Really Long Options
+      </Option>
+    </Select>
+  );
+}
+
+export function CustomWidth(_: Omit<SelectProps, 'children'>) {
+  const [value, setValue] = useState<string>('');
+
+  return (
+    <Select value={value} onChange={setValue} width="100px">
+      <Option value="apple" label="Apple" keywords={['fruit', 'red', 'sweet']}>
+        Apple
+      </Option>
+      <Option value="banana" label="Banana" keywords={['fruit', 'yellow', 'tropical']}>
+        Banana
+      </Option>
+      <Option value="cherry" label="Cherry" keywords={['fruit', 'red', 'small']}>
+        Cherry
+      </Option>
+      <Option value="date" label="Date" keywords={['fruit', 'brown', 'sweet']}>
+        Date
+      </Option>
+      <Option
+        value="elderberry"
+        label="Elderberry"
+        keywords={['fruit', 'purple', 'berry']}
+      >
+        Elderberry
+      </Option>
+      <Option value="fig" label="Fig" keywords={['fruit', 'purple', 'sweet']}>
+        Fig
+      </Option>
+      <Option
+        value="grape"
+        label="Grape"
+        keywords={['fruit', 'purple', 'green', 'small']}
+      >
+        Grape
+      </Option>
+      <Option
+        value="honeydew"
+        label="Honeydew"
+        keywords={['fruit', 'melon', 'green', 'sweet']}
+      >
+        Honeydew
+      </Option>
+      <Option
+        value="long-option"
+        label="Really Really Long Options"
+        keywords={['long', 'option', 'really', 'really', 'long', 'options']}
+      >
+        Really Really Long Options
+      </Option>
+    </Select>
+  );
+}
+
+export function CustomOptions() {
+  const [value, setValue] = useState<string>('');
+
+  return (
+    <Select value={value} onChange={setValue} width="100px">
+      <Option value="new-york" label="New York" keywords={['city', 'usa', 'big apple']}>
+        <HStack height="auto" gap="8px" padding="4px">
+          <span>🗽</span>
+          <VStack hAlign="start">
+            <Headline>New York</Headline>
+            <BodyText>The Big Apple</BodyText>
+          </VStack>
+        </HStack>
+      </Option>
+      <Option value="london" label="London" keywords={['city', 'uk', 'england']}>
+        <HStack height="auto" gap="8px" padding="4px">
+          <span>🇬🇧</span>
+          <VStack hAlign="start">
+            <Headline>London</Headline>
+            <BodyText>Capital of England</BodyText>
+          </VStack>
+        </HStack>
+      </Option>
+      <Option value="tokyo" label="Tokyo" keywords={['city', 'japan', 'asia']}>
+        <HStack height="auto" gap="8px" padding="4px">
+          <span>🗾</span>
+          <VStack hAlign="start">
+            <Headline>Tokyo</Headline>
+            <BodyText>Capital of Japan</BodyText>
+          </VStack>
+        </HStack>
+      </Option>
+      <Option value="england" label="England" keywords={['country', 'uk', 'england']}>
+        <HStack height="auto" gap="8px" padding="4px">
+          <span>🇬🇧</span>
+          <VStack hAlign="start">
+            <Headline>England</Headline>
+            <BodyText>Country</BodyText>
+          </VStack>
+        </HStack>
+      </Option>
+      <Option
+        value="united-states"
+        label="United States"
+        keywords={['country', 'usa', 'united states', 'america']}
+      >
+        <HStack height="auto" gap="8px" padding="4px">
+          <span>🇺🇸</span>
+          <VStack hAlign="start">
+            <Headline>United States</Headline>
+            <BodyText>Country</BodyText>
+          </VStack>
+        </HStack>
+      </Option>
+    </Select>
+  );
+}

package/src/inputs/select/select.tsx

@@ -0,0 +1,160 @@
+import { useForkRef } from '../../utils/index.js';
+import classNames from 'classnames';
+import React, { useRef, useState } from 'react';
+import { SuggestionList } from '../suggestions/suggestion_list.js';
+import { OptionProps } from '../options/option.js';
+import { Button, type ButtonProps } from '../../actions/index.js';
+import styles from './select.module.css';
+
+function findOptionFromValue(options: React.ReactElement<OptionProps>[], value: string) {
+  return options.find(option => option.props.value === value);
+}
+
+export interface SelectProps
+  extends Omit<ButtonProps, 'children' | 'onChange' | 'value'> {
+  children?: React.ReactElement<OptionProps>[] | React.ReactElement<OptionProps>;
+  onChange?: (value: string) => void;
+  value?: string | null;
+  placeholder?: string;
+  noOptionMatchedMessage?: React.ReactNode;
+  trimCustomInput?: boolean;
+}
+
+export const Select = React.forwardRef(function Select(
+  {
+    children = [],
+    onKeyDown,
+    onKeyUp,
+    value,
+    placeholder = '-- Select --',
+    noOptionMatchedMessage,
+    trimCustomInput = false,
+    className,
+    onMouseDown,
+    onMouseUp,
+    onChange,
+    ...props
+  }: SelectProps,
+  ref: React.Ref<HTMLButtonElement>
+) {
+  const safeChildren = React.Children.toArray(
+    children
+  ) as React.ReactElement<OptionProps>[];
+  const keyPressedDownRef = useRef('');
+  const isAlreadyFocusedRef = useRef(false);
+  const isClosingRef = useRef(false);
+  const [anchorElement, setAnchorElement] = useState<HTMLButtonElement | null>(null);
+  const internalButtonRef = useRef<HTMLButtonElement | null>(null);
+  const [isSuggestionsOpen, setIsSuggestionsOpen] = useState(false);
+  const forkedRef = useForkRef(ref, internalButtonRef);
+  const selectedOption = findOptionFromValue(safeChildren, value || '');
+  const selectedLabel =
+    selectedOption == null ? placeholder || '' : selectedOption.props.label;
+
+  function openSuggestions() {
+    setIsSuggestionsOpen(true);
+  }
+
+  function closeSuggestions() {
+    setIsSuggestionsOpen(false);
+  }
+
+  function handleClose() {
+    const button = internalButtonRef.current;
+
+    if (button != null) {
+      requestAnimationFrame(() => {
+        button.focus();
+      });
+    }
+
+    closeSuggestions();
+  }
+
+  function handleSelection(value: string, _: string | undefined, isSuggestion: boolean) {
+    const button = internalButtonRef.current;
+
+    if (button != null) {
+      requestAnimationFrame(() => {
+        if (isSuggestion) {
+          onChange && onChange(value);
+        }
+        button.focus();
+      });
+    }
+
+    closeSuggestions();
+  }
+
+  function handleKeyDown(event: React.KeyboardEvent<HTMLButtonElement>) {
+    const key = event.key;
+    keyPressedDownRef.current = key;
+    onKeyDown && onKeyDown(event);
+  }
+
+  function handleKeyUp(event: React.KeyboardEvent<HTMLButtonElement>) {
+    setAnchorElement(event.currentTarget);
+    const isSameKey = (keyPressedDownRef.current = event.key);
+
+    keyPressedDownRef.current = '';
+    const key = event.key;
+
+    if (isSameKey && (key === 'Enter' || key === ' ')) {
+      if (isSuggestionsOpen) {
+        closeSuggestions();
+      } else {
+        openSuggestions();
+      }
+    }
+
+    onKeyUp && onKeyUp(event);
+  }
+
+  function handlMouseDown(event: React.MouseEvent<HTMLButtonElement>) {
+    setAnchorElement(event.currentTarget);
+    isAlreadyFocusedRef.current = document.activeElement === event.currentTarget;
+    onMouseDown && onMouseDown(event);
+  }
+
+  function handleMouseUp(event: React.MouseEvent<HTMLButtonElement>) {
+    if (isClosingRef.current) {
+      isClosingRef.current = false;
+      closeSuggestions();
+    }
+
+    openSuggestions();
+    onMouseUp && onMouseUp(event);
+  }
+
+  return (
+    <>
+      <Button
+        ref={forkedRef}
+        className={classNames(className, 'select', styles.select)}
+        width="100%"
+        {...props}
+        hAlign="start"
+        value={selectedLabel}
+        onKeyDown={handleKeyDown}
+        onKeyUp={handleKeyUp}
+        onMouseDown={handlMouseDown}
+        onMouseUp={handleMouseUp}
+      >
+        <span className={styles.selectedLabel}>{selectedLabel}</span>
+      </Button>
+      {isSuggestionsOpen && (
+        <SuggestionList
+          anchorElement={anchorElement}
+          onClose={handleClose}
+          value={''}
+          scrollToValue={value || ''}
+          trimCustomInput={trimCustomInput}
+          onOptionSelect={handleSelection}
+          noSuggestionMessage={noOptionMatchedMessage}
+        >
+          {children}
+        </SuggestionList>
+      )}
+    </>
+  );
+});

package/src/inputs/slider/slider.module.css

@@ -0,0 +1,150 @@
+:root {
+  --disabled: #d3d3d3;
+}
+
+/*Range Reset*/
+.slider {
+  width: 100%;
+  -webkit-appearance: none;
+  appearance: none;
+  background: transparent;
+  cursor: pointer;
+  height: calc(26px * var(--scalar, 1));
+}
+
+.slider:focus {
+  outline: none;
+}
+
+/***** Chrome, Safari, Opera and Edge Chromium styles **********************************************/
+
+/*** slider track **************************************************************/
+.slider::-webkit-slider-runnable-track {
+  border-radius: 4px;
+  height: calc(1px * var(--scalar, 1));
+}
+
+.slider:dir(ltr)::-webkit-slider-runnable-track {
+  background: linear-gradient(
+    to right,
+    var(--accent-color) 0%,
+    var(--accent-color) var(--progress),
+    var(--surface-line, #aaa) var(--progress),
+    var(--surface-line, #aaa) 100%
+  );
+}
+
+.slider:dir(rtl)::-webkit-slider-runnable-track {
+  background: linear-gradient(
+    to left,
+    var(--accent-color) 0%,
+    var(--accent-color) var(--progress),
+    var(--surface-line, #aaa) var(--progress),
+    var(--surface-line, #aaa) 100%
+  );
+}
+
+.slider:dir(rtl)[data-is-disabled="true"]::-webkit-slider-runnable-track,
+.slider:dir(ltr)[data-is-disabled="true"]::-webkit-slider-runnable-track {
+  background: var(--disabled);
+  cursor: not-allowed;
+}
+
+/*** slider thumb ***********************************************************/
+.slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  /* Override default look */
+  appearance: none;
+  cursor: ew-resize;
+  position: relative;
+  top: calc(-6px * var(--scalar, 1));
+  width: calc(14px * var(--scalar, 1));
+  height: calc(14px * var(--scalar, 1));
+  border-radius: 2px;
+  background-color: var(--surface, #fff);
+  border: 1px solid var(--accent-color);
+  box-sizing: border-box;
+}
+
+.slider[data-is-disabled="true"]::-webkit-slider-thumb {
+  border-color: rgba(227, 227, 227, 1);
+  cursor: not-allowed;
+}
+
+.slider:focus-visible::-webkit-slider-thumb {
+  box-shadow: 0px 0px 4px var(--accent-color);
+  outline: 3px solid color-mix(in srgb, var(--accent-color) 40%, transparent);
+  outline-offset: 1px;
+}
+
+.slider[data-is-disabled="false"]:active::-webkit-slider-thumb {
+  background: color-mix(in srgb, var(--accent-color) 10%, white);
+}
+
+/***** Firefox styles ************************************************************************/
+
+/*** slider track **************************************************************/
+.slider::-moz-range-track {
+  border-radius: 4px;
+  height: calc(1px * var(--scalar, 1));
+}
+
+.slider:dir(ltr)::-moz-range-track {
+  background: linear-gradient(
+    to right,
+    var(--accent-color) 0%,
+    var(--accent-color) var(--progress),
+    var(--surface-line, #aaa) var(--progress),
+    var(--surface-line, #aaa) 100%
+  );
+}
+
+.slider:dir(rtl)::-moz-range-track {
+  background: linear-gradient(
+    to left,
+    var(--accent-color) 0%,
+    var(--accent-color) var(--progress),
+    var(--surface-line, #aaa) var(--progress),
+    var(--surface-line, #aaa) 100%
+  );
+}
+
+.slider[data-is-disabled="true"]::-moz-range-track {
+  background: var(--disabled);
+  cursor: not-allowed;
+}
+
+/*** slider thumb ***********************************************************/
+.slider::-moz-range-thumb {
+  cursor: ew-resize;
+  border: none;
+  /*Removes extra border that FF applies*/
+  border-radius: 0;
+  /*Removes default border-radius that FF applies*/
+
+  /*custom styles*/
+  top: calc(-6px * var(--scalar, 1));
+  width: calc(14px * var(--scalar, 1));
+  height: calc(14px * var(--scalar, 1));
+  border-radius: 2px;
+  background-color: var(--surface, #fff);
+  border: 1px solid var(--accent-color);
+  box-sizing: border-box;
+}
+
+.slider[data-is-disabled="true"]::-moz-range-thumb {
+  border-color: rgba(227, 227, 227, 1);
+  cursor: not-allowed;
+}
+
+.slider:focus::-moz-range-thumb {
+  box-shadow: 0px 0px 4px var(--accent-color);
+  outline: 1px dashed var(--accent-color);
+  outline-offset: 1px;
+}
+
+.slider[data-is-disabled="false"]:active::-moz-range-thumb {
+  background: color-mix(in srgb, var(--accent-color) 10%, white);
+}
+
+/****************************************************************************/

package/src/inputs/slider/slider.stories.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { Slider as Component, SliderProps } from './slider.js';
+import styles from '../__storybook__/stories.module.css';
+
+function BaseWithValue(props: SliderProps) {
+  const [value, setValue] = React.useState(props.value || '0');
+
+  return (
+    <>
+      <td>
+        <Component onChange={setValue} {...props} value={value} />
+      </td>
+      <td>{value}</td>
+    </>
+  );
+}
+
+export default {
+  title: 'Slider',
+};
+
+export function Slider() {
+  return (
+    <table className={styles.story}>
+      <thead>
+        <tr>
+          <th>Name</th>
+          <th>Component</th>
+          <th>Value</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>Base</td>
+          <BaseWithValue />
+        </tr>
+        <tr>
+          <td>Starting Value</td>
+          <BaseWithValue value="50" />
+        </tr>
+        <tr>
+          <td>Min/Max (-5,10)</td>
+          <BaseWithValue value="5" min={-5} max={10} />
+        </tr>
+        <tr>
+          <td>Disabled</td>
+          <BaseWithValue disabled value="80" />
+        </tr>
+      </tbody>
+    </table>
+  );
+}