@cdx-ui/components 0.0.1-alpha.29 → 0.0.1-alpha.30

package/src/components/Select/SelectTriggerHost.web.tsx

@@ -0,0 +1,136 @@
+import React, { forwardRef } from 'react';
+import { StyleSheet } from 'react-native';
+import type { PressableProps } from 'react-native';
+
+export type SelectTriggerHostProps = PressableProps & { className?: string };
+
+/** Props that must not be forwarded to a DOM `<button>`. */
+const OMIT = new Set<string>([
+  'hitSlop',
+  'pressRetentionOffset',
+  'android_ripple',
+  'android_disableSound',
+  'unstable_pressDelay',
+  'onLongPress',
+  'delayLongPress',
+  'onPress',
+  'onPressIn',
+  'onPressOut',
+  'onHoverIn',
+  'onHoverOut',
+  'disabled',
+  'style',
+  'className',
+  'testID',
+  'children',
+  'accessible',
+  'accessibilityActions',
+  'accessibilityElementsHidden',
+  'accessibilityHint',
+  'accessibilityIgnoresInvertColors',
+  'accessibilityLabel',
+  'accessibilityLabelledBy',
+  'accessibilityLiveRegion',
+  'accessibilityRole',
+  'accessibilityState',
+  'accessibilityValue',
+  'accessibilityViewIsModal',
+  'importantForAccessibility',
+  'needsOffscreenAlphaCompositing',
+  'collapsable',
+  'shouldRasterizeIOS',
+  'removeClippedSubviews',
+  'onAccessibilityAction',
+  'onAccessibilityEscape',
+  'onAccessibilityTap',
+]);
+
+function resolveChildren(children: PressableProps['children']): React.ReactNode {
+  if (typeof children === 'function') {
+    return children({ pressed: false });
+  }
+  return children;
+}
+
+function filterDomProps(rest: object): React.ButtonHTMLAttributes<HTMLButtonElement> {
+  const entries = Object.entries(rest).filter(([key]) => !OMIT.has(key));
+  return Object.fromEntries(entries) as React.ButtonHTMLAttributes<HTMLButtonElement>;
+}
+
+/** UA `<button>` defaults (centered text, inline sizing) fight our flex + `justify-between` layout. */
+const webButtonLayoutStyle: React.CSSProperties = {
+  display: 'flex',
+  flexDirection: 'row',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  width: '100%',
+  minWidth: 0,
+  textAlign: 'start',
+  boxSizing: 'border-box',
+  margin: 0,
+  font: 'inherit',
+  lineHeight: 'normal',
+  WebkitAppearance: 'none',
+  appearance: 'none',
+};
+
+/**
+ * Native `<button type="button">` so the trigger is HTML-labelable (`<label htmlFor>` focuses it).
+ * `Pressable` on web is a non-labelable div; no extra refs are needed for label association.
+ */
+export const SelectTriggerHost = forwardRef<HTMLButtonElement, SelectTriggerHostProps>(
+  function SelectTriggerHost(props, ref) {
+    const {
+      children,
+      onPress,
+      onPressIn,
+      onPressOut,
+      onHoverIn,
+      onHoverOut,
+      disabled,
+      style,
+      className,
+      testID,
+      ...rest
+    } = props;
+
+    const domProps = filterDomProps(rest);
+    const flattened = StyleSheet.flatten(style) as React.CSSProperties | undefined;
+
+    return (
+      <button
+        ref={ref}
+        {...domProps}
+        type="button"
+        disabled={!!disabled}
+        className={typeof className === 'string' ? className : undefined}
+        style={{ ...webButtonLayoutStyle, ...(flattened ?? {}) }}
+        data-testid={testID}
+        onClick={(e) => {
+          if (!disabled) {
+            onPress?.(e as unknown as Parameters<NonNullable<PressableProps['onPress']>>[0]);
+          }
+        }}
+        onPointerDown={(e) => {
+          onPressIn?.(e as unknown as Parameters<NonNullable<PressableProps['onPressIn']>>[0]);
+        }}
+        onPointerUp={(e) => {
+          onPressOut?.(e as unknown as Parameters<NonNullable<PressableProps['onPressOut']>>[0]);
+        }}
+        onPointerCancel={(e) => {
+          onPressOut?.(e as unknown as Parameters<NonNullable<PressableProps['onPressOut']>>[0]);
+        }}
+        onMouseEnter={(e) => {
+          onHoverIn?.(e as unknown as Parameters<NonNullable<PressableProps['onHoverIn']>>[0]);
+        }}
+        onMouseLeave={(e) => {
+          onHoverOut?.(e as unknown as Parameters<NonNullable<PressableProps['onHoverOut']>>[0]);
+        }}
+      >
+        {resolveChildren(children)}
+      </button>
+    );
+  },
+);
+
+SelectTriggerHost.displayName = 'SelectTriggerHost';

package/src/components/Select/index.tsx

@@ -12,6 +12,7 @@ import {
 } from '@cdx-ui/primitives';
 import { cn, useStyleContext, withStyleContext } from '@cdx-ui/utils';
 import { Icon, IconProps } from '../Icon';
+import { SelectTriggerHost } from './SelectTriggerHost';
 import {
   type SelectVariantProps,
   selectContentVariants,
@@ -30,7 +31,7 @@ const useSelectStyleContext = () => useStyleContext(SCOPE) as SelectVariantProps
 
 const SelectPrimitive = createSelect({
   Root,
-  Trigger: Pressable,
+  Trigger: SelectTriggerHost,
   Value: Text,
   Icon: View,
   Content: View,
@@ -212,5 +213,3 @@ export const Select = Object.assign(SelectRoot, {
   Item: SelectItem,
   ItemLabel: SelectItemLabel,
 }) as SelectCompoundComponent;
-
-export type { SelectVariantProps } from './styles';

package/src/components/Select/styles.ts

@@ -19,7 +19,7 @@ import {
 
 export const selectTriggerVariants = cva(
   [
-    'flex-row items-center justify-between',
+    'flex w-full min-w-0 flex-row items-center justify-between text-start',
     RADIUS_SM,
     SHADOW_SM,
     TRANSITION_COLORS,
@@ -61,7 +61,7 @@ export const selectTriggerVariants = cva(
 
 export const selectValueVariants = cva(
   [
-    'flex-1',
+    'min-w-0 flex-1 text-start',
     'data-[placeholder=true]:text-slate-400',
     'data-[invalid=true]:text-red-600',
     COLOR_TEXT_PRIMARY,
@@ -82,7 +82,11 @@ export const selectValueVariants = cva(
 // ── Icon ────────────────────────────────────────────────────
 
 export const selectIconVariants = cva(
-  ['items-center justify-center', COLOR_TEXT_MUTED, 'data-[invalid=true]:text-red-500'],
+  [
+    'shrink-0 items-center justify-center self-center',
+    COLOR_TEXT_MUTED,
+    'data-[invalid=true]:text-red-500',
+  ],
   {
     variants: {
       size: {

package/src/components/Switch/index.tsx

@@ -9,5 +9,3 @@ export interface SwitchProps extends ISwitchProps, SwitchVariantProps {
 }
 
 export const Switch = SwitchPrimitive;
-
-export type { SwitchVariantProps };

package/src/components/index.ts

@@ -7,6 +7,7 @@ export * from './Card';
 export * from './Checkbox';
 export * from './Chip';
 export * from './Dialog';
+export * from './Form';
 export * from './Image';
 export * from './Input';
 export * from './Link';

package/src/index.ts

@@ -1 +1,4 @@
+/// <reference types="uniwind/types" preserve="true" />
 export * from './components';
+export { View, ScrollView, KeyboardAvoidingView } from 'react-native';
+export { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context';