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

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

@@ -1,187 +0,0 @@
-# Label
-
-Text component for labeling form fields and other UI elements with support for required indicators and validation states.
-
-## Import
-
-```tsx
-import { Label } from '@/heroui';
-```
-
-## Anatomy
-
-```tsx
-<Label>
-  <Label.Text>...</Label.Text>
-</Label>
-```
-
-- **Label**: Root container that manages label state and provides context to child components. When string children are provided, automatically renders as Label.Text. Supports disabled, required, and invalid states.
-- **Label.Text**: Text content of the label. Displays the label text and automatically shows an asterisk when the label is required. Changes color when invalid or disabled.
-
-## Usage
-
-### Basic Usage
-
-Display a label with text content. String children are automatically rendered as Label.Text.
-
-```tsx
-<Label>Username</Label>
-```
-
-### With Form Fields
-
-Use Label with form fields to provide accessible labels.
-
-```tsx
-<TextField>
-  <Label>Username</Label>
-  <Input placeholder="Choose a username" />
-</TextField>
-```
-
-### Required Fields
-
-Show an asterisk indicator for required fields using the `isRequired` prop.
-
-```tsx
-<TextField>
-  <Label isRequired>Password</Label>
-  <Input placeholder="Create a password" secureTextEntry />
-</TextField>
-```
-
-### Invalid State
-
-Display labels in an invalid state to indicate validation errors.
-
-```tsx
-import { FieldError, Label, TextField } from '@/heroui';
-
-<TextField isInvalid>
-  <Label isInvalid>Confirm password</Label>
-  <Input
-    placeholder="Confirm your password"
-    secureTextEntry
-    value="different"
-    editable={false}
-  />
-  <FieldError>Passwords do not match</FieldError>
-</TextField>;
-```
-
-### Disabled State
-
-Disable labels to indicate non-interactive fields.
-
-```tsx
-<TextField isDisabled>
-  <Label>Subscription plan</Label>
-  <Input value="Premium" />
-</TextField>
-```
-
-### Custom Layout
-
-Use compound components for custom label layouts.
-
-```tsx
-<Label>
-  <Label.Text>Custom label</Label.Text>
-</Label>
-```
-
-### Custom Styling
-
-Apply custom styles using className, classNames, or styles props.
-
-```tsx
-<Label className="mb-2">
-  <Label.Text
-    className="text-lg"
-    classNames={{
-      text: 'font-bold',
-      asterisk: 'text-danger',
-    }}
-  >
-    Custom styled label
-  </Label.Text>
-</Label>
-```
-
-## Example
-
-```tsx
-import { FieldError, Label, TextField } from '@/heroui';
-import { View } from 'react-native';
-
-export default function LabelExample() {
-  return (
-    <View className="flex-1 justify-center px-5 gap-8">
-      <TextField>
-        <Label>Username</Label>
-        <Input placeholder="Choose a username" />
-      </TextField>
-      <TextField>
-        <Label isRequired>Password</Label>
-        <Input placeholder="Create a password" secureTextEntry />
-      </TextField>
-      <TextField isInvalid>
-        <Label isInvalid>Confirm password</Label>
-        <Input
-          placeholder="Confirm your password"
-          secureTextEntry
-          value="different"
-          editable={false}
-        />
-        <FieldError>Passwords do not match</FieldError>
-      </TextField>
-      <TextField isDisabled>
-        <Label>Subscription plan</Label>
-        <Input value="Premium" />
-      </TextField>
-    </View>
-  );
-}
-```
-
-You can find more examples in the [GitHub repository](<https://github.com/heroui-inc/heroui-native/blob/rc/example/src/app/(home)/components/label.tsx>).
-
-## API Reference
-
-### Label
-
-| prop                | type                         | default     | description                                                                                                   |
-| ------------------- | ---------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------- |
-| `children`          | `React.ReactNode`            | -           | Label content. When string is provided, automatically renders as Label.Text. Otherwise renders children as-is |
-| `isRequired`        | `boolean`                    | `false`     | Whether the label is required. Shows asterisk indicator when true                                             |
-| `isInvalid`         | `boolean`                    | `false`     | Whether the label is in an invalid state. Changes text color to danger                                        |
-| `isDisabled`        | `boolean`                    | `false`     | Whether the label is disabled. Applies disabled styling and prevents interaction                              |
-| `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 standard React Native Pressable props are supported                                                       |
-
-### Label.Text
-
-| prop           | type                                     | default | description                                                                        |
-| -------------- | ---------------------------------------- | ------- | ---------------------------------------------------------------------------------- |
-| `children`     | `React.ReactNode`                        | -       | Label text content                                                                 |
-| `className`    | `string`                                 | -       | Additional CSS classes to apply to the text element                                |
-| `classNames`   | `ElementSlots<LabelSlots>`               | -       | Additional CSS classes for different parts of the label                            |
-| `styles`       | `Partial<Record<LabelSlots, TextStyle>>` | -       | Styles for different parts of the label                                            |
-| `nativeID`     | `string`                                 | -       | Native ID for accessibility. Used to link label to form fields via aria-labelledby |
-| `...TextProps` | `TextProps`                              | -       | All standard React Native Text props are supported                                 |
-
-#### `ElementSlots<LabelSlots>`
-
-| prop       | type     | description                    |
-| ---------- | -------- | ------------------------------ |
-| `text`     | `string` | CSS classes for the label text |
-| `asterisk` | `string` | CSS classes for the asterisk   |
-
-#### `styles`
-
-| prop       | type        | description               |
-| ---------- | ----------- | ------------------------- |
-| `text`     | `TextStyle` | Styles for the label text |
-| `asterisk` | `TextStyle` | Styles for the asterisk   |

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

@@ -1,44 +0,0 @@
-import { tv } from 'tailwind-variants';
-import { combineStyles } from '../../helpers/internal/utils';
-
-const root = tv({
-  base: '',
-  variants: {
-    isDisabled: {
-      true: 'pointer-events-none opacity-disabled',
-    },
-    isInsideField: {
-      true: 'px-1.5',
-    },
-    isInsideControlField: {
-      true: 'pointer-events-none',
-    },
-  },
-});
-
-const label = tv({
-  slots: {
-    text: 'text-base text-foreground font-medium',
-    asterisk: 'text-lg/6 text-danger',
-  },
-  variants: {
-    isDisabled: {
-      true: {
-        text: '',
-        asterisk: 'text-muted',
-      },
-    },
-    isInvalid: {
-      true: {
-        text: 'text-danger',
-      },
-    },
-  },
-});
-
-export const labelClassNames = combineStyles({
-  root,
-  label,
-});
-
-export type LabelSlots = keyof ReturnType<typeof label>;

package/lib/__templates__/expo/client/heroui/components/label/label.tsx

@@ -1,172 +0,0 @@
-import { forwardRef, useMemo } from 'react';
-import { HeroText } from '../../helpers/internal/components';
-import {
-  AnimationSettingsProvider,
-  useFormField,
-} from '../../helpers/internal/contexts';
-import type { PressableRef, TextRef } from '../../helpers/internal/types';
-import { childrenToString, createContext } from '../../helpers/internal/utils';
-import * as LabelPrimitives from '../../primitives/label';
-import { useControlField } from '../control-field/control-field.context';
-import { useRadioGroupItem } from '../radio-group/radio-group.context';
-import { useLabelRootAnimation } from './label.animation';
-import { DISPLAY_NAME } from './label.constants';
-import { labelClassNames } from './label.styles';
-import type {
-  LabelContextValue,
-  LabelProps,
-  LabelTextProps,
-} from './label.types';
-
-const [LabelProvider, useLabel] = createContext<LabelContextValue>({
-  name: 'LabelContext',
-});
-
-// --------------------------------------------------
-
-const Label = forwardRef<PressableRef, LabelProps>((props, ref) => {
-  const {
-    children,
-    isDisabled: localIsDisabled,
-    isRequired: localIsRequired,
-    isInvalid: localIsInvalid,
-    className,
-    animation,
-    ...restProps
-  } = props;
-
-  const formField = useFormField();
-  const controlFieldContext = useControlField();
-  const radioGroupItemContext = useRadioGroupItem();
-
-  const isInsideField = formField?.hasFieldPadding ?? false;
-  const isInsideControlField =
-    Boolean(controlFieldContext) || Boolean(radioGroupItemContext);
-
-  // Merge form field state with local props (local takes precedence)
-  const isDisabled =
-    localIsDisabled !== undefined
-      ? localIsDisabled
-      : (formField?.isDisabled ?? false);
-  const isRequired =
-    localIsRequired !== undefined
-      ? localIsRequired
-      : (formField?.isRequired ?? false);
-  const isInvalid =
-    localIsInvalid !== undefined
-      ? localIsInvalid
-      : (formField?.isInvalid ?? false);
-
-  const stringifiedChildren = childrenToString(children);
-
-  const { isAllAnimationsDisabled } = useLabelRootAnimation({
-    animation,
-  });
-
-  const animationSettingsContextValue = useMemo(
-    () => ({
-      isAllAnimationsDisabled,
-    }),
-    [isAllAnimationsDisabled]
-  );
-
-  const contextValue = useMemo(
-    () => ({
-      isDisabled,
-      isRequired,
-      isInvalid,
-    }),
-    [isDisabled, isRequired, isInvalid]
-  );
-
-  const rootClassName = labelClassNames.root({
-    isDisabled,
-    isInsideField,
-    isInsideControlField,
-    className,
-  });
-
-  return (
-    <AnimationSettingsProvider value={animationSettingsContextValue}>
-      <LabelProvider value={contextValue}>
-        <LabelPrimitives.Root
-          ref={ref}
-          isDisabled={isDisabled}
-          className={rootClassName}
-          {...restProps}
-        >
-          {stringifiedChildren ? (
-            <LabelText>{stringifiedChildren}</LabelText>
-          ) : (
-            children
-          )}
-        </LabelPrimitives.Root>
-      </LabelProvider>
-    </AnimationSettingsProvider>
-  );
-});
-
-// --------------------------------------------------
-
-const LabelText = forwardRef<TextRef, LabelTextProps>((props, ref) => {
-  const { children, className, classNames, styles, style, ...restProps } =
-    props;
-
-  const { isDisabled, isRequired, isInvalid } = useLabel();
-
-  const { text, asterisk } = labelClassNames.label({
-    isDisabled,
-    isInvalid,
-  });
-
-  const textClassName = text({
-    className: [className, classNames?.text],
-  });
-
-  const asteriskClassName = asterisk({
-    className: classNames?.asterisk,
-  });
-
-  return (
-    <HeroText
-      ref={ref}
-      className={textClassName}
-      style={[style, styles?.text]}
-      {...restProps}
-    >
-      {children}
-      {isRequired && (
-        <HeroText className={asteriskClassName} style={styles?.asterisk}>
-          {' '}
-          *
-        </HeroText>
-      )}
-    </HeroText>
-  );
-});
-
-// --------------------------------------------------
-
-Label.displayName = DISPLAY_NAME.LABEL_ROOT;
-LabelText.displayName = DISPLAY_NAME.LABEL_TEXT;
-
-/**
- * Compound Label component with sub-components
- *
- * @component Label - Main container that displays a label. Renders with
- * string children as Label.Text or accepts compound components for custom layouts.
- *
- * @component Label.Text - Text content of the label. When string is provided,
- * it renders as Text. Otherwise renders children as-is. Shows asterisk when required.
- *
- * Props flow from Label to sub-components via context (isDisabled, isRequired, isInvalid).
- *
- * @see Full documentation: https://v3.heroui.com/docs/native/components/label
- */
-const CompoundLabel = Object.assign(Label, {
-  /** Label text - renders text or custom content with optional asterisk */
-  Text: LabelText,
-});
-
-export { useLabel };
-export default CompoundLabel;

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

@@ -1,86 +0,0 @@
-import type { TextStyle } from 'react-native';
-import type {
-  AnimationRootDisableAll,
-  ElementSlots,
-  PressableRef,
-  TextRef,
-} from '../../helpers/internal/types';
-import type * as LabelPrimitivesTypes from '../../primitives/label/label.types';
-import type { LabelSlots } from './label.styles';
-
-/**
- * Props for the main Label component
- */
-export interface LabelProps extends LabelPrimitivesTypes.RootProps {
-  /**
-   * Whether the label is required (shows asterisk)
-   * @default false
-   */
-  isRequired?: boolean;
-
-  /**
-   * Whether the label is in an invalid state
-   * @default false
-   */
-  isInvalid?: boolean;
-
-  /**
-   * Additional CSS classes
-   */
-  className?: string;
-
-  /**
-   * Animation configuration for label
-   * - `"disable-all"`: Disable all animations including children
-   * - `undefined`: Use default animations
-   */
-  animation?: AnimationRootDisableAll;
-}
-
-/**
- * Props for the Label.Text component
- */
-export interface LabelTextProps extends LabelPrimitivesTypes.TextProps {
-  /**
-   * Additional CSS classes
-   */
-  className?: string;
-  /**
-   * Additional CSS classes for different parts of the label
-   */
-  classNames?: ElementSlots<LabelSlots>;
-  /**
-   * Styles for different parts of the label
-   */
-  styles?: Partial<Record<LabelSlots, TextStyle>>;
-}
-
-/**
- * Context value for Label components
- */
-export interface LabelContextValue {
-  /**
-   * Whether the label is disabled
-   */
-  isDisabled: boolean;
-
-  /**
-   * Whether the label is required
-   */
-  isRequired: boolean;
-
-  /**
-   * Whether the label is in an invalid state
-   */
-  isInvalid: boolean;
-}
-
-/**
- * Reference type for the Label component
- */
-export type LabelRef = PressableRef;
-
-/**
- * Reference type for the Label.Text component
- */
-export type LabelTextRef = TextRef;

package/lib/__templates__/expo/client/heroui/components/list-group/index.ts

@@ -1,17 +0,0 @@
-// Component export
-export { default as ListGroup } from './list-group';
-
-// ClassNames export for external reuse
-export { listGroupClassNames } from './list-group.styles';
-
-// Type exports (named exports for better tree-shaking)
-export type {
-  ListGroupIconProps,
-  ListGroupItemContentProps,
-  ListGroupItemDescriptionProps,
-  ListGroupItemPrefixProps,
-  ListGroupItemProps,
-  ListGroupItemSuffixProps,
-  ListGroupItemTitleProps,
-  ListGroupRootProps,
-} from './list-group.types';

package/lib/__templates__/expo/client/heroui/components/list-group/list-group.constants.ts

@@ -1,17 +0,0 @@
-/**
- * Display names for ListGroup components
- */
-export const DISPLAY_NAME = {
-  ROOT: 'HeroUI.ListGroup.Root',
-  ITEM: 'HeroUI.ListGroup.Item',
-  ITEM_PREFIX: 'HeroUI.ListGroup.ItemPrefix',
-  ITEM_CONTENT: 'HeroUI.ListGroup.ItemContent',
-  ITEM_TITLE: 'HeroUI.ListGroup.ItemTitle',
-  ITEM_DESCRIPTION: 'HeroUI.ListGroup.ItemDescription',
-  ITEM_SUFFIX: 'HeroUI.ListGroup.ItemSuffix',
-};
-
-/**
- * Default icon size for the suffix chevron-right icon (in pixels)
- */
-export const DEFAULT_ICON_SIZE = 16;