wn-native-ui 0.0.0-stage → 0.1.0

package/lib/module/components/Button/styles.js

@@ -0,0 +1,50 @@
+"use strict";
+
+import { StyleSheet } from 'react-native';
+import { uiTokens as token } from "../../ui/tokens.js";
+export const styles = StyleSheet.create({
+  button: {
+    alignItems: 'center',
+    alignSelf: 'stretch',
+    borderRadius: token.radius.medium,
+    borderWidth: 1,
+    flexDirection: 'row',
+    gap: token.space.s8,
+    justifyContent: 'center',
+    minHeight: token.size.inputMinHeight,
+    paddingHorizontal: token.space.s20,
+    paddingVertical: token.space.s12
+  },
+  destructive: {
+    backgroundColor: token.color.destructive,
+    borderColor: token.color.destructive
+  },
+  disabled: {
+    backgroundColor: token.color.bgDisabled,
+    borderColor: token.color.separator,
+    opacity: token.opacity.disabled
+  },
+  disabledLabel: {
+    color: token.color.labelDisabled
+  },
+  label: {
+    color: token.color.onTint,
+    ...token.type.subheadline,
+    fontWeight: '600',
+    textAlign: 'center'
+  },
+  pressed: {
+    opacity: token.opacity.pressed
+  },
+  primary: {
+    backgroundColor: token.color.tintDefault,
+    borderColor: token.color.tintDefault
+  },
+  secondary: {
+    backgroundColor: token.color.bgSecondary,
+    borderColor: token.color.separator
+  },
+  secondaryLabel: {
+    color: token.color.tintPressed
+  }
+});

package/lib/module/components/Checkbox/Checkbox.js

@@ -0,0 +1,131 @@
+"use strict";
+
+import { createContext, useContext, useMemo, useState } from 'react';
+import { Pressable, Text, View } from 'react-native';
+import Svg, { Path } from 'react-native-svg';
+import { useFieldContext } from "../Field/FieldContext.js";
+import { uiTokens as token } from "../../ui/tokens.js";
+import { styles } from "./styles.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const CheckboxGroupContext = /*#__PURE__*/createContext(null);
+function containsValue(values, value) {
+  return values.some(item => Object.is(item, value));
+}
+function CheckboxControl({
+  accessible = true,
+  accessibilityLabel,
+  checked,
+  defaultChecked = false,
+  description,
+  disabled = false,
+  indeterminate = false,
+  importantForAccessibility,
+  label,
+  onChange,
+  style,
+  value,
+  ...pressableProps
+}) {
+  const field = useFieldContext();
+  const group = useContext(CheckboxGroupContext);
+  const [internalChecked, setInternalChecked] = useState(defaultChecked);
+  const grouped = group !== null && value !== undefined;
+  const resolvedChecked = grouped ? containsValue(group.selected, value) : checked ?? internalChecked;
+  const isDisabled = disabled || Boolean(field?.disabled) || Boolean(group?.disabled);
+  const isInvalid = Boolean(field?.invalid);
+  const hasCopy = Boolean(label || description);
+  const defaultAccessibilityLabel = [label ?? field?.label, description].filter(Boolean).join('，') || undefined;
+  const update = () => {
+    const nextChecked = indeterminate ? true : !resolvedChecked;
+    if (grouped) {
+      group.update(value, nextChecked);
+      onChange?.(nextChecked);
+    } else {
+      if (checked === undefined) setInternalChecked(nextChecked);
+      onChange?.(nextChecked);
+    }
+  };
+  return /*#__PURE__*/_jsxs(Pressable, {
+    ...pressableProps,
+    accessible: accessible,
+    accessibilityLabel: accessible ? accessibilityLabel ?? defaultAccessibilityLabel : undefined,
+    accessibilityRole: accessible ? 'checkbox' : undefined,
+    accessibilityState: accessible ? {
+      checked: indeterminate ? 'mixed' : resolvedChecked,
+      disabled: isDisabled
+    } : undefined,
+    disabled: isDisabled,
+    importantForAccessibility: accessible ? importantForAccessibility : 'no-hide-descendants',
+    onPress: update,
+    style: ({
+      pressed
+    }) => [styles.item, !hasCopy && styles.controlOnly, isDisabled && styles.disabled, pressed && !isDisabled && styles.pressed, style],
+    children: [/*#__PURE__*/_jsx(View, {
+      style: [styles.control, (resolvedChecked || indeterminate) && styles.controlChecked, isInvalid && styles.controlInvalid],
+      children: resolvedChecked || indeterminate ? /*#__PURE__*/_jsx(Svg, {
+        fill: "none",
+        height: 12,
+        viewBox: "0 0 12 12",
+        width: 12,
+        children: /*#__PURE__*/_jsx(Path, {
+          d: indeterminate ? 'M2.5 6h7' : 'm2 6 2.35 2.35L10 3.5',
+          stroke: token.color.onTint,
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          strokeWidth: 1.8
+        })
+      }) : null
+    }), hasCopy ? /*#__PURE__*/_jsxs(View, {
+      style: styles.copy,
+      children: [label ? /*#__PURE__*/_jsx(Text, {
+        style: styles.label,
+        children: label
+      }) : null, description ? /*#__PURE__*/_jsx(Text, {
+        style: styles.description,
+        children: description
+      }) : null]
+    }) : null]
+  });
+}
+function CheckboxGroup({
+  accessibilityLabel = '复选项',
+  children,
+  defaultValue = [],
+  direction = 'vertical',
+  disabled = false,
+  onChange,
+  options = [],
+  style,
+  value
+}) {
+  const controlled = value !== undefined;
+  const [internalValue, setInternalValue] = useState(() => [...defaultValue]);
+  const selected = controlled ? value : internalValue;
+  const context = useMemo(() => ({
+    disabled,
+    selected,
+    update: (itemValue, itemChecked) => {
+      const nextValue = itemChecked ? containsValue(selected, itemValue) ? [...selected] : [...selected, itemValue] : selected.filter(item => !Object.is(item, itemValue));
+      if (!controlled) setInternalValue(nextValue);
+      onChange?.(nextValue);
+    }
+  }), [controlled, disabled, onChange, selected]);
+  return /*#__PURE__*/_jsx(CheckboxGroupContext.Provider, {
+    value: context,
+    children: /*#__PURE__*/_jsxs(View, {
+      accessibilityLabel: accessibilityLabel,
+      accessibilityRole: "list",
+      style: [styles.group, direction === 'horizontal' && styles.groupHorizontal, style],
+      children: [options.map(option => /*#__PURE__*/_jsx(CheckboxControl, {
+        accessibilityLabel: option.accessibilityLabel,
+        description: option.description,
+        disabled: option.disabled,
+        label: option.label,
+        value: option.value
+      }, `${typeof option.value}:${String(option.value)}`)), children]
+    })
+  });
+}
+export const Checkbox = Object.assign(CheckboxControl, {
+  Group: CheckboxGroup
+});

package/lib/module/components/Checkbox/index.js

@@ -0,0 +1,3 @@
+"use strict";
+
+export { Checkbox } from "./Checkbox.js";

package/lib/module/components/Checkbox/styles.js

@@ -0,0 +1,64 @@
+"use strict";
+
+import { StyleSheet } from 'react-native';
+import { uiTokens as token } from "../../ui/tokens.js";
+export const styles = StyleSheet.create({
+  control: {
+    alignItems: 'center',
+    backgroundColor: token.color.bgSecondary,
+    borderColor: token.color.controlBorder,
+    borderRadius: 6,
+    borderWidth: 1,
+    height: 20,
+    justifyContent: 'center',
+    width: 20
+  },
+  controlChecked: {
+    backgroundColor: token.color.tintDefault,
+    borderColor: token.color.tintDefault
+  },
+  controlInvalid: {
+    borderColor: token.color.destructive
+  },
+  controlOnly: {
+    justifyContent: 'center',
+    width: token.size.minTouch
+  },
+  copy: {
+    flex: 1,
+    gap: token.space.s4,
+    minWidth: 0
+  },
+  description: {
+    color: token.color.labelSecondary,
+    ...token.type.footnote
+  },
+  disabled: {
+    opacity: token.opacity.disabled
+  },
+  group: {
+    alignItems: 'stretch',
+    gap: token.space.s4
+  },
+  groupHorizontal: {
+    alignItems: 'flex-start',
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    gap: token.space.s12
+  },
+  item: {
+    alignItems: 'center',
+    borderRadius: token.radius.small,
+    flexDirection: 'row',
+    gap: token.space.s12,
+    minHeight: token.size.minTouch
+  },
+  label: {
+    color: token.color.labelPrimary,
+    ...token.type.subheadline
+  },
+  pressed: {
+    backgroundColor: token.color.bgTertiary,
+    opacity: token.opacity.pressed
+  }
+});