@nori-ui/core 0.0.5 → 1.0.2

package/dist/chunk-6AD6KCVB.js

@@ -0,0 +1,178 @@
+import { px } from './chunk-5A2QOOVN.js';
+import { cn } from './chunk-CHXHRJNZ.js';
+import { useThemeColors } from './chunk-R5JMDDCB.js';
+import { __name } from './chunk-WCQVDF3K.js';
+import { useState, useCallback } from 'react';
+import { View, Pressable, Text } from 'react-native';
+import { jsx } from 'nativewind/jsx-runtime';
+
+var CONTAINER_LAYOUT_BASE = {
+  flexDirection: "row",
+  alignItems: "stretch"
+};
+var SEGMENT_LAYOUT_BASE = {
+  flex: 1,
+  alignItems: "center",
+  justifyContent: "center"
+};
+var SEGMENT_SIZE_KEYS = {
+  sm: { paddingV: "1", paddingH: "2", font: "sm" },
+  // 4 / 8 / 14 — closest to legacy 4/10/13
+  md: { paddingV: "2", paddingH: "3", font: "sm" }
+  // 8 / 12 / 14 — closest to legacy 6/12/14
+};
+var SEGMENT_SELECTED_BASE = {
+  // Subtle elevation that says "this one is on" without overshadowing
+  // the unselected segments next to it. Web uses boxShadow (CSS-style);
+  // native uses elevation. The legacy RN `shadow*` props were deprecated
+  // by react-native-web in favor of `boxShadow`.
+  ...{ boxShadow: "0 1px 2px rgba(0, 0, 0, 0.06)" },
+  elevation: 1
+};
+var SegmentedControl = /* @__PURE__ */ __name(({
+  value,
+  defaultValue,
+  onChange,
+  options,
+  disabled = false,
+  size = "md",
+  label,
+  className,
+  testID
+}) => {
+  const colors = useThemeColors();
+  const [inner, setInner] = useState(defaultValue);
+  const isControlled = value !== void 0;
+  const current = isControlled ? value : inner;
+  const select = useCallback(
+    (next) => {
+      if (disabled) {
+        return;
+      }
+      if (!isControlled) {
+        setInner(next);
+      }
+      onChange?.(next);
+    },
+    [disabled, isControlled, onChange]
+  );
+  const handleKeyDown = useCallback(
+    (event) => {
+      if (options.length === 0) {
+        return;
+      }
+      const idx = options.findIndex((o) => o.value === current);
+      const start = idx === -1 ? 0 : idx;
+      const offset = event.key === "ArrowRight" || event.key === "ArrowDown" ? 1 : event.key === "ArrowLeft" || event.key === "ArrowUp" ? -1 : 0;
+      if (offset === 0 && event.key !== "Home" && event.key !== "End") {
+        return;
+      }
+      event.preventDefault();
+      let nextIdx;
+      if (event.key === "Home") {
+        nextIdx = 0;
+      } else if (event.key === "End") {
+        nextIdx = options.length - 1;
+      } else {
+        nextIdx = (start + offset + options.length) % options.length;
+      }
+      const direction = offset === 0 ? 1 : offset;
+      for (let attempts = 0; attempts < options.length; attempts += 1) {
+        const candidate = options[nextIdx];
+        if (candidate && !candidate.disabled) {
+          select(candidate.value);
+          return;
+        }
+        nextIdx = (nextIdx + direction + options.length) % options.length;
+      }
+    },
+    [current, options, select]
+  );
+  const sizeKeys = SEGMENT_SIZE_KEYS[size];
+  const segmentPadV = px(colors.spacing[sizeKeys.paddingV]);
+  const segmentPadH = px(colors.spacing[sizeKeys.paddingH]);
+  const segmentFontSize = px(colors.fontSize[sizeKeys.font]);
+  const groupProps = {
+    role: "radiogroup",
+    accessibilityRole: "radiogroup",
+    onKeyDown: handleKeyDown,
+    ...label !== void 0 ? { "aria-label": label, accessibilityLabel: label } : {},
+    ...disabled ? { "aria-disabled": true } : {},
+    ...testID !== void 0 ? { testID } : {}
+  };
+  const containerStyle = {
+    ...CONTAINER_LAYOUT_BASE,
+    borderRadius: px(colors.radius.lg),
+    padding: px(colors.spacing["1"]),
+    gap: px(colors.spacing["1"]),
+    backgroundColor: colors.semantic.background.subtle
+  };
+  const segmentBaseStyle = {
+    ...SEGMENT_LAYOUT_BASE,
+    borderRadius: px(colors.radius.md)
+  };
+  const segmentSelectedStyle = {
+    ...SEGMENT_SELECTED_BASE,
+    backgroundColor: colors.semantic.background.elevated
+  };
+  return /* @__PURE__ */ jsx(
+    View,
+    {
+      ...groupProps,
+      className: cn(
+        "inline-flex flex-row items-stretch rounded-lg bg-neutral-100 dark:bg-neutral-800 p-1 gap-1",
+        disabled ? "opacity-60" : void 0,
+        className
+      ),
+      style: [containerStyle, disabled ? { opacity: 0.6 } : null],
+      children: options.map((option) => {
+        const selected = option.value === current;
+        const isOptDisabled = disabled || option.disabled;
+        return /* @__PURE__ */ jsx(
+          Pressable,
+          {
+            role: "radio",
+            accessibilityRole: "radio",
+            "aria-checked": selected,
+            accessibilityState: { selected, disabled: Boolean(isOptDisabled) },
+            tabIndex: selected || current === void 0 && options[0]?.value === option.value ? 0 : -1,
+            onPress: () => {
+              if (!isOptDisabled) {
+                select(option.value);
+              }
+            },
+            ...isOptDisabled ? { "aria-disabled": true, disabled: true } : {},
+            className: cn(
+              "flex-1 items-center justify-center rounded-md",
+              selected ? "bg-semantic-background-elevated shadow-sm" : "",
+              isOptDisabled ? "opacity-50" : ""
+            ),
+            style: [
+              segmentBaseStyle,
+              { paddingVertical: segmentPadV, paddingHorizontal: segmentPadH },
+              selected ? segmentSelectedStyle : null,
+              isOptDisabled ? { opacity: 0.5 } : null
+            ],
+            children: typeof option.label === "string" ? /* @__PURE__ */ jsx(
+              Text,
+              {
+                style: {
+                  color: selected ? colors.semantic.text.default : colors.semantic.text.muted,
+                  fontFamily: colors.fontFamily.body,
+                  fontSize: segmentFontSize,
+                  fontWeight: selected ? colors.fontWeight.semibold : colors.fontWeight.medium
+                },
+                children: option.label
+              }
+            ) : option.label
+          },
+          option.value
+        );
+      })
+    }
+  );
+}, "SegmentedControl");
+
+export { SegmentedControl };
+//# sourceMappingURL=chunk-6AD6KCVB.js.map
+//# sourceMappingURL=chunk-6AD6KCVB.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/SegmentedControl/SegmentedControl.tsx"],"names":["RNText"],"mappings":"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","file":"chunk-6AD6KCVB.js","sourcesContent":["'use client';\n\nimport type { Theme } from '@nori-ui/tokens';\nimport { type KeyboardEvent, type ReactNode, useCallback, useState } from 'react';\nimport type { ViewStyle } from 'react-native';\nimport { Pressable, Text as RNText, View } from 'react-native';\nimport { px } from '../../theme/px';\nimport { useThemeColors } from '../../theme/use-theme-colors';\nimport { cn } from '../../utils/cn';\n\nexport type SegmentedControlSize = 'sm' | 'md';\n\nexport type SegmentedControlOption<T extends string = string> = {\n    value: T;\n    label: ReactNode;\n    /** Disable just this option. */\n    disabled?: boolean;\n};\n\nexport type SegmentedControlProps<T extends string = string> = {\n    /** Controlled value. */\n    value?: T;\n    /** Uncontrolled initial value. Required if you don't pass `value`. */\n    defaultValue?: T;\n    /** Fires when the user selects a different segment. */\n    onChange?: (next: T) => void;\n    /** The set of selectable segments. */\n    options: ReadonlyArray<SegmentedControlOption<T>>;\n    /** Group-level disable. */\n    disabled?: boolean;\n    /**\n     * Visual size. `sm` is denser for inline filters; `md` is the default\n     * for top-of-view tab switchers.\n     * @defaultValue 'md'\n     */\n    size?: SegmentedControlSize;\n    /** Hide the visible labels — when set, segments must have `aria-label`. */\n    label?: string;\n    className?: string;\n    testID?: string;\n};\n\n// Layout-only bases; theme-driven dimensions are merged inside the component.\nconst CONTAINER_LAYOUT_BASE: ViewStyle = {\n    flexDirection: 'row',\n    alignItems: 'stretch',\n};\n\nconst SEGMENT_LAYOUT_BASE: ViewStyle = {\n    flex: 1,\n    alignItems: 'center',\n    justifyContent: 'center',\n};\n\n// Token keys per size; resolved to px inside the component so theme\n// overrides take effect.\ntype SegmentSizeKeys = {\n    paddingV: keyof Theme['spacing'];\n    paddingH: keyof Theme['spacing'];\n    font: keyof Theme['fontSize'];\n};\nconst SEGMENT_SIZE_KEYS: Record<SegmentedControlSize, SegmentSizeKeys> = {\n    sm: { paddingV: '1', paddingH: '2', font: 'sm' }, // 4 / 8 / 14 — closest to legacy 4/10/13\n    md: { paddingV: '2', paddingH: '3', font: 'sm' }, // 8 / 12 / 14 — closest to legacy 6/12/14\n};\n\nconst SEGMENT_SELECTED_BASE: ViewStyle = {\n    // Subtle elevation that says \"this one is on\" without overshadowing\n    // the unselected segments next to it. Web uses boxShadow (CSS-style);\n    // native uses elevation. The legacy RN `shadow*` props were deprecated\n    // by react-native-web in favor of `boxShadow`.\n    ...({ boxShadow: '0 1px 2px rgba(0, 0, 0, 0.06)' } as ViewStyle),\n    elevation: 1,\n};\n\n/**\n * Single-select segmented switcher — the \"beautiful UISegmentedControl\"\n * pattern. Use for binary or small (3–5 option) choices that fit inline\n * with their surrounding content. Reach for `Tabs` when each option owns\n * a distinct content region.\n *\n * Keyboard nav follows the WAI-ARIA radiogroup pattern: arrow keys move\n * between options (selection follows focus), `Home` / `End` jump to first\n * / last, with wrap-around at the edges.\n */\nexport const SegmentedControl = <T extends string>({\n    value,\n    defaultValue,\n    onChange,\n    options,\n    disabled = false,\n    size = 'md',\n    label,\n    className,\n    testID,\n}: SegmentedControlProps<T>) => {\n    const colors = useThemeColors();\n    const [inner, setInner] = useState<T | undefined>(defaultValue);\n    const isControlled = value !== undefined;\n    const current = isControlled ? value : inner;\n\n    const select = useCallback(\n        (next: T) => {\n            if (disabled) {\n                return;\n            }\n            if (!isControlled) {\n                setInner(next);\n            }\n            onChange?.(next);\n        },\n        [disabled, isControlled, onChange]\n    );\n\n    const handleKeyDown = useCallback(\n        (event: KeyboardEvent<HTMLDivElement>) => {\n            if (options.length === 0) {\n                return;\n            }\n            const idx = options.findIndex((o) => o.value === current);\n            const start = idx === -1 ? 0 : idx;\n            const offset =\n                event.key === 'ArrowRight' || event.key === 'ArrowDown'\n                    ? 1\n                    : event.key === 'ArrowLeft' || event.key === 'ArrowUp'\n                      ? -1\n                      : 0;\n            if (offset === 0 && event.key !== 'Home' && event.key !== 'End') {\n                return;\n            }\n            event.preventDefault();\n            let nextIdx: number;\n            if (event.key === 'Home') {\n                nextIdx = 0;\n            } else if (event.key === 'End') {\n                nextIdx = options.length - 1;\n            } else {\n                nextIdx = (start + offset + options.length) % options.length;\n            }\n            // Skip past disabled options in the chosen direction.\n            const direction = offset === 0 ? 1 : offset;\n            for (let attempts = 0; attempts < options.length; attempts += 1) {\n                const candidate = options[nextIdx];\n                if (candidate && !candidate.disabled) {\n                    select(candidate.value);\n                    return;\n                }\n                nextIdx = (nextIdx + direction + options.length) % options.length;\n            }\n        },\n        [current, options, select]\n    );\n\n    const sizeKeys = SEGMENT_SIZE_KEYS[size];\n    const segmentPadV = px(colors.spacing[sizeKeys.paddingV]);\n    const segmentPadH = px(colors.spacing[sizeKeys.paddingH]);\n    const segmentFontSize = px(colors.fontSize[sizeKeys.font]);\n\n    const groupProps: Record<string, unknown> = {\n        role: 'radiogroup',\n        accessibilityRole: 'radiogroup',\n        onKeyDown: handleKeyDown,\n        ...(label !== undefined ? { 'aria-label': label, accessibilityLabel: label } : {}),\n        ...(disabled ? { 'aria-disabled': true } : {}),\n        ...(testID !== undefined ? { testID } : {}),\n    };\n\n    const containerStyle: ViewStyle = {\n        ...CONTAINER_LAYOUT_BASE,\n        borderRadius: px(colors.radius.lg),\n        padding: px(colors.spacing['1']),\n        gap: px(colors.spacing['1']),\n        backgroundColor: colors.semantic.background.subtle,\n    };\n    const segmentBaseStyle: ViewStyle = {\n        ...SEGMENT_LAYOUT_BASE,\n        borderRadius: px(colors.radius.md),\n    };\n    const segmentSelectedStyle: ViewStyle = {\n        ...SEGMENT_SELECTED_BASE,\n        backgroundColor: colors.semantic.background.elevated,\n    };\n\n    return (\n        <View\n            {...groupProps}\n            className={cn(\n                'inline-flex flex-row items-stretch rounded-lg bg-neutral-100 dark:bg-neutral-800 p-1 gap-1',\n                disabled ? 'opacity-60' : undefined,\n                className\n            )}\n            style={[containerStyle, disabled ? { opacity: 0.6 } : null]}\n        >\n            {options.map((option) => {\n                const selected = option.value === current;\n                const isOptDisabled = disabled || option.disabled;\n                return (\n                    <Pressable\n                        key={option.value}\n                        role=\"radio\"\n                        accessibilityRole=\"radio\"\n                        aria-checked={selected}\n                        accessibilityState={{ selected, disabled: Boolean(isOptDisabled) }}\n                        tabIndex={selected || (current === undefined && options[0]?.value === option.value) ? 0 : -1}\n                        onPress={() => {\n                            if (!isOptDisabled) {\n                                select(option.value);\n                            }\n                        }}\n                        {...(isOptDisabled ? { 'aria-disabled': true, disabled: true } : {})}\n                        className={cn(\n                            'flex-1 items-center justify-center rounded-md',\n                            selected ? 'bg-semantic-background-elevated shadow-sm' : '',\n                            isOptDisabled ? 'opacity-50' : ''\n                        )}\n                        style={[\n                            segmentBaseStyle,\n                            { paddingVertical: segmentPadV, paddingHorizontal: segmentPadH },\n                            selected ? segmentSelectedStyle : null,\n                            isOptDisabled ? { opacity: 0.5 } : null,\n                        ]}\n                    >\n                        {typeof option.label === 'string' ? (\n                            <RNText\n                                style={{\n                                    color: selected ? colors.semantic.text.default : colors.semantic.text.muted,\n                                    fontFamily: colors.fontFamily.body,\n                                    fontSize: segmentFontSize,\n                                    fontWeight: selected\n                                        ? (colors.fontWeight.semibold as '600')\n                                        : (colors.fontWeight.medium as '500'),\n                                }}\n                            >\n                                {option.label}\n                            </RNText>\n                        ) : (\n                            option.label\n                        )}\n                    </Pressable>\n                );\n            })}\n        </View>\n    );\n};\n"]}