@coze-arch/cli 0.0.10 → 0.0.11

package/lib/__templates__/expo/client/heroui/primitives/tabs/tabs.types.ts

@@ -0,0 +1,77 @@
+import type {
+  ForceMountable,
+  PressableRef,
+  SlottablePressableProps,
+  SlottableTextProps,
+  SlottableViewProps,
+  TextRef,
+  ViewRef,
+} from '../../helpers/internal/types';
+
+/**
+ * Props for the Tabs root component
+ */
+type RootProps = SlottableViewProps & {
+  /** Currently active tab value */
+  value: string;
+  /** Callback when the active tab changes */
+  onValueChange: (value: string) => void;
+};
+
+/** Ref type for Tabs root */
+type RootRef = ViewRef;
+
+/** Props for the Tabs list container */
+type ListProps = SlottableViewProps;
+/** Ref type for Tabs list */
+type ListRef = ViewRef;
+
+/**
+ * Props for individual tab triggers
+ */
+type TriggerProps = SlottablePressableProps & {
+  /** Unique value to identify this tab */
+  value: string;
+};
+/** Ref type for tab trigger */
+type TriggerRef = PressableRef;
+
+/**
+ * Props for tab trigger labels
+ */
+type LabelProps = SlottableTextProps;
+/** Ref type for tab label */
+type LabelRef = TextRef;
+
+/**
+ * Props for tab indicator
+ */
+type IndicatorProps = SlottableViewProps;
+/** Ref type for tab indicator */
+type IndicatorRef = ViewRef;
+
+/**
+ * Props for tab content panels
+ */
+type ContentProps = SlottableViewProps &
+  ForceMountable & {
+    /** Value of the tab this content belongs to */
+    value: string;
+  };
+/** Ref type for tab content */
+type ContentRef = ViewRef;
+
+export type {
+  ContentProps,
+  ContentRef,
+  IndicatorProps,
+  IndicatorRef,
+  LabelProps,
+  LabelRef,
+  ListProps,
+  ListRef,
+  RootProps,
+  RootRef,
+  TriggerProps,
+  TriggerRef,
+};

package/lib/__templates__/expo/client/heroui/primitives/tag-group/index.ts

@@ -0,0 +1,2 @@
+export * from './tag-group';
+export * from './tag-group.types';

package/lib/__templates__/expo/client/heroui/primitives/tag-group/tag-group.tsx

@@ -0,0 +1,324 @@
+import {
+  createContext,
+  forwardRef,
+  useCallback,
+  useContext,
+  useMemo,
+  useState,
+} from 'react';
+import {
+  Pressable,
+  Text,
+  View,
+  type GestureResponderEvent,
+} from 'react-native';
+import * as Slot from '../slot';
+import type {
+  ItemLabelProps,
+  ItemLabelRef,
+  ItemProps,
+  ItemRef,
+  ListProps,
+  ListRef,
+  RemoveButtonProps,
+  RemoveButtonRef,
+  RootContextValue,
+  RootProps,
+  RootRef,
+  TagKey,
+} from './tag-group.types';
+
+// --------------------------------------------------
+// Root Context
+// --------------------------------------------------
+
+const RootContext = createContext<RootContextValue | null>(null);
+
+/**
+ * Hook to access TagGroup root context.
+ * Provides selection state, disabled state, and remove handler.
+ *
+ * @throws Error if used outside a TagGroup Root component
+ */
+export function useRootContext() {
+  const context = useContext(RootContext);
+
+  if (!context) {
+    throw new Error(
+      'TagGroup compound components cannot be rendered outside the TagGroup component'
+    );
+  }
+
+  return context;
+}
+
+// --------------------------------------------------
+// Item Context
+// --------------------------------------------------
+
+interface IItemContext {
+  id: TagKey;
+  isSelected: boolean;
+  isDisabled: boolean;
+  allowsRemoving: boolean;
+}
+
+const ItemContext = createContext<IItemContext | null>(null);
+
+/**
+ * Hook to access TagGroup Item context.
+ * Provides the item's id, selected state, disabled state, and remove capability.
+ *
+ * @throws Error if used outside a TagGroup Item component
+ */
+export function useItemContext() {
+  const context = useContext(ItemContext);
+
+  if (!context) {
+    throw new Error(
+      'TagGroup.Item compound components cannot be rendered outside TagGroup.Item'
+    );
+  }
+
+  return context;
+}
+
+// --------------------------------------------------
+// Root
+// --------------------------------------------------
+
+const Root = forwardRef<RootRef, RootProps>(
+  (
+    {
+      asChild,
+      selectionMode = 'none',
+      selectedKeys: selectedKeysProp,
+      defaultSelectedKeys,
+      onSelectionChange: onSelectionChangeProp,
+      disabledKeys: disabledKeysProp,
+      isDisabled = false,
+      isInvalid = false,
+      isRequired = false,
+      onRemove,
+      ...viewProps
+    },
+    ref
+  ) => {
+    const isControlled = selectedKeysProp !== undefined;
+
+    const [internalSelectedKeys, setInternalSelectedKeys] = useState<
+      Set<TagKey>
+    >(() => new Set(defaultSelectedKeys ?? []));
+
+    const selectedKeys = useMemo(
+      () =>
+        isControlled ? new Set(selectedKeysProp ?? []) : internalSelectedKeys,
+      [isControlled, selectedKeysProp, internalSelectedKeys]
+    );
+
+    const disabledKeys = useMemo(
+      () => new Set(disabledKeysProp ?? []),
+      [disabledKeysProp]
+    );
+
+    const onSelectionChange = useCallback(
+      (keys: Set<TagKey>) => {
+        if (!isControlled) {
+          setInternalSelectedKeys(keys);
+        }
+        onSelectionChangeProp?.(keys);
+      },
+      [isControlled, onSelectionChangeProp]
+    );
+
+    const contextValue = useMemo<RootContextValue>(
+      () => ({
+        selectionMode,
+        selectedKeys,
+        onSelectionChange,
+        disabledKeys,
+        isDisabled,
+        isInvalid,
+        isRequired,
+        onRemove,
+      }),
+      [
+        selectionMode,
+        selectedKeys,
+        onSelectionChange,
+        disabledKeys,
+        isDisabled,
+        isInvalid,
+        isRequired,
+        onRemove,
+      ]
+    );
+
+    const Component = asChild ? Slot.View : View;
+
+    return (
+      <RootContext.Provider value={contextValue}>
+        <Component ref={ref} {...viewProps} />
+      </RootContext.Provider>
+    );
+  }
+);
+
+Root.displayName = 'HeroUINative.Primitive.TagGroup.Root';
+
+// --------------------------------------------------
+// List
+// --------------------------------------------------
+
+const List = forwardRef<ListRef, ListProps>(({ asChild, ...props }, ref) => {
+  const Component = asChild ? Slot.View : View;
+
+  return <Component ref={ref} role="list" {...props} />;
+});
+
+List.displayName = 'HeroUINative.Primitive.TagGroup.List';
+
+// --------------------------------------------------
+// Item
+// --------------------------------------------------
+
+const Item = forwardRef<ItemRef, ItemProps>(
+  (
+    {
+      asChild,
+      id: itemId,
+      isDisabled: isDisabledProp = false,
+      onPress: onPressProp,
+      ...props
+    },
+    ref
+  ) => {
+    const {
+      selectionMode,
+      selectedKeys,
+      onSelectionChange,
+      disabledKeys,
+      isDisabled: isGroupDisabled,
+      onRemove,
+    } = useRootContext();
+
+    const effectiveDisabled =
+      isGroupDisabled || isDisabledProp || disabledKeys.has(itemId);
+    const isSelected = selectedKeys.has(itemId);
+    const allowsRemoving = onRemove !== undefined;
+
+    const onPress = useCallback(
+      (ev: GestureResponderEvent) => {
+        if (effectiveDisabled) return;
+
+        if (selectionMode === 'single') {
+          const newKeys = isSelected
+            ? new Set<TagKey>()
+            : new Set<TagKey>([itemId]);
+          onSelectionChange(newKeys);
+        } else if (selectionMode === 'multiple') {
+          const newKeys = new Set(selectedKeys);
+          if (isSelected) {
+            newKeys.delete(itemId);
+          } else {
+            newKeys.add(itemId);
+          }
+          onSelectionChange(newKeys);
+        }
+
+        onPressProp?.(ev);
+      },
+      [
+        effectiveDisabled,
+        selectionMode,
+        isSelected,
+        itemId,
+        selectedKeys,
+        onSelectionChange,
+        onPressProp,
+      ]
+    );
+
+    const itemContextValue = useMemo<IItemContext>(
+      () => ({
+        id: itemId,
+        isSelected,
+        isDisabled: effectiveDisabled,
+        allowsRemoving,
+      }),
+      [itemId, isSelected, effectiveDisabled, allowsRemoving]
+    );
+
+    const Component = asChild ? Slot.Pressable : Pressable;
+
+    return (
+      <ItemContext.Provider value={itemContextValue}>
+        <Component
+          ref={ref}
+          role="listitem"
+          aria-selected={isSelected}
+          disabled={effectiveDisabled}
+          accessibilityState={{
+            selected: isSelected,
+            disabled: effectiveDisabled,
+          }}
+          onPress={onPress}
+          {...props}
+        />
+      </ItemContext.Provider>
+    );
+  }
+);
+
+Item.displayName = 'HeroUINative.Primitive.TagGroup.Item';
+
+// --------------------------------------------------
+// ItemLabel
+// --------------------------------------------------
+
+const ItemLabel = forwardRef<ItemLabelRef, ItemLabelProps>(
+  ({ asChild, ...props }, ref) => {
+    const Component = asChild ? Slot.Text : Text;
+
+    return <Component ref={ref} {...props} />;
+  }
+);
+
+ItemLabel.displayName = 'HeroUINative.Primitive.TagGroup.ItemLabel';
+
+// --------------------------------------------------
+// RemoveButton
+// --------------------------------------------------
+
+const RemoveButton = forwardRef<RemoveButtonRef, RemoveButtonProps>(
+  ({ asChild, onPress: onPressProp, ...props }, ref) => {
+    const { onRemove } = useRootContext();
+    const { id, isDisabled } = useItemContext();
+
+    const onPress = useCallback(
+      (ev: GestureResponderEvent) => {
+        if (isDisabled) return;
+        onRemove?.(new Set([id]));
+        onPressProp?.(ev);
+      },
+      [isDisabled, onRemove, id, onPressProp]
+    );
+
+    const Component = asChild ? Slot.Pressable : Pressable;
+
+    return (
+      <Component
+        ref={ref}
+        role="button"
+        aria-label="Remove"
+        disabled={isDisabled}
+        onPress={onPress}
+        {...props}
+      />
+    );
+  }
+);
+
+RemoveButton.displayName = 'HeroUINative.Primitive.TagGroup.RemoveButton';
+
+export { Item, ItemLabel, List, RemoveButton, Root };

package/lib/__templates__/expo/client/heroui/primitives/tag-group/tag-group.types.ts

@@ -0,0 +1,119 @@
+import type {
+  PressableRef,
+  SlottablePressableProps,
+  SlottableTextProps,
+  SlottableViewProps,
+  TextRef,
+  ViewRef,
+} from '../../helpers/internal/types';
+
+/** Key type for identifying tags within a TagGroup */
+type TagKey = string | number;
+
+/** Selection mode for the TagGroup */
+type SelectionMode = 'none' | 'single' | 'multiple';
+
+/**
+ * Props for the TagGroup root component.
+ * Manages selection state, disabled keys, and remove functionality.
+ *
+ * @extends SlottableViewProps Inherits view props with asChild support
+ */
+type RootProps = SlottableViewProps & {
+  /** The type of selection allowed in the tag group @default "none" */
+  selectionMode?: SelectionMode;
+  /** The currently selected keys (controlled) */
+  selectedKeys?: Iterable<TagKey>;
+  /** The initial selected keys (uncontrolled) */
+  defaultSelectedKeys?: Iterable<TagKey>;
+  /** Handler called when the selection changes */
+  onSelectionChange?: (keys: Set<TagKey>) => void;
+  /** Keys of tags that should be disabled */
+  disabledKeys?: Iterable<TagKey>;
+  /** Whether the entire tag group is disabled */
+  isDisabled?: boolean;
+  /** Whether the tag group is in an invalid state (e.g. form validation) */
+  isInvalid?: boolean;
+  /** Whether the tag group is required (e.g. form validation) */
+  isRequired?: boolean;
+  /** Handler called when tags are removed */
+  onRemove?: (keys: Set<TagKey>) => void;
+};
+
+/**
+ * Root context value for TagGroup.
+ * Derived from RootProps with internal Set representation for key collections.
+ */
+type RootContextValue = Required<
+  Pick<RootProps, 'selectionMode' | 'isDisabled' | 'isInvalid' | 'isRequired'>
+> &
+  Pick<RootProps, 'onRemove'> & {
+    selectedKeys: Set<TagKey>;
+    disabledKeys: Set<TagKey>;
+    onSelectionChange: NonNullable<RootProps['onSelectionChange']>;
+  };
+
+/**
+ * Props for the TagGroup list container component.
+ *
+ * @extends SlottableViewProps Inherits view props with asChild support
+ */
+type ListProps = SlottableViewProps;
+
+/**
+ * Props for an individual tag item component.
+ *
+ * @extends SlottablePressableProps Inherits pressable props with asChild support
+ */
+type ItemProps = Omit<SlottablePressableProps, 'id'> & {
+  /** Unique identifier for this tag */
+  id: TagKey;
+  /** Whether this specific tag is disabled */
+  isDisabled?: boolean;
+};
+
+/**
+ * Props for the tag item label component.
+ * Renders the text content of a tag and provides accessibility labeling.
+ *
+ * @extends SlottableTextProps Inherits text props with asChild support
+ */
+type ItemLabelProps = SlottableTextProps;
+
+/**
+ * Props for the tag remove button component.
+ *
+ * @extends SlottablePressableProps Inherits pressable props with asChild support
+ */
+type RemoveButtonProps = SlottablePressableProps;
+
+/** Reference type for the TagGroup root component */
+type RootRef = ViewRef;
+
+/** Reference type for the TagGroup list component */
+type ListRef = ViewRef;
+
+/** Reference type for the tag item component */
+type ItemRef = PressableRef;
+
+/** Reference type for the tag item label component */
+type ItemLabelRef = TextRef;
+
+/** Reference type for the tag remove button component */
+type RemoveButtonRef = PressableRef;
+
+export type {
+  ItemLabelProps,
+  ItemLabelRef,
+  ItemProps,
+  ItemRef,
+  ListProps,
+  ListRef,
+  RemoveButtonProps,
+  RemoveButtonRef,
+  RootContextValue,
+  RootProps,
+  RootRef,
+  SelectionMode,
+  TagKey,
+};

package/lib/__templates__/expo/client/heroui/primitives/toast/index.ts

@@ -0,0 +1,2 @@
+export * from './toast';
+export * from './toast.types';

package/lib/__templates__/expo/client/heroui/primitives/toast/toast.tsx

@@ -0,0 +1,138 @@
+import { createContext, forwardRef, useContext, useId } from 'react';
+import {
+  Pressable,
+  Text,
+  View,
+  type GestureResponderEvent,
+} from 'react-native';
+import * as Slot from '../slot';
+import type {
+  ActionProps,
+  ActionRef,
+  CloseProps,
+  CloseRef,
+  DescriptionProps,
+  DescriptionRef,
+  RootContext,
+  RootProps,
+  RootRef,
+  TitleProps,
+  TitleRef,
+} from './toast.types';
+
+const ToastContext = createContext<RootContext | null>(null);
+
+const Root = forwardRef<RootRef, RootProps>(
+  ({ asChild, id, ...viewProps }, ref) => {
+    const generatedId = useId();
+    const nativeID = id || generatedId;
+
+    const Component = asChild ? Slot.View : View;
+    return (
+      <ToastContext.Provider
+        value={{
+          nativeID,
+        }}
+      >
+        <Component
+          ref={ref}
+          role="status"
+          aria-live="polite"
+          aria-atomic={true}
+          nativeID={nativeID}
+          {...viewProps}
+        />
+      </ToastContext.Provider>
+    );
+  }
+);
+
+function useRootContext() {
+  const context = useContext(ToastContext);
+  if (!context) {
+    throw new Error(
+      'Toast compound components cannot be rendered outside the Toast component'
+    );
+  }
+  return context;
+}
+
+Root.displayName = 'HeroUINative.Primitive.Toast.Root';
+
+// --------------------------------------------------
+
+const Title = forwardRef<TitleRef, TitleProps>((props, ref) => {
+  const { nativeID } = useRootContext();
+  return (
+    <Text
+      ref={ref}
+      role="heading"
+      aria-level={3}
+      nativeID={`${nativeID}_label`}
+      {...props}
+    />
+  );
+});
+
+Title.displayName = 'HeroUINative.Primitive.Toast.Title';
+
+// --------------------------------------------------
+
+const Description = forwardRef<DescriptionRef, DescriptionProps>(
+  (props, ref) => {
+    const { nativeID } = useRootContext();
+    return <Text ref={ref} nativeID={`${nativeID}_desc`} {...props} />;
+  }
+);
+
+Description.displayName = 'HeroUINative.Primitive.Toast.Description';
+
+// --------------------------------------------------
+
+const Action = forwardRef<ActionRef, ActionProps>(
+  ({ asChild, altText, disabled = false, ...props }, ref) => {
+    const Component = asChild ? Slot.Pressable : Pressable;
+    return (
+      <Component
+        ref={ref}
+        role="button"
+        aria-disabled={disabled ?? undefined}
+        aria-label={altText}
+        disabled={disabled ?? undefined}
+        {...props}
+      />
+    );
+  }
+);
+
+Action.displayName = 'HeroUINative.Primitive.Toast.Action';
+
+// --------------------------------------------------
+
+const Close = forwardRef<CloseRef, CloseProps>(
+  ({ asChild, disabled = false, onPress: onPressProp, ...props }, ref) => {
+    function onPress(ev: GestureResponderEvent) {
+      if (disabled) return;
+      onPressProp?.(ev);
+    }
+
+    const Component = asChild ? Slot.Pressable : Pressable;
+    return (
+      <Component
+        ref={ref}
+        role="button"
+        aria-label="Close"
+        aria-disabled={disabled ?? undefined}
+        onPress={onPress}
+        disabled={disabled ?? undefined}
+        {...props}
+      />
+    );
+  }
+);
+
+Close.displayName = 'HeroUINative.Primitive.Toast.Close';
+
+// --------------------------------------------------
+
+export { Action, Close, Description, Root, Title, useRootContext };