@shipfox/react-ui 0.3.0 → 0.5.0

package/dist/components/badge/badge.d.ts

@@ -0,0 +1,48 @@
+import { type VariantProps } from 'class-variance-authority';
+import { type IconName } from '../../components/icon';
+import type { ComponentProps } from 'react';
+export declare const badgeVariants: (props?: ({
+    variant?: "info" | "success" | "warning" | "error" | "neutral" | "feature" | null | undefined;
+    size?: "2xs" | "xs" | null | undefined;
+    radius?: "default" | "rounded" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type BadgeVariant = VariantProps<typeof badgeVariants>['variant'];
+type BaseBadgeProps = ComponentProps<'span'> & VariantProps<typeof badgeVariants> & {
+    asChild?: boolean;
+};
+type BadgePropsWithLeftClick = BaseBadgeProps & {
+    iconLeft: IconName;
+    onIconLeftClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    iconLeftAriaLabel: string;
+    iconRight?: IconName;
+    onIconRightClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    iconRightAriaLabel?: string;
+};
+type BadgePropsWithRightClick = BaseBadgeProps & {
+    iconRight: IconName;
+    onIconRightClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    iconRightAriaLabel: string;
+    iconLeft?: IconName;
+    onIconLeftClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    iconLeftAriaLabel?: string;
+};
+type BadgePropsWithBothClicks = BaseBadgeProps & {
+    iconLeft: IconName;
+    onIconLeftClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    iconLeftAriaLabel: string;
+    iconRight: IconName;
+    onIconRightClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    iconRightAriaLabel: string;
+};
+type BadgePropsWithoutClicks = BaseBadgeProps & {
+    iconLeft?: IconName;
+    iconRight?: IconName;
+    onIconLeftClick?: never;
+    onIconRightClick?: never;
+    iconLeftAriaLabel?: never;
+    iconRightAriaLabel?: never;
+};
+export type BadgeProps = BadgePropsWithLeftClick | BadgePropsWithRightClick | BadgePropsWithBothClicks | BadgePropsWithoutClicks;
+export declare function Badge({ className, variant, size, radius, asChild, children, iconLeft, iconRight, onIconLeftClick, onIconRightClick, iconLeftAriaLabel, iconRightAriaLabel, ...props }: BadgeProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=badge.d.ts.map

package/dist/components/badge/badge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../../src/components/badge/badge.tsx"],"names":[],"mappings":"AACA,OAAO,EAAM,KAAK,YAAY,EAAC,MAAM,0BAA0B,CAAC;AAChE,OAAO,EAAO,KAAK,QAAQ,EAAC,MAAM,iBAAiB,CAAC;AACpD,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,OAAO,CAAC;AAG1C,eAAO,MAAM,aAAa;;;;8EAgCzB,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG,YAAY,CAAC,OAAO,aAAa,CAAC,CAAC,SAAS,CAAC,CAAC;AAEzE,KAAK,cAAc,GAAG,cAAc,CAAC,MAAM,CAAC,GAC1C,YAAY,CAAC,OAAO,aAAa,CAAC,GAAG;IACnC,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEJ,KAAK,uBAAuB,GAAG,cAAc,GAAG;IAC9C,QAAQ,EAAE,QAAQ,CAAC;IACnB,eAAe,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAClE,iBAAiB,EAAE,MAAM,CAAC;IAC1B,SAAS,CAAC,EAAE,QAAQ,CAAC;IACrB,gBAAgB,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IACpE,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B,CAAC;AAEF,KAAK,wBAAwB,GAAG,cAAc,GAAG;IAC/C,SAAS,EAAE,QAAQ,CAAC;IACpB,gBAAgB,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IACnE,kBAAkB,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,eAAe,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IACnE,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B,CAAC;AAEF,KAAK,wBAAwB,GAAG,cAAc,GAAG;IAC/C,QAAQ,EAAE,QAAQ,CAAC;IACnB,eAAe,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAClE,iBAAiB,EAAE,MAAM,CAAC;IAC1B,SAAS,EAAE,QAAQ,CAAC;IACpB,gBAAgB,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IACnE,kBAAkB,EAAE,MAAM,CAAC;CAC5B,CAAC;AAEF,KAAK,uBAAuB,GAAG,cAAc,GAAG;IAC9C,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,SAAS,CAAC,EAAE,QAAQ,CAAC;IACrB,eAAe,CAAC,EAAE,KAAK,CAAC;IACxB,gBAAgB,CAAC,EAAE,KAAK,CAAC;IACzB,iBAAiB,CAAC,EAAE,KAAK,CAAC;IAC1B,kBAAkB,CAAC,EAAE,KAAK,CAAC;CAC5B,CAAC;AAEF,MAAM,MAAM,UAAU,GAClB,uBAAuB,GACvB,wBAAwB,GACxB,wBAAwB,GACxB,uBAAuB,CAAC;AAE5B,wBAAgB,KAAK,CAAC,EACpB,SAAS,EACT,OAAO,EACP,IAAI,EACJ,MAAM,EACN,OAAe,EACf,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,eAAe,EACf,gBAAgB,EAChB,iBAAiB,EACjB,kBAAkB,EAClB,GAAG,KAAK,EACT,EAAE,UAAU,2CA2CZ"}

package/dist/components/badge/badge.js

@@ -0,0 +1,72 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Slot } from '@radix-ui/react-slot';
+import { cva } from 'class-variance-authority';
+import { Icon } from '../../components/icon/index.js';
+import { cn } from '../../utils/cn.js';
+export const badgeVariants = cva('inline-flex select-none items-center justify-center font-medium transition-colors shrink-0 leading-20', {
+    variants: {
+        variant: {
+            neutral: 'bg-tag-neutral-bg text-tag-neutral-text border border-tag-neutral-border hover:bg-tag-neutral-bg-hover',
+            info: 'bg-tag-blue-bg text-tag-blue-text border border-tag-blue-border hover:bg-tag-blue-bg-hover',
+            feature: 'bg-tag-purple-bg text-tag-purple-text border border-tag-purple-border hover:bg-tag-purple-bg-hover',
+            success: 'bg-tag-success-bg text-tag-success-text border border-tag-success-border hover:bg-tag-success-bg-hover',
+            warning: 'bg-tag-warning-bg text-tag-warning-text border border-tag-warning-border hover:bg-tag-warning-bg-hover',
+            error: 'bg-tag-error-bg text-tag-error-text border border-tag-error-border hover:bg-tag-error-bg-hover'
+        },
+        size: {
+            '2xs': 'h-20 px-6 text-xs gap-4',
+            xs: 'h-24 px-8 text-xs gap-6'
+        },
+        radius: {
+            default: 'rounded-6',
+            rounded: 'rounded-full'
+        }
+    },
+    defaultVariants: {
+        variant: 'neutral',
+        size: '2xs',
+        radius: 'default'
+    }
+});
+export function Badge({ className, variant, size, radius, asChild = false, children, iconLeft, iconRight, onIconLeftClick, onIconRightClick, iconLeftAriaLabel, iconRightAriaLabel, ...props }) {
+    const Comp = asChild ? Slot : 'span';
+    const renderIcon = (iconName, position, onClick, ariaLabel)=>{
+        const isInteractive = Boolean(onClick);
+        if (isInteractive) {
+            if (!ariaLabel) {
+                // biome-ignore lint/suspicious/noConsole: Development warning for accessibility
+                console.warn(`Badge: Missing aria-label for interactive ${position} icon. Please provide icon${position === 'left' ? 'Left' : 'Right'}AriaLabel prop.`);
+                return null;
+            }
+            return /*#__PURE__*/ _jsx("button", {
+                type: "button",
+                onClick: onClick,
+                className: "inline-flex items-center justify-center transition-colors shrink-0 hover:opacity-70 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-blue-500",
+                "aria-label": ariaLabel,
+                children: /*#__PURE__*/ _jsx(Icon, {
+                    name: iconName,
+                    className: "size-12"
+                })
+            });
+        }
+        return /*#__PURE__*/ _jsx(Icon, {
+            name: iconName,
+            className: "size-12"
+        });
+    };
+    return /*#__PURE__*/ _jsxs(Comp, {
+        className: cn(badgeVariants({
+            variant,
+            size,
+            radius
+        }), className),
+        ...props,
+        children: [
+            iconLeft && renderIcon(iconLeft, 'left', onIconLeftClick, iconLeftAriaLabel),
+            children,
+            iconRight && renderIcon(iconRight, 'right', onIconRightClick, iconRightAriaLabel)
+        ]
+    });
+}
+
+//# sourceMappingURL=badge.js.map

package/dist/components/badge/badge.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/badge/badge.tsx"],"sourcesContent":["import {Slot} from '@radix-ui/react-slot';\nimport {cva, type VariantProps} from 'class-variance-authority';\nimport {Icon, type IconName} from 'components/icon';\nimport type {ComponentProps} from 'react';\nimport {cn} from 'utils/cn';\n\nexport const badgeVariants = cva(\n  'inline-flex select-none items-center justify-center font-medium transition-colors shrink-0 leading-20',\n  {\n    variants: {\n      variant: {\n        neutral:\n          'bg-tag-neutral-bg text-tag-neutral-text border border-tag-neutral-border hover:bg-tag-neutral-bg-hover',\n        info: 'bg-tag-blue-bg text-tag-blue-text border border-tag-blue-border hover:bg-tag-blue-bg-hover',\n        feature:\n          'bg-tag-purple-bg text-tag-purple-text border border-tag-purple-border hover:bg-tag-purple-bg-hover',\n        success:\n          'bg-tag-success-bg text-tag-success-text border border-tag-success-border hover:bg-tag-success-bg-hover',\n        warning:\n          'bg-tag-warning-bg text-tag-warning-text border border-tag-warning-border hover:bg-tag-warning-bg-hover',\n        error:\n          'bg-tag-error-bg text-tag-error-text border border-tag-error-border hover:bg-tag-error-bg-hover',\n      },\n      size: {\n        '2xs': 'h-20 px-6 text-xs gap-4',\n        xs: 'h-24 px-8 text-xs gap-6',\n      },\n      radius: {\n        default: 'rounded-6',\n        rounded: 'rounded-full',\n      },\n    },\n    defaultVariants: {\n      variant: 'neutral',\n      size: '2xs',\n      radius: 'default',\n    },\n  },\n);\n\nexport type BadgeVariant = VariantProps<typeof badgeVariants>['variant'];\n\ntype BaseBadgeProps = ComponentProps<'span'> &\n  VariantProps<typeof badgeVariants> & {\n    asChild?: boolean;\n  };\n\ntype BadgePropsWithLeftClick = BaseBadgeProps & {\n  iconLeft: IconName;\n  onIconLeftClick: (e: React.MouseEvent<HTMLButtonElement>) => void;\n  iconLeftAriaLabel: string;\n  iconRight?: IconName;\n  onIconRightClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;\n  iconRightAriaLabel?: string;\n};\n\ntype BadgePropsWithRightClick = BaseBadgeProps & {\n  iconRight: IconName;\n  onIconRightClick: (e: React.MouseEvent<HTMLButtonElement>) => void;\n  iconRightAriaLabel: string;\n  iconLeft?: IconName;\n  onIconLeftClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;\n  iconLeftAriaLabel?: string;\n};\n\ntype BadgePropsWithBothClicks = BaseBadgeProps & {\n  iconLeft: IconName;\n  onIconLeftClick: (e: React.MouseEvent<HTMLButtonElement>) => void;\n  iconLeftAriaLabel: string;\n  iconRight: IconName;\n  onIconRightClick: (e: React.MouseEvent<HTMLButtonElement>) => void;\n  iconRightAriaLabel: string;\n};\n\ntype BadgePropsWithoutClicks = BaseBadgeProps & {\n  iconLeft?: IconName;\n  iconRight?: IconName;\n  onIconLeftClick?: never;\n  onIconRightClick?: never;\n  iconLeftAriaLabel?: never;\n  iconRightAriaLabel?: never;\n};\n\nexport type BadgeProps =\n  | BadgePropsWithLeftClick\n  | BadgePropsWithRightClick\n  | BadgePropsWithBothClicks\n  | BadgePropsWithoutClicks;\n\nexport function Badge({\n  className,\n  variant,\n  size,\n  radius,\n  asChild = false,\n  children,\n  iconLeft,\n  iconRight,\n  onIconLeftClick,\n  onIconRightClick,\n  iconLeftAriaLabel,\n  iconRightAriaLabel,\n  ...props\n}: BadgeProps) {\n  const Comp = asChild ? Slot : 'span';\n\n  const renderIcon = (\n    iconName: IconName,\n    position: 'left' | 'right',\n    onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void,\n    ariaLabel?: string,\n  ) => {\n    const isInteractive = Boolean(onClick);\n\n    if (isInteractive) {\n      if (!ariaLabel) {\n        // biome-ignore lint/suspicious/noConsole: Development warning for accessibility\n        console.warn(\n          `Badge: Missing aria-label for interactive ${position} icon. Please provide icon${position === 'left' ? 'Left' : 'Right'}AriaLabel prop.`,\n        );\n\n        return null;\n      }\n\n      return (\n        <button\n          type=\"button\"\n          onClick={onClick}\n          className=\"inline-flex items-center justify-center transition-colors shrink-0 hover:opacity-70 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-blue-500\"\n          aria-label={ariaLabel}\n        >\n          <Icon name={iconName} className=\"size-12\" />\n        </button>\n      );\n    }\n\n    return <Icon name={iconName} className=\"size-12\" />;\n  };\n\n  return (\n    <Comp className={cn(badgeVariants({variant, size, radius}), className)} {...props}>\n      {iconLeft && renderIcon(iconLeft, 'left', onIconLeftClick, iconLeftAriaLabel)}\n      {children}\n      {iconRight && renderIcon(iconRight, 'right', onIconRightClick, iconRightAriaLabel)}\n    </Comp>\n  );\n}\n"],"names":["Slot","cva","Icon","cn","badgeVariants","variants","variant","neutral","info","feature","success","warning","error","size","xs","radius","default","rounded","defaultVariants","Badge","className","asChild","children","iconLeft","iconRight","onIconLeftClick","onIconRightClick","iconLeftAriaLabel","iconRightAriaLabel","props","Comp","renderIcon","iconName","position","onClick","ariaLabel","isInteractive","Boolean","console","warn","button","type","aria-label","name"],"mappings":";AAAA,SAAQA,IAAI,QAAO,uBAAuB;AAC1C,SAAQC,GAAG,QAA0B,2BAA2B;AAChE,SAAQC,IAAI,QAAsB,kBAAkB;AAEpD,SAAQC,EAAE,QAAO,WAAW;AAE5B,OAAO,MAAMC,gBAAgBH,IAC3B,yGACA;IACEI,UAAU;QACRC,SAAS;YACPC,SACE;YACFC,MAAM;YACNC,SACE;YACFC,SACE;YACFC,SACE;YACFC,OACE;QACJ;QACAC,MAAM;YACJ,OAAO;YACPC,IAAI;QACN;QACAC,QAAQ;YACNC,SAAS;YACTC,SAAS;QACX;IACF;IACAC,iBAAiB;QACfZ,SAAS;QACTO,MAAM;QACNE,QAAQ;IACV;AACF,GACA;AAmDF,OAAO,SAASI,MAAM,EACpBC,SAAS,EACTd,OAAO,EACPO,IAAI,EACJE,MAAM,EACNM,UAAU,KAAK,EACfC,QAAQ,EACRC,QAAQ,EACRC,SAAS,EACTC,eAAe,EACfC,gBAAgB,EAChBC,iBAAiB,EACjBC,kBAAkB,EAClB,GAAGC,OACQ;IACX,MAAMC,OAAOT,UAAUrB,OAAO;IAE9B,MAAM+B,aAAa,CACjBC,UACAC,UACAC,SACAC;QAEA,MAAMC,gBAAgBC,QAAQH;QAE9B,IAAIE,eAAe;YACjB,IAAI,CAACD,WAAW;gBACd,gFAAgF;gBAChFG,QAAQC,IAAI,CACV,CAAC,0CAA0C,EAAEN,SAAS,0BAA0B,EAAEA,aAAa,SAAS,SAAS,QAAQ,eAAe,CAAC;gBAG3I,OAAO;YACT;YAEA,qBACE,KAACO;gBACCC,MAAK;gBACLP,SAASA;gBACTd,WAAU;gBACVsB,cAAYP;0BAEZ,cAAA,KAACjC;oBAAKyC,MAAMX;oBAAUZ,WAAU;;;QAGtC;QAEA,qBAAO,KAAClB;YAAKyC,MAAMX;YAAUZ,WAAU;;IACzC;IAEA,qBACE,MAACU;QAAKV,WAAWjB,GAAGC,cAAc;YAACE;YAASO;YAAME;QAAM,IAAIK;QAAa,GAAGS,KAAK;;YAC9EN,YAAYQ,WAAWR,UAAU,QAAQE,iBAAiBE;YAC1DL;YACAE,aAAaO,WAAWP,WAAW,SAASE,kBAAkBE;;;AAGrE"}