@cdx-ui/components 0.3.5 → 0.3.7

package/src/components/BarChart/styles.ts

@@ -0,0 +1,31 @@
+import { cva, type VariantProps } from '@cdx-ui/utils';
+import { CHART_DIMENSIONS, resolveChartBox } from '../chart/size';
+import type { ChartSize } from '../chart/types';
+
+export const barChartRootVariants = cva('w-full max-w-full items-center gap-4');
+
+export const barChartLegendVariants = cva(
+  'max-w-full flex-row flex-wrap items-center justify-center gap-x-4 gap-y-2',
+);
+
+export const barChartLegendItemVariants = cva('flex-row items-center gap-1.5');
+
+export const barChartLegendLabelVariants = cva('body-sm text-content-primary', {
+  variants: {
+    selected: {
+      true: 'font-medium text-content-primary',
+      false: '',
+    },
+  },
+  defaultVariants: {
+    selected: false,
+  },
+});
+
+export type BarChartLegendLabelVariantProps = VariantProps<typeof barChartLegendLabelVariants>;
+
+export const BAR_CHART_DIMENSIONS = CHART_DIMENSIONS;
+export type BarChartSize = ChartSize;
+export const resolveBarChartBox = resolveChartBox;
+
+export const BAR_RADIUS = 6;

package/src/components/Button/index.tsx

@@ -109,7 +109,7 @@ const ButtonRoot = forwardRef<View, ButtonProps>(
           className={computedClassName}
           style={style}
           {...props}
-          {...mergeDataAttributes(props, dataAttributes({ slot: 'button' }))}
+          {...mergeDataAttributes(dataAttributes({ slot: 'button' }), props)}
         >
           {children}
         </ButtonRootPrimitive>

package/src/components/CountryFlag/index.tsx

@@ -0,0 +1,53 @@
+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 type { FlagCode };
+
+export interface CountryFlagProps extends Omit<IconProps, 'as' | 'filled' | 'color'> {
+  /** ISO 3166-1 alpha-2 country code. */
+  code: FlagCode;
+}
+
+/**
+ * Renders the country flag for an ISO 3166-1 alpha-2 code.
+ *
+ * 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. An unknown `code` renders nothing and logs a
+ * warning in development.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * import { CountryFlag } from '@cdx-ui/components';
+ *
+ * <CountryFlag code="US" />
+ * <CountryFlag code="US" className="size-6" accessibilityLabel="United States" />
+ * ```
+ *
+ * @param {FlagCode} code - ISO 3166-1 alpha-2 country 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 CountryFlag({ code, className, ...props }: CountryFlagProps) {
+  // Callers cast API strings onto `FlagCode`, so the lookup can miss at runtime.
+  const flag = (flags as Partial<Record<string, (typeof flags)[FlagCode]>>)[code];
+  if (!flag) {
+    if (__DEV__) console.warn(`CountryFlag: no flag for code "${code}"`);
+    return null;
+  }
+  return (
+    <Icon
+      as={flag}
+      className={cn('size-5', className)}
+      {...props}
+      {...mergeDataAttributes(props, dataAttributes({ slot: 'country-flag' }))}
+    />
+  );
+}
+
+CountryFlag.displayName = 'CountryFlag';

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) => {