@cdx-ui/components 0.3.6 → 0.3.8

package/src/components/CurrencyFlag/index.tsx

@@ -0,0 +1,71 @@
+import { flags, type FlagCode } from '@cdx-ui/icons/flags';
+import { dataAttributes, mergeDataAttributes } from '@cdx-ui/primitives';
+import { cn } from '@cdx-ui/utils';
+import { Icon, type IconProps } from '../Icon';
+
+export interface CurrencyFlagProps extends Omit<IconProps, 'as' | 'filled' | 'color'> {
+  /** ISO 4217 alphabetic currency code, such as `USD` or `EUR`. */
+  code: string;
+}
+
+/**
+ * Returns the flag code for the country or union that issues an ISO 4217 currency.
+ *
+ * National codes start with the issuer's ISO 3166-1 alpha-2 code (`DKK` → `DK`), so a
+ * currency shared by several countries resolves to its issuer. `EUR` resolves to `EU`.
+ * `X` codes (`XOF`, `XCD`, `XAU`) have no single issuer and resolve to `undefined`, as
+ * do malformed codes.
+ */
+export function currencyFlagCode(code: string): FlagCode | undefined {
+  if (!/^[A-Z]{3}$/.test(code)) return undefined;
+  if (code === 'EUR') return 'EU';
+  // `X` prefixes would otherwise hit user-assigned flags (`XAF` → `XA`, `XCD` → `XC`).
+  if (code.startsWith('X')) return undefined;
+  const region = code.slice(0, 2);
+  return Object.prototype.hasOwnProperty.call(flags, region) ? (region as FlagCode) : undefined;
+}
+
+/**
+ * Renders the flag of the country or union that issues an ISO 4217 currency.
+ *
+ * The flag shows the issuer, not the user's country: `DKK` renders Denmark's flag for
+ * accounts in Greenland too. Use `CountryFlag` with a country code when the flag should
+ * show where the user is. Codes with no single issuer, such as `XOF` and `XCD`, render
+ * nothing and log a warning in development.
+ *
+ * The flag is drawn through `Icon`, so `className` sizing and `asChild` icon slots
+ * apply. Flag artwork keeps its own colors. The flag is decorative unless
+ * `accessibilityLabel` is set.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * import { CurrencyFlag } from '@cdx-ui/components';
+ *
+ * <CurrencyFlag code="USD" />
+ * <CurrencyFlag code="EUR" className="size-6" accessibilityLabel="Euro" />
+ * ```
+ *
+ * @param {string} code - ISO 4217 alphabetic currency code.
+ * @param {string} className - Utility classes for size and placement, merged after the default `size-5` box.
+ * @param {string} accessibilityLabel - When set, the flag is announced as an image with this name.
+ * @param {object} style - Style overrides passed through to the icon.
+ * @param {string} data-testid - Test identifier forwarded to the rendered icon.
+ */
+export function CurrencyFlag({ code, className, ...props }: CurrencyFlagProps) {
+  const flagCode = currencyFlagCode(code);
+  if (!flagCode) {
+    if (__DEV__) console.warn(`CurrencyFlag: no flag for currency "${code}"`);
+    return null;
+  }
+  return (
+    <Icon
+      as={flags[flagCode]}
+      className={cn('size-5', className)}
+      {...props}
+      {...mergeDataAttributes(props, dataAttributes({ slot: 'currency-flag' }))}
+    />
+  );
+}
+
+CurrencyFlag.displayName = 'CurrencyFlag';

package/src/components/CurrencyInput/index.tsx

@@ -62,6 +62,7 @@ export const CurrencyInput = forwardRef<TextInput, CurrencyInputProps>(
       currencySymbol = '$',
       variant = 'ghost',
       size = 'default',
+      align,
       isDisabled,
       isInvalid,
       isReadOnly,
@@ -206,7 +207,7 @@ export const CurrencyInput = forwardRef<TextInput, CurrencyInputProps>(
           onFocus={handleFocus}
           onBlur={handleBlur}
           className={cn(
-            currencyInputFieldVariants({ variant, size }),
+            currencyInputFieldVariants({ variant, size, align }),
             isEmpty ? 'text-content-tertiary' : 'text-content-primary',
           )}
         />

package/src/components/CurrencyInput/styles.ts

@@ -1,3 +1,4 @@
+import { Platform } from 'react-native';
 import { cn, cva } from '@cdx-ui/utils';
 import { DISABLED_CURSOR } from '../../styles/constants';
 import { inputFieldVariants, inputRootVariants } from '../Input/styles';
@@ -15,6 +16,11 @@ export interface CurrencyInputVariantProps {
    * @default 'default'
    */
   size?: 'default' | 'small';
+  /**
+   * Horizontal alignment of the amount. Defaults to `center` on `ghost`. On `outline`, the amount
+   * stays at the start of the field until `align` is set.
+   */
+  align?: 'center' | 'end';
 }
 
 const currencyInputGhostRootVariants = cva(
@@ -37,9 +43,20 @@ const currencyInputGhostRootVariants = cva(
   },
 );
 
+// TextInput only accepts textAlign left, center, and right. `text-end` is valid CSS, so web
+// uses it, but native ignores it and the amount stays at the start in LTR. Direction
+// variants compile to left/right, matching Table's native text alignment.
+const currencyInputAlignClass = {
+  center: 'text-center',
+  end: Platform.select({
+    web: 'text-end',
+    default: 'ltr:text-right rtl:text-left',
+  }),
+} as const;
+
 const currencyInputGhostFieldVariants = cva(
   [
-    'w-full bg-transparent p-0 text-center',
+    'w-full bg-transparent p-0',
     'placeholder:text-content-tertiary',
     'web:outline-none',
     'data-[invalid=true]:text-content-danger',
@@ -71,8 +88,17 @@ export const currencyInputRootVariants = ({
 export const currencyInputFieldVariants = ({
   variant = 'ghost',
   size = 'default',
-}: CurrencyInputVariantProps = {}): string =>
-  variant === 'outline' ? inputFieldVariants({ size }) : currencyInputGhostFieldVariants({ size });
+  align,
+}: CurrencyInputVariantProps = {}): string => {
+  const resolvedAlign = align ?? (variant === 'outline' ? undefined : 'center');
+
+  return cn(
+    variant === 'outline'
+      ? inputFieldVariants({ size })
+      : currencyInputGhostFieldVariants({ size }),
+    resolvedAlign ? currencyInputAlignClass[resolvedAlign] : undefined,
+  );
+};
 
 // Figma keeps the symbol at body-md on every viewport; only the amount grows to 16px on web <600px.
 export const currencyInputPrefixVariants = cva(

package/src/components/Input/index.tsx

@@ -160,6 +160,8 @@ export interface InputIconProps extends Omit<IconProps, 'children' | 'as' | 'col
    * case the consumer's substituted element is rendered instead.
    */
   as?: IconProps['as'];
+  /** The element rendered when `asChild` is set. */
+  children?: ReactNode;
 }
 
 const InputIcon = ({ asChild, className, style, as, ...props }: InputIconProps) => {

package/src/components/LineChart/index.tsx

@@ -26,6 +26,7 @@ import {
   type ChartInspectorTarget,
 } from '../chart/ChartInspector';
 import { resolveChartLocaleText, resolveValueFormatter } from '../chart/format';
+import { HIDDEN_SVG_PROPS } from '../chart/hiddenSvgProps';
 import { resolveChartBox } from '../chart/size';
 import type {
   ChartAxis,
@@ -398,9 +399,7 @@ function LineChartInner<TRow extends object>(
         width={axisWidth}
         height={viewportHeight}
         viewBox={`0 0 ${String(axisWidth)} ${String(content.height)}`}
-        accessible={false}
-        accessibilityElementsHidden
-        importantForAccessibility="no-hide-descendants"
+        {...HIDDEN_SVG_PROPS}
       >
         {ticks}
       </Svg>
@@ -425,9 +424,7 @@ function LineChartInner<TRow extends object>(
             height={viewportHeight}
             viewBox={`0 0 ${String(plotWidth + bleed)} ${String(content.height)}`}
             pointerEvents="none"
-            accessible={false}
-            accessibilityElementsHidden
-            importantForAccessibility="no-hide-descendants"
+            {...HIDDEN_SVG_PROPS}
           >
             <G transform={`translate(${String(-axisWidth)}, 0)`}>{plot}</G>
           </Svg>

package/src/components/ProgressBar/index.tsx

@@ -1,40 +1,92 @@
-import { forwardRef } from 'react';
+import { forwardRef, useMemo } from 'react';
 import { View, type ViewProps } from 'react-native';
-import { ProgressBarRoot, ProgressBarIndicator, type IProgressProps } from '@cdx-ui/primitives';
-import { cn } from '@cdx-ui/utils';
+import {
+  ProgressBarRoot,
+  ProgressBarIndicator,
+  dataAttributes,
+  mergeDataAttributes,
+  type IProgressProps,
+} from '@cdx-ui/primitives';
+import { cn, ParentContext, useParentContext, useStyleContext } from '@cdx-ui/utils';
 import {
   progressBarIndicatorVariants,
   progressBarTrackVariants,
+  type ProgressBarIndicatorVariantProps,
   type ProgressBarTrackVariantProps,
 } from './styles';
 
+const SCOPE = 'PROGRESS_BAR';
+
+export type ProgressBarSize = NonNullable<ProgressBarTrackVariantProps['size']>;
+export type ProgressBarColor = NonNullable<ProgressBarIndicatorVariantProps['color']>;
+
+interface ProgressBarStyleContext {
+  size?: ProgressBarSize;
+  color?: ProgressBarColor;
+}
+
+const useProgressBarStyleContext = () => useStyleContext(SCOPE) as ProgressBarStyleContext;
+
 export interface ProgressBarProps extends IProgressProps, ProgressBarTrackVariantProps {
+  /**
+   * Track height. Inherited by `ProgressBar.Indicator` via style context.
+   * @default 'default'
+   */
+  size?: ProgressBarSize;
+  /**
+   * Indicator fill color. Inherited by `ProgressBar.Indicator` via style context.
+   * The track is always `surface-neutral-subtle`.
+   * @default 'action'
+   */
+  color?: ProgressBarColor;
+  /** Additional Uniwind/Tailwind classes, merged after the track's own styles. */
   readonly className?: string;
 }
 
 export interface ProgressBarIndicatorProps extends ViewProps {
+  /** Additional Uniwind/Tailwind classes, merged after the indicator's own styles. */
   readonly className?: string;
 }
 
 const ProgressBarRootComponent = forwardRef<View, ProgressBarProps>(
-  ({ className, style, ...props }, ref) => {
-    const trackClass = cn(progressBarTrackVariants(), className);
+  ({ className, style, size = 'default', color = 'action', children, ...props }, ref) => {
+    const trackClass = cn(progressBarTrackVariants({ size }), className);
+
+    const parent = useParentContext();
+    const ctx = useMemo(() => ({ ...parent, [SCOPE]: { size, color } }), [parent, size, color]);
 
-    return <ProgressBarRoot ref={ref} className={trackClass} style={style} {...props} />;
+    return (
+      <ParentContext.Provider value={ctx}>
+        <ProgressBarRoot
+          ref={ref}
+          className={trackClass}
+          style={style}
+          {...props}
+          {...mergeDataAttributes(props, dataAttributes({ slot: 'progress-bar' }))}
+        >
+          {children}
+        </ProgressBarRoot>
+      </ParentContext.Provider>
+    );
   },
 );
 
 ProgressBarRootComponent.displayName = 'ProgressBar';
 
 const ProgressBarIndicatorComponent = forwardRef<View, ProgressBarIndicatorProps>(
-  ({ className, style, ...props }, ref) => (
-    <ProgressBarIndicator
-      ref={ref}
-      className={cn(progressBarIndicatorVariants(), className)}
-      style={style}
-      {...props}
-    />
-  ),
+  ({ className, style, ...props }, ref) => {
+    const { color } = useProgressBarStyleContext();
+
+    return (
+      <ProgressBarIndicator
+        ref={ref}
+        className={cn(progressBarIndicatorVariants({ color }), className)}
+        style={style}
+        {...props}
+        {...mergeDataAttributes(props, dataAttributes({ slot: 'progress-bar-indicator' }))}
+      />
+    );
+  },
 );
 
 ProgressBarIndicatorComponent.displayName = 'ProgressBar.Indicator';

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,7 @@ export { HStack, VStack } from './Stack';
 export * from './Heading';
 export * from './Text';
 export * from './Icon';
+export * from './CountryFlag';
+export * from './CurrencyFlag';
 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