@coze-arch/cli 0.0.10 → 0.0.11

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

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

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

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

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

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

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