@cdx-ui/components 0.3.6 → 0.3.7

package/src/components/ProgressBar/styles.ts

@@ -1,9 +1,40 @@
 import { cva, type VariantProps } from '@cdx-ui/utils';
 
-export const progressBarTrackVariants = cva([
-  'w-full flex-row overflow-hidden rounded-full bg-surface-action-subtle h-1',
-]);
+export const progressBarTrackVariants = cva(
+  ['w-full flex-row overflow-hidden rounded-full bg-surface-neutral-subtle'],
+  {
+    variants: {
+      size: {
+        default: 'h-1.5',
+        large: 'h-2',
+      },
+    },
+    defaultVariants: {
+      size: 'default',
+    },
+  },
+);
 
-export const progressBarIndicatorVariants = cva(['rounded-full bg-surface-action-strong']);
+export const progressBarIndicatorVariants = cva(['rounded-full'], {
+  variants: {
+    color: {
+      action: 'bg-surface-action-strong',
+      danger: 'bg-surface-danger-strong',
+      warning: 'bg-surface-warning-strong',
+      success: 'bg-surface-success-strong',
+      info: 'bg-surface-info-strong',
+      'categorical-1': 'bg-chart-categorical-1',
+      'categorical-2': 'bg-chart-categorical-2',
+      'categorical-3': 'bg-chart-categorical-3',
+      'categorical-4': 'bg-chart-categorical-4',
+      'categorical-5': 'bg-chart-categorical-5',
+      'categorical-6': 'bg-chart-categorical-6',
+    },
+  },
+  defaultVariants: {
+    color: 'action',
+  },
+});
 
 export type ProgressBarTrackVariantProps = VariantProps<typeof progressBarTrackVariants>;
+export type ProgressBarIndicatorVariantProps = VariantProps<typeof progressBarIndicatorVariants>;

package/src/components/Select/index.tsx

@@ -273,6 +273,8 @@ export interface SelectIconProps extends Omit<IconProps, 'children' | 'as' | 'co
    * Omit to apply the symmetric baseline gap.
    */
   position?: IconSlotPosition;
+  /** The element rendered when `asChild` is set. */
+  children?: ReactNode;
 }
 
 const SelectIcon = ({ asChild, className, style, as, position, ...props }: SelectIconProps) => {

package/src/components/chart/hiddenSvgProps.ts

@@ -0,0 +1,15 @@
+import { Platform } from 'react-native';
+
+/**
+ * Hides a decorative `Svg` from assistive technology. On web, react-native-svg renders a raw
+ * `<svg>` without react-native-web's prop filtering, so RN-only accessibility props would reach
+ * the DOM as unknown attributes and log React warnings.
+ */
+export const HIDDEN_SVG_PROPS = Platform.select({
+  web: { 'aria-hidden': true },
+  default: {
+    accessible: false,
+    accessibilityElementsHidden: true,
+    importantForAccessibility: 'no-hide-descendants',
+  },
+} as const);

package/src/components/index.ts

@@ -76,5 +76,6 @@ export { HStack, VStack } from './Stack';
 export * from './Heading';
 export * from './Text';
 export * from './Icon';
+export * from './CountryFlag';
 export * from './IconButton';
 export * from './QuickActionButton';

package/src/styles.css

@@ -1,5 +1,4 @@
 @source './**/*.{ts,tsx}';
-@source '../../data-grid/src/**/*.{ts,tsx}';
 
 /*
  * react-native-web resets every root <Text> to `display: inline`, which stops