@byline/ui 0.9.3 → 0.10.1

package/dist/components/badge/badge.js

@@ -0,0 +1,18 @@
+import { useRender } from "@base-ui/react/use-render";
+import classnames from "classnames";
+import badge_module from "./badge.module.js";
+const Badge = ({ className, intent = 'primary', children, render, ref, ...rest })=>{
+    const element = useRender({
+        defaultTagName: 'div',
+        render,
+        ref,
+        props: {
+            ...rest,
+            className: classnames('infonomic-badge', `infonomic-badge-${intent}`, badge_module.badge, badge_module[intent], className),
+            children
+        }
+    });
+    return element;
+};
+Badge.displayName = 'Badge';
+export { Badge };

package/dist/components/badge/badge.module.js

@@ -0,0 +1,12 @@
+import "./badge_module.css";
+const badge_module = {
+    badge: "badge-8xVidp",
+    primary: "primary-oZyR_M",
+    secondary: "secondary-VsqJTm",
+    noeffect: "noeffect-R8eJtO",
+    success: "success-h2otET",
+    info: "info-OG3F3u",
+    warning: "warning-zTXksZ",
+    danger: "danger-hKF7l_"
+};
+export default badge_module;

package/dist/components/badge/badge_module.css

@@ -0,0 +1,51 @@
+@layer byline-base, byline-functional, byline-utilities, byline-theme, byline-typography;
+
+@layer byline-components {
+  :is(.badge-8xVidp, .infonomic-badge) {
+    font-size: var(--font-size-sm);
+    text-align: center;
+    white-space: nowrap;
+    vertical-align: baseline;
+    border-radius: var(--border-radius-sm);
+    padding: .25em .4em;
+    font-weight: 400;
+    line-height: 1;
+    display: inline-block;
+  }
+
+  :is(.primary-oZyR_M, .infonomic-badge-primary) {
+    color: var(--text-on-primary-strong);
+    background-color: var(--fill-primary-strong);
+  }
+
+  :is(.secondary-VsqJTm, .infonomic-badge-secondary) {
+    color: var(--text-on-secondary-strong);
+    background-color: var(--fill-secondary-strong);
+  }
+
+  :is(.noeffect-R8eJtO, .infonomic-badge-noeffect) {
+    color: var(--text-on-noeffect-strong);
+    background-color: var(--fill-noeffect-strong);
+  }
+
+  :is(.success-h2otET, .infonomic-badge-success) {
+    color: var(--text-on-success-strong);
+    background-color: var(--fill-success-strong);
+  }
+
+  :is(.info-OG3F3u, .infonomic-badge-info) {
+    color: var(--text-on-info-strong);
+    background-color: var(--fill-info-strong);
+  }
+
+  :is(.warning-zTXksZ, .infonomic-badge-warning) {
+    color: var(--text-on-warning-strong);
+    background-color: var(--fill-warning-strong);
+  }
+
+  :is(.danger-hKF7l_, .infonomic-badge-danger) {
+    color: var(--text-on-danger-strong);
+    background-color: var(--fill-danger-strong);
+  }
+}
+

package/dist/components/button/@types/button.d.ts

@@ -0,0 +1,41 @@
+import type { Size as s, Intent as t } from '../../@types/shared.js';
+/**
+ * This file contains the types and prop-types for the Button and IconButton components.
+ */
+/**
+ * Available visual style variants for Button and IconButton.
+ */
+export declare const variant: readonly ["filled", "filled-weak", "outlined", "gradient", "text"];
+/**
+ * Visual style variant of the button.
+ *
+ * - `filled`      — solid background fill using the intent color (default)
+ * - `filled-weak` — lightly tinted background, lower visual weight than `filled`
+ * - `outlined`    — transparent background with an intent-colored border
+ * - `gradient`    — gradient background from intent start to end color
+ * - `text`        — no background or border, label only (like a hyperlink)
+ *
+ * @default 'filled'
+ */
+export type Variant = (typeof variant)[number];
+/**
+ * Size of the button. Inherits from the shared `Size` type.
+ * @default 'md'
+ */
+export type Size = 'md' | s;
+/**
+ * Semantic color intent of the button. Inherits from the shared `Intent` type.
+ * @default 'primary'
+ */
+export type Intent = 'primary' | t;
+/**
+ * When `true`, the button expands to fill 100% of its container width.
+ * @default false
+ */
+export type FullWidth = boolean;
+/**
+ * When `true`, enables a Material-style ripple animation on click/tap.
+ * @default false
+ */
+export type EnableRipple = boolean;
+//# sourceMappingURL=button.d.ts.map

package/dist/components/button/@types/button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../../src/components/button/@types/button.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,IAAI,CAAC,EAAE,MAAM,IAAI,CAAC,EAAE,MAAM,wBAAwB,CAAA;AAEpE;;GAEG;AAIH;;GAEG;AACH,eAAO,MAAM,OAAO,oEAAqE,CAAA;AAEzF;;;;;;;;;;GAUG;AACH,MAAM,MAAM,OAAO,GAAG,CAAC,OAAO,OAAO,CAAC,CAAC,MAAM,CAAC,CAAA;AAE9C;;;GAGG;AACH,MAAM,MAAM,IAAI,GAAG,IAAI,GAAG,CAAC,CAAA;AAE3B;;;GAGG;AACH,MAAM,MAAM,MAAM,GAAG,SAAS,GAAG,CAAC,CAAA;AAElC;;;GAGG;AACH,MAAM,MAAM,SAAS,GAAG,OAAO,CAAA;AAE/B;;;GAGG;AACH,MAAM,MAAM,YAAY,GAAG,OAAO,CAAA"}

package/dist/components/button/@types/button.js

@@ -0,0 +1,8 @@
+const variant = [
+    'filled',
+    'filled-weak',
+    'outlined',
+    'gradient',
+    'text'
+];
+export { variant };

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

@@ -0,0 +1,39 @@
+import React, { type Ref } from 'react';
+import { Toggle } from '@base-ui/react/toggle';
+import { ToggleGroup } from '@base-ui/react/toggle-group';
+import type { EnableRipple, Intent, Size, Variant } from './@types/button';
+interface ButtonGroupContextType {
+    variant?: Variant;
+    size?: Size;
+    ripple?: EnableRipple;
+    expandToFit?: boolean;
+    active?: Intent;
+    inactive?: Intent;
+    value?: string | string[];
+}
+type ToggleGroupProps = React.ComponentProps<typeof ToggleGroup>;
+type SingleToggleGroupProps = Omit<ToggleGroupProps, 'multiple' | 'value' | 'onValueChange'> & {
+    type: 'single';
+    value?: string;
+    onValueChange?: (value: string) => void;
+};
+type MultipleToggleGroupProps = Omit<ToggleGroupProps, 'multiple' | 'value' | 'onValueChange'> & {
+    type: 'multiple';
+    value?: string[];
+    onValueChange?: (value: string[]) => void;
+};
+export type ButtonGroupProps = (SingleToggleGroupProps | MultipleToggleGroupProps) & {
+    onValueChange?: (value: string | string[]) => void;
+    ref?: Ref<HTMLDivElement>;
+} & ButtonGroupContextType;
+declare const ButtonGroup: ({ className, variant, size, ripple, expandToFit, active, inactive, type, onValueChange, value, defaultValue, children, ref, ...props }: ButtonGroupProps) => React.JSX.Element;
+type ButtonGroupItemProps = Omit<React.ComponentProps<typeof Toggle>, 'className'> & {
+    className?: string;
+    ref?: Ref<HTMLButtonElement>;
+} & ButtonGroupContextType;
+declare const ButtonGroupItem: {
+    ({ className, children, value, ref, ...props }: ButtonGroupItemProps): React.JSX.Element;
+    displayName: string;
+};
+export { ButtonGroup, ButtonGroupItem };
+//# sourceMappingURL=button-group.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"button-group.d.ts","sourceRoot":"","sources":["../../../src/components/button/button-group.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAE,KAAK,GAAG,EAAE,MAAM,OAAO,CAAA;AAEvC,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAA;AAC9C,OAAO,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAA;AAKzD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAA;AAE1E,UAAU,sBAAsB;IAC9B,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,IAAI,CAAC,EAAE,IAAI,CAAA;IACX,MAAM,CAAC,EAAE,YAAY,CAAA;IACrB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAA;CAC1B;AAWD,KAAK,gBAAgB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,WAAW,CAAC,CAAA;AAGhE,KAAK,sBAAsB,GAAG,IAAI,CAAC,gBAAgB,EAAE,UAAU,GAAG,OAAO,GAAG,eAAe,CAAC,GAAG;IAC7F,IAAI,EAAE,QAAQ,CAAA;IACd,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CACxC,CAAA;AAED,KAAK,wBAAwB,GAAG,IAAI,CAAC,gBAAgB,EAAE,UAAU,GAAG,OAAO,GAAG,eAAe,CAAC,GAAG;IAC/F,IAAI,EAAE,UAAU,CAAA;IAChB,KAAK,CAAC,EAAE,MAAM,EAAE,CAAA;IAChB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;CAC1C,CAAA;AAED,MAAM,MAAM,gBAAgB,GAAG,CAAC,sBAAsB,GAAG,wBAAwB,CAAC,GAAG;IACnF,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,KAAK,IAAI,CAAA;IAClD,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAA;CAC1B,GAAG,sBAAsB,CAAA;AAG1B,QAAA,MAAM,WAAW,GAAI,wIAelB,gBAAgB,sBAoClB,CAAA;AAID,KAAK,oBAAoB,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,EAAE,WAAW,CAAC,GAAG;IACnF,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,GAAG,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,CAAA;CAC7B,GAAG,sBAAsB,CAAA;AAE1B,QAAA,MAAM,eAAe;oDAAmD,oBAAoB;;CAyB3F,CAAA;AAID,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,CAAA"}

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

@@ -0,0 +1,71 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import react from "react";
+import { Toggle } from "@base-ui/react/toggle";
+import { ToggleGroup } from "@base-ui/react/toggle-group";
+import classnames from "classnames";
+import { Button } from "./button.js";
+import button_group_module from "./button-group.module.js";
+const ButtonGroupContext = /*#__PURE__*/ react.createContext({
+    size: 'md',
+    variant: 'filled',
+    ripple: true,
+    expandToFit: false,
+    active: 'primary',
+    inactive: 'noeffect'
+});
+const ButtonGroup = ({ className, variant = 'filled', size = 'md', ripple = true, expandToFit = false, active = 'primary', inactive = 'noeffect', type, onValueChange, value, defaultValue, children, ref, ...props })=>{
+    const isMultiple = 'multiple' === type;
+    const handleValueChange = (newValue, _event)=>{
+        if (!onValueChange) return;
+        isMultiple ? onValueChange(newValue) : onValueChange(newValue[0] ?? '');
+    };
+    const normalizedValue = null == value ? void 0 : Array.isArray(value) ? value : [
+        value
+    ];
+    const normalizedDefault = null == defaultValue ? void 0 : Array.isArray(defaultValue) ? defaultValue : [
+        defaultValue
+    ];
+    return /*#__PURE__*/ jsx(ToggleGroup, {
+        multiple: isMultiple,
+        defaultValue: normalizedDefault,
+        value: normalizedValue,
+        ref: ref,
+        onValueChange: handleValueChange,
+        className: classnames(button_group_module["button-group"], className),
+        ...props,
+        children: /*#__PURE__*/ jsx(ButtonGroupContext, {
+            value: {
+                variant,
+                size,
+                ripple,
+                expandToFit,
+                active,
+                inactive,
+                value
+            },
+            children: children
+        })
+    });
+};
+ButtonGroupContext.displayName = 'ButtonGroup';
+const ButtonGroupItem = ({ className, children, value, ref, ...props })=>{
+    const context = react.useContext(ButtonGroupContext);
+    const active = Array.isArray(context.value) ? context.value.includes(value) : context.value === value;
+    return /*#__PURE__*/ jsx(Toggle, {
+        value: value,
+        ref: ref,
+        render: /*#__PURE__*/ jsx(Button, {
+            className: className,
+            fullWidth: context.expandToFit,
+            variant: context.variant,
+            intent: active ? context.active : context.inactive,
+            size: context.size,
+            ripple: context.ripple
+        }),
+        ...props,
+        children: children
+    });
+};
+ButtonGroupItem.displayName = 'ButtonGroupItem';
+export { ButtonGroup, ButtonGroupItem };

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

@@ -0,0 +1,6 @@
+import "./button-group_module.css";
+const button_group_module = {
+    "button-group": "button-group-uqvOi8",
+    buttonGroup: "button-group-uqvOi8"
+};
+export default button_group_module;

package/dist/components/button/button-group_module.css

@@ -0,0 +1,17 @@
+@layer byline-base, byline-utilities, byline-theme;
+
+@layer byline-components {
+  :is(.button-group-uqvOi8, .infonomic-button-group) {
+    place-items: center;
+    gap: var(--gap-2);
+    flex-direction: column;
+    display: flex;
+  }
+
+  @media screen and (min-width: 40rem) {
+    :is(.button-group-uqvOi8, .infonomic-button-group) {
+      flex-direction: row;
+    }
+  }
+}
+

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

@@ -0,0 +1,16 @@
+import type React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import type { Intent, Size, Variant } from './@types/button.js';
+export type ButtonProps = useRender.ComponentProps<'button'> & {
+    variant?: Variant;
+    size?: Size;
+    type?: 'submit' | 'reset' | 'button';
+    intent?: Intent;
+    fullWidth?: boolean;
+    ripple?: boolean;
+    className?: string;
+    children?: React.ReactNode;
+    ref?: React.Ref<HTMLButtonElement>;
+} & React.HTMLAttributes<HTMLElement>;
+export declare const Button: ({ variant, size, type, intent, fullWidth, ripple, className, children, render, ref, ...rest }: ButtonProps) => React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+//# sourceMappingURL=button.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/components/button/button.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AAKrD,OAAO,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAA;AAE/D,MAAM,MAAM,WAAW,GAAG,SAAS,CAAC,cAAc,CAAC,QAAQ,CAAC,GAAG;IAC7D,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,IAAI,CAAC,EAAE,IAAI,CAAA;IACX,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAA;IACpC,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAA;CACnC,GAAG,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,CAAA;AAErC,eAAO,MAAM,MAAM,GAAI,+FAYpB,WAAW,2EAiCb,CAAA"}

package/dist/components/button/button.js

@@ -0,0 +1,29 @@
+"use client";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import classnames from "classnames";
+import { Ripple } from "../../lib/ripple.js";
+import button_module from "./button.module.js";
+const Button = ({ variant = 'filled', size = 'md', type = 'button', intent = 'primary', fullWidth = false, ripple = true, className, children, render, ref, ...rest })=>{
+    const defaultProps = {
+        type,
+        className: classnames('infonomic-button', `infonomic-button-${intent}`, `infonomic-button-${variant}`, `infonomic-button-${size}`, button_module.button, button_module[variant], button_module[size], button_module[intent], {
+            [button_module.fullWidth]: true === fullWidth
+        }, className),
+        children
+    };
+    if (true === ripple) {
+        const rippleEffect = new Ripple();
+        defaultProps.onMouseDown = (e)=>{
+            rippleEffect.create(e, 'filled' === variant || 'gradient' === variant ? 'light' : 'dark');
+        };
+    }
+    const element = useRender({
+        defaultTagName: 'button',
+        render,
+        ref,
+        props: mergeProps(defaultProps, rest)
+    });
+    return element;
+};
+export { Button };

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

@@ -0,0 +1,26 @@
+import "./button_module.css";
+const button_module = {
+    button: "button-IjDhC0",
+    square: "square-P_6yde",
+    round: "round-uqus3n",
+    xs: "xs-jxTd5R",
+    sm: "sm-uD_Ugt",
+    md: "md-Qp9ad6",
+    lg: "lg-FAYTen",
+    xl: "xl-Gwvhl4",
+    filled: "filled-CwGsrO",
+    "filled-weak": "filled-weak-QLU8bA",
+    filledWeak: "filled-weak-QLU8bA",
+    outlined: "outlined-nZGbxu",
+    gradient: "gradient-ySC3O3",
+    text: "text-GaxlcE",
+    primary: "primary-tUmczz",
+    secondary: "secondary-UqT2AY",
+    noeffect: "noeffect-fpxSgg",
+    success: "success-fTNDEn",
+    info: "info-qrdXQD",
+    warning: "warning-a00T3A",
+    danger: "danger-rwIV_i",
+    fullWidth: "fullWidth-wXvP0v"
+};
+export default button_module;