@alfadocs/ui-kit-debug 1.38.0 → 1.40.0

package/dist/_chunks/button-nJaPh_HC.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"button-nJaPh_HC.js","sources":["../../src/components/button/button.tsx"],"sourcesContent":["import { forwardRef, type ButtonHTMLAttributes, useEffect } from 'react';\nimport { Slot, Slottable } from '@radix-ui/react-slot';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nconst buttonVariants = cva(\n  // `forced-colors:*` — under Windows High Contrast Mode the OS strips our\n  // bg/text tokens, so `ghost` / `outline` / `link` would lose their shape.\n  // We repaint a `ButtonBorder` edge + swap the focus ring to `CanvasText`\n  // so the control and its focused state both survive HCM.\n  'ds:inline-flex ds:items-center ds:justify-center ds:gap-[var(--spacing-xs)] ds:font-medium ds:transition-colors ds:rounded-[var(--radius-md)] ds:focus-visible:outline-[length:var(--focus-ring-width)] ds:focus-visible:outline-solid ds:focus-visible:outline-ring ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)] ds:forced-colors:border ds:forced-colors:border-[ButtonBorder] ds:forced-colors:focus-visible:outline-[CanvasText] ds:disabled:opacity-50 ds:disabled:cursor-not-allowed ds:aria-disabled:opacity-50 ds:aria-disabled:cursor-not-allowed ds:aria-busy:cursor-wait ds:relative',\n  {\n    variants: {\n      intent: {\n        primary:\n          'ds:bg-primary ds:text-primary-foreground ds:hover:bg-primary-hover ds:active:opacity-90 ds:shadow-sm',\n        secondary:\n          'ds:bg-secondary ds:text-secondary-foreground ds:hover:bg-secondary-hover ds:active:opacity-90',\n        // Background paint is owned by the `background` variant (compound\n        // rules below) — see-through by default so outline chrome works on\n        // tinted toolbars and shells; `background=\"surface\"` opts into the\n        // painted `--background` fill for host pages where a transparent\n        // outline reads grey on grey.\n        outline:\n          'ds:text-foreground ds:border ds:border-border ds:hover:bg-muted/10 ds:active:bg-muted/20',\n        ghost:\n          'ds:bg-transparent ds:text-foreground ds:hover:bg-muted/10 ds:active:bg-muted/20',\n        destructive:\n          'ds:bg-destructive ds:text-destructive-foreground ds:hover:bg-destructive-hover ds:active:opacity-90 ds:shadow-sm',\n        // Outline chrome in the destructive palette — for dangerous secondary\n        // actions (cancel appointment, remove item) that must read as risky\n        // without the solid fill's weight. Background paint comes from the\n        // `background` variant, same as `outline`.\n        destructiveOutline:\n          'ds:text-destructive ds:border ds:border-destructive ds:hover:bg-destructive/10 ds:active:bg-destructive/20',\n        link: 'ds:bg-transparent ds:text-primary ds:underline-offset-4 ds:hover:underline ds:active:opacity-80 ds:p-0 ds:h-auto ds:rounded-none',\n        // `tonal` is a container-contextual intent. The button carries a\n        // `data-intent=\"tonal\"` hook + baseline chrome (hover/active/shadow).\n        // The ambient container (e.g. `Alert`) paints the colour via a\n        // descendant selector — `[&_[data-intent=tonal]]:bg-…` — so the\n        // button picks up the surrounding tint (amber on `warning`, red on\n        // `error`, etc.). Outside such a container the button falls back to\n        // the primary palette so a loose `<Button intent=\"tonal\">` is never\n        // invisible.\n        tonal:\n          'ds:bg-primary ds:text-primary-foreground ds:hover:opacity-90 ds:active:opacity-80 ds:shadow-sm',\n      },\n      size: {\n        sm: 'ds:h-8 ds:ps-3 ds:pe-3 ds:text-[length:var(--font-size-sm)] ds:min-h-[var(--min-target-size)] ds:sm:min-h-0 ds:before:absolute ds:before:inset-x-[calc((var(--min-target-size)-100%)/-2)] ds:before:inset-y-[calc((var(--min-target-size)-100%)/-2)] ds:before:content-[\"\"] ds:sm:before:hidden',\n        md: 'ds:h-10 ds:ps-4 ds:pe-4 ds:text-[length:var(--font-size-base)]',\n        lg: 'ds:h-12 ds:ps-6 ds:pe-6 ds:text-[length:var(--font-size-lg)]',\n      },\n      hideLabel: {\n        true: 'ds:aspect-square ds:ps-0 ds:pe-0',\n        false: '',\n      },\n      // Backing paint behind the outline intents. Only meaningful for\n      // `outline` / `destructiveOutline` (the compound rules below);\n      // ignored by the filled and deliberately see-through intents.\n      background: {\n        transparent: '',\n        surface: '',\n      },\n    },\n    // The outline intents carry NO bg utility of their own — the compound\n    // rules below are the single source of the paint, so `transparent` vs\n    // `surface` never depends on CSS order between competing bg-* classes.\n    compoundVariants: [\n      {\n        intent: ['outline', 'destructiveOutline'],\n        background: 'transparent',\n        className: 'ds:bg-transparent',\n      },\n      {\n        // 1.6.1 — the painted fill 1.4.6 baked into `outline` is now this\n        // opt-in: it kept host pages legible but turned every toolbar\n        // icon button on a tinted shell into a solid white square.\n        intent: ['outline', 'destructiveOutline'],\n        background: 'surface',\n        className: 'ds:bg-[var(--background)]',\n      },\n    ],\n    defaultVariants: {\n      intent: 'primary',\n      size: 'md',\n      hideLabel: false,\n      background: 'transparent',\n    },\n  },\n);\n\nexport interface ButtonProps\n  extends\n    ButtonHTMLAttributes<HTMLButtonElement>,\n    VariantProps<typeof buttonVariants> {\n  asChild?: boolean;\n  loading?: boolean;\n  startIcon?: React.ReactNode;\n  endIcon?: React.ReactNode;\n  /**\n   * Mirror directional icons (arrows, chevrons) horizontally when the\n   * interface renders in RTL. Default `false` — most icons (trash, calendar,\n   * plus) must NOT flip. Opt in per call-site for arrow / chevron glyphs.\n   */\n  flipIconInRtl?: boolean;\n  /**\n   * Visually hide the label, leaving the icon(s) and a square footprint.\n   * The children stay in the DOM screen-reader-only, so the accessible\n   * name is preserved. Ignored with `asChild` (the label is slotted).\n   */\n  hideLabel?: boolean;\n  /**\n   * Backing paint behind `intent=\"outline\"` / `\"destructiveOutline\"`.\n   * `'transparent'` (default) shows the surface behind the button —\n   * correct on toolbars and tinted shells (app header, coloured bars).\n   * `'surface'` paints `--background` behind the outline — for host\n   * pages and split-button segments where a see-through outline reads\n   * grey on grey. Ignored by the other intents.\n   */\n  background?: 'transparent' | 'surface';\n}\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      intent,\n      size,\n      background,\n      className,\n      asChild = false,\n      loading = false,\n      startIcon,\n      endIcon,\n      flipIconInRtl = false,\n      hideLabel = false,\n      disabled,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    const Comp = asChild ? Slot : 'button';\n    const labelHidden = hideLabel && !asChild;\n    const isIconButton = !children && (startIcon || endIcon);\n\n    const ariaLabel = props['aria-label'];\n    useEffect(() => {\n      if (import.meta.env.DEV && isIconButton && !ariaLabel) {\n        console.warn(\n          'Button: Use IconButton for icon-only triggers to ensure accessibility and proper square sizing.',\n        );\n      }\n    }, [isIconButton, ariaLabel]);\n\n    const iconSize = size === 'sm' ? 16 : size === 'lg' ? 20 : 18;\n    const iconSizeClass =\n      size === 'sm'\n        ? 'ds:size-4'\n        : size === 'lg'\n          ? 'ds:size-5'\n          : 'ds:size-[18px]';\n    const iconFlipClass = flipIconInRtl ? 'ds:rtl:rotate-180' : '';\n\n    return (\n      <Comp\n        ref={ref}\n        className={buttonVariants({\n          intent,\n          size,\n          background,\n          hideLabel: labelHidden,\n          className,\n        })}\n        disabled={disabled || loading}\n        aria-busy={loading || undefined}\n        data-component=\"button\"\n        data-intent={intent ?? undefined}\n        {...props}\n      >\n        {loading && (\n          <svg\n            aria-hidden=\"true\"\n            className=\"ds:animate-spin\"\n            width={iconSize}\n            height={iconSize}\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n          >\n            <circle\n              cx=\"12\"\n              cy=\"12\"\n              r=\"10\"\n              stroke=\"currentColor\"\n              strokeOpacity=\"0.25\"\n              strokeWidth=\"3\"\n            />\n            <path\n              d=\"M22 12a10 10 0 0 1-10 10\"\n              stroke=\"currentColor\"\n              strokeWidth=\"3\"\n              strokeLinecap=\"round\"\n            />\n          </svg>\n        )}\n        {!loading && startIcon && (\n          <span\n            aria-hidden=\"true\"\n            className={`ds:inline-flex ds:items-center ${iconSizeClass} ${iconFlipClass}`.trim()}\n          >\n            {startIcon}\n          </span>\n        )}\n        {asChild ? (\n          <Slottable>{children}</Slottable>\n        ) : (\n          <span\n            className={loading || labelHidden ? 'ds:sr-only' : 'ds:inline-flex'}\n          >\n            {children}\n          </span>\n        )}\n        {!loading && endIcon && (\n          <span\n            aria-hidden=\"true\"\n            className={`ds:inline-flex ds:items-center ${iconSizeClass} ${iconFlipClass}`.trim()}\n          >\n            {endIcon}\n          </span>\n        )}\n      </Comp>\n    );\n  },\n);\n\nButton.displayName = 'Button';\n"],"names":["buttonVariants","cva","Button","forwardRef","intent","size","background","className","asChild","loading","startIcon","endIcon","flipIconInRtl","hideLabel","disabled","children","props","ref","Comp","Slot","labelHidden","isIconButton","ariaLabel","useEffect","iconSize","iconSizeClass","iconFlipClass","jsxs","jsx","Slottable"],"mappings":";;;;AAIA,MAAMA,IAAiBC;AAAA;AAAA;AAAA;AAAA;AAAA,EAKrB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,QAAQ;AAAA,QACN,SACE;AAAA,QACF,WACE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAMF,SACE;AAAA,QACF,OACE;AAAA,QACF,aACE;AAAA;AAAA;AAAA;AAAA;AAAA,QAKF,oBACE;AAAA,QACF,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QASN,OACE;AAAA,MAAA;AAAA,MAEJ,MAAM;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MAAA;AAAA,MAEN,WAAW;AAAA,QACT,MAAM;AAAA,QACN,OAAO;AAAA,MAAA;AAAA;AAAA;AAAA;AAAA,MAKT,YAAY;AAAA,QACV,aAAa;AAAA,QACb,SAAS;AAAA,MAAA;AAAA,IACX;AAAA;AAAA;AAAA;AAAA,IAKF,kBAAkB;AAAA,MAChB;AAAA,QACE,QAAQ,CAAC,WAAW,oBAAoB;AAAA,QACxC,YAAY;AAAA,QACZ,WAAW;AAAA,MAAA;AAAA,MAEb;AAAA;AAAA;AAAA;AAAA,QAIE,QAAQ,CAAC,WAAW,oBAAoB;AAAA,QACxC,YAAY;AAAA,QACZ,WAAW;AAAA,MAAA;AAAA,IACb;AAAA,IAEF,iBAAiB;AAAA,MACf,QAAQ;AAAA,MACR,MAAM;AAAA,MACN,WAAW;AAAA,MACX,YAAY;AAAA,IAAA;AAAA,EACd;AAEJ,GAiCaC,IAASC;AAAA,EACpB,CACE;AAAA,IACE,QAAAC;AAAA,IACA,MAAAC;AAAA,IACA,YAAAC;AAAA,IACA,WAAAC;AAAA,IACA,SAAAC,IAAU;AAAA,IACV,SAAAC,IAAU;AAAA,IACV,WAAAC;AAAA,IACA,SAAAC;AAAA,IACA,eAAAC,IAAgB;AAAA,IAChB,WAAAC,IAAY;AAAA,IACZ,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAELC,MACG;AACH,UAAMC,IAAOV,IAAUW,IAAO,UACxBC,IAAcP,KAAa,CAACL,GAC5Ba,IAAe,CAACN,MAAaL,KAAaC,IAE1CW,IAAYN,EAAM,YAAY;AACpC,IAAAO,EAAU,MAAM;AAAA,IAMhB,GAAG,CAACF,GAAcC,CAAS,CAAC;AAE5B,UAAME,IAAWnB,MAAS,OAAO,KAAKA,MAAS,OAAO,KAAK,IACrDoB,IACJpB,MAAS,OACL,cACAA,MAAS,OACP,cACA,kBACFqB,IAAgBd,IAAgB,sBAAsB;AAE5D,WACE,gBAAAe;AAAA,MAACT;AAAA,MAAA;AAAA,QACC,KAAAD;AAAA,QACA,WAAWjB,EAAe;AAAA,UACxB,QAAAI;AAAA,UACA,MAAAC;AAAA,UACA,YAAAC;AAAA,UACA,WAAWc;AAAA,UACX,WAAAb;AAAA,QAAA,CACD;AAAA,QACD,UAAUO,KAAYL;AAAA,QACtB,aAAWA,KAAW;AAAA,QACtB,kBAAe;AAAA,QACf,eAAaL,KAAU;AAAA,QACtB,GAAGY;AAAA,QAEH,UAAA;AAAA,UAAAP,KACC,gBAAAkB;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,eAAY;AAAA,cACZ,WAAU;AAAA,cACV,OAAOH;AAAA,cACP,QAAQA;AAAA,cACR,SAAQ;AAAA,cACR,MAAK;AAAA,cAEL,UAAA;AAAA,gBAAA,gBAAAI;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,IAAG;AAAA,oBACH,IAAG;AAAA,oBACH,GAAE;AAAA,oBACF,QAAO;AAAA,oBACP,eAAc;AAAA,oBACd,aAAY;AAAA,kBAAA;AAAA,gBAAA;AAAA,gBAEd,gBAAAA;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,GAAE;AAAA,oBACF,QAAO;AAAA,oBACP,aAAY;AAAA,oBACZ,eAAc;AAAA,kBAAA;AAAA,gBAAA;AAAA,cAChB;AAAA,YAAA;AAAA,UAAA;AAAA,UAGH,CAACnB,KAAWC,KACX,gBAAAkB;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,eAAY;AAAA,cACZ,WAAW,kCAAkCH,CAAa,IAAIC,CAAa,GAAG,KAAA;AAAA,cAE7E,UAAAhB;AAAA,YAAA;AAAA,UAAA;AAAA,UAGJF,IACC,gBAAAoB,EAACC,GAAA,EAAW,UAAAd,EAAA,CAAS,IAErB,gBAAAa;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWnB,KAAWW,IAAc,eAAe;AAAA,cAElD,UAAAL;AAAA,YAAA;AAAA,UAAA;AAAA,UAGJ,CAACN,KAAWE,KACX,gBAAAiB;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,eAAY;AAAA,cACZ,WAAW,kCAAkCH,CAAa,IAAIC,CAAa,GAAG,KAAA;AAAA,cAE7E,UAAAf;AAAA,YAAA;AAAA,UAAA;AAAA,QACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;AAEAT,EAAO,cAAc;"}