@basic-ui/core 0.0.60 → 0.0.62

package/src/Toggle/Toggle.tsx

@@ -0,0 +1,95 @@
+import type { ElementType, ReactNode, ButtonHTMLAttributes } from 'react';
+import { forwardRef, useId, useState, Fragment } from 'react';
+
+import { useToggleGroupContext } from '../ToggleGroup/ToggleGroupContext';
+
+export interface ToggleProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  as?: ElementType<any>;
+  innerAs?: ElementType<any>;
+  children?: ReactNode;
+  /**
+   * Whether the toggle button is currently pressed.
+   * This is the controlled counterpart of `defaultPressed`.
+   */
+  pressed?: boolean | undefined;
+  /**
+   * Whether the toggle button is currently pressed.
+   * This is the uncontrolled counterpart of `pressed`.
+   * @default false
+   */
+  defaultPressed?: boolean | undefined;
+  /**
+   * Callback fired when the pressed state is changed.
+   */
+  onPressedChange?: ((pressed: boolean) => void) | undefined;
+  /**
+   * A unique string that identifies the toggle when used
+   * inside a toggle group.
+   */
+  value?: string | undefined;
+}
+
+export const Toggle = forwardRef<HTMLButtonElement, ToggleProps>(
+  function Toggle(props, forwardedRef) {
+    const {
+      as: Comp = 'button',
+      innerAs,
+      defaultPressed = false,
+      disabled = false,
+      onPressedChange: onPressedChangeProp,
+      pressed: pressedProp,
+      value: valueProp,
+      onClick: onClickProp,
+      ...otherProps
+    } = props;
+
+    const useIdValue = useId();
+    const value = valueProp || useIdValue;
+    const groupContext = useToggleGroupContext();
+    const groupValue = groupContext?.value ?? [];
+    const isControlled = pressedProp !== undefined;
+    const [pressedState, setPressedState] = useState(defaultPressed);
+
+    const isDisabled = disabled || groupContext?.disabled || false;
+
+    // When in a group, the pressed state is derived from the group's value array
+    // When not in a group, use the passed pressed prop if controlled, otherwise internal state
+    const pressed = groupContext
+      ? groupValue.includes(value)
+      : isControlled
+        ? pressedProp
+        : pressedState;
+
+    const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+      onClickProp?.(e);
+
+      if (isDisabled) return;
+
+      const nextPressed = !pressed;
+
+      onPressedChangeProp?.(nextPressed);
+
+      if (groupContext) {
+        groupContext.onValueChange?.(value, nextPressed);
+      } else if (!isControlled) {
+        setPressedState(nextPressed);
+      }
+    };
+
+    return (
+      <Comp
+        {...(Comp !== Fragment
+          ? { as: innerAs, ref: forwardedRef }
+          : { ref: forwardedRef })}
+        type="button"
+        disabled={isDisabled}
+        aria-pressed={pressed}
+        onClick={handleClick}
+        data-toggle=""
+        data-pressed={pressed ? '' : undefined}
+        data-disabled={isDisabled ? '' : undefined}
+        {...otherProps}
+      />
+    );
+  }
+);

package/src/Toggle/index.ts

@@ -0,0 +1 @@
+export * from './Toggle';

package/src/Toggle/styles.css

@@ -0,0 +1,39 @@
+.toggle-demo {
+  padding: 20px;
+}
+
+.toggle-demo button {
+  padding: 8px 16px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  background-color: #f5f5f5;
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 500;
+  transition: all 150ms ease-in-out;
+}
+
+.toggle-demo button:hover:not(:disabled) {
+  border-color: #999;
+  background-color: #efefef;
+}
+
+.toggle-demo button[data-pressed] {
+  background-color: #0066cc;
+  color: white;
+  border-color: #0052a3;
+}
+
+.toggle-demo button[data-pressed]:hover {
+  background-color: #0052a3;
+}
+
+.toggle-demo button[data-disabled] {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.toggle-demo button:focus-visible {
+  outline: 2px solid #0066cc;
+  outline-offset: 2px;
+}

package/src/ToggleGroup/ToggleGroup.story.tsx

@@ -0,0 +1,86 @@
+import * as React from 'react';
+import { ToggleGroup } from './ToggleGroup';
+import { Toggle } from '../Toggle/Toggle';
+import './styles.css';
+
+export default {
+  title: 'components/ToggleGroup',
+};
+
+export const SingleSelection = () => (
+  <div className="toggle-group-demo">
+    <ToggleGroup defaultValue={['left']}>
+      <Toggle value="left">Left</Toggle>
+      <Toggle value="center">Center</Toggle>
+      <Toggle value="right">Right</Toggle>
+    </ToggleGroup>
+  </div>
+);
+
+export const MultipleSelection = () => (
+  <div className="toggle-group-demo">
+    <ToggleGroup multiple defaultValue={['bold']}>
+      <Toggle value="bold">Bold</Toggle>
+      <Toggle value="italic">Italic</Toggle>
+      <Toggle value="underline">Underline</Toggle>
+    </ToggleGroup>
+  </div>
+);
+
+export const Controlled = () => {
+  const [value, setValue] = React.useState<string[]>(['sm']);
+
+  return (
+    <div className="toggle-group-demo">
+      <ToggleGroup value={value} onValueChange={setValue}>
+        <Toggle value="xs">XS</Toggle>
+        <Toggle value="sm">SM</Toggle>
+        <Toggle value="md">MD</Toggle>
+        <Toggle value="lg">LG</Toggle>
+      </ToggleGroup>
+      <p>Selected: {value.join(', ') || 'None'}</p>
+    </div>
+  );
+};
+
+export const Disabled = () => (
+  <div className="toggle-group-demo">
+    <ToggleGroup disabled defaultValue={['center']}>
+      <Toggle value="left">Left</Toggle>
+      <Toggle value="center">Center</Toggle>
+      <Toggle value="right">Right</Toggle>
+    </ToggleGroup>
+  </div>
+);
+
+export const Vertical = () => (
+  <div className="toggle-group-demo">
+    <ToggleGroup orientation="vertical" defaultValue={['all']}>
+      <Toggle value="all">All</Toggle>
+      <Toggle value="unread">Unread</Toggle>
+      <Toggle value="flagged">Flagged</Toggle>
+    </ToggleGroup>
+  </div>
+);
+
+export const RequiredSelection = () => {
+  const [value, setValue] = React.useState<string[]>(['list']);
+
+  const handleValueChange = (newValue: string[]) => {
+    // Prevent deselecting all items - always keep at least one selected
+    if (newValue.length > 0) {
+      setValue(newValue);
+    }
+  };
+
+  return (
+    <div className="toggle-group-demo">
+      <ToggleGroup value={value} onValueChange={handleValueChange}>
+        <Toggle value="list">List</Toggle>
+        <Toggle value="grid">Grid</Toggle>
+        <Toggle value="compact">Compact</Toggle>
+      </ToggleGroup>
+      <p>Selected view: {value[0]} (at least one must be selected)</p>
+    </div>
+  );
+};

package/src/ToggleGroup/ToggleGroup.tsx

@@ -0,0 +1,185 @@
+import type { ElementType, ReactNode, HTMLAttributes, KeyboardEvent } from 'react';
+import { forwardRef, useCallback, Fragment, useRef, useState } from 'react';
+
+import { useScope } from '../hooks';
+import { getCircularIndex } from '../utils';
+import { ToggleGroupContext } from './ToggleGroupContext';
+
+export interface ToggleGroupProps extends HTMLAttributes<HTMLDivElement> {
+  as?: ElementType<any>;
+  innerAs?: ElementType<any>;
+  children?: ReactNode;
+  /**
+   * The pressed state of the toggle group represented by an array of
+   * the values of all pressed toggle buttons.
+   * This is the controlled counterpart of `defaultValue`.
+   */
+  value?: readonly string[] | undefined;
+  /**
+   * The pressed state of the toggle group represented by an array of
+   * the values of all pressed toggle buttons.
+   * This is the uncontrolled counterpart of `value`.
+   */
+  defaultValue?: readonly string[] | undefined;
+  /**
+   * Callback fired when the pressed states of the toggle group changes.
+   */
+  onValueChange?: ((value: string[]) => void) | undefined;
+  /**
+   * Whether the toggle group should ignore user interaction.
+   * @default false
+   */
+  disabled?: boolean | undefined;
+  /**
+   * @default 'horizontal'
+   */
+  orientation?: 'horizontal' | 'vertical' | undefined;
+  /**
+   * When `false` only one item in the group can be pressed. If any item in
+   * the group becomes pressed, the others will become unpressed.
+   * When `true` multiple items can be pressed.
+   * @default false
+   */
+  multiple?: boolean | undefined;
+}
+
+export const ToggleGroup = forwardRef<HTMLDivElement, ToggleGroupProps>(
+  function ToggleGroup(props, forwardedRef) {
+    const {
+      as: Comp = 'div',
+      innerAs,
+      defaultValue = [],
+      disabled = false,
+      onValueChange: onValueChangeProp,
+      orientation = 'horizontal',
+      multiple = false,
+      value: valueProp,
+      children,
+      onKeyDown: onKeyDownProp,
+      ...otherProps
+    } = props;
+
+    const groupRef = useRef<HTMLDivElement>(null);
+    const scope = useScope<HTMLButtonElement, HTMLDivElement>(groupRef);
+
+    const [valueState, setValueState] = useState<string[]>(() => defaultValue as string[]);
+    const groupValue = (valueProp !== undefined ? valueProp : valueState) as string[];
+
+    const getAllButtons = useCallback(
+      () =>
+        scope.current.queryAllNodes(
+          (type, props) => type === 'button' && props['data-toggle'] !== undefined
+        ),
+      [scope]
+    );
+
+    const handleValueChange = useCallback(
+      (value: string, pressed: boolean) => {
+        let newGroupValue: string[];
+
+        if (multiple) {
+          newGroupValue = groupValue.slice();
+          if (pressed) {
+            if (!newGroupValue.includes(value)) {
+              newGroupValue.push(value);
+            }
+          } else {
+            const index = newGroupValue.indexOf(value);
+            if (index > -1) {
+              newGroupValue.splice(index, 1);
+            }
+          }
+        } else {
+          newGroupValue = pressed ? [value] : [];
+        }
+
+        setValueState(newGroupValue);
+        onValueChangeProp?.(newGroupValue);
+      },
+      [groupValue, multiple, setValueState, onValueChangeProp]
+    );
+
+    const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {
+      onKeyDownProp?.(e as any);
+
+      if (disabled) return;
+
+      const isHorizontal = orientation === 'horizontal';
+      const isArrowKey = (key: string) =>
+        (isHorizontal && ['ArrowLeft', 'ArrowRight'].includes(key)) ||
+        (!isHorizontal && ['ArrowUp', 'ArrowDown'].includes(key));
+
+      if (
+        !isArrowKey(e.key) &&
+        e.key !== 'Home' &&
+        e.key !== 'End'
+      ) {
+        return;
+      }
+
+      e.preventDefault();
+
+      const allButtons = getAllButtons();
+      if (allButtons.length === 0) return;
+
+      const currentButton = e.target as HTMLElement;
+      const currentIndex = allButtons.findIndex((btn) => btn === currentButton);
+
+      let nextIndex = currentIndex >= 0 ? currentIndex : 0;
+
+      switch (e.key) {
+        case 'ArrowLeft':
+        case 'ArrowUp':
+          nextIndex = getCircularIndex(nextIndex - 1, allButtons.length) ?? nextIndex;
+          break;
+        case 'ArrowRight':
+        case 'ArrowDown':
+          nextIndex = getCircularIndex(nextIndex + 1, allButtons.length) ?? nextIndex;
+          break;
+        case 'Home':
+          nextIndex = 0;
+          break;
+        case 'End':
+          nextIndex = allButtons.length - 1;
+          break;
+      }
+
+      allButtons[nextIndex].focus();
+    };
+
+    const contextValue = {
+      value: groupValue,
+      onValueChange: handleValueChange,
+      disabled,
+      multiple,
+      orientation,
+    };
+
+    const handleRef = (el: HTMLDivElement | null) => {
+      groupRef.current = el;
+      if (forwardedRef) {
+        if (typeof forwardedRef === 'function') {
+          forwardedRef(el);
+        } else {
+          forwardedRef.current = el;
+        }
+      }
+    };
+
+    return (
+      <ToggleGroupContext.Provider value={contextValue}>
+        <Comp
+          {...(Comp !== Fragment ? { as: innerAs, ref: handleRef } : { ref: handleRef })}
+          role="group"
+          data-disabled={disabled ? '' : undefined}
+          data-orientation={orientation}
+          data-multiple={multiple ? '' : undefined}
+          onKeyDown={handleKeyDown}
+          {...otherProps}
+        >
+          {children}
+        </Comp>
+      </ToggleGroupContext.Provider>
+    );
+  }
+);

package/src/ToggleGroup/ToggleGroupContext.ts

@@ -0,0 +1,17 @@
+import { createContext, useContext } from 'react';
+
+export interface ToggleGroupContextProps {
+  value: string[];
+  onValueChange?: (value: string, pressed: boolean) => void;
+  disabled?: boolean;
+  multiple?: boolean;
+  orientation?: 'horizontal' | 'vertical';
+}
+
+export const ToggleGroupContext = createContext<ToggleGroupContextProps | undefined>(
+  undefined
+);
+
+export function useToggleGroupContext() {
+  return useContext(ToggleGroupContext);
+}

package/src/ToggleGroup/index.ts

@@ -0,0 +1,2 @@
+export * from './ToggleGroup';
+export * from './ToggleGroupContext';

package/src/ToggleGroup/styles.css

@@ -0,0 +1,66 @@
+.toggle-group-demo {
+  padding: 20px;
+}
+
+.toggle-group-demo [role="group"] {
+  display: inline-flex;
+  gap: 0;
+  border-radius: 4px;
+  border: 1px solid #ccc;
+  overflow: hidden;
+}
+
+.toggle-group-demo [data-orientation="vertical"] {
+  flex-direction: column;
+}
+
+.toggle-group-demo [role="group"] button {
+  padding: 8px 16px;
+  border: none;
+  border-right: 1px solid #ccc;
+  background-color: #f5f5f5;
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 500;
+  transition: all 150ms ease-in-out;
+}
+
+.toggle-group-demo [data-orientation="vertical"] button {
+  border-right: none;
+  border-bottom: 1px solid #ccc;
+}
+
+.toggle-group-demo [role="group"] button:last-child {
+  border-right: none;
+  border-bottom: none;
+}
+
+.toggle-group-demo [role="group"] button:hover:not(:disabled) {
+  background-color: #efefef;
+}
+
+.toggle-group-demo [role="group"] button[data-pressed] {
+  background-color: #0066cc;
+  color: white;
+}
+
+.toggle-group-demo [role="group"] button[data-pressed]:hover {
+  background-color: #0052a3;
+}
+
+.toggle-group-demo [role="group"][data-disabled] button {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.toggle-group-demo [role="group"] button:focus-visible {
+  outline: 2px solid #0066cc;
+  outline-offset: -2px;
+  z-index: 1;
+}
+
+.toggle-group-demo p {
+  margin-top: 16px;
+  font-size: 14px;
+  color: #666;
+}