@misoto22/kioku-ui 0.0.0

package/src/Table/Table.tsx

@@ -0,0 +1,222 @@
+import * as stylex from '@stylexjs/stylex';
+import {createContext, useContext} from 'react';
+import type {
+  HTMLAttributes,
+  TableHTMLAttributes,
+  TdHTMLAttributes,
+  ThHTMLAttributes,
+} from 'react';
+
+import {semanticTokens} from '../authoring.stylex.js';
+
+export type TableDensity = 'compact' | 'default' | 'spacious';
+export type TableDividers = 'rows' | 'columns' | 'grid' | 'none';
+
+type TableSection = 'body' | 'head' | undefined;
+
+interface TableStyleContextValue {
+  readonly density: TableDensity;
+  readonly dividers: TableDividers;
+  readonly section: TableSection;
+}
+
+const defaultTableStyle: TableStyleContextValue = {
+  density: 'default',
+  dividers: 'rows',
+  section: undefined,
+};
+
+const TableStyleContext = createContext(defaultTableStyle);
+
+const styles = stylex.create({
+  table: {
+    borderCollapse: 'collapse',
+    color: semanticTokens.colorText,
+    fontFamily: semanticTokens.fontFamilyBody,
+    fontSize: semanticTokens.fontSizeMd,
+    width: '100%',
+  },
+  caption: {
+    fontFamily: semanticTokens.fontFamilyHeading,
+    fontWeight: semanticTokens.fontWeightStrong,
+    paddingBlock: semanticTokens.spacingSm,
+    textAlign: 'start',
+  },
+  bodyRow: {
+    transitionDuration: semanticTokens.durationFast,
+    transitionProperty: 'background-color',
+    transitionTimingFunction: semanticTokens.easingStandard,
+    ':hover:not(:active)': {
+      backgroundColor: semanticTokens.colorOverlayHover,
+    },
+    ':focus-within:not(:active)': {
+      backgroundColor: semanticTokens.colorOverlayHover,
+    },
+    ':active': {
+      backgroundColor: semanticTokens.colorOverlayActive,
+    },
+  },
+  headerCell: {
+    backgroundColor: semanticTokens.colorSurfaceMuted,
+    color: semanticTokens.colorTextSecondary,
+    fontWeight: semanticTokens.fontWeightStrong,
+    paddingInline: semanticTokens.spacingMd,
+    textAlign: 'start',
+  },
+  cell: {
+    paddingInline: semanticTokens.spacingMd,
+  },
+  compact: {paddingBlock: semanticTokens.spacingSm},
+  default: {paddingBlock: semanticTokens.spacingMd},
+  spacious: {paddingBlock: semanticTokens.spacingLg},
+  rowDivider: {
+    ':not(:last-child)': {
+      borderBlockEndColor: semanticTokens.borderDefault,
+      borderBlockEndStyle: semanticTokens.borderStyle,
+      borderBlockEndWidth: semanticTokens.borderWidth,
+    },
+  },
+  headerRowDivider: {
+    borderBlockEndColor: semanticTokens.borderDefault,
+    borderBlockEndStyle: semanticTokens.borderStyle,
+    borderBlockEndWidth: semanticTokens.borderWidth,
+  },
+  columnDivider: {
+    ':not(:last-child)': {
+      borderInlineEndColor: semanticTokens.borderDefault,
+      borderInlineEndStyle: semanticTokens.borderStyle,
+      borderInlineEndWidth: semanticTokens.borderWidth,
+    },
+  },
+});
+
+export interface TableProps extends Omit<
+  TableHTMLAttributes<HTMLTableElement>,
+  'className'
+> {
+  readonly density?: TableDensity;
+  readonly dividers?: TableDividers;
+}
+export type TableCaptionProps = Omit<
+  HTMLAttributes<HTMLTableCaptionElement>,
+  'className'
+>;
+export type TableHeadProps = Omit<
+  HTMLAttributes<HTMLTableSectionElement>,
+  'className'
+>;
+export type TableBodyProps = TableHeadProps;
+export type TableRowProps = Omit<
+  HTMLAttributes<HTMLTableRowElement>,
+  'className'
+>;
+export type TableHeaderCellProps = Omit<
+  ThHTMLAttributes<HTMLTableCellElement>,
+  'className'
+>;
+export type TableCellProps = Omit<
+  TdHTMLAttributes<HTMLTableCellElement>,
+  'className'
+>;
+
+function usesRowDividers(dividers: TableDividers) {
+  return dividers === 'rows' || dividers === 'grid';
+}
+
+function usesColumnDividers(dividers: TableDividers) {
+  return dividers === 'columns' || dividers === 'grid';
+}
+
+export function Table({
+  children,
+  density = 'default',
+  dividers = 'rows',
+  ...props
+}: TableProps) {
+  return (
+    <TableStyleContext.Provider value={{density, dividers, section: undefined}}>
+      <table {...props} {...stylex.props(styles.table)}>
+        {children}
+      </table>
+    </TableStyleContext.Provider>
+  );
+}
+
+export function TableCaption({children, ...props}: TableCaptionProps) {
+  return (
+    <caption {...props} {...stylex.props(styles.caption)}>
+      {children}
+    </caption>
+  );
+}
+
+export function TableHead({children, ...props}: TableHeadProps) {
+  const tableStyle = useContext(TableStyleContext);
+  return (
+    <TableStyleContext.Provider value={{...tableStyle, section: 'head'}}>
+      <thead {...props}>{children}</thead>
+    </TableStyleContext.Provider>
+  );
+}
+
+export function TableBody({children, ...props}: TableBodyProps) {
+  const tableStyle = useContext(TableStyleContext);
+  return (
+    <TableStyleContext.Provider value={{...tableStyle, section: 'body'}}>
+      <tbody {...props}>{children}</tbody>
+    </TableStyleContext.Provider>
+  );
+}
+
+export function TableRow({children, ...props}: TableRowProps) {
+  const {dividers, section} = useContext(TableStyleContext);
+  return (
+    <tr
+      {...props}
+      {...stylex.props(
+        section === 'body' && styles.bodyRow,
+        section === 'body' && usesRowDividers(dividers) && styles.rowDivider,
+      )}
+    >
+      {children}
+    </tr>
+  );
+}
+
+export function TableHeaderCell({
+  children,
+  scope = 'col',
+  ...props
+}: TableHeaderCellProps) {
+  const {density, dividers} = useContext(TableStyleContext);
+  return (
+    <th
+      {...props}
+      scope={scope}
+      {...stylex.props(
+        styles.headerCell,
+        styles[density],
+        usesRowDividers(dividers) && styles.headerRowDivider,
+        usesColumnDividers(dividers) && styles.columnDivider,
+      )}
+    >
+      {children}
+    </th>
+  );
+}
+
+export function TableCell({children, ...props}: TableCellProps) {
+  const {density, dividers} = useContext(TableStyleContext);
+  return (
+    <td
+      {...props}
+      {...stylex.props(
+        styles.cell,
+        styles[density],
+        usesColumnDividers(dividers) && styles.columnDivider,
+      )}
+    >
+      {children}
+    </td>
+  );
+}

package/src/Table/index.ts

@@ -0,0 +1,18 @@
+export {
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableHead,
+  TableHeaderCell,
+  TableRow,
+  type TableBodyProps,
+  type TableCaptionProps,
+  type TableCellProps,
+  type TableDensity,
+  type TableDividers,
+  type TableHeadProps,
+  type TableHeaderCellProps,
+  type TableProps,
+  type TableRowProps,
+} from './Table.js';

package/src/Text/Text.doc.ts

@@ -0,0 +1,17 @@
+import type {ComponentDoc} from '../docs/types.js';
+
+export const textDoc = {
+  name: 'Text',
+  description: 'Renders body copy with semantic typography tokens.',
+  props: [
+    {name: 'size', description: 'Optional semantic size: "sm", "md", or "lg".'},
+    {
+      name: 'tone',
+      description:
+        'Optional hierarchy tone: "primary", "secondary", or "muted".',
+    },
+  ],
+  inheritedProps: ['HTMLAttributes<HTMLParagraphElement> except className'],
+  example: '<Text size="md" tone="secondary">Supporting copy.</Text>',
+  storyId: 'core-text--default',
+} satisfies ComponentDoc;

package/src/Text/Text.tsx

@@ -0,0 +1,43 @@
+import * as stylex from '@stylexjs/stylex';
+import type {HTMLAttributes} from 'react';
+
+import {semanticTokens} from '../authoring.stylex.js';
+
+const styles = stylex.create({
+  base: {
+    color: semanticTokens.colorText,
+    fontFamily: semanticTokens.fontFamilyBody,
+    fontWeight: semanticTokens.fontWeightRegular,
+    lineHeight: semanticTokens.lineHeightBody,
+    margin: 0,
+  },
+  sm: {fontSize: semanticTokens.fontSizeSm},
+  md: {fontSize: semanticTokens.fontSizeMd},
+  lg: {fontSize: semanticTokens.fontSizeLg},
+  primary: {color: semanticTokens.colorText},
+  secondary: {color: semanticTokens.colorTextSecondary},
+  muted: {color: semanticTokens.colorTextMuted},
+});
+
+export type TextTone = 'primary' | 'secondary' | 'muted';
+
+export interface TextProps extends Omit<
+  HTMLAttributes<HTMLParagraphElement>,
+  'className'
+> {
+  readonly size?: 'sm' | 'md' | 'lg';
+  readonly tone?: TextTone;
+}
+
+export function Text({
+  children,
+  size = 'md',
+  tone = 'primary',
+  ...props
+}: TextProps) {
+  return (
+    <p {...props} {...stylex.props(styles.base, styles[size], styles[tone])}>
+      {children}
+    </p>
+  );
+}

package/src/Text/index.ts

@@ -0,0 +1 @@
+export {Text, type TextProps, type TextTone} from './Text.js';

package/src/TextArea/TextArea.doc.ts

@@ -0,0 +1,43 @@
+import type {ComponentDoc} from '../docs/types.js';
+
+export const textAreaDoc = {
+  name: 'TextArea',
+  description: 'Collects multiple lines of controlled or uncontrolled text.',
+  props: [
+    {
+      name: 'aria-invalid',
+      description:
+        'Exposes invalid semantics and danger styling; an explicit value overrides Field status inference.',
+    },
+    {
+      name: 'defaultValue',
+      description: 'Sets the initial value for an uncontrolled text area.',
+    },
+    {
+      name: 'disabled',
+      description: 'Disables editing and native form interaction.',
+    },
+    {
+      name: 'onValueChange',
+      description: 'Receives the current string value after input.',
+    },
+    {
+      name: 'readOnly',
+      description: 'Keeps the value legible while preventing edits.',
+    },
+    {
+      name: 'required',
+      description:
+        'Sets native required semantics; an explicit value overrides the enclosing Field necessity.',
+    },
+    {
+      name: 'value',
+      description: 'Controls the current value when onValueChange is supplied.',
+    },
+  ],
+  inheritedProps: [
+    'TextareaHTMLAttributes<HTMLTextAreaElement> except children, className, defaultValue, onChange, and value',
+  ],
+  example: '<Field label="Notes"><TextArea /></Field>',
+  storyId: 'core-text-area--default',
+} satisfies ComponentDoc;

package/src/TextArea/TextArea.tsx

@@ -0,0 +1,119 @@
+import * as stylex from '@stylexjs/stylex';
+import type {ChangeEvent, TextareaHTMLAttributes} from 'react';
+
+import {semanticTokens} from '../authoring.stylex.js';
+import {useFieldControl} from '../Field/index.js';
+
+const controlStyles = stylex.create({
+  base: {
+    backgroundColor: semanticTokens.colorSurface,
+    boxSizing: 'border-box',
+    borderColor: semanticTokens.borderDefault,
+    borderRadius: semanticTokens.radiusElement,
+    borderStyle: semanticTokens.borderStyle,
+    borderWidth: semanticTokens.borderWidth,
+    color: semanticTokens.colorText,
+    fontFamily: semanticTokens.fontFamilyBody,
+    fontSize: semanticTokens.fontSizeMd,
+    lineHeight: semanticTokens.lineHeightBody,
+    minHeight: '96px',
+    paddingBlock: semanticTokens.spacingXs,
+    paddingInline: semanticTokens.spacingSm,
+    '::placeholder': {color: semanticTokens.colorTextMuted},
+    ':disabled': {
+      backgroundColor: semanticTokens.colorDisabledSurface,
+      borderColor: semanticTokens.borderDisabled,
+      color: semanticTokens.colorDisabledText,
+    },
+    ':focus-visible': {
+      borderColor: semanticTokens.borderInteractive,
+      outlineColor: semanticTokens.colorFocus,
+      outlineOffset: semanticTokens.focusOffset,
+      outlineStyle: semanticTokens.borderStyle,
+      outlineWidth: semanticTokens.focusWidth,
+    },
+    ':active:not(:disabled):not(:read-only):not(:focus-visible)': {
+      borderColor: semanticTokens.colorAccentActive,
+    },
+    ':hover:not(:disabled):not(:read-only):not(:focus-visible)': {
+      borderColor: semanticTokens.borderInteractive,
+    },
+  },
+  readOnly: {
+    backgroundColor: semanticTokens.colorSurfaceMuted,
+    color: semanticTokens.colorText,
+  },
+  invalid: {
+    borderColor: semanticTokens.statusDangerText,
+    ':focus-visible': {borderColor: semanticTokens.statusDangerText},
+    ':active:not(:disabled):not(:read-only):not(:focus-visible)': {
+      borderColor: semanticTokens.statusDangerText,
+    },
+    ':hover:not(:disabled):not(:read-only):not(:focus-visible)': {
+      borderColor: semanticTokens.statusDangerText,
+    },
+  },
+});
+
+type SharedTextAreaProps = Omit<
+  TextareaHTMLAttributes<HTMLTextAreaElement>,
+  'children' | 'className' | 'defaultValue' | 'onChange' | 'value'
+> & {
+  readonly onValueChange?: (value: string) => void;
+};
+
+type ControlledTextAreaProps = SharedTextAreaProps & {
+  readonly defaultValue?: never;
+  readonly onValueChange: (value: string) => void;
+  readonly value: string;
+};
+
+type UncontrolledTextAreaProps = SharedTextAreaProps & {
+  readonly defaultValue?: string;
+  readonly value?: never;
+};
+
+export type TextAreaProps = ControlledTextAreaProps | UncontrolledTextAreaProps;
+
+export function TextArea({
+  'aria-describedby': ariaDescribedBy,
+  'aria-invalid': ariaInvalid,
+  disabled,
+  id,
+  onValueChange,
+  readOnly,
+  required,
+  ...props
+}: TextAreaProps) {
+  const field = useFieldControl();
+  const describedBy =
+    [field?.describedBy, ariaDescribedBy].filter(Boolean).join(' ') ||
+    undefined;
+  const resolvedInvalid = ariaInvalid ?? field?.invalid;
+  const isInvalid =
+    resolvedInvalid !== undefined &&
+    resolvedInvalid !== false &&
+    resolvedInvalid !== 'false';
+
+  function handleChange(event: ChangeEvent<HTMLTextAreaElement>) {
+    onValueChange?.(event.currentTarget.value);
+  }
+
+  return (
+    <textarea
+      {...props}
+      aria-describedby={describedBy}
+      aria-invalid={resolvedInvalid}
+      disabled={disabled}
+      id={field?.controlId ?? id}
+      onChange={handleChange}
+      readOnly={readOnly}
+      required={required ?? field?.required}
+      {...stylex.props(
+        controlStyles.base,
+        readOnly && !disabled ? controlStyles.readOnly : undefined,
+        isInvalid && !disabled ? controlStyles.invalid : undefined,
+      )}
+    />
+  );
+}

package/src/TextArea/index.ts

@@ -0,0 +1 @@
+export {TextArea, type TextAreaProps} from './TextArea.js';

package/src/TextInput/TextInput.doc.ts

@@ -0,0 +1,43 @@
+import type {ComponentDoc} from '../docs/types.js';
+
+export const textInputDoc = {
+  name: 'TextInput',
+  description: 'Collects one line of controlled or uncontrolled text.',
+  props: [
+    {
+      name: 'aria-invalid',
+      description:
+        'Exposes invalid semantics and danger styling; an explicit value overrides Field status inference.',
+    },
+    {
+      name: 'defaultValue',
+      description: 'Sets the initial value for an uncontrolled input.',
+    },
+    {
+      name: 'disabled',
+      description: 'Disables editing and native form interaction.',
+    },
+    {
+      name: 'onValueChange',
+      description: 'Receives the current string value after input.',
+    },
+    {
+      name: 'readOnly',
+      description: 'Keeps the value legible while preventing edits.',
+    },
+    {
+      name: 'required',
+      description:
+        'Sets native required semantics; an explicit value overrides the enclosing Field necessity.',
+    },
+    {
+      name: 'value',
+      description: 'Controls the current value when onValueChange is supplied.',
+    },
+  ],
+  inheritedProps: [
+    'InputHTMLAttributes<HTMLInputElement> except children, className, defaultValue, onChange, and value',
+  ],
+  example: '<Field label="Name"><TextInput defaultValue="" /></Field>',
+  storyId: 'core-text-input--default',
+} satisfies ComponentDoc;

package/src/TextInput/TextInput.tsx

@@ -0,0 +1,122 @@
+import * as stylex from '@stylexjs/stylex';
+import type {ChangeEvent, InputHTMLAttributes} from 'react';
+
+import {semanticTokens} from '../authoring.stylex.js';
+import {useFieldControl} from '../Field/index.js';
+
+const controlStyles = stylex.create({
+  base: {
+    backgroundColor: semanticTokens.colorSurface,
+    boxSizing: 'border-box',
+    borderColor: semanticTokens.borderDefault,
+    borderRadius: semanticTokens.radiusElement,
+    borderStyle: semanticTokens.borderStyle,
+    borderWidth: semanticTokens.borderWidth,
+    color: semanticTokens.colorText,
+    fontFamily: semanticTokens.fontFamilyBody,
+    fontSize: semanticTokens.fontSizeMd,
+    height: semanticTokens.sizeControlMd,
+    lineHeight: semanticTokens.lineHeightBody,
+    paddingBlock: semanticTokens.spacingXs,
+    paddingInline: semanticTokens.spacingSm,
+    '::placeholder': {color: semanticTokens.colorTextMuted},
+    ':disabled': {
+      backgroundColor: semanticTokens.colorDisabledSurface,
+      borderColor: semanticTokens.borderDisabled,
+      color: semanticTokens.colorDisabledText,
+    },
+    ':focus-visible': {
+      borderColor: semanticTokens.borderInteractive,
+      outlineColor: semanticTokens.colorFocus,
+      outlineOffset: semanticTokens.focusOffset,
+      outlineStyle: semanticTokens.borderStyle,
+      outlineWidth: semanticTokens.focusWidth,
+    },
+    ':active:not(:disabled):not(:read-only):not(:focus-visible)': {
+      borderColor: semanticTokens.colorAccentActive,
+    },
+    ':hover:not(:disabled):not(:read-only):not(:focus-visible)': {
+      borderColor: semanticTokens.borderInteractive,
+    },
+  },
+  readOnly: {
+    backgroundColor: semanticTokens.colorSurfaceMuted,
+    color: semanticTokens.colorText,
+  },
+  invalid: {
+    borderColor: semanticTokens.statusDangerText,
+    ':focus-visible': {borderColor: semanticTokens.statusDangerText},
+    ':active:not(:disabled):not(:read-only):not(:focus-visible)': {
+      borderColor: semanticTokens.statusDangerText,
+    },
+    ':hover:not(:disabled):not(:read-only):not(:focus-visible)': {
+      borderColor: semanticTokens.statusDangerText,
+    },
+  },
+});
+
+type SharedTextInputProps = Omit<
+  InputHTMLAttributes<HTMLInputElement>,
+  'children' | 'className' | 'defaultValue' | 'onChange' | 'value'
+> & {
+  readonly onValueChange?: (value: string) => void;
+};
+
+type ControlledTextInputProps = SharedTextInputProps & {
+  readonly defaultValue?: never;
+  readonly onValueChange: (value: string) => void;
+  readonly value: string;
+};
+
+type UncontrolledTextInputProps = SharedTextInputProps & {
+  readonly defaultValue?: string;
+  readonly value?: never;
+};
+
+export type TextInputProps =
+  ControlledTextInputProps | UncontrolledTextInputProps;
+
+export function TextInput({
+  'aria-describedby': ariaDescribedBy,
+  'aria-invalid': ariaInvalid,
+  disabled,
+  id,
+  onValueChange,
+  readOnly,
+  required,
+  type = 'text',
+  ...props
+}: TextInputProps) {
+  const field = useFieldControl();
+  const describedBy =
+    [field?.describedBy, ariaDescribedBy].filter(Boolean).join(' ') ||
+    undefined;
+  const resolvedInvalid = ariaInvalid ?? field?.invalid;
+  const isInvalid =
+    resolvedInvalid !== undefined &&
+    resolvedInvalid !== false &&
+    resolvedInvalid !== 'false';
+
+  function handleChange(event: ChangeEvent<HTMLInputElement>) {
+    onValueChange?.(event.currentTarget.value);
+  }
+
+  return (
+    <input
+      {...props}
+      aria-describedby={describedBy}
+      aria-invalid={resolvedInvalid}
+      disabled={disabled}
+      id={field?.controlId ?? id}
+      onChange={handleChange}
+      readOnly={readOnly}
+      required={required ?? field?.required}
+      {...stylex.props(
+        controlStyles.base,
+        readOnly && !disabled ? controlStyles.readOnly : undefined,
+        isInvalid && !disabled ? controlStyles.invalid : undefined,
+      )}
+      type={type}
+    />
+  );
+}

package/src/TextInput/index.ts

@@ -0,0 +1 @@
+export {TextInput, type TextInputProps} from './TextInput.js';

package/src/Toggle/Toggle.doc.ts

@@ -0,0 +1,30 @@
+import type {ComponentDoc} from '../docs/types.js';
+
+export const toggleDoc = {
+  name: 'Toggle',
+  description: 'Switches a controlled or uncontrolled boolean setting.',
+  props: [
+    {
+      name: 'defaultPressed',
+      description: 'Sets the initial state for an uncontrolled switch.',
+    },
+    {
+      name: 'disabled',
+      description: 'Disables native switch activation and focus behavior.',
+    },
+    {
+      name: 'onPressedChange',
+      description: 'Receives the next boolean state after activation.',
+    },
+    {
+      name: 'pressed',
+      description:
+        'Controls the current switch state without internal updates.',
+    },
+  ],
+  inheritedProps: [
+    'ButtonHTMLAttributes<HTMLButtonElement> except aria-checked, aria-pressed, className, onChange, and role',
+  ],
+  example: '<Toggle aria-label="Enable option" defaultPressed />',
+  storyId: 'core-toggle--default',
+} satisfies ComponentDoc;