@coze-arch/cli 0.0.10 → 0.0.11

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

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