@byline/ui 0.9.3 → 0.10.1

package/dist/components/button/button_module.css

@@ -0,0 +1,382 @@
+@layer byline-base, byline-functional, byline-utilities, byline-theme, byline-typography;
+
+@layer byline-components {
+  :is(.button-IjDhC0, .infonomic-button) {
+    cursor: pointer;
+    text-align: center;
+    gap: var(--gap-2);
+    white-space: nowrap;
+    outline-offset: 2px;
+    transition: background-color var(--transition-normal),
+      outline-color var(--transition-normal);
+    border-radius: var(--border-radius-sm);
+    border: none;
+    outline: 1px solid #0000;
+    justify-content: center;
+    align-items: center;
+    font-weight: normal;
+    line-height: 0;
+    display: inline-flex;
+  }
+
+  :is(.button-IjDhC0:disabled, .button-IjDhC0[disabled], .infonomic-button:disabled, .infonomic-button[disabled]) {
+    pointer-events: none;
+  }
+
+  :is(.button-IjDhC0:focus, .button-IjDhC0:active, .infonomic-button:focus, .infonomic-button:active) {
+    outline-color: var(--ring-color);
+  }
+
+  .button-IjDhC0.square-P_6yde {
+    aspect-ratio: 1;
+    border-radius: var(--border-radius-sm);
+    padding: 0;
+  }
+
+  .infonomic-button-square {
+    aspect-ratio: 1;
+    border-radius: var(--border-radius-sm);
+    padding: 0;
+  }
+
+  .button-IjDhC0.round-uqus3n {
+    aspect-ratio: 1;
+    border-radius: var(--border-radius-full);
+    padding: 0;
+  }
+
+  .infonomic-button-round {
+    aspect-ratio: 1;
+    border-radius: var(--border-radius-full);
+    padding: 0;
+  }
+
+  :is(.xs-jxTd5R, .infonomic-button-xs) {
+    min-height: 26px;
+    padding: .2rem .4rem;
+    font-size: .7rem;
+  }
+
+  :is(.sm-uD_Ugt, .infonomic-button-sm) {
+    min-height: 32px;
+    padding: .25rem .5rem;
+    font-size: .775rem;
+  }
+
+  :is(.md-Qp9ad6, .infonomic-button-md) {
+    min-height: 38px;
+    padding: .625rem 1.25rem;
+    font-size: .95rem;
+  }
+
+  :is(.lg-FAYTen, .infonomic-button-lg) {
+    min-height: 46px;
+    padding: .75rem 1.5rem;
+    font-size: 1.1rem;
+  }
+
+  :is(.xl-Gwvhl4, .infonomic-button-xl) {
+    min-height: 54px;
+    padding: .75rem 1.5rem;
+    font-size: 1.2rem;
+  }
+
+  :is(.filled-CwGsrO, .infonomic-button-filled) {
+    color: var(--button-variant-filled-foreground);
+    background-color: var(--button-variant-filled);
+  }
+
+  :is(.filled-CwGsrO:hover, .infonomic-button-filled:hover) {
+    background-color: var(--button-variant-filled-hover);
+  }
+
+  :is(.filled-CwGsrO:focus, .filled-CwGsrO:active, .infonomic-button-filled:focus, .infonomic-button-filled:active) {
+    --ring-color: var(--button-ring-color);
+  }
+
+  :is(.filled-CwGsrO:disabled, .filled-CwGsrO[disabled], .infonomic-button-filled:disabled, .infonomic-button-filled[disabled]) {
+    background-color: var(--button-variant-filled-disabled, oklch(from var(--button-variant-filled) calc(l * 1.1) calc(c * .85) h));
+    color: var(--button-variant-filled-foreground-disabled, oklch(from var(--button-variant-filled-foreground) calc(l * .9) calc(c * .85) h));
+  }
+
+  :is(.filled-weak-QLU8bA, .infonomic-button-filled-weak) {
+    color: var(--button-variant-filled-weak-foreground);
+    background-color: var(--button-variant-filled-weak);
+  }
+
+  :is(.filled-weak-QLU8bA:hover, .infonomic-button-filled-weak:hover) {
+    background-color: var(--button-variant-filled-weak-hover);
+  }
+
+  :is(.filled-weak-QLU8bA:focus, .filled-weak-QLU8bA:active, .infonomic-button-filled-weak:focus, .infonomic-button-filled-weak:active) {
+    --ring-color: var(--button-ring-color);
+  }
+
+  :is(.filled-weak-QLU8bA:disabled, .filled-weak-QLU8bA[disabled], .infonomic-button-filled-weak:disabled, .infonomic-button-filled-weak[disabled]) {
+    background-color: var(--button-variant-filled-weak-disabled, oklch(from var(--button-variant-filled-weak) calc(l * 1.1) calc(c * .85) h));
+    color: var(--button-variant-filled-weak-foreground-disabled, oklch(from var(--button-variant-filled-weak-foreground) calc(l * .9) calc(c * .85) h));
+  }
+
+  :is(.outlined-nZGbxu, .infonomic-button-outlined) {
+    border: 1px solid var(--button-variant-outlined-border);
+    color: var(--button-variant-outlined-foreground);
+    background-color: var(--button-variant-outlined);
+  }
+
+  :is(.outlined-nZGbxu:disabled, .outlined-nZGbxu[disabled], .infonomic-button-outlined:disabled, .infonomic-button-outlined[disabled]) {
+    border-color: var(--button-variant-outlined-border-disabled, oklch(from var(--button-variant-outlined-border) calc(l * 1.5) calc(c * .8) h));
+    color: var(--button-variant-outlined-foreground-disabled, oklch(from var(--button-variant-outlined-foreground) calc(l * 1.1) calc(c * .7) h));
+  }
+
+  :is(.outlined-nZGbxu:hover, .infonomic-button-outlined:hover) {
+    background-color: var(--button-variant-outlined-hover);
+  }
+
+  :is(.outlined-nZGbxu:focus, .outlined-nZGbxu:active, .infonomic-button-outlined:focus, .infonomic-button-outlined:active) {
+    --ring-color: var(--button-ring-color);
+  }
+
+  :is(.gradient-ySC3O3, .infonomic-button-gradient) {
+    color: var(--button-variant-gradient-foreground);
+    background: linear-gradient(45deg,
+      var(--button-variant-gradient-start),
+      var(--button-variant-gradient-end));
+  }
+
+  :is(.gradient-ySC3O3:disabled, .gradient-ySC3O3[disabled], .infonomic-button-gradient:disabled, .infonomic-button-gradient[disabled]) {
+    background: unset;
+    background-color: var(--button-variant-gradient-disabled, oklch(from var(--button-variant-gradient-end) calc(l * 1.2) calc(c * .85) h));
+    color: var(--button-variant-gradient-foreground-disabled, oklch(from var(--button-variant-gradient-foreground) calc(l * .9) calc(c * .85) h));
+  }
+
+  :is(.gradient-ySC3O3:hover, .infonomic-button-gradient:hover) {
+    color: var(--button-variant-gradient-foreground);
+    background: linear-gradient(45deg,
+      var(--button-variant-gradient-start),
+      var(--button-variant-gradient-end));
+  }
+
+  :is(.gradient-ySC3O3:focus, .gradient-ySC3O3:active, .infonomic-button-gradient:focus, .infonomic-button-gradient:active) {
+    --ring-color: var(--button-ring-color);
+  }
+
+  :is(.text-GaxlcE, .infonomic-button-text) {
+    background-color: var(--button-variant-text);
+    color: var(--button-variant-text-foreground);
+  }
+
+  :is(.text-GaxlcE:disabled, .text-GaxlcE[disabled], .infonomic-button-text:disabled, .infonomic-button-text[disabled]) {
+    color: oklch(from var(--button-variant-text-foreground) calc(l * 1.5) calc(c * .5) h);
+  }
+
+  :is(.text-GaxlcE:hover, .infonomic-button-text:hover) {
+    background-color: var(--button-variant-text-hover);
+  }
+
+  :is(.text-GaxlcE:focus, .text-GaxlcE:active, .infonomic-button-text:focus, .infonomic-button-text:active) {
+    --ring-color: var(--button-ring-color);
+  }
+
+  :is(.primary-tUmczz, .infonomic-button-primary) {
+    --button-ring-color: var(--ring-primary);
+    --button-variant-filled: var(--fill-primary-strong);
+    --button-variant-filled-hover: var(--fill-primary-strong-hover);
+    --button-variant-filled-disabled: var(--fill-primary-strong-disabled);
+    --button-variant-filled-foreground: var(--text-on-primary-strong);
+    --button-variant-filled-foreground-disabled: var(--text-on-primary-strong-disabled);
+    --button-variant-filled-weak: var(--fill-primary-weak);
+    --button-variant-filled-weak-hover: var(--fill-primary-weak-hover);
+    --button-variant-filled-weak-disabled: var(--fill-primary-weak-disabled);
+    --button-variant-filled-weak-foreground: var(--text-on-primary-weak);
+    --button-variant-filled-weak-foreground-disabled: var(--text-on-primary-weak-disabled);
+    --button-variant-outlined: var(--fill-primary-outlined);
+    --button-variant-outlined-hover: var(--fill-primary-outlined-hover);
+    --button-variant-outlined-border: var(--stroke-primary);
+    --button-variant-outlined-border-disabled: var(--stroke-primary-disabled);
+    --button-variant-outlined-foreground: var(--text-on-primary-outlined);
+    --button-variant-outlined-foreground-disabled: var(--text-on-primary-outlined-disabled);
+    --button-variant-text: var(--fill-primary-text);
+    --button-variant-text-hover: var(--fill-primary-text-hover);
+    --button-variant-text-foreground: var(--text-primary);
+    --button-variant-gradient-start: var(--gradient-primary-start);
+    --button-variant-gradient-end: var(--gradient-primary-end);
+    --button-variant-gradient-foreground: var(--gradient-primary-foreground);
+    --button-variant-gradient-disabled: var(--gradient-primary-disabled);
+    --button-variant-gradient-foreground-disabled: var(--text-on-primary-strong-disabled);
+  }
+
+  :is(.secondary-UqT2AY, .infonomic-button-secondary) {
+    --button-ring-color: var(--ring-secondary);
+    --button-variant-filled: var(--fill-secondary-strong);
+    --button-variant-filled-hover: var(--fill-secondary-strong-hover);
+    --button-variant-filled-disabled: var(--fill-secondary-strong-disabled);
+    --button-variant-filled-foreground: var(--text-on-secondary-strong);
+    --button-variant-filled-foreground-disabled: var(--text-on-secondary-strong-disabled);
+    --button-variant-filled-weak: var(--fill-secondary-weak);
+    --button-variant-filled-weak-hover: var(--fill-secondary-weak-hover);
+    --button-variant-filled-weak-disabled: var(--fill-secondary-weak-disabled);
+    --button-variant-filled-weak-foreground: var(--text-on-secondary-weak);
+    --button-variant-filled-weak-foreground-disabled: var(--text-on-secondary-weak-disabled);
+    --button-variant-outlined: var(--fill-secondary-outlined);
+    --button-variant-outlined-border: var(--stroke-secondary);
+    --button-variant-outlined-border-disabled: var(--stroke-secondary-disabled);
+    --button-variant-outlined-hover: var(--fill-secondary-outlined-hover);
+    --button-variant-outlined-foreground: var(--text-on-secondary-outlined);
+    --button-variant-outlined-foreground-disabled: var(--text-on-secondary-outlined-disabled);
+    --button-variant-text: var(--fill-secondary-text);
+    --button-variant-text-hover: var(--fill-secondary-text-hover);
+    --button-variant-text-foreground: var(--text-secondary);
+    --button-variant-gradient-start: var(--gradient-secondary-start);
+    --button-variant-gradient-end: var(--gradient-secondary-end);
+    --button-variant-gradient-foreground: var(--gradient-secondary-foreground);
+    --button-variant-gradient-disabled: var(--gradient-secondary-disabled);
+    --button-variant-gradient-foreground-disabled: var(--text-on-secondary-strong-disabled);
+  }
+
+  :is(.noeffect-fpxSgg, .infonomic-button-noeffect) {
+    --button-ring-color: var(--ring-noeffect);
+    --button-variant-filled: var(--fill-noeffect-strong);
+    --button-variant-filled-hover: var(--fill-noeffect-strong-hover);
+    --button-variant-filled-disabled: var(--fill-noeffect-strong-disabled);
+    --button-variant-filled-foreground: var(--text-on-noeffect-strong);
+    --button-variant-filled-foreground-disabled: var(--text-on-noeffect-strong-disabled);
+    --button-variant-filled-weak: var(--fill-noeffect-weak);
+    --button-variant-filled-weak-hover: var(--fill-noeffect-weak-hover);
+    --button-variant-filled-weak-disabled: var(--fill-noeffect-weak-disabled);
+    --button-variant-filled-weak-foreground: var(--text-on-noeffect-weak);
+    --button-variant-filled-weak-foreground-disabled: var(--text-on-noeffect-weak-disabled);
+    --button-variant-outlined: var(--fill-noeffect-outlined);
+    --button-variant-outlined-hover: var(--fill-noeffect-outlined-hover);
+    --button-variant-outlined-disabled: var(--fill-noeffect-outlined-disabled);
+    --button-variant-outlined-border: var(--stroke-noeffect);
+    --button-variant-outlined-border-disabled: var(--stroke-noeffect-disabled);
+    --button-variant-outlined-foreground: var(--text-on-noeffect-outlined);
+    --button-variant-outlined-foreground-disabled: var(--text-on-noeffect-outlined-disabled);
+    --button-variant-text: var(--fill-noeffect-text);
+    --button-variant-text-hover: var(--fill-noeffect-text-hover);
+    --button-variant-text-foreground: var(--text-noeffect);
+    --button-variant-gradient-start: var(--gradient-noeffect-start);
+    --button-variant-gradient-end: var(--gradient-noeffect-end);
+    --button-variant-gradient-foreground: var(--gradient-noeffect-foreground);
+    --button-variant-gradient-disabled: var(--gradient-noeffect-disabled);
+    --button-variant-gradient-foreground-disabled: var(--text-on-noeffect-strong-disabled);
+  }
+
+  :is(.success-fTNDEn, .infonomic-button-success) {
+    --button-ring-color: var(--ring-success);
+    --button-variant-filled: var(--fill-success-strong);
+    --button-variant-filled-hover: var(--fill-success-strong-hover);
+    --button-variant-filled-disabled: var(--fill-success-strong-disabled);
+    --button-variant-filled-foreground: var(--text-on-success-strong);
+    --button-variant-filled-foreground-disabled: var(--text-on-success-strong-disabled);
+    --button-variant-filled-weak: var(--fill-success-weak);
+    --button-variant-filled-weak-hover: var(--fill-success-weak-hover);
+    --button-variant-filled-weak-disabled: var(--fill-success-weak-disabled);
+    --button-variant-filled-weak-foreground: var(--text-on-success-weak);
+    --button-variant-filled-weak-foreground-disabled: var(--text-on-success-weak-disabled);
+    --button-variant-outlined: var(--fill-success-outlined);
+    --button-variant-outlined-hover: var(--fill-success-outlined-hover);
+    --button-variant-outlined-border: var(--stroke-success);
+    --button-variant-outlined-border-disabled: var(--stroke-success-disabled);
+    --button-variant-outlined-foreground: var(--text-on-success-outlined);
+    --button-variant-outlined-foreground-disabled: var(--text-on-success-outlined-disabled);
+    --button-variant-text: transparent;
+    --button-variant-text-hover: var(--fill-success-text-hover);
+    --button-variant-text-foreground: var(--text-success);
+    --button-variant-gradient-start: var(--gradient-success-start);
+    --button-variant-gradient-end: var(--gradient-success-end);
+    --button-variant-gradient-foreground: var(--gradient-success-foreground);
+    --button-variant-gradient-disabled: var(--gradient-success-disabled);
+    --button-variant-gradient-foreground-disabled: var(--text-on-success-strong-disabled);
+  }
+
+  :is(.info-qrdXQD, .infonomic-button-info) {
+    --button-ring-color: var(--ring-info);
+    --button-variant-filled: var(--fill-info-strong);
+    --button-variant-filled-hover: var(--fill-info-strong-hover);
+    --button-variant-filled-disabled: var(--fill-info-strong-disabled);
+    --button-variant-filled-foreground: var(--text-on-info-strong);
+    --button-variant-filled-foreground-disabled: var(--text-on-info-strong-disabled);
+    --button-variant-filled-weak: var(--fill-info-weak);
+    --button-variant-filled-weak-hover: var(--fill-info-weak-hover);
+    --button-variant-filled-weak-disabled: var(--fill-info-weak-disabled);
+    --button-variant-filled-weak-foreground: var(--text-on-info-weak);
+    --button-variant-filled-weak-foreground-disabled: var(--text-on-info-weak-disabled);
+    --button-variant-outlined: transparent;
+    --button-variant-outlined-hover: var(--fill-info-outlined-hover);
+    --button-variant-outlined-border: var(--stroke-info);
+    --button-variant-outlined-border-disabled: var(--stroke-info-disabled);
+    --button-variant-outlined-foreground: var(--text-on-info-outlined);
+    --button-variant-outlined-foreground-disabled: var(--text-on-info-outlined-disabled);
+    --button-variant-text: transparent;
+    --button-variant-text-hover: var(--fill-info-text-hover);
+    --button-variant-text-foreground: var(--text-info);
+    --button-variant-gradient-start: var(--gradient-info-start);
+    --button-variant-gradient-end: var(--gradient-info-end);
+    --button-variant-gradient-foreground: var(--gradient-info-foreground);
+    --button-variant-gradient-disabled: var(--gradient-info-disabled);
+    --button-variant-gradient-foreground-disabled: var(--text-on-info-strong-disabled);
+  }
+
+  :is(.warning-a00T3A, .infonomic-button-warning) {
+    --button-ring-color: var(--ring-warning);
+    --button-variant-filled: var(--fill-warning-strong);
+    --button-variant-filled-hover: var(--fill-warning-strong-hover);
+    --button-variant-filled-disabled: var(--fill-warning-strong-disabled);
+    --button-variant-filled-foreground: var(--text-on-warning-strong);
+    --button-variant-filled-foreground-disabled: var(--text-on-warning-strong-disabled);
+    --button-variant-filled-weak: var(--fill-warning-weak);
+    --button-variant-filled-weak-hover: var(--fill-warning-weak-hover);
+    --button-variant-filled-weak-disabled: var(--fill-warning-weak-disabled);
+    --button-variant-filled-weak-foreground: var(--text-on-warning-weak);
+    --button-variant-filled-weak-foreground-disabled: var(--text-on-warning-weak-disabled);
+    --button-variant-outlined: var(--fill-warning-outlined);
+    --button-variant-outlined-hover: var(--fill-warning-outlined-hover);
+    --button-variant-outlined-border: var(--stroke-warning);
+    --button-variant-outlined-border-disabled: var(--stroke-warning-disabled);
+    --button-variant-outlined-foreground: var(--text-on-warning-outlined);
+    --button-variant-outlined-foreground-disabled: var(--text-on-warning-outlined-disabled);
+    --button-variant-text: transparent;
+    --button-variant-text-hover: var(--fill-warning-text-hover);
+    --button-variant-text-foreground: var(--text-warning);
+    --button-variant-gradient-start: var(--gradient-warning-start);
+    --button-variant-gradient-end: var(--gradient-warning-end);
+    --button-variant-gradient-foreground: var(--gradient-warning-foreground);
+    --button-variant-gradient-disabled: var(--gradient-warning-disabled);
+    --button-variant-gradient-foreground-disabled: var(--text-on-warning-strong-disabled);
+  }
+
+  :is(.danger-rwIV_i, .infonomic-button-danger) {
+    --button-ring-color: var(--ring-danger);
+    --button-variant-filled: var(--fill-danger-strong);
+    --button-variant-filled-hover: var(--fill-danger-strong-hover);
+    --button-variant-filled-disabled: var(--fill-danger-strong-disabled);
+    --button-variant-filled-foreground: var(--text-on-danger-strong);
+    --button-variant-filled-foreground-disabled: var(--text-on-danger-strong-disabled);
+    --button-variant-filled-weak: var(--fill-danger-weak);
+    --button-variant-filled-weak-hover: var(--fill-danger-weak-hover);
+    --button-variant-filled-weak-disabled: var(--fill-danger-weak-disabled);
+    --button-variant-filled-weak-foreground: var(--text-on-danger-weak);
+    --button-variant-filled-weak-foreground-disabled: var(--text-on-danger-weak-disabled);
+    --button-variant-outlined: transparent;
+    --button-variant-outlined-hover: var(--fill-danger-outlined-hover);
+    --button-variant-outlined-border: var(--stroke-danger);
+    --button-variant-outlined-border-disabled: var(--stroke-danger-disabled);
+    --button-variant-outlined-foreground: var(--text-on-danger-outlined);
+    --button-variant-outlined-foreground-disabled: var(--text-on-danger-outlined-disabled);
+    --button-variant-text: transparent;
+    --button-variant-text-hover: var(--fill-danger-text-hover);
+    --button-variant-text-foreground: var(--text-danger);
+    --button-variant-gradient-start: var(--gradient-danger-start);
+    --button-variant-gradient-end: var(--gradient-danger-end);
+    --button-variant-gradient-foreground: var(--gradient-danger-foreground);
+    --button-variant-gradient-disabled: var(--gradient-danger-disabled);
+    --button-variant-gradient-foreground-disabled: var(--text-on-danger-strong-disabled);
+  }
+
+  :is(.fullWidth-wXvP0v, .infonomic-button-full-width) {
+    width: 100%;
+    display: flex;
+  }
+}
+

package/dist/components/button/combo-button.d.ts

@@ -0,0 +1,21 @@
+import { type ButtonProps } from './button';
+export type ComboButtonProps = ButtonProps & {
+    options: {
+        label: string;
+        value: string;
+    }[];
+    onButtonClick?: () => void;
+    onOptionSelect?: (value: string) => void;
+    disabled?: boolean;
+    buttonDisabled?: boolean;
+    optionsDisabled?: boolean;
+    children?: React.ReactNode;
+    align?: 'start' | 'center' | 'end';
+    dataSide?: 'top' | 'bottom' | 'left' | 'right';
+    sideOffset?: number;
+    className?: string;
+    buttonClassName?: string;
+    triggerClassName?: string;
+};
+export declare const ComboButton: ({ options, onButtonClick, onOptionSelect, disabled, buttonDisabled, optionsDisabled, children, align, dataSide, sideOffset, className, buttonClassName, triggerClassName, intent, ...rest }: ComboButtonProps) => import("react").JSX.Element;
+//# sourceMappingURL=combo-button.d.ts.map

package/dist/components/button/combo-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"combo-button.d.ts","sourceRoot":"","sources":["../../../src/components/button/combo-button.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,UAAU,CAAA;AAGnD,MAAM,MAAM,gBAAgB,GAAG,WAAW,GAAG;IAC3C,OAAO,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAA;IAC3C,aAAa,CAAC,EAAE,MAAM,IAAI,CAAA;IAC1B,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAA;IAClC,QAAQ,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAA;IAC9C,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,gBAAgB,CAAC,EAAE,MAAM,CAAA;CAC1B,CAAA;AAED,eAAO,MAAM,WAAW,GAAI,6LAgBzB,gBAAgB,gCAiDlB,CAAA"}

package/dist/components/button/combo-button.js

@@ -0,0 +1,54 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import classnames from "classnames";
+import { ChevronDownIcon } from "../../icons/chevron-down-icon.js";
+import { Dropdown } from "../dropdown/dropdown.js";
+import { Button } from "./button.js";
+import combo_button_module from "./combo-button.module.js";
+const ComboButton = ({ options, onButtonClick, onOptionSelect, disabled = false, buttonDisabled = false, optionsDisabled = false, children, align = 'end', dataSide = 'top', sideOffset = 5, className, buttonClassName, triggerClassName, intent = 'primary', ...rest })=>/*#__PURE__*/ jsxs("div", {
+        className: classnames('combo-button-wrapper', combo_button_module["combo-button-wrapper"], className),
+        style: {
+            '--ring-color': `var(--ring-${intent})`
+        },
+        children: [
+            /*#__PURE__*/ jsx(Button, {
+                className: classnames('combo-button-button', combo_button_module["combo-button-button"], buttonClassName),
+                disabled: disabled || buttonDisabled,
+                intent: intent,
+                ...rest,
+                onClick: onButtonClick,
+                children: children
+            }),
+            /*#__PURE__*/ jsxs(Dropdown.Root, {
+                children: [
+                    /*#__PURE__*/ jsx(Dropdown.Trigger, {
+                        className: classnames('combo-button-trigger', combo_button_module["combo-button-trigger"], triggerClassName),
+                        render: /*#__PURE__*/ jsx(Button, {
+                            disabled: disabled || optionsDisabled,
+                            intent: intent,
+                            ...rest
+                        }),
+                        children: /*#__PURE__*/ jsx(ChevronDownIcon, {
+                            width: "16px",
+                            height: "16px"
+                        })
+                    }),
+                    options.length > 0 && /*#__PURE__*/ jsx(Dropdown.Portal, {
+                        children: /*#__PURE__*/ jsx(Dropdown.Content, {
+                            className: classnames('combo-button-options', combo_button_module["combo-button-options"]),
+                            align: align,
+                            "data-side": dataSide,
+                            sideOffset: sideOffset,
+                            children: options.map((option)=>/*#__PURE__*/ jsx(Dropdown.Item, {
+                                    onClick: ()=>onOptionSelect?.(option.value),
+                                    children: /*#__PURE__*/ jsx("div", {
+                                        className: classnames('combo-button-options-item', combo_button_module["combo-button-options-item"]),
+                                        children: option.label
+                                    })
+                                }, option.value))
+                        })
+                    })
+                ]
+            })
+        ]
+    });
+export { ComboButton };

package/dist/components/button/combo-button.module.js

@@ -0,0 +1,12 @@
+import "./combo-button_module.css";
+const combo_button_module = {
+    "combo-button-wrapper": "combo-button-wrapper-nRtH6j",
+    comboButtonWrapper: "combo-button-wrapper-nRtH6j",
+    "combo-button-button": "combo-button-button-Cb8qgF",
+    comboButtonButton: "combo-button-button-Cb8qgF",
+    "combo-button-trigger": "combo-button-trigger-mVb2fy",
+    comboButtonTrigger: "combo-button-trigger-mVb2fy",
+    "combo-button-options": "combo-button-options-T9vVC9",
+    comboButtonOptions: "combo-button-options-T9vVC9"
+};
+export default combo_button_module;

package/dist/components/button/combo-button_module.css

@@ -0,0 +1,52 @@
+@layer byline-base, byline-utilities, byline-theme;
+
+@layer byline-components {
+  :is(.combo-button-wrapper-nRtH6j, .infonomic-combo-button-wrapper) {
+    border-radius: var(--border-radius-sm);
+    outline-offset: 2px;
+    transition: outline-color var(--transition-normal);
+    outline: 1px solid #0000;
+    align-items: center;
+    gap: .075rem;
+    display: flex;
+  }
+
+  .combo-button-wrapper-nRtH6j:focus-within {
+    outline-color: var(--ring-color);
+  }
+
+  .combo-button-wrapper-nRtH6j:has([data-popup-open]) {
+    outline-color: var(--ring-color);
+  }
+
+  .infonomic-combo-button-wrapper:focus-within {
+    outline-color: var(--ring-color);
+  }
+
+  .infonomic-combo-button-wrapper:has([data-popup-open]) {
+    outline-color: var(--ring-color);
+  }
+
+  :is(.combo-button-button-Cb8qgF, .infonomic-combo-button-button) {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  .combo-button-button-Cb8qgF:focus, .combo-button-button-Cb8qgF:active {
+    outline-color: #0000;
+  }
+
+  :is(.combo-button-trigger-mVb2fy, .infonomic-combo-button-trigger) {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
+  .combo-button-trigger-mVb2fy:focus, .combo-button-trigger-mVb2fy:active {
+    outline-color: #0000;
+  }
+
+  :is(.combo-button-options-T9vVC9, .infonomic-combo-button-options) {
+    min-width: 120px;
+  }
+}
+

package/dist/components/button/control-buttons.d.ts

@@ -0,0 +1,17 @@
+import type React from 'react';
+import type { Size } from './@types/button.js';
+type ButtonType = React.JSX.IntrinsicElements['button'];
+interface ControlButtonProps extends ButtonType {
+    size?: Size;
+    className?: string;
+    onClick?: () => void;
+    ref?: React.RefObject<HTMLButtonElement>;
+}
+interface DirectionalButtonProps extends ControlButtonProps {
+    direction: 'up' | 'down' | 'left' | 'right';
+}
+export declare const DirectionalButton: ({ size, direction, className, onClick, ref, ...rest }: DirectionalButtonProps) => React.JSX.Element;
+export declare const PlayButton: ({ size, className, onClick, ref, ...rest }: ControlButtonProps) => React.JSX.Element;
+export declare const StopButton: ({ size, className, onClick, ref, ...rest }: ControlButtonProps) => React.JSX.Element;
+export {};
+//# sourceMappingURL=control-buttons.d.ts.map

package/dist/components/button/control-buttons.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"control-buttons.d.ts","sourceRoot":"","sources":["../../../src/components/button/control-buttons.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAA;AAE9C,KAAK,UAAU,GAAG,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,QAAQ,CAAC,CAAA;AAEvD,UAAU,kBAAmB,SAAQ,UAAU;IAC7C,IAAI,CAAC,EAAE,IAAI,CAAA;IACX,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAA;CACzC;AAED,UAAU,sBAAuB,SAAQ,kBAAkB;IACzD,SAAS,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,CAAA;CAC5C;AAED,eAAO,MAAM,iBAAiB,GAAI,uDAO/B,sBAAsB,sBAkCxB,CAAA;AAED,eAAO,MAAM,UAAU,GAAI,4CAMxB,kBAAkB,sBA6BpB,CAAA;AAED,eAAO,MAAM,UAAU,GAAI,4CAMxB,kBAAkB,sBA+BpB,CAAA"}

package/dist/components/button/control-buttons.js

@@ -0,0 +1,88 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import classnames from "classnames";
+import control_buttons_module from "./control-buttons.module.js";
+const DirectionalButton = ({ size = 'md', direction, className, onClick, ref, ...rest })=>{
+    const handleClick = ()=>{
+        if (null != onClick) onClick();
+    };
+    return /*#__PURE__*/ jsx("button", {
+        ref: ref,
+        ...rest,
+        onClick: handleClick,
+        type: "button",
+        "aria-label": direction,
+        className: classnames('infonomic-control-button', direction, size, control_buttons_module["directional-button"], control_buttons_module[direction], control_buttons_module[size], className),
+        children: /*#__PURE__*/ jsx("span", {
+            children: /*#__PURE__*/ jsx("svg", {
+                className: "icon",
+                focusable: "false",
+                "aria-hidden": "true",
+                viewBox: "0 0 51 32",
+                children: /*#__PURE__*/ jsx("path", {
+                    fill: "currentColor",
+                    d: "M25.4,9.8L45.6,30l4.5-4.5L25.4,0.8L0.8,25.4L5.3,30L25.4,9.8z"
+                })
+            })
+        })
+    });
+};
+const PlayButton = ({ size = 'md', className, onClick, ref, ...rest })=>{
+    const handleClick = ()=>{
+        if (null != onClick) onClick();
+    };
+    return /*#__PURE__*/ jsx("button", {
+        ref: ref,
+        ...rest,
+        onClick: handleClick,
+        type: "button",
+        "aria-label": "play",
+        className: classnames('control-button', 'play', size, control_buttons_module["play-button"], control_buttons_module[size], className),
+        children: /*#__PURE__*/ jsx("span", {
+            children: /*#__PURE__*/ jsx("svg", {
+                className: "icon",
+                focusable: "false",
+                "aria-hidden": "true",
+                viewBox: "0 0 32 32",
+                children: /*#__PURE__*/ jsx("path", {
+                    d: "M12 8L26 16L12 24V8Z",
+                    fill: "none",
+                    stroke: "currentColor",
+                    strokeWidth: "2",
+                    strokeLinejoin: "round"
+                })
+            })
+        })
+    });
+};
+const StopButton = ({ size = 'md', className, onClick, ref, ...rest })=>{
+    const handleClick = ()=>{
+        if (null != onClick) onClick();
+    };
+    return /*#__PURE__*/ jsx("button", {
+        ref: ref,
+        ...rest,
+        onClick: handleClick,
+        type: "button",
+        "aria-label": "stop",
+        className: classnames('control-button', 'stop', size, control_buttons_module["stop-button"], control_buttons_module[size], className),
+        children: /*#__PURE__*/ jsx("span", {
+            children: /*#__PURE__*/ jsx("svg", {
+                className: "icon",
+                focusable: "false",
+                "aria-hidden": "true",
+                viewBox: "0 0 32 32",
+                children: /*#__PURE__*/ jsx("rect", {
+                    x: "4",
+                    y: "4",
+                    width: "24",
+                    height: "24",
+                    fill: "none",
+                    stroke: "currentColor",
+                    strokeWidth: "3"
+                })
+            })
+        })
+    });
+};
+export { DirectionalButton, PlayButton, StopButton };

package/dist/components/button/control-buttons.module.js

@@ -0,0 +1,20 @@
+import "./control-buttons_module.css";
+const control_buttons_module = {
+    "stop-button": "stop-button-krMTsl",
+    stopButton: "stop-button-krMTsl",
+    "play-button": "play-button-GfHYHO",
+    playButton: "play-button-GfHYHO",
+    "directional-button": "directional-button-kGS8rA",
+    directionalButton: "directional-button-kGS8rA",
+    icon: "icon-k646_6",
+    xs: "xs-lujClY",
+    sm: "sm-Ay8zIA",
+    md: "md-wBr0Jw",
+    lg: "lg-idpovR",
+    xl: "xl-jHgaWE",
+    up: "up-fGNcdy",
+    down: "down-y1K3Vt",
+    left: "left-B6s4j6",
+    right: "right-nFxLqo"
+};
+export default control_buttons_module;