tinywidgets 1.2.4 → 1.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tinywidgets",
-  "version": "1.2.4",
+  "version": "1.3.1",
   "author": "jamesgpearce",
   "repository": "github:tinyplex/tinywidgets",
   "license": "MIT",

package/src/components/Button/index.tsx

@@ -11,7 +11,7 @@ import {
 } from './index.css.ts';
 
 /**
- * The `Button` component displays an button, with a number of common variants.
+ * The `Button` component displays a button, with a number of common variants.
  *
  * @param props The props for the component.
  * @returns The Button component.

package/src/components/Select/index.css.ts

@@ -0,0 +1,14 @@
+import {style} from '@vanilla-extract/css';
+import {colors} from '../../css/colors.css';
+import {dimensions} from '../../css/dimensions.css';
+
+export const select = style({
+  borderRadius: dimensions.radius,
+  padding: '0.5rem',
+  outlineOffset: '2px',
+  color: 'inherit',
+  transition: 'background-color 0.1s,border-color 0.1s',
+  boxShadow: colors.shadow,
+  border: colors.border,
+  backgroundColor: colors.background,
+});

package/src/components/Select/index.tsx

@@ -0,0 +1,77 @@
+import {useCallback, useState} from 'react';
+import {classNames} from '../../common/functions.tsx';
+import {select} from './index.css.ts';
+
+/**
+ * The `Select` component displays a managed select input with an existing
+ * value.
+ *
+ * @param props The props for the component.
+ * @returns The Select component.
+ * @example
+ * ```tsx
+ * <Select
+ *   initialOption="CA"
+ *   options={{ AL: 'Albania', BE: 'Belgium', CA: 'Canada' }}
+ *   onChange={(option) => console.log(option)}
+ * />
+ * ```
+ * @icon Lucide.Combine
+ */
+export const Select = ({
+  options,
+  initialOption,
+  onChange,
+  alt,
+  className,
+  ref,
+}: {
+  /**
+   * The options and labels to show in the select widget.
+   */
+  readonly options: {[option: string]: string};
+  /**
+   * An optional initial option.
+   */
+  readonly initialOption?: string;
+  /**
+   * A handler called when the option is changed.
+   */
+  readonly onChange?: (option: string) => void;
+  /**
+   * Alternative text shown when the user hovers over the input.
+   */
+  readonly alt?: string;
+  /**
+   * An extra CSS class name for the component.
+   */
+  readonly className?: string;
+  ref?: React.RefObject<HTMLSelectElement | null>;
+}) => {
+  const [option, setOption] = useState(initialOption ?? '');
+  const handleChange = useCallback(
+    ({target: {value}}: React.ChangeEvent<HTMLSelectElement>) => {
+      setOption(value);
+      onChange?.(value);
+    },
+    [onChange],
+  );
+  return (
+    <select
+      className={classNames(select, className)}
+      onChange={handleChange}
+      title={alt}
+      ref={ref}
+    >
+      {Object.entries(options).map(([eachOption, label]) => (
+        <option
+          key={eachOption}
+          value={eachOption}
+          {...(eachOption === option ? {selected: true} : {})}
+        >
+          {label}
+        </option>
+      ))}
+    </select>
+  );
+};

package/src/components/TextInput/index.css.ts

@@ -0,0 +1,36 @@
+import {style} from '@vanilla-extract/css';
+import {colors} from '../../css/colors.css';
+import {dimensions} from '../../css/dimensions.css';
+
+export const wrapper = style({
+  flexShrink: 0,
+  alignSelf: 'center',
+  position: 'relative',
+});
+
+export const wrapperWithIcon = style({});
+
+export const input = style({
+  borderRadius: dimensions.radius,
+  padding: '0.5rem',
+  outlineOffset: '2px',
+  color: 'inherit',
+  transition: 'background-color 0.1s,border-color 0.1s',
+  boxShadow: colors.shadow + ' inset',
+  border: colors.border,
+  backgroundColor: colors.background,
+});
+
+export const inputWithIcon = style({
+  textIndent: `calc(${dimensions.icon} * 1.3)`,
+});
+
+export const icon = style({
+  position: 'absolute',
+  left: `calc(${dimensions.icon} * .5)`,
+  top: `calc(${dimensions.icon} * .65)`,
+  color: colors.foregroundDim,
+  backgroundColor: colors.background,
+  borderRight: `calc(${dimensions.icon} * .25) solid ${colors.background}`,
+  boxSizing: 'content-box',
+});

package/src/components/TextInput/index.tsx

@@ -0,0 +1,91 @@
+import {useCallback, useState, type ComponentType} from 'react';
+import {classNames} from '../../common/functions.tsx';
+import {iconSize} from '../../css/dimensions.css.ts';
+import {
+  icon,
+  input,
+  inputWithIcon,
+  wrapper,
+  wrapperWithIcon,
+} from './index.css.ts';
+
+/**
+ * The `TextInput` component displays a managed text input with an existing
+ * value.
+ *
+ * @param props The props for the component.
+ * @returns The TextInput component.
+ * @example
+ * ```tsx
+ * <TextInput
+ *   initialText="42"
+ *   onChange={(value) => console.log(value)}
+ * />
+ * ```
+ * This example shows the TextInput component.
+ * @example
+ * ```tsx
+ * <TextInput icon={Lucide.Search} placeholder="Search..." />
+ * ```
+ * This example shows the TextInput component with an inset icon and
+ * placeholder.
+ * @icon Lucide.TextCursorInput
+ */
+export const TextInput = ({
+  initialText,
+  placeholder,
+  onChange,
+  icon: Icon,
+  alt,
+  className,
+  ref,
+}: {
+  /**
+   * An optional initial text value.
+   */
+  readonly initialText?: string;
+  /**
+   * An optional placeholder string.
+   */
+  readonly placeholder?: string;
+  /**
+   * A handler called when the text is changed.
+   */
+  readonly onChange?: (text: string) => void;
+  /**
+   * An optional component which renders an icon on the left of the input, and
+   * which must accept a className prop.
+   */
+  readonly icon?: ComponentType<{className?: string}>;
+  /**
+   * Alternative text shown when the user hovers over the input.
+   */
+  readonly alt?: string;
+  /**
+   * An extra CSS class name for the component.
+   */
+  readonly className?: string;
+  ref?: React.RefObject<HTMLInputElement | null>;
+}) => {
+  const [text, setText] = useState(initialText ?? '');
+  const handleChange = useCallback(
+    ({target: {value}}: React.ChangeEvent<HTMLInputElement>) => {
+      setText(value);
+      onChange?.(value);
+    },
+    [onChange],
+  );
+  return (
+    <div className={classNames(wrapper, Icon && wrapperWithIcon)}>
+      {Icon ? <Icon className={classNames(iconSize, icon)} /> : null}
+      <input
+        value={text}
+        placeholder={placeholder}
+        className={classNames(input, Icon && inputWithIcon, className)}
+        onChange={handleChange}
+        title={alt}
+        ref={ref}
+      />
+    </div>
+  );
+};

package/src/css/colors.css.ts

@@ -20,9 +20,11 @@ import {
  * - `background2`
  * - `backgroundHaze`
  * - `backgroundHover`
+ * - `backgroundExtreme`
  * - `foreground`
  * - `foregroundBright`
  * - `foregroundDim`
+ * - `foregroundExtreme`
  * - `border`
  * - `shadow`
  *
@@ -72,9 +74,11 @@ export const colors = createThemeContract({
   background2: null,
   backgroundHaze: null,
   backgroundHover: null,
+  backgroundExtreme: null,
   foreground: null,
   foregroundBright: null,
   foregroundDim: null,
+  foregroundExtreme: null,
   border: null,
   shadow: null,
 });
@@ -97,9 +101,11 @@ export const colorsLight = createTheme(colors, {
   background2: `oklch(95% .01 ${colors.backgroundHue})`,
   backgroundHaze: `oklch(99% .01 ${colors.backgroundHue} / .5)`,
   backgroundHover: `oklch(90% .01 ${colors.backgroundHue})`,
+  backgroundExtreme: '#fff',
   foreground: `oklch(50% .01 ${colors.accentHue})`,
   foregroundBright: `oklch(10% .01 ${colors.accentHue})`,
   foregroundDim: `oklch(60% .01 ${colors.accentHue})`,
+  foregroundExtreme: '#000',
   border: `1px solid oklch(90% .01 ${colors.backgroundHue})`,
   shadow: '0 1px 4px 0 hsl(0 0 20 / .1)',
 });
@@ -113,9 +119,11 @@ export const colorsDark = createTheme(colors, {
   background2: `oklch(15% .01 ${colors.backgroundHue})`,
   backgroundHaze: `oklch(21% 0% ${colors.backgroundHue} / .5)`,
   backgroundHover: `oklch(25% .01 ${colors.backgroundHue})`,
+  backgroundExtreme: '#000',
   foreground: `oklch(85% .01 ${colors.accentHue})`,
   foregroundBright: `oklch(95% .01 ${colors.accentHue})`,
   foregroundDim: `oklch(60% .01 ${colors.accentHue})`,
+  foregroundExtreme: '#fff',
   border: `1px solid oklch(30% .01 ${colors.backgroundHue})`,
   shadow: '0 1px 4px 0 #000',
 });

package/src/index.ts

@@ -8,8 +8,10 @@ export {Hr} from './components/Hr/index.tsx';
 export {Image} from './components/Image/index.tsx';
 export {Metric} from './components/Metric/index.tsx';
 export {Row} from './components/Row/index.tsx';
+export {Select} from './components/Select/index.tsx';
 export {Summary} from './components/Summary/index.tsx';
 export {Tag} from './components/Tag/index.tsx';
+export {TextInput} from './components/TextInput/index.tsx';
 
 export {classNames} from './common/functions.tsx';
 export {useDark} from './stores/LocalStore.tsx';