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

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

@@ -1,149 +0,0 @@
-import { StyleSheet } from 'react-native';
-import { tv } from 'tailwind-variants';
-import { combineStyles } from '../../helpers/internal/utils';
-
-const trigger = tv({
-  base: '',
-  variants: {
-    variant: {
-      default:
-        'flex-row items-center justify-between gap-3 py-3.5 px-4 rounded-2xl bg-surface shadow-surface',
-      unstyled: '',
-    },
-    isDisabled: {
-      true: 'opacity-disabled pointer-events-none',
-      false: '',
-    },
-  },
-});
-
-const value = tv({
-  base: 'flex-1 text-base',
-  variants: {
-    isSelected: {
-      true: 'text-foreground',
-      false: 'text-field-placeholder',
-    },
-  },
-});
-
-/**
- * Trigger Indicator style definition
- *
- * @note ANIMATED PROPERTIES (cannot be set via className):
- * The following property is animated and cannot be overridden using Tailwind classes:
- * - `transform` (specifically `rotate`) - Animated for open/close rotation transitions
- *
- * To customize this property, use the `animation` prop on `Select.TriggerIndicator`:
- * ```tsx
- * <Select.TriggerIndicator
- *   animation={{
- *     rotation: { value: [0, -180], springConfig: { damping: 140, stiffness: 1000, mass: 4 } }
- *   }}
- * />
- * ```
- *
- * To completely disable animated styles and apply your own via className or style prop,
- * set `isAnimatedStyleActive={false}` on `Select.TriggerIndicator`.
- */
-const triggerIndicator = tv({
-  base: 'items-center justify-center',
-});
-
-const portal = tv({
-  base: 'absolute inset-0',
-});
-
-/**
- * Overlay style definition
- *
- * @note ANIMATED PROPERTIES (cannot be set via className):
- * The following property is animated and cannot be overridden using Tailwind classes:
- * - `opacity` - Animated for overlay show/hide transitions (idle: 0, open: 1, close: 0)
- *
- * To customize this property, use the `animation` prop on `Select.Overlay`:
- * ```tsx
- * <Select.Overlay
- *   animation={{
- *     opacity: { value: [0, 1, 0] }
- *   }}
- * />
- * ```
- *
- * To completely disable animated styles and apply your own via className or style prop,
- * set `isAnimatedStyleActive={false}` on `Select.Overlay`.
- */
-const overlay = tv({
-  base: 'absolute inset-0',
-});
-
-/**
- * Popover content style definition
- */
-const content = tv({
-  base: 'bg-overlay p-3 rounded-3xl shadow-overlay',
-});
-
-/**
- * Dialog content style definition
- */
-const dialogContent = tv({
-  slots: {
-    wrapper: 'absolute inset-0 justify-center p-5',
-    content: 'bg-overlay p-5 rounded-3xl shadow-overlay',
-  },
-});
-
-/**
- * @note When Select.Content uses `presentation="bottom-sheet"`, it uses `bottomSheetClassNames`
- * from `../bottom-sheet/bottom-sheet.styles` instead of `selectClassNames.content`.
- * See `select.tsx` SelectContentBottomSheet component for usage.
- */
-
-const close = tv({
-  base: '',
-});
-
-const listLabel = tv({
-  base: 'text-sm text-muted font-medium px-2 py-1.5',
-});
-
-const item = tv({
-  base: 'flex-row items-center gap-2 px-2 py-3',
-});
-
-const itemLabel = tv({
-  base: 'flex-1 text-base text-foreground font-medium',
-});
-
-const itemDescription = tv({
-  base: 'text-sm/snug text-muted',
-});
-
-const itemIndicator = tv({
-  base: 'size-5 items-center justify-center',
-});
-
-export const selectClassNames = combineStyles({
-  trigger,
-  portal,
-  overlay,
-  content,
-  dialogContent,
-  close,
-  value,
-  item,
-  itemLabel,
-  itemDescription,
-  itemIndicator,
-  listLabel,
-  triggerIndicator,
-});
-
-export const selectStyleSheet = StyleSheet.create({
-  contentContainer: {
-    borderCurve: 'continuous',
-  },
-});
-
-export type DialogContentFallbackSlots = keyof ReturnType<typeof dialogContent>;