@musecat/uikit 0.1.1

package/packages/Components/Radio/Radio.types.ts

@@ -0,0 +1,20 @@
+import type { TextProps } from "@/packages/Components/Text/Text.types";
+import type { UIKitSizeValue } from "@/packages/Frameworks/_shared/sizing";
+import type { RadiusProps } from "@/packages/Frameworks/Theme/Radius.types";
+import type {
+  BorderProps,
+  ThemeSystemProps,
+} from "@/packages/Frameworks/Theme/Theme.types";
+
+export interface RadioProps
+  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "color">,
+    BorderProps,
+    RadiusProps,
+    ThemeSystemProps {
+  title?: string;
+  titleType?: TextProps["type"];
+  titleSpaceBetween?: boolean;
+  reversed?: boolean;
+  readOnly?: boolean;
+  size?: UIKitSizeValue;
+}

package/packages/Components/Select/Select.keyboard.tsx

@@ -0,0 +1,76 @@
+"use client";
+
+import { useCallback, useRef } from "react";
+import type { Option } from "@/packages/Components/Select/Select.types";
+
+const TYPE_AHEAD_RESET_MS = 500;
+
+export function useTypeAhead(
+  options: Option[],
+  activeIndex: number,
+  setActiveIndex: (index: number) => void,
+  isOptionSelectionDisabled: (option: Option) => boolean,
+) {
+  const bufferRef = useRef("");
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const clearBuffer = useCallback(() => {
+    bufferRef.current = "";
+    if (timerRef.current !== null) {
+      clearTimeout(timerRef.current);
+      timerRef.current = null;
+    }
+  }, []);
+
+  const handleTypeAhead = useCallback(
+    (char: string) => {
+      bufferRef.current += char.toLowerCase();
+      if (timerRef.current !== null) {
+        clearTimeout(timerRef.current);
+      }
+      timerRef.current = setTimeout(clearBuffer, TYPE_AHEAD_RESET_MS);
+      const idx = options.findIndex(
+        (o, i) =>
+          i !== activeIndex &&
+          !isOptionSelectionDisabled(o) &&
+          o.label.toLowerCase().startsWith(bufferRef.current),
+      );
+      if (idx >= 0) {
+        setActiveIndex(idx);
+      }
+    },
+    [
+      options,
+      activeIndex,
+      isOptionSelectionDisabled,
+      setActiveIndex,
+      clearBuffer,
+    ],
+  );
+
+  return { handleTypeAhead, clearTypeAhead: clearBuffer };
+}
+
+export function handleHomeKey<T>(
+  options: T[],
+  isOptionDisabled: (option: T) => boolean,
+): number {
+  for (let i = 0; i < options.length; i++) {
+    if (!isOptionDisabled(options[i])) return i;
+  }
+  return -1;
+}
+
+export function handleEndKey<T>(
+  options: T[],
+  isOptionDisabled: (option: T) => boolean,
+): number {
+  for (let i = options.length - 1; i >= 0; i--) {
+    if (!isOptionDisabled(options[i])) return i;
+  }
+  return -1;
+}
+
+export function isPrintableCharacter(key: string): boolean {
+  return key.length === 1 && key !== " ";
+}

package/packages/Components/Select/Select.trigger.tsx

@@ -0,0 +1,88 @@
+"use client";
+import type { KeyboardEvent, ReactElement } from "react";
+import Pressable from "@/packages/Frameworks/Pressable/Pressable";
+import Text from "@/packages/Components/Text/Text";
+import View from "@/packages/Frameworks/View/View";
+
+interface SelectTriggerProps {
+  selectId: string;
+  title?: string;
+  open: boolean;
+  listId: string;
+  isMultiple: boolean;
+  isInteractionDisabled: boolean;
+  selectedPills: ReactElement | null;
+  selectedOptionsLength: number;
+  selectedLabel: string;
+  placeholderText: string;
+  handleTriggerClick: () => void;
+  handleTriggerPointerUp: (e: any) => void;
+  handleControlKeyDown: (e: KeyboardEvent, isControl: boolean) => void;
+}
+
+export default function SelectTrigger({
+  selectId,
+  title,
+  open,
+  listId,
+  isMultiple,
+  isInteractionDisabled,
+  selectedPills,
+  selectedOptionsLength,
+  selectedLabel,
+  placeholderText,
+  handleTriggerClick,
+  handleTriggerPointerUp,
+  handleControlKeyDown,
+}: SelectTriggerProps): ReactElement {
+  return (
+    <View
+      style={{
+        width: isMultiple ? "calc(100% + 2.8rem)" : undefined,
+        textAlign: "left",
+        cursor: "default",
+      }}
+      column={isMultiple}
+      gap={isMultiple ? 4 : undefined}
+    >
+      {isMultiple && selectedPills}
+      {isMultiple && selectedOptionsLength === 0 ? (
+        <Pressable
+          id={selectId}
+          data-select-trigger="true"
+          role="combobox"
+          aria-expanded={open}
+          aria-haspopup="listbox"
+          aria-controls={listId}
+          title={title}
+          style={{ cursor: "default" }}
+          themeInteractive={false}
+          onClick={handleTriggerClick}
+          onPointerUp={(e) => handleTriggerPointerUp(e as any)}
+          onKeyDown={(e) => handleControlKeyDown(e as any, true)}
+          disabled={isInteractionDisabled}
+        >
+          <Text type="Subheadline">{placeholderText}</Text>
+        </Pressable>
+      ) : !isMultiple ? (
+        <Pressable
+          id={selectId}
+          data-select-trigger="true"
+          role="combobox"
+          aria-expanded={open}
+          aria-haspopup="listbox"
+          aria-controls={listId}
+          title={title}
+          style={{ cursor: "default" }}
+          themeInteractive={false}
+          onClick={handleTriggerClick}
+          onPointerUp={(e) => handleTriggerPointerUp(e as any)}
+          onKeyDown={(e) => handleControlKeyDown(e as any, true)}
+          disabled={isInteractionDisabled}
+        >
+          <Text type="Subheadline">{selectedLabel}</Text>
+        </Pressable>
+      ) : null}
+    </View>
+  );
+}

package/packages/Components/Select/Select.tsx

@@ -0,0 +1,11 @@
+"use client";
+import type { ReactElement } from "react";
+import type { SelectProps } from "@/packages/Components/Select/Select.types";
+import SelectInner from "@/packages/Components/Select/select.inner";
+
+export default function Select(props: SelectProps<false>): ReactElement;
+export default function Select(props: SelectProps<true>): ReactElement;
+export default function Select(props: SelectProps<boolean>): ReactElement;
+export default function Select(props: SelectProps<boolean>): ReactElement {
+  return <SelectInner {...props} />;
+}

package/packages/Components/Select/Select.types.ts

@@ -0,0 +1,38 @@
+export interface Option {
+  value: string | number;
+  label: string;
+  description?: string;
+  icon?: string;
+  disabled?: boolean;
+}
+
+export interface OptGroup {
+  label: string;
+  options: Option[];
+}
+
+export type SelectValue<Multiple extends boolean = false> =
+  Multiple extends true ? string[] : string;
+
+export type SelectChangeEvent<Multiple extends boolean = false> =
+  | React.ChangeEvent<HTMLSelectElement>
+  | { target: { value: SelectValue<Multiple> } };
+
+import type { LabelSharedProps } from "@/packages/Components/Label/Label.types";
+
+export interface SelectProps<Multiple extends boolean = false>
+  extends LabelSharedProps {
+  id?: string;
+  value?: SelectValue<Multiple>;
+  defaultValue?: SelectValue<Multiple>;
+  onChange?: (e: SelectChangeEvent<Multiple>) => void;
+  onInputChange?: (value: string) => void;
+  options?: (Option | OptGroup)[];
+  required?: boolean;
+  placeholder?: string;
+  lockAncestorScrollOnOpen?: boolean;
+  multiple?: Multiple;
+  combobox?: boolean | "inline" | "search";
+  disabled?: boolean;
+  readOnly?: boolean;
+}

package/packages/Components/Select/Select.utils.ts

@@ -0,0 +1,84 @@
+import type {
+  OptGroup,
+  Option,
+} from "@/packages/Components/Select/Select.types";
+
+type ScrollLockSnapshot = {
+  count: number;
+  overflowY: string;
+  overscrollBehavior: string;
+};
+const ancestorScrollLockMap = new WeakMap<HTMLElement, ScrollLockSnapshot>();
+const lockScrollElement = (element: HTMLElement) => {
+  const snapshot = ancestorScrollLockMap.get(element);
+  if (snapshot) {
+    ancestorScrollLockMap.set(element, {
+      ...snapshot,
+      count: snapshot.count + 1,
+    });
+    return;
+  }
+  ancestorScrollLockMap.set(element, {
+    count: 1,
+    overflowY: element.style.overflowY,
+    overscrollBehavior: element.style.overscrollBehavior,
+  });
+  element.style.overflowY = "hidden";
+  element.style.overscrollBehavior = "contain";
+};
+const unlockScrollElement = (element: HTMLElement) => {
+  const snapshot = ancestorScrollLockMap.get(element);
+  if (!snapshot) return;
+  if (snapshot.count > 1) {
+    ancestorScrollLockMap.set(element, {
+      ...snapshot,
+      count: snapshot.count - 1,
+    });
+    return;
+  }
+  element.style.overflowY = snapshot.overflowY;
+  element.style.overscrollBehavior = snapshot.overscrollBehavior;
+  ancestorScrollLockMap.delete(element);
+};
+
+export const findScrollableAncestor = (element: HTMLElement | null) => {
+  if (!element) return null;
+  let current: HTMLElement | null = element.parentElement;
+  while (current) {
+    const computed = window.getComputedStyle(current);
+    const canScrollY = /(auto|scroll|overlay)/.test(computed.overflowY);
+    if (canScrollY && current.scrollHeight > current.clientHeight) {
+      return current;
+    }
+    current = current.parentElement;
+  }
+  return null;
+};
+
+export const lockScrollElementSafe = lockScrollElement;
+export const unlockScrollElementSafe = unlockScrollElement;
+
+export const isOptGroup = (item: Option | OptGroup): item is OptGroup =>
+  (item as OptGroup).options !== undefined;
+
+export const filterOptionsByQuery = (items: Option[], rawQuery: string) => {
+  const q = rawQuery.trim().toLowerCase();
+  if (!q) return items;
+  return items.filter(
+    (o) =>
+      o.label.toLowerCase().includes(q) ||
+      o.description?.toLowerCase().includes(q),
+  );
+};
+
+const toStringArray = (input?: unknown) => {
+  if (Array.isArray(input)) return input.map((item) => String(item));
+  if (typeof input === "string" || typeof input === "number")
+    return [String(input)];
+  return [];
+};
+export const getStringValues = (value?: unknown, defaultValue?: unknown) => {
+  const fromValue = toStringArray(value);
+  if (fromValue.length) return fromValue;
+  return toStringArray(defaultValue);
+};