@coze-arch/cli 0.0.10 → 0.0.11

package/lib/__templates__/expo/client/heroui/components/checkbox/checkbox.types.ts

@@ -0,0 +1,216 @@
+import type {
+  AnimatedProps,
+  SharedValue,
+  WithTimingConfig,
+} from 'react-native-reanimated';
+import type {
+  Animation,
+  AnimationRoot,
+  AnimationValue,
+} from '../../helpers/internal/types';
+import * as CheckboxPrimitivesTypes from '../../primitives/checkbox/checkbox.types';
+
+/**
+ * Context value for checkbox animation state
+ */
+export interface CheckboxAnimationContextValue {
+  /** Shared value tracking if the checkbox is pressed */
+  isCheckboxPressed: SharedValue<boolean>;
+}
+
+/**
+ * Checkbox Indicator Icon Props
+ */
+export interface CheckboxIndicatorIconProps {
+  /** Indicator size */
+  size?: number;
+  /** Indicator stroke width */
+  strokeWidth?: number;
+  /** Indicator color */
+  color?: string;
+  /** Enter duration */
+  enterDuration?: number;
+  /** Exit duration */
+  exitDuration?: number;
+}
+
+/**
+ * Render function props for checkbox children
+ */
+export interface CheckboxRenderProps {
+  /** Whether the checkbox is selected */
+  isSelected?: boolean;
+  /** Whether the checkbox is invalid */
+  isInvalid: boolean;
+  /** Whether the checkbox is disabled */
+  isDisabled: boolean;
+}
+
+/**
+ * Animation configuration for checkbox root component
+ */
+export type CheckboxRootAnimation = AnimationRoot<{
+  scale?: AnimationValue<{
+    /**
+     * Scale values [unpressed, pressed]
+     * @default [1, 0.95]
+     */
+    value?: [number, number];
+    /**
+     * Animation timing configuration
+     */
+    timingConfig?: WithTimingConfig;
+  }>;
+}>;
+
+/**
+ * Props for the main Checkbox component
+ */
+export interface CheckboxProps
+  extends Omit<CheckboxPrimitivesTypes.RootProps, 'children'> {
+  /** Child elements to render inside the checkbox, or a render function */
+  children?:
+    | React.ReactNode
+    | ((props: CheckboxRenderProps) => React.ReactNode);
+
+  /** Variant style for the checkbox
+   * @default 'primary'
+   */
+  variant?: 'primary' | 'secondary';
+
+  /** Custom class name for the checkbox
+   *
+   * @note The following style properties are occupied by animations and cannot be set via className:
+   * - `transform` (specifically `scale`) - Animated for press feedback transitions (unpressed: 1, pressed: 0.96)
+   *
+   * To customize this property, use the `animation` prop:
+   * ```tsx
+   * <Checkbox
+   *   animation={{
+   *     scale: { value: [1, 0.96], timingConfig: { duration: 150 } }
+   *   }}
+   * />
+   * ```
+   *
+   * To completely disable animated styles and use your own via className or style prop, set `isAnimatedStyleActive={false}`.
+   */
+  className?: string;
+
+  /** Animation configuration for checkbox scale animation */
+  animation?: CheckboxRootAnimation;
+  /**
+   * Whether animated styles (react-native-reanimated) are active
+   * When `false`, the animated style is removed and you can implement custom logic
+   * This prop should only be used when you want to write custom styling logic instead of the default animated styles
+   * @default true
+   */
+  isAnimatedStyleActive?: boolean;
+}
+
+/**
+ * Animation configuration for checkbox indicator component
+ */
+export type CheckboxIndicatorAnimation = Animation<{
+  opacity?: AnimationValue<{
+    /**
+     * Opacity values [unselected, selected]
+     * @default [0, 1]
+     */
+    value?: [number, number];
+    /**
+     * Animation timing configuration
+     * @default { duration: 100 }
+     */
+    timingConfig?: WithTimingConfig;
+  }>;
+  borderRadius?: AnimationValue<{
+    /**
+     * Border radius values [unselected, selected]
+     * @default [99, 0]
+     */
+    value?: [number, number];
+    /**
+     * Animation timing configuration
+     * @default { duration: 50 }
+     */
+    timingConfig?: WithTimingConfig;
+  }>;
+  translateX?: AnimationValue<{
+    /**
+     * TranslateX values [unselected, selected]
+     * @default [-4, 0]
+     */
+    value?: [number, number];
+    /**
+     * Animation timing configuration
+     * @default { duration: 100 }
+     */
+    timingConfig?: WithTimingConfig;
+  }>;
+  scale?: AnimationValue<{
+    /**
+     * Scale values [unselected, selected]
+     * @default [0.8, 1]
+     */
+    value?: [number, number];
+    /**
+     * Animation timing configuration
+     * @default { duration: 100 }
+     */
+    timingConfig?: WithTimingConfig;
+  }>;
+}>;
+
+/**
+ * Props for the CheckboxIndicator component
+ */
+export interface CheckboxIndicatorProps
+  extends AnimatedProps<
+    Omit<CheckboxPrimitivesTypes.IndicatorProps, 'children'>
+  > {
+  /** Child elements to render inside the indicator, or a render function */
+  children?:
+    | React.ReactNode
+    | ((props: CheckboxRenderProps) => React.ReactNode);
+
+  /** Custom class name for the indicator
+   *
+   * @note The following style properties are occupied by animations and cannot be set via className:
+   * - `opacity` - Animated for selection transitions (unselected: 0, selected: 1)
+   * - `borderRadius` - Animated for selection transitions (unselected: 8, selected: 0)
+   * - `transform` (specifically `translateX` and `scale`) - Animated for selection transitions (translateX: unselected: -4, selected: 0; scale: unselected: 0.8, selected: 1)
+   *
+   * To customize these properties, use the `animation` prop:
+   * ```tsx
+   * <Checkbox.Indicator
+   *   animation={{
+   *     opacity: { value: [0, 1], timingConfig: { duration: 100 } },
+   *     borderRadius: { value: [8, 0], timingConfig: { duration: 50 } },
+   *     translateX: { value: [-4, 0], timingConfig: { duration: 100 } },
+   *     scale: { value: [0.8, 1], timingConfig: { duration: 100 } }
+   *   }}
+   * />
+   * ```
+   *
+   * To completely disable animated styles and use your own via className or style prop, set `isAnimatedStyleActive={false}`.
+   */
+  className?: string;
+
+  /** Custom icon props for the indicator */
+  iconProps?: CheckboxIndicatorIconProps;
+
+  /**
+   * Animation configuration
+   * - `false` or `"disabled"`: Disable all animations
+   * - `true` or `undefined`: Use default animations
+   * - `object`: Custom animation configuration
+   */
+  animation?: CheckboxIndicatorAnimation;
+  /**
+   * Whether animated styles (react-native-reanimated) are active
+   * When `false`, the animated style is removed and you can implement custom logic
+   * This prop should only be used when you want to write custom styling logic instead of the default animated styles
+   * @default true
+   */
+  isAnimatedStyleActive?: boolean;
+}

package/lib/__templates__/expo/client/heroui/components/checkbox/index.ts

@@ -0,0 +1,3 @@
+export { default as Checkbox, useCheckbox } from './checkbox';
+export { checkboxClassNames } from './checkbox.styles';
+export type * from './checkbox.types';

package/lib/__templates__/expo/client/heroui/components/chip/chip.animation.ts

@@ -0,0 +1,18 @@
+import { useCombinedAnimationDisabledState } from '../../helpers/internal/hooks';
+import type { AnimationRootDisableAll } from '../../helpers/internal/types';
+
+/**
+ * Animation hook for Chip root component
+ * Handles root-level animation configuration and provides context for child components
+ */
+export function useChipRootAnimation(options: {
+  animation: AnimationRootDisableAll | undefined;
+}) {
+  const { animation } = options;
+
+  const isAllAnimationsDisabled = useCombinedAnimationDisabledState(animation);
+
+  return {
+    isAllAnimationsDisabled,
+  };
+}

package/lib/__templates__/expo/client/heroui/components/chip/chip.constants.ts

@@ -0,0 +1,7 @@
+/**
+ * Display names for chip components
+ */
+export const DISPLAY_NAME = {
+  CHIP_ROOT: 'HeroUINative.Chip.Root',
+  CHIP_LABEL_CONTENT: 'HeroUINative.Chip.Label',
+} as const;

package/lib/__templates__/expo/client/heroui/components/chip/chip.md

@@ -0,0 +1,190 @@
+# Chip
+
+Displays a compact element in a capsule shape.
+
+## Import
+
+```tsx
+import { Chip } from '@/heroui';
+```
+
+## Anatomy
+
+```tsx
+<Chip>
+  <Chip.Label>...</Chip.Label>
+</Chip>
+```
+
+- **Chip**: Main container that displays a compact element
+- **Chip.Label**: Text content of the chip
+
+## Usage
+
+### Basic Usage
+
+The Chip component displays text or custom content in a capsule shape.
+
+```tsx
+<Chip>Basic Chip</Chip>
+```
+
+### Sizes
+
+Control the chip size with the `size` prop.
+
+```tsx
+<Chip size="sm">Small</Chip>
+<Chip size="md">Medium</Chip>
+<Chip size="lg">Large</Chip>
+```
+
+### Variants
+
+Choose between different visual styles with the `variant` prop.
+
+```tsx
+<Chip variant="primary">Primary</Chip>
+<Chip variant="secondary">Secondary</Chip>
+<Chip variant="tertiary">Tertiary</Chip>
+<Chip variant="soft">Soft</Chip>
+```
+
+### Colors
+
+Apply different color themes with the `color` prop.
+
+```tsx
+<Chip color="accent">Accent</Chip>
+<Chip color="default">Default</Chip>
+<Chip color="success">Success</Chip>
+<Chip color="warning">Warning</Chip>
+<Chip color="danger">Danger</Chip>
+```
+
+### With Icons
+
+Add icons or custom content alongside text using compound components.
+
+```tsx
+<Chip>
+  <Icon name="star" size={12} />
+  <Chip.Label>Featured</Chip.Label>
+</Chip>
+
+<Chip>
+  <Chip.Label>Close</Chip.Label>
+  <Icon name="close" size={12} />
+</Chip>
+```
+
+### Custom Styling
+
+Apply custom styles using className or style props.
+
+```tsx
+<Chip className="bg-purple-600 px-6">
+  <Chip.Label className="text-white">Custom</Chip.Label>
+</Chip>
+```
+
+### Disable All Animations
+
+Disable all animations including children by using the `"disable-all"` value for the `animation` prop.
+
+```tsx
+{
+  /* Disable all animations including children */
+}
+<Chip animation="disable-all">No Animations</Chip>;
+```
+
+## Example
+
+```tsx
+import { Chip } from '@/heroui';
+import { View, Text } from 'react-native';
+import { Ionicons } from '@expo/vector-icons';
+
+export default function ChipExample() {
+  return (
+    <View className="gap-4 p-4">
+      <View className="flex-row flex-wrap gap-2">
+        <Chip size="sm">Small</Chip>
+        <Chip size="md">Medium</Chip>
+        <Chip size="lg">Large</Chip>
+      </View>
+
+      <View className="flex-row flex-wrap gap-2">
+        <Chip variant="primary" color="accent">
+          Primary
+        </Chip>
+        <Chip variant="secondary" color="success">
+          <View className="size-1.5 rounded-full bg-success" />
+          <Chip.Label>Success</Chip.Label>
+        </Chip>
+        <Chip variant="tertiary" color="warning">
+          <Ionicons name="star" size={12} color="#F59E0B" />
+          <Chip.Label>Premium</Chip.Label>
+        </Chip>
+      </View>
+
+      <View className="flex-row gap-2">
+        <Chip variant="secondary">
+          <Chip.Label>Remove</Chip.Label>
+          <Ionicons name="close" size={14} color="#6B7280" />
+        </Chip>
+        <Chip className="bg-purple-600">
+          <Chip.Label className="text-white font-semibold">Custom</Chip.Label>
+        </Chip>
+      </View>
+    </View>
+  );
+}
+```
+
+You can find more examples in the [GitHub repository](<https://github.com/heroui-inc/heroui-native/blob/rc/example/src/app/(home)/components/chip.tsx>).
+
+## API Reference
+
+### Chip
+
+| prop                | type                                                          | default     | description                                                                               |
+| ------------------- | ------------------------------------------------------------- | ----------- | ----------------------------------------------------------------------------------------- |
+| `children`          | `React.ReactNode`                                             | -           | Content to render inside the chip                                                         |
+| `size`              | `'sm' \| 'md' \| 'lg'`                                        | `'md'`      | Size of the chip                                                                          |
+| `variant`           | `'primary' \| 'secondary' \| 'tertiary' \| 'soft'`            | `'primary'` | Visual variant of the chip                                                                |
+| `color`             | `'accent' \| 'default' \| 'success' \| 'warning' \| 'danger'` | `'accent'`  | Color theme of the chip                                                                   |
+| `className`         | `string`                                                      | -           | Additional CSS classes to apply                                                           |
+| `animation`         | `"disable-all" \| undefined`                                  | `undefined` | Animation configuration. Use `"disable-all"` to disable all animations including children |
+| `...PressableProps` | `PressableProps`                                              | -           | All Pressable props are supported                                                         |
+
+### Chip.Label
+
+| prop           | type              | default | description                            |
+| -------------- | ----------------- | ------- | -------------------------------------- |
+| `children`     | `React.ReactNode` | -       | Text or content to render as the label |
+| `className`    | `string`          | -       | Additional CSS classes to apply        |
+| `...TextProps` | `TextProps`       | -       | All standard Text props are supported  |
+
+## Hooks
+
+### useChip
+
+Hook to access the Chip context values. Returns the chip's size, variant, and color.
+
+```tsx
+import { useChip } from '@/heroui';
+
+const { size, variant, color } = useChip();
+```
+
+#### Return Value
+
+| property  | type                                                          | description                |
+| --------- | ------------------------------------------------------------- | -------------------------- |
+| `size`    | `'sm' \| 'md' \| 'lg'`                                        | Size of the chip           |
+| `variant` | `'primary' \| 'secondary' \| 'tertiary' \| 'soft'`            | Visual variant of the chip |
+| `color`   | `'accent' \| 'default' \| 'success' \| 'warning' \| 'danger'` | Color theme of the chip    |
+
+**Note:** This hook must be used within a `Chip` component. It will throw an error if called outside of the chip context.

package/lib/__templates__/expo/client/heroui/components/chip/chip.styles.ts

@@ -0,0 +1,234 @@
+import { StyleSheet } from 'react-native';
+import { tv } from 'tailwind-variants';
+import { combineStyles } from '../../helpers/internal/utils';
+
+const root = tv({
+  base: 'self-start flex-row items-center justify-center gap-1 overflow-hidden',
+  variants: {
+    variant: {
+      primary: '',
+      secondary: 'bg-default',
+      tertiary: 'bg-transparent',
+      soft: '',
+    },
+    size: {
+      sm: 'px-2 h-5 rounded-xl',
+      md: 'px-3 h-6 rounded-xl',
+      lg: 'px-4 h-7 rounded-2xl',
+    },
+    color: {
+      accent: '',
+      default: '',
+      success: '',
+      warning: '',
+      danger: '',
+    },
+  },
+  compoundVariants: [
+    // Primary variant colors
+    {
+      variant: 'primary',
+      color: 'accent',
+      className: 'bg-accent',
+    },
+    {
+      variant: 'primary',
+      color: 'default',
+      className: 'bg-default',
+    },
+    {
+      variant: 'primary',
+      color: 'success',
+      className: 'bg-success',
+    },
+    {
+      variant: 'primary',
+      color: 'warning',
+      className: 'bg-warning',
+    },
+    {
+      variant: 'primary',
+      color: 'danger',
+      className: 'bg-danger',
+    },
+    // Soft variant colors
+    {
+      variant: 'soft',
+      color: 'accent',
+      className: 'bg-accent/15',
+    },
+    {
+      variant: 'soft',
+      color: 'default',
+      className: 'bg-default',
+    },
+    {
+      variant: 'soft',
+      color: 'success',
+      className: 'bg-success/15',
+    },
+    {
+      variant: 'soft',
+      color: 'warning',
+      className: 'bg-warning/15',
+    },
+    {
+      variant: 'soft',
+      color: 'danger',
+      className: 'bg-danger/15',
+    },
+  ],
+  defaultVariants: {
+    size: 'md',
+    variant: 'primary',
+    color: 'accent',
+  },
+});
+
+const label = tv({
+  base: 'font-medium',
+  variants: {
+    variant: {
+      primary: '',
+      secondary: '',
+      tertiary: '',
+      soft: '',
+    },
+    size: {
+      sm: 'text-xs',
+      md: 'text-sm',
+      lg: 'text-base',
+    },
+    color: {
+      accent: '',
+      default: '',
+      success: '',
+      warning: '',
+      danger: '',
+    },
+  },
+  compoundVariants: [
+    // Primary variant text colors
+    {
+      variant: 'primary',
+      color: 'accent',
+      className: 'text-accent-foreground',
+    },
+    {
+      variant: 'primary',
+      color: 'default',
+      className: 'text-default-foreground',
+    },
+    {
+      variant: 'primary',
+      color: 'success',
+      className: 'text-success-foreground',
+    },
+    {
+      variant: 'primary',
+      color: 'warning',
+      className: 'text-warning-foreground',
+    },
+    {
+      variant: 'primary',
+      color: 'danger',
+      className: 'text-danger-foreground',
+    },
+    // Secondary variant text colors
+    {
+      variant: 'secondary',
+      color: 'accent',
+      className: 'text-accent',
+    },
+    {
+      variant: 'secondary',
+      color: 'default',
+      className: 'text-default-foreground',
+    },
+    {
+      variant: 'secondary',
+      color: 'success',
+      className: 'text-success',
+    },
+    {
+      variant: 'secondary',
+      color: 'warning',
+      className: 'text-warning',
+    },
+    {
+      variant: 'secondary',
+      color: 'danger',
+      className: 'text-danger',
+    },
+    // Tertiary variant text colors
+    {
+      variant: 'tertiary',
+      color: 'accent',
+      className: 'text-foreground',
+    },
+    {
+      variant: 'tertiary',
+      color: 'default',
+      className: 'text-default-foreground',
+    },
+    {
+      variant: 'tertiary',
+      color: 'success',
+      className: 'text-success',
+    },
+    {
+      variant: 'tertiary',
+      color: 'warning',
+      className: 'text-warning',
+    },
+    {
+      variant: 'tertiary',
+      color: 'danger',
+      className: 'text-danger',
+    },
+    // Soft variant text colors
+    {
+      variant: 'soft',
+      color: 'accent',
+      className: 'text-accent',
+    },
+    {
+      variant: 'soft',
+      color: 'default',
+      className: 'text-default-foreground',
+    },
+    {
+      variant: 'soft',
+      color: 'success',
+      className: 'text-success',
+    },
+    {
+      variant: 'soft',
+      color: 'warning',
+      className: 'text-warning',
+    },
+    {
+      variant: 'soft',
+      color: 'danger',
+      className: 'text-danger',
+    },
+  ],
+  defaultVariants: {
+    size: 'md',
+    variant: 'primary',
+    color: 'accent',
+  },
+});
+
+export const chipClassNames = combineStyles({
+  root,
+  label,
+});
+
+export const chipStyleSheet = StyleSheet.create({
+  root: {
+    borderCurve: 'continuous',
+  },
+});
+
+export type LabelContentSlots = keyof ReturnType<typeof label>;