@byline/ui 0.9.3 → 0.10.1

package/dist/components/button/control-buttons_module.css

@@ -0,0 +1,109 @@
+@layer byline-base, byline-utilities, byline-theme;
+
+@layer byline-components {
+  :is(.stop-button-krMTsl, .play-button-GfHYHO, .directional-button-kGS8rA, .infonomic-stop-button, .infonomic-play-button, .infonomic-directional-button) {
+    color: #fff;
+    background-color: var(--fill-primary-strong);
+    cursor: pointer;
+    border-style: none;
+    border-radius: 100%;
+    outline: none;
+    justify-content: center;
+    align-items: center;
+    margin: 0;
+    padding: 0;
+    text-decoration: none;
+    transition: all .3s cubic-bezier(.25, .8, .5, 1), color 1ms;
+    display: flex;
+  }
+
+  .directional-button-kGS8rA span {
+    width: 40%;
+    padding-bottom: 3px;
+  }
+
+  .play-button-GfHYHO span {
+    width: 80%;
+    height: 80%;
+  }
+
+  .stop-button-krMTsl span {
+    width: 50%;
+    height: 50%;
+  }
+
+  .directional-button-kGS8rA span .icon-k646_6 path {
+    stroke: none;
+    fill: #fff;
+  }
+
+  .stop-button-krMTsl:hover, .play-button-GfHYHO:hover, .stop-button-krMTsl:focus, .play-button-GfHYHO:focus, .directional-button-kGS8rA:hover, .directional-button-kGS8rA:focus {
+    color: #fff;
+    background-color: var(--fill-primary-strong-hover);
+    transform: translateY(-5px);
+  }
+
+  .xs-lujClY {
+    width: 20px;
+    min-width: 20px;
+    height: 20px;
+    min-height: 20px;
+  }
+
+  .sm-Ay8zIA {
+    width: 30px;
+    min-width: 30px;
+    height: 30px;
+    min-height: 30px;
+  }
+
+  .md-wBr0Jw {
+    width: 40px;
+    min-width: 40px;
+    height: 40px;
+    min-height: 40px;
+  }
+
+  .lg-idpovR {
+    width: 50px;
+    min-width: 50px;
+    height: 50px;
+    min-height: 50px;
+  }
+
+  .xl-jHgaWE {
+    width: 40px;
+    min-width: 40px;
+    height: 40px;
+    min-height: 40px;
+  }
+
+  .up-fGNcdy:hover, .up-fGNcdy:focus {
+    transform: translateY(-5px);
+  }
+
+  .down-y1K3Vt span, .down-y1K3Vt span {
+    transform: rotate(180deg);
+  }
+
+  .down-y1K3Vt:hover, .down-y1K3Vt:focus {
+    transform: translateY(5px);
+  }
+
+  .left-B6s4j6 span, .left-B6s4j6 span {
+    transform: rotate(-90deg);
+  }
+
+  .left-B6s4j6:hover, .left-B6s4j6:focus {
+    transform: translateX(-5px);
+  }
+
+  .right-nFxLqo span, .right-nFxLqo span {
+    transform: rotate(90deg);
+  }
+
+  .right-nFxLqo:hover, .right-nFxLqo:focus {
+    transform: translateX(5px);
+  }
+}
+

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

@@ -0,0 +1,12 @@
+import type React from 'react';
+import type { ButtonProps } from './button.js';
+interface CopyButtonProps extends Omit<ButtonProps, 'children'> {
+    text: string;
+    hoverText?: string;
+    copiedText?: string;
+    containerClassName?: string;
+    svgClassName?: string;
+}
+export declare function CopyButton({ text, hoverText, copiedText, variant, size, intent, fullWidth, ripple, className, containerClassName, svgClassName, ...rest }: CopyButtonProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=copy-button.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"copy-button.d.ts","sourceRoot":"","sources":["../../../src/components/button/copy-button.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAQ9B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA;AAE9C,UAAU,eAAgB,SAAQ,IAAI,CAAC,WAAW,EAAE,UAAU,CAAC;IAC7D,IAAI,EAAE,MAAM,CAAA;IACZ,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB;AAED,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,SAAkB,EAClB,UAAsB,EACtB,OAAO,EACP,IAAW,EACX,MAAM,EACN,SAAS,EACT,MAAM,EACN,SAAS,EACT,kBAAkB,EAClB,YAAY,EACZ,GAAG,IAAI,EACR,EAAE,eAAe,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAyFrC"}

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

@@ -0,0 +1,71 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import classnames from "classnames";
+import { Tooltip } from "../tooltip/tooltip.js";
+import { Button } from "./button.js";
+import copy_button_module from "./copy-button.module.js";
+function CopyButton({ text, hoverText = 'Copy', copiedText = 'Copied!', variant, size = 'sm', intent, fullWidth, ripple, className, containerClassName, svgClassName, ...rest }) {
+    const [copied, setCopied] = useState(false);
+    const [hoverOpen, setHoverOpen] = useState(false);
+    const handleCopied = ()=>{
+        if (null != navigator.clipboard && null != navigator.permissions) navigator.clipboard.writeText(text).then(()=>{
+            setCopied(true);
+        });
+        else if (document.queryCommandSupported('copy')) {
+            const element = document.createElement('textarea');
+            element.value = text;
+            document.body.appendChild(element);
+            element.select();
+            document.execCommand('copy');
+            document.body.removeChild(element);
+            setCopied(true);
+        }
+    };
+    useEffect(()=>{
+        if (!copied) return;
+        const timer = setTimeout(()=>setCopied(false), 900);
+        return ()=>clearTimeout(timer);
+    }, [
+        copied
+    ]);
+    const tooltipText = copied ? copiedText : hoverText;
+    return /*#__PURE__*/ jsx("div", {
+        className: classnames('infonomic-copy-button-container', copy_button_module["copy-button-container"], containerClassName),
+        children: /*#__PURE__*/ jsx(Tooltip, {
+            side: "top",
+            sideOffset: 2,
+            text: tooltipText,
+            open: copied || hoverOpen,
+            onOpenChange: (next)=>{
+                if (copied && !next) return;
+                setHoverOpen(next);
+            },
+            children: /*#__PURE__*/ jsx(Button, {
+                variant: variant,
+                size: size,
+                intent: intent,
+                fullWidth: fullWidth,
+                ripple: ripple,
+                className: classnames('infonomic-copy-button', `infonomic-copy-button-${variant}`, `infonomic-copy-button-${size}`, `infonomic-copy-button-${intent}`, copy_button_module[size], className),
+                onClick: handleCopied,
+                ...rest,
+                children: /*#__PURE__*/ jsx("svg", {
+                    className: svgClassName,
+                    xmlns: "http://www.w3.org/2000/svg",
+                    focusable: "false",
+                    "aria-hidden": "true",
+                    viewBox: "0 0 15 15",
+                    strokeWidth: "0",
+                    children: /*#__PURE__*/ jsx("path", {
+                        d: "M1 9.50006C1 10.3285 1.67157 11.0001 2.5 11.0001H4L4 10.0001H2.5C2.22386 10.0001 2 9.7762 2 9.50006L2 2.50006C2 2.22392 2.22386 2.00006 2.5 2.00006L9.5 2.00006C9.77614 2.00006 10 2.22392 10 2.50006V4.00002H5.5C4.67158 4.00002 4 4.67159 4 5.50002V12.5C4 13.3284 4.67158 14 5.5 14H12.5C13.3284 14 14 13.3284 14 12.5V5.50002C14 4.67159 13.3284 4.00002 12.5 4.00002H11V2.50006C11 1.67163 10.3284 1.00006 9.5 1.00006H2.5C1.67157 1.00006 1 1.67163 1 2.50006V9.50006ZM5 5.50002C5 5.22388 5.22386 5.00002 5.5 5.00002H12.5C12.7761 5.00002 13 5.22388 13 5.50002V12.5C13 12.7762 12.7761 13 12.5 13H5.5C5.22386 13 5 12.7762 5 12.5V5.50002Z",
+                        fill: "currentColor",
+                        fillRule: "evenodd",
+                        clipRule: "evenodd"
+                    })
+                })
+            })
+        })
+    });
+}
+export { CopyButton };

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

@@ -0,0 +1,13 @@
+import "./copy-button_module.css";
+const copy_button_module = {
+    "copy-button-container": "copy-button-container-vCNz8o",
+    copyButtonContainer: "copy-button-container-vCNz8o",
+    "copy-button": "copy-button-oa4bdj",
+    copyButton: "copy-button-oa4bdj",
+    xs: "xs-lZmf78",
+    sm: "sm-KNN1e5",
+    md: "md-OoH0l4",
+    lg: "lg-uu5ujz",
+    xl: "xl-pFYyrS"
+};
+export default copy_button_module;

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

@@ -0,0 +1,49 @@
+@layer byline-base, byline-functional, byline-utilities, byline-theme, byline-typography;
+
+@layer byline-components {
+  :is(.copy-button-container-vCNz8o, .infonomic-copy-button-container) {
+    display: inline-block;
+  }
+
+  :is(.copy-button-oa4bdj svg, .infonomic-copy-button svg) {
+    width: 90%;
+    height: 90%;
+    display: block;
+  }
+
+  :is(.xs-lZmf78, .infonomic-copy-button-xs) {
+    width: 26px;
+    height: 26px;
+    min-height: 26px;
+    padding: .25rem;
+  }
+
+  :is(.sm-KNN1e5, .infonomic-copy-button-sm) {
+    width: 32px;
+    height: 32px;
+    min-height: 32px;
+    padding: .35rem;
+  }
+
+  :is(.md-OoH0l4, .infonomic-copy-button-md) {
+    width: 38px;
+    height: 38px;
+    min-height: 38px;
+    padding: .45rem;
+  }
+
+  :is(.lg-uu5ujz, .infonomic-copy-button-lg) {
+    width: 46px;
+    height: 46px;
+    min-height: 46px;
+    padding: .55rem;
+  }
+
+  :is(.xl-pFYyrS, .infonomic-copy-button-xl) {
+    width: 54px;
+    height: 54px;
+    min-height: 54px;
+    padding: .65rem;
+  }
+}
+

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

@@ -0,0 +1,8 @@
+import type { ButtonProps } from './button.js';
+type IconButtonProps = ButtonProps & {
+    square?: boolean;
+    round?: boolean;
+};
+export declare const IconButton: ({ square, round, variant, size, intent, className, children, ...rest }: IconButtonProps) => import("react").JSX.Element;
+export {};
+//# sourceMappingURL=icon-button.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"icon-button.d.ts","sourceRoot":"","sources":["../../../src/components/button/icon-button.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA;AAE9C,KAAK,eAAe,GAAG,WAAW,GAAG;IACnC,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB,CAAA;AAED,eAAO,MAAM,UAAU,GAAI,wEASxB,eAAe,gCAoBjB,CAAA"}

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

@@ -0,0 +1,18 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import classnames from "classnames";
+import { Button } from "./button.js";
+import button_module from "./button.module.js";
+const IconButton = ({ square = false, round = true, variant, size = 'sm', intent, className, children, ...rest })=>/*#__PURE__*/ jsx(Button, {
+        variant: variant,
+        size: size,
+        intent: intent,
+        className: classnames('icon-button', variant, size, intent, {
+            [button_module.square]: square
+        }, {
+            [button_module.round]: !square && round
+        }, className),
+        ...rest,
+        children: children
+    });
+export { IconButton };

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

@@ -0,0 +1,6 @@
+export * from './button';
+export * from './button-group';
+export * from './control-buttons';
+export * from './copy-button';
+export * from './icon-button';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/button/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAA;AACxB,cAAc,gBAAgB,CAAA;AAC9B,cAAc,mBAAmB,CAAA;AACjC,cAAc,eAAe,CAAA;AAC7B,cAAc,eAAe,CAAA"}

package/dist/components/button/index.js

@@ -0,0 +1,5 @@
+export * from "./button.js";
+export * from "./button-group.js";
+export * from "./control-buttons.js";
+export * from "./copy-button.js";
+export * from "./icon-button.js";

package/dist/components/card/card.d.ts

@@ -0,0 +1,37 @@
+import type React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+export type CardProps = useRender.ComponentProps<'div'> & {
+    children: React.ReactNode;
+    className?: string;
+    hover?: boolean;
+    ref?: React.Ref<HTMLDivElement>;
+};
+declare const Card: {
+    ({ className, hover, children, render, ref, ...rest }: CardProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+    displayName: string;
+    Header: {
+        ({ className, ref, ...props }: OtherProps): React.JSX.Element;
+        displayName: string;
+    };
+    Title: {
+        ({ className, ref, ...props }: OtherProps): React.JSX.Element;
+        displayName: string;
+    };
+    Description: {
+        ({ className, ref, ...props }: OtherProps): React.JSX.Element;
+        displayName: string;
+    };
+    Content: {
+        ({ className, ref, ...props }: OtherProps): React.JSX.Element;
+        displayName: string;
+    };
+    Footer: {
+        ({ className, ref, ...props }: OtherProps): React.JSX.Element;
+        displayName: string;
+    };
+};
+interface OtherProps extends React.HTMLAttributes<HTMLDivElement> {
+    ref?: React.Ref<HTMLDivElement>;
+}
+export { Card };
+//# sourceMappingURL=card.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../../src/components/card/card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AAKrD,MAAM,MAAM,SAAS,GAAG,SAAS,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IACxD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAA;CAChC,CAAA;AAED,QAAA,MAAM,IAAI;2DAA0D,SAAS;;;uCAwB/B,UAAU;;;;uCAUX,UAAU;;;;uCASJ,UAAU;;;;uCASd,UAAU;;;;uCASX,UAAU;;;CA7CvD,CAAA;AAID,UAAU,UAAW,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC/D,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAA;CAChC;AAsDD,OAAO,EAAE,IAAI,EAAE,CAAA"}

package/dist/components/card/card.js

@@ -0,0 +1,56 @@
+import { jsx } from "react/jsx-runtime";
+import { useRender } from "@base-ui/react/use-render";
+import classnames from "classnames";
+import card_module from "./card.module.js";
+const Card = ({ className, hover, children, render, ref, ...rest })=>{
+    const hoverClasses = null != hover && true === hover ? card_module["card-hover"] : void 0;
+    const classes = classnames('infonomic-card', card_module.card, hoverClasses, className);
+    const element = useRender({
+        defaultTagName: 'div',
+        render,
+        ref,
+        props: {
+            ...rest,
+            className: classes,
+            children
+        }
+    });
+    return element;
+};
+Card.displayName = 'Card';
+const Header = ({ className, ref, ...props })=>/*#__PURE__*/ jsx("div", {
+        ref: ref,
+        className: classnames('infonomic-card-header', card_module["card-header"], className),
+        ...props
+    });
+Header.displayName = 'CardHeader';
+const Title = ({ className, ref, ...props })=>/*#__PURE__*/ jsx("div", {
+        ref: ref,
+        className: classnames('infonomic-card-title', card_module["card-title"], className),
+        ...props
+    });
+Title.displayName = 'CardTitle';
+const Description = ({ className, ref, ...props })=>/*#__PURE__*/ jsx("div", {
+        ref: ref,
+        className: classnames("infonomic-card-description", card_module["card-description"], className),
+        ...props
+    });
+Description.displayName = "CardDescription";
+const Content = ({ className, ref, ...props })=>/*#__PURE__*/ jsx("div", {
+        ref: ref,
+        className: classnames('infonomic-card-content', card_module["card-content"], className),
+        ...props
+    });
+Content.displayName = 'CardContent';
+const Footer = ({ className, ref, ...props })=>/*#__PURE__*/ jsx("div", {
+        ref: ref,
+        className: classnames('infonomic-card-footer', card_module["card-footer"], className),
+        ...props
+    });
+Footer.displayName = 'CardFooter';
+Card.Header = Header;
+Card.Title = Title;
+Card.Description = Description;
+Card.Content = Content;
+Card.Footer = Footer;
+export { Card };

package/dist/components/card/card.module.js

@@ -0,0 +1,17 @@
+import "./card_module.css";
+const card_module = {
+    card: "card-mqJaiW",
+    "card-hover": "card-hover-hvT4d6",
+    cardHover: "card-hover-hvT4d6",
+    "card-header": "card-header-XnoBkP",
+    cardHeader: "card-header-XnoBkP",
+    "card-title": "card-title-JI7Lu3",
+    cardTitle: "card-title-JI7Lu3",
+    "card-description": "card-description-fwu7HE",
+    cardDescription: "card-description-fwu7HE",
+    "card-content": "card-content-uhoZYJ",
+    cardContent: "card-content-uhoZYJ",
+    "card-footer": "card-footer-BxTa4b",
+    cardFooter: "card-footer-BxTa4b"
+};
+export default card_module;

package/dist/components/card/card_module.css

@@ -0,0 +1,62 @@
+@layer byline-base, byline-functional, byline-utilities, byline-theme, byline-typography;
+
+@layer byline-components {
+  :is(.card-mqJaiW, .infonomic-card) {
+    width: 100%;
+    max-width: 100%;
+    color: var(--foreground);
+    background: var(--surface-panel);
+    border-width: var(--border-width-thin);
+    border-color: var(--border-color);
+    border-style: var(--border-style-solid);
+    border-radius: var(--border-radius-md);
+    box-shadow: var(--shadow-sm);
+    flex-direction: column;
+    text-decoration: none;
+    display: flex;
+  }
+
+  :is(.card-hover-hvT4d6, .infonomic-card-hover) {
+    transition: background .2s ease-in-out;
+  }
+
+  :is(.card-hover-hvT4d6:hover, .infonomic-card-hover:hover) {
+    background: oklch(from var(--theme-50) 1 .03 h);
+  }
+
+  :is(:is(.dark, [data-theme="dark"]) .card-hover-hvT4d6:hover, :is(.dark, [data-theme="dark"]) .infonomic-card-hover:hover) {
+    background: oklch(from var(--canvas-800) .2 c h);
+  }
+
+  :is(.card-header-XnoBkP, .infonomic-card-header) {
+    flex-direction: column;
+    gap: .5rem;
+    padding: 1rem;
+    display: flex;
+  }
+
+  :is(.card-title-JI7Lu3, .infonomic-card-title) {
+    color: var(--headings);
+    letter-spacing: -.015em;
+    font-size: 1.8rem;
+    font-weight: bold;
+    line-height: 1;
+  }
+
+  :is(.card-description-fwu7HE, .infonomic-card-description) {
+    color: var(--muted);
+    font-size: .875rem;
+  }
+
+  :is(.card-content-uhoZYJ, .infonomic-card-content) {
+    flex: 1;
+    padding: 0 1rem 1rem;
+  }
+
+  :is(.card-footer-BxTa4b, .infonomic-card-footer) {
+    align-items: center;
+    padding: 0 1rem 1rem;
+    display: flex;
+  }
+}
+

package/dist/components/chips/@types/chip.d.ts

@@ -0,0 +1,26 @@
+import type { Intent, Size } from '../../@types/shared.js';
+/**
+ * Available behavioural variants for the Chip component.
+ */
+export declare const chipVariant: readonly ["assist", "selectable", "removable", "selectable-removable"];
+/**
+ * Behavioural variant of the chip.
+ *
+ * - `assist`               — non-interactive display chip, purely informational
+ * - `selectable`           — toggles on/off when clicked (like a filter tag)
+ * - `removable`            — shows a dismiss/close button to remove the chip
+ * - `selectable-removable` — combines toggle selection with a dismiss button
+ */
+export type ChipVariant = (typeof chipVariant)[number];
+/**
+ * Semantic color intent of the chip. Inherits all values from the shared `Intent` type.
+ * Controls the chip's background and text color.
+ * @default 'primary'
+ */
+export type ChipIntent = Intent;
+/**
+ * Visual size of the chip. Inherits all values from the shared `Size` type.
+ * @default 'md'
+ */
+export type ChipSize = Size;
+//# sourceMappingURL=chip.d.ts.map

package/dist/components/chips/@types/chip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chip.d.ts","sourceRoot":"","sources":["../../../../src/components/chips/@types/chip.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAA;AAE1D;;GAEG;AACH,eAAO,MAAM,WAAW,wEAAyE,CAAA;AAEjG;;;;;;;GAOG;AACH,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAA;AAEtD;;;;GAIG;AACH,MAAM,MAAM,UAAU,GAAG,MAAM,CAAA;AAE/B;;;GAGG;AACH,MAAM,MAAM,QAAQ,GAAG,IAAI,CAAA"}

package/dist/components/chips/@types/chip.js

@@ -0,0 +1,7 @@
+const chipVariant = [
+    'assist',
+    'selectable',
+    'removable',
+    'selectable-removable'
+];
+export { chipVariant };

package/dist/components/chips/chip.d.ts

@@ -0,0 +1,26 @@
+import type React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import type { ChipIntent, ChipSize, ChipVariant } from './@types/chip.js';
+type ToggleEvent = React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>;
+type RemoveEvent = React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>;
+export type ChipProps = Omit<useRender.ComponentProps<'button'>, 'onToggle'> & {
+    variant?: ChipVariant;
+    intent?: ChipIntent;
+    size?: ChipSize;
+    selected?: boolean;
+    disabled?: boolean;
+    startIcon?: React.ReactNode;
+    endIcon?: React.ReactNode;
+    selectedIcon?: React.ReactNode;
+    removeLabel?: string;
+    onToggle?: (selected: boolean, event: ToggleEvent) => void;
+    onRemove?: (event: RemoveEvent) => void;
+    className?: string;
+    ref?: React.Ref<HTMLButtonElement>;
+} & Omit<React.HTMLAttributes<HTMLElement>, 'onToggle'>;
+export declare const Chip: {
+    ({ variant, intent, size, selected, disabled, startIcon, endIcon, selectedIcon, removeLabel, onToggle, onRemove, className, children, render, ref, ...rest }: ChipProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+    displayName: string;
+};
+export {};
+//# sourceMappingURL=chip.d.ts.map

package/dist/components/chips/chip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chip.d.ts","sourceRoot":"","sources":["../../../src/components/chips/chip.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AAMrD,OAAO,KAAK,EAAE,UAAU,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAEzE,KAAK,WAAW,GAAG,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,CAAA;AACnF,KAAK,WAAW,GAAG,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,CAAA;AAEnF,MAAM,MAAM,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,UAAU,CAAC,GAAG;IAC7E,OAAO,CAAC,EAAE,WAAW,CAAA;IACrB,MAAM,CAAC,EAAE,UAAU,CAAA;IACnB,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC3B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC9B,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,WAAW,KAAK,IAAI,CAAA;IAC1D,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAA;IACvC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAA;CACnC,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,UAAU,CAAC,CAAA;AAEvD,eAAO,MAAM,IAAI;kKAiBd,SAAS;;CAkJX,CAAA"}

package/dist/components/chips/chip.js

@@ -0,0 +1,102 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import classnames from "classnames";
+import { CheckIcon } from "../../icons/check-icon.js";
+import { CloseIcon } from "../../icons/close-icon.js";
+import chip_module from "./chip.module.js";
+const Chip = ({ variant = 'assist', intent = 'primary', size = 'md', selected = false, disabled = false, startIcon, endIcon, selectedIcon, removeLabel = 'Remove chip', onToggle, onRemove, className, children, render, ref, ...rest })=>{
+    const { onClick, onKeyDown, role, tabIndex, ...restProps } = rest;
+    const isCustomElement = null != render;
+    const isSelectable = 'selectable' === variant || 'selectable-removable' === variant;
+    const isRemovable = 'removable' === variant || 'selectable-removable' === variant;
+    const isSelected = Boolean(selected);
+    const handleClick = (event)=>{
+        if (disabled) return void event.preventDefault();
+        if (onClick) onClick(event);
+        if (isSelectable && onToggle) onToggle(!isSelected, event);
+    };
+    const handleKeyDown = (event)=>{
+        if (disabled) return;
+        if (('Enter' === event.key || ' ' === event.key) && isCustomElement) {
+            event.preventDefault();
+            if (onClick) onClick(event);
+            if (isSelectable && onToggle) onToggle(!isSelected, event);
+        }
+        if (('Backspace' === event.key || 'Delete' === event.key) && isRemovable && onRemove) {
+            event.preventDefault();
+            onRemove(event);
+        }
+        if (onKeyDown) onKeyDown(event);
+    };
+    const handleRemoveClick = (event)=>{
+        if (disabled) return;
+        event.stopPropagation();
+        if (onRemove) onRemove(event);
+    };
+    const handleRemoveKeyDown = (event)=>{
+        if (disabled) return;
+        if ('Enter' === event.key || ' ' === event.key || 'Backspace' === event.key || 'Delete' === event.key) {
+            event.preventDefault();
+            event.stopPropagation();
+            if (onRemove) onRemove(event);
+        }
+    };
+    const leadingIcon = startIcon ?? (isSelectable && isSelected ? selectedIcon ?? /*#__PURE__*/ jsx(CheckIcon, {
+        className: chip_module.icon
+    }) : null);
+    const trailingIcon = isRemovable ? /*#__PURE__*/ jsx("button", {
+        type: "button",
+        tabIndex: disabled ? -1 : 0,
+        disabled: disabled,
+        "aria-label": removeLabel,
+        onClick: handleRemoveClick,
+        onKeyDown: handleRemoveKeyDown,
+        children: /*#__PURE__*/ jsx(CloseIcon, {
+            className: classnames('infonomic-chip-close-icon', chip_module.icon, chip_module["close-icon"])
+        })
+    }) : endIcon;
+    const appliedVariant = isSelected ? 'filled' : 'outlined';
+    const defaultProps = {
+        type: isCustomElement ? void 0 : 'button',
+        role: role ?? (isCustomElement ? 'button' : void 0),
+        tabIndex: disabled ? -1 : tabIndex ?? 0,
+        'aria-disabled': disabled || void 0,
+        'aria-pressed': isSelectable ? isSelected : void 0,
+        'aria-selected': isSelectable ? isSelected : void 0,
+        className: classnames('infonomic-chip', `infonomic-chip-${variant}`, `infonomic-chip-${intent}`, `infonomic-chip-${size}`, {
+            selected: isSelected,
+            disabled,
+            removable: isRemovable
+        }, chip_module.chip, chip_module[appliedVariant], chip_module[intent], chip_module[size], className),
+        disabled: isCustomElement ? void 0 : disabled,
+        onClick: handleClick,
+        onKeyDown: handleKeyDown,
+        children: /*#__PURE__*/ jsxs(Fragment, {
+            children: [
+                null != leadingIcon && /*#__PURE__*/ jsx("span", {
+                    className: classnames('infonomic-chip-icon-wrapper', chip_module.iconWrapper),
+                    children: leadingIcon
+                }),
+                /*#__PURE__*/ jsx("span", {
+                    className: classnames('infonomic-chip-label', chip_module.label),
+                    children: children
+                }),
+                null != trailingIcon && /*#__PURE__*/ jsx("span", {
+                    className: classnames('infonomic-chip-icon-wrapper', chip_module.iconWrapper),
+                    children: trailingIcon
+                })
+            ]
+        })
+    };
+    const element = useRender({
+        defaultTagName: 'button',
+        render,
+        ref,
+        props: mergeProps(defaultProps, restProps)
+    });
+    return element;
+};
+Chip.displayName = 'Chip';
+export { Chip };