@coze-arch/cli 0.0.10-alpha.11b7ea → 0.0.10-alpha.954690

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

@@ -1,216 +0,0 @@
-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

@@ -1,3 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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

@@ -1,7 +0,0 @@
-/**
- * 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

@@ -1,190 +0,0 @@
-# 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

@@ -1,234 +0,0 @@
-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>;