silver-ui 0.1.0

package/dist/chunk-6BSEY2DF.js

@@ -0,0 +1,258 @@
+import { VisuallyHidden } from './chunk-V5W7NZN5.js';
+import { mergeRefs } from './chunk-SGLIDI6R.js';
+import { Icon } from './chunk-4W7L63LH.js';
+import { cx } from './chunk-PPNETWIP.js';
+import { css } from './chunk-UHQRL4OA.js';
+import { createContext, useRef, useCallback, useMemo, use } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var SegmentedControlContext = createContext(null);
+SegmentedControlContext.displayName = "SegmentedControlContext";
+function useSegmentedControlContext() {
+  const context = use(SegmentedControlContext);
+  if (context == null) {
+    throw new Error(
+      "SegmentedControlItem must be used within a SegmentedControl."
+    );
+  }
+  return context;
+}
+var styles = {
+  root: css({
+    display: "inline-flex",
+    alignItems: "center",
+    gap: "0.5",
+    p: "0.5",
+    bg: "surface.gray",
+    borderRadius: "md"
+  }),
+  fill: css({
+    display: "flex",
+    w: "full"
+  }),
+  disabled: css({
+    opacity: 0.5,
+    pointerEvents: "none"
+  })
+};
+function SegmentedControl({
+  children,
+  className,
+  "data-testid": dataTestId,
+  isDisabled = false,
+  label,
+  layout = "hug",
+  onChange,
+  ref,
+  size = "md",
+  style,
+  value
+}) {
+  const containerRef = useRef(null);
+  const handleChange = useCallback(
+    (nextValue) => {
+      onChange(nextValue);
+    },
+    [onChange]
+  );
+  const contextValue = useMemo(
+    () => ({ isDisabled, layout, onChange: handleChange, size, value }),
+    [handleChange, isDisabled, layout, size, value]
+  );
+  const handleKeyDown = useCallback(
+    (event) => {
+      if (isDisabled) {
+        return;
+      }
+      const container = containerRef.current;
+      if (container == null) {
+        return;
+      }
+      const items = Array.from(
+        container.querySelectorAll(
+          '[role="radio"]:not([aria-disabled="true"])'
+        )
+      );
+      if (items.length === 0) {
+        return;
+      }
+      const currentIndex = items.findIndex(
+        (item) => item === document.activeElement
+      );
+      let nextIndex;
+      switch (event.key) {
+        case "ArrowRight":
+        case "ArrowDown":
+          nextIndex = currentIndex === -1 ? 0 : (currentIndex + 1) % items.length;
+          break;
+        case "ArrowLeft":
+        case "ArrowUp":
+          nextIndex = currentIndex === -1 ? items.length - 1 : (currentIndex - 1 + items.length) % items.length;
+          break;
+        case "Home":
+          nextIndex = 0;
+          break;
+        case "End":
+          nextIndex = items.length - 1;
+          break;
+        default:
+          return;
+      }
+      event.preventDefault();
+      const nextItem = items[nextIndex];
+      nextItem.focus();
+      const nextValue = nextItem.dataset.value;
+      if (nextValue != null) {
+        handleChange(nextValue);
+      }
+    },
+    [handleChange, isDisabled]
+  );
+  return /* @__PURE__ */ jsx(SegmentedControlContext, { value: contextValue, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      "aria-disabled": isDisabled || void 0,
+      "aria-label": label,
+      "aria-orientation": "horizontal",
+      className: cx(
+        styles.root,
+        layout === "fill" ? styles.fill : void 0,
+        isDisabled ? styles.disabled : void 0,
+        className
+      ),
+      "data-testid": dataTestId,
+      onKeyDown: handleKeyDown,
+      ref: mergeRefs(ref, containerRef),
+      role: "radiogroup",
+      style,
+      tabIndex: -1,
+      children
+    }
+  ) });
+}
+SegmentedControl.displayName = "SegmentedControl";
+var styles2 = {
+  item: css({
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: "1",
+    borderWidth: 0,
+    borderStyle: "none",
+    bg: "transparent",
+    color: "fg.muted",
+    cursor: "pointer",
+    fontFamily: "body",
+    fontWeight: "medium",
+    lineHeight: "normal",
+    transitionProperty: "background-color, color, box-shadow",
+    transitionDuration: "fast",
+    transitionTimingFunction: "default",
+    _hover: {
+      bg: "bg.subtle"
+    },
+    _focusVisible: {
+      outlineWidth: "focus",
+      outlineStyle: "solid",
+      outlineColor: "primary",
+      outlineOffset: "focusOffset"
+    }
+  }),
+  selected: css({
+    bg: "bg",
+    color: "fg",
+    fontWeight: "semibold",
+    boxShadow: "sm",
+    _hover: {
+      bg: "bg"
+    }
+  }),
+  disabled: css({
+    color: "fg.disabled",
+    cursor: "default",
+    _hover: {
+      bg: "transparent"
+    }
+  }),
+  fill: css({
+    flex: 1
+  }),
+  icon: css({
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    flexShrink: 0
+  }),
+  size: {
+    sm: css({
+      h: "7",
+      px: "2",
+      borderRadius: "sm",
+      fontSize: "sm"
+    }),
+    md: css({
+      h: "9",
+      px: "3",
+      borderRadius: "sm",
+      fontSize: "sm"
+    }),
+    lg: css({
+      h: "11",
+      px: "3",
+      borderRadius: "md",
+      fontSize: "md"
+    })
+  }
+};
+function SegmentedControlItem({
+  className,
+  "data-testid": dataTestId,
+  icon,
+  isDisabled = false,
+  isLabelHidden = false,
+  label,
+  ref,
+  style,
+  value
+}) {
+  const context = useSegmentedControlContext();
+  const isSelected = context.value === value;
+  const isItemDisabled = context.isDisabled || isDisabled;
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      "aria-checked": isSelected,
+      "aria-disabled": isItemDisabled || void 0,
+      "aria-label": isLabelHidden ? label : void 0,
+      className: cx(
+        styles2.item,
+        styles2.size[context.size],
+        context.layout === "fill" ? styles2.fill : void 0,
+        isSelected ? styles2.selected : void 0,
+        isItemDisabled ? styles2.disabled : void 0,
+        className
+      ),
+      "data-testid": dataTestId,
+      "data-value": value,
+      onClick: () => {
+        if (!isItemDisabled && !isSelected) {
+          context.onChange(value);
+        }
+      },
+      ref,
+      role: "radio",
+      style,
+      tabIndex: isSelected ? 0 : -1,
+      type: "button",
+      children: [
+        icon != null ? /* @__PURE__ */ jsx("span", { className: styles2.icon, children: /* @__PURE__ */ jsx(Icon, { icon, size: context.size }) }) : null,
+        isLabelHidden ? /* @__PURE__ */ jsx(VisuallyHidden, { children: label }) : label
+      ]
+    }
+  );
+}
+SegmentedControlItem.displayName = "SegmentedControlItem";
+
+export { SegmentedControl, SegmentedControlItem };
+//# sourceMappingURL=chunk-6BSEY2DF.js.map
+//# sourceMappingURL=chunk-6BSEY2DF.js.map

package/dist/chunk-6BSEY2DF.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/SegmentedControl/SegmentedControlContext.ts","../src/components/SegmentedControl/SegmentedControl.tsx","../src/components/SegmentedControl/SegmentedControlItem.tsx"],"names":["styles","jsx"],"mappings":"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","file":"chunk-6BSEY2DF.js","sourcesContent":["import {createContext, use} from 'react';\n\nexport type SegmentedControlLayout = 'fill' | 'hug';\nexport type SegmentedControlSize = 'lg' | 'md' | 'sm';\n\nexport interface SegmentedControlContextValue {\n  isDisabled: boolean;\n  layout: SegmentedControlLayout;\n  onChange: (value: string) => void;\n  size: SegmentedControlSize;\n  value: string;\n}\n\nexport const SegmentedControlContext =\n  createContext<SegmentedControlContextValue | null>(null);\n\nSegmentedControlContext.displayName = 'SegmentedControlContext';\n\nexport function useSegmentedControlContext(): SegmentedControlContextValue {\n  const context = use(SegmentedControlContext);\n  if (context == null) {\n    throw new Error(\n      'SegmentedControlItem must be used within a SegmentedControl.',\n    );\n  }\n  return context;\n}\n","import {\n  useCallback,\n  useMemo,\n  useRef,\n  type CSSProperties,\n  type KeyboardEvent,\n  type ReactNode,\n  type Ref,\n} from 'react';\nimport {css} from 'styled-system/css';\nimport {cx} from '../../internal/cx';\nimport {mergeRefs} from '../../internal/mergeRefs';\nimport {\n  SegmentedControlContext,\n  type SegmentedControlLayout,\n  type SegmentedControlSize,\n} from './SegmentedControlContext';\n\nexport interface SegmentedControlProps<TValue extends string = string> {\n  /**\n   * SegmentedControlItem children.\n   */\n  children: ReactNode;\n  /**\n   * Additional CSS class names applied to the root element.\n   */\n  className?: string;\n  /**\n   * Test ID applied to the root element.\n   */\n  'data-testid'?: string;\n  /**\n   * Whether the entire control is disabled.\n   * @default false\n   */\n  isDisabled?: boolean;\n  /**\n   * Accessible label for the radio group.\n   */\n  label: string;\n  /**\n   * Segment layout mode.\n   * @default 'hug'\n   */\n  layout?: SegmentedControlLayout;\n  /**\n   * Called when a segment is selected.\n   */\n  onChange: (value: TValue) => void;\n  /**\n   * Ref forwarded to the root element.\n   */\n  ref?: Ref<HTMLDivElement>;\n  /**\n   * Control size.\n   * @default 'md'\n   */\n  size?: SegmentedControlSize;\n  /**\n   * Inline styles applied to the root element.\n   */\n  style?: CSSProperties;\n  /**\n   * Current selected value.\n   */\n  value: TValue;\n}\n\nconst styles = {\n  root: css({\n    display: 'inline-flex',\n    alignItems: 'center',\n    gap: '0.5',\n    p: '0.5',\n    bg: 'surface.gray',\n    borderRadius: 'md',\n  }),\n  fill: css({\n    display: 'flex',\n    w: 'full',\n  }),\n  disabled: css({\n    opacity: 0.5,\n    pointerEvents: 'none',\n  }),\n} as const;\n\n/**\n * Segmented toggle control that allows selecting one option from a set.\n */\nexport function SegmentedControl<TValue extends string = string>({\n  children,\n  className,\n  'data-testid': dataTestId,\n  isDisabled = false,\n  label,\n  layout = 'hug',\n  onChange,\n  ref,\n  size = 'md',\n  style,\n  value,\n}: SegmentedControlProps<TValue>): React.JSX.Element {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const handleChange = useCallback(\n    (nextValue: string) => {\n      onChange(nextValue as TValue);\n    },\n    [onChange],\n  );\n  const contextValue = useMemo(\n    () => ({isDisabled, layout, onChange: handleChange, size, value}),\n    [handleChange, isDisabled, layout, size, value],\n  );\n\n  const handleKeyDown = useCallback(\n    (event: KeyboardEvent<HTMLDivElement>) => {\n      if (isDisabled) {\n        return;\n      }\n\n      const container = containerRef.current;\n      if (container == null) {\n        return;\n      }\n\n      const items = Array.from(\n        container.querySelectorAll<HTMLButtonElement>(\n          '[role=\"radio\"]:not([aria-disabled=\"true\"])',\n        ),\n      );\n\n      if (items.length === 0) {\n        return;\n      }\n\n      const currentIndex = items.findIndex(\n        item => item === document.activeElement,\n      );\n      let nextIndex: number;\n\n      switch (event.key) {\n        case 'ArrowRight':\n        case 'ArrowDown':\n          nextIndex =\n            currentIndex === -1 ? 0 : (currentIndex + 1) % items.length;\n          break;\n        case 'ArrowLeft':\n        case 'ArrowUp':\n          nextIndex =\n            currentIndex === -1\n              ? items.length - 1\n              : (currentIndex - 1 + items.length) % items.length;\n          break;\n        case 'Home':\n          nextIndex = 0;\n          break;\n        case 'End':\n          nextIndex = items.length - 1;\n          break;\n        default:\n          return;\n      }\n\n      event.preventDefault();\n      const nextItem = items[nextIndex];\n      nextItem.focus();\n      const nextValue = nextItem.dataset.value;\n      if (nextValue != null) {\n        handleChange(nextValue);\n      }\n    },\n    [handleChange, isDisabled],\n  );\n\n  return (\n    <SegmentedControlContext value={contextValue}>\n      <div\n        aria-disabled={isDisabled || undefined}\n        aria-label={label}\n        aria-orientation=\"horizontal\"\n        className={cx(\n          styles.root,\n          layout === 'fill' ? styles.fill : undefined,\n          isDisabled ? styles.disabled : undefined,\n          className,\n        )}\n        data-testid={dataTestId}\n        onKeyDown={handleKeyDown}\n        ref={mergeRefs(ref, containerRef)}\n        role=\"radiogroup\"\n        style={style}\n        tabIndex={-1}>\n        {children}\n      </div>\n    </SegmentedControlContext>\n  );\n}\n\nSegmentedControl.displayName = 'SegmentedControl';\n","import type {CSSProperties, Ref} from 'react';\nimport {css} from 'styled-system/css';\nimport {VisuallyHidden} from '../../internal/VisuallyHidden';\nimport {cx} from '../../internal/cx';\nimport {Icon, type IconComponent} from '../Icon';\nimport {useSegmentedControlContext} from './SegmentedControlContext';\n\nexport interface SegmentedControlItemProps<TValue extends string = string> {\n  /**\n   * Additional CSS class names applied to the segment.\n   */\n  className?: string;\n  /**\n   * Test ID applied to the segment.\n   */\n  'data-testid'?: string;\n  /**\n   * Icon element displayed before the label.\n   */\n  icon?: IconComponent;\n  /**\n   * Whether this segment is disabled.\n   * @default false\n   */\n  isDisabled?: boolean;\n  /**\n   * Whether to visually hide the label.\n   * @default false\n   */\n  isLabelHidden?: boolean;\n  /**\n   * Accessible and visible label for the segment.\n   */\n  label: string;\n  /**\n   * Ref forwarded to the segment button.\n   */\n  ref?: Ref<HTMLButtonElement>;\n  /**\n   * Inline styles applied to the segment.\n   */\n  style?: CSSProperties;\n  /**\n   * Unique value represented by this segment.\n   */\n  value: TValue;\n}\n\nconst styles = {\n  item: css({\n    display: 'inline-flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    gap: '1',\n    borderWidth: 0,\n    borderStyle: 'none',\n    bg: 'transparent',\n    color: 'fg.muted',\n    cursor: 'pointer',\n    fontFamily: 'body',\n    fontWeight: 'medium',\n    lineHeight: 'normal',\n    transitionProperty: 'background-color, color, box-shadow',\n    transitionDuration: 'fast',\n    transitionTimingFunction: 'default',\n    _hover: {\n      bg: 'bg.subtle',\n    },\n    _focusVisible: {\n      outlineWidth: 'focus',\n      outlineStyle: 'solid',\n      outlineColor: 'primary',\n      outlineOffset: 'focusOffset',\n    },\n  }),\n  selected: css({\n    bg: 'bg',\n    color: 'fg',\n    fontWeight: 'semibold',\n    boxShadow: 'sm',\n    _hover: {\n      bg: 'bg',\n    },\n  }),\n  disabled: css({\n    color: 'fg.disabled',\n    cursor: 'default',\n    _hover: {\n      bg: 'transparent',\n    },\n  }),\n  fill: css({\n    flex: 1,\n  }),\n  icon: css({\n    display: 'inline-flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    flexShrink: 0,\n  }),\n  size: {\n    sm: css({\n      h: '7',\n      px: '2',\n      borderRadius: 'sm',\n      fontSize: 'sm',\n    }),\n    md: css({\n      h: '9',\n      px: '3',\n      borderRadius: 'sm',\n      fontSize: 'sm',\n    }),\n    lg: css({\n      h: '11',\n      px: '3',\n      borderRadius: 'md',\n      fontSize: 'md',\n    }),\n  },\n} as const;\n\n/**\n * Individual segment within a `SegmentedControl`.\n */\nexport function SegmentedControlItem<TValue extends string = string>({\n  className,\n  'data-testid': dataTestId,\n  icon,\n  isDisabled = false,\n  isLabelHidden = false,\n  label,\n  ref,\n  style,\n  value,\n}: SegmentedControlItemProps<TValue>): React.JSX.Element {\n  const context = useSegmentedControlContext();\n  const isSelected = context.value === value;\n  const isItemDisabled = context.isDisabled || isDisabled;\n\n  return (\n    <button\n      aria-checked={isSelected}\n      aria-disabled={isItemDisabled || undefined}\n      aria-label={isLabelHidden ? label : undefined}\n      className={cx(\n        styles.item,\n        styles.size[context.size],\n        context.layout === 'fill' ? styles.fill : undefined,\n        isSelected ? styles.selected : undefined,\n        isItemDisabled ? styles.disabled : undefined,\n        className,\n      )}\n      data-testid={dataTestId}\n      data-value={value}\n      onClick={() => {\n        if (!isItemDisabled && !isSelected) {\n          context.onChange(value);\n        }\n      }}\n      ref={ref}\n      role=\"radio\"\n      style={style}\n      tabIndex={isSelected ? 0 : -1}\n      type=\"button\">\n      {icon != null ? (\n        <span className={styles.icon}>\n          <Icon icon={icon} size={context.size} />\n        </span>\n      ) : null}\n      {isLabelHidden ? <VisuallyHidden>{label}</VisuallyHidden> : label}\n    </button>\n  );\n}\n\nSegmentedControlItem.displayName = 'SegmentedControlItem';\n"]}