@economic/taco 1.9.2 → 1.10.0

package/dist/components/Tag/Tag.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Color } from '../../utils/colors';
+import { IconName, IconProps } from '../Icon/Icon';
+export declare type TagProps = Omit<React.HTMLAttributes<HTMLSpanElement>, 'children'> & {
+    children: string;
+    color?: Color;
+    disabled?: boolean;
+    icon?: React.ReactElement<IconProps> | IconName;
+    readOnly?: boolean;
+    onDelete?: (event: React.MouseEvent<SVGSVGElement>) => void;
+};
+export declare const Tag: React.ForwardRefExoticComponent<Pick<React.HTMLAttributes<HTMLSpanElement>, "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & {
+    children: string;
+    color?: "green" | "yellow" | "red" | "blue" | "purple" | "orange" | "brown" | "pink" | "grey" | "black" | undefined;
+    disabled?: boolean | undefined;
+    icon?: React.ReactElement<IconProps, string | ((props: any) => React.ReactElement<any, any> | null) | (new (props: any) => React.Component<any, any, any>)> | "account-preview" | "accounting-year-cancel" | "accounting-year" | "accounting" | "arrow-bottom" | "arrow-down" | "arrow-end" | "arrow-left" | "arrow-right" | "arrow-start" | "arrow-top" | "arrow-up" | "attach-auto" | "attach-cancel" | "attach" | "autotext-insert" | "autotext" | "basic-tabs" | "basic" | "bell-solid" | "book" | "booking" | "budget" | "calendar" | "cash-account" | "cash-reports" | "chat-solid" | "chat" | "chevron-down-double" | "chevron-down-solid" | "chevron-down" | "chevron-left-double" | "chevron-left-solid" | "chevron-left" | "chevron-right-double" | "chevron-right-solid" | "chevron-right" | "chevron-up-double" | "chevron-up-solid" | "chevron-up" | "circle-close" | "circle-minus" | "circle-plus" | "circle-tick" | "clamp-open" | "clamp" | "close" | "connection-enable" | "connection-revoke" | "contacts" | "copy" | "courses" | "credit" | "delete-permanently" | "delete" | "depecriate" | "developer" | "distribution-template" | "document-approve" | "document-create-entry" | "document-cut" | "document-error" | "document-isolate-page" | "document-merge" | "document-move" | "document-preview" | "document-received" | "document-rejected-request" | "document-split" | "document-time" | "document" | "download" | "drag" | "e-copedia" | "e-signature" | "edit" | "ellipsis-horizontal" | "ellipsis-vertical" | "entries-on-account" | "entries-open" | "entries-warning" | "entry-type-customer-invoice" | "entry-type-customer-payment" | "entry-type-journal-entry" | "entry-type-manual-customer-invoice" | "entry-type-supplier-invoice" | "entry-type-supplier-payment" | "envelope-approved" | "envelope" | "expand-view" | "expenses" | "export-to-excel" | "export-to-pdf" | "export" | "filter-solid" | "filter" | "graph-solid" | "hash" | "home" | "images" | "import" | "inbox-einvoicing" | "inbox-scanning" | "inbox-smart" | "inbox" | "info" | "inventory-matrix" | "inventory" | "journal-pro" | "layout-both" | "layout-first" | "layout-last" | "layout-none" | "layout" | "ledger-card-customer-reminder" | "ledger-card-manual-customer-invoice" | "ledger-card-obsolete-stock" | "ledger-card-opening-entry" | "ledger-card-reserved-entry" | "ledger-card-shrinkage-pilferage" | "ledger-card-stock-adjustment" | "ledger-card-transferred-opening-entry" | "ledger-card" | "lightbulb" | "line" | "list-bulleted" | "list-search" | "list" | "lock-open" | "log-out" | "log" | "market" | "match-amount" | "match-entries" | "menu" | "mileage" | "modal-resize" | "modal-shrink" | "more-solid" | "more" | "move" | "navigation-list" | "note-follow-up" | "note-read" | "note" | "numbers" | "partner-api" | "period" | "person-change" | "person-minus" | "person-plus" | "person-tick" | "play" | "plus-minus" | "print" | "process-payment" | "product-ledger-card" | "profile" | "project-cards" | "projects" | "quicklinks" | "rating-bankruptcy" | "rating-payment-problems" | "reconciled" | "refresh" | "report-solid" | "report" | "restore" | "rotate-left" | "rotate-right" | "sales" | "search-bold" | "search" | "secure-tick" | "secure" | "settings-solid" | "settings" | "shortcuts" | "show-all" | "show-less" | "show-more" | "show-template" | "sliders" | "smartpay" | "sort-by" | "spinner" | "star-solid" | "star" | "subscriptions" | "system-entries" | "tag" | "template-override" | "templates" | "thumb-both" | "thumb-down-solid" | "thumb-down" | "thumb-up-solid" | "thumb-up" | "tick" | "time" | "transfer-cancel" | "transfer-locked" | "transfer" | "undock" | "unreconciled" | "warning" | "webshop" | "website" | "workflow" | "zoom" | undefined;
+    readOnly?: boolean | undefined;
+    onDelete?: ((event: React.MouseEvent<SVGSVGElement>) => void) | undefined;
+} & React.RefAttributes<HTMLSpanElement>>;

package/dist/components/Tag/Tag.stories.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const Default: () => JSX.Element;
+export declare const Coloured: () => JSX.Element;
+export declare const Action: () => JSX.Element;
+export declare const KitchenSink: () => JSX.Element;

package/dist/esm/components/Card/Card.js

@@ -50,6 +50,7 @@ import '../Table/hooks/useRowCreation.js';
 import '../Tabs/Tabs.js';
 import '../Textarea/Textarea.js';
 import '../Switch/Switch.js';
+import '../Tag/Tag.js';
 import '../Tour/Tour.js';
 import '../../utils/hooks/useOnClickOutside.js';
 

package/dist/esm/components/Card/Card.js.map

@@ -1 +1 @@
-{"version":3,"file":"Card.js","sources":["../../../../src/components/Card/Card.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\n\nimport { MenuProps, IconButton } from '../..';\n\nexport type CardContentProps = React.HTMLAttributes<HTMLDivElement> & {\n    noPadding?: boolean;\n};\n\nconst Content = React.forwardRef<HTMLDivElement, CardContentProps>(function CardContent(externalProps, ref) {\n    const { noPadding, ...props } = externalProps;\n    const className = cn(\n        'flex-grow overflow-auto',\n        {\n            'mx-4 mb-4': !noPadding,\n        },\n        props.className\n    );\n    return <div {...props} className={className} ref={ref} />;\n});\n\nexport type CardProps = React.HTMLAttributes<HTMLDivElement> & {\n    /** Title of the Card */\n    title: string | React.ReactElement;\n    /** Menu component associated with the Card */\n    menu?: (props: Partial<MenuProps>) => JSX.Element;\n};\n\nexport const Card = React.forwardRef<HTMLDivElement, CardProps>(function Card(props, ref) {\n    const { title, menu, children } = props;\n    const className = cn(\n        'bg-white flex flex-col rounded-xl shadow-[0px_0px_1px_rgba(0,0,0,0.1),0px_6px_18px_rgba(47,51,68,0.2)]',\n        props.className\n    );\n\n    return (\n        <div className={className} data-taco=\"card\" ref={ref}>\n            <div className=\"mx-4 mt-4 mb-2 flex\">\n                {title && <h4 className=\"mb-0 flex-grow text-left\">{title}</h4>}\n                {menu ? <IconButton icon=\"ellipsis-horizontal\" appearance=\"discrete\" menu={menu} className=\"-mt-[4px]\" /> : null}\n            </div>\n            {children}\n        </div>\n    );\n}) as React.ForwardRefExoticComponent<CardProps> & {\n    Content: React.ForwardRefExoticComponent<CardContentProps>;\n};\nCard.Content = Content;\n"],"names":["Content","React","CardContent","externalProps","ref","noPadding","props","className","cn","Card","title","menu","children","IconButton","icon","appearance"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASA,MAAMA,OAAO,gBAAGC,UAAA,CAAmD,SAASC,WAAT,CAAqBC,aAArB,EAAoCC,GAApC;EAC/D,MAAM;IAAEC,SAAF;IAAa,GAAGC;MAAUH,aAAhC;EACA,MAAMI,SAAS,GAAGC,EAAE,CAChB,yBADgB,EAEhB;IACI,aAAa,CAACH;GAHF,EAKhBC,KAAK,CAACC,SALU,CAApB;EAOA,OAAON,aAAA,MAAA,oBAASK;IAAOC,SAAS,EAAEA;IAAWH,GAAG,EAAEA;IAA3C,CAAP;AACH,CAVe,CAAhB;MAmBaK,IAAI,gBAAGR,UAAA,CAA4C,SAASQ,IAAT,CAAcH,KAAd,EAAqBF,GAArB;EAC5D,MAAM;IAAEM,KAAF;IAASC,IAAT;IAAeC;MAAaN,KAAlC;EACA,MAAMC,SAAS,GAAGC,EAAE,CAChB,wGADgB,EAEhBF,KAAK,CAACC,SAFU,CAApB;EAKA,OACIN,aAAA,MAAA;IAAKM,SAAS,EAAEA;iBAAqB;IAAOH,GAAG,EAAEA;GAAjD,EACIH,aAAA,MAAA;IAAKM,SAAS,EAAC;GAAf,EACKG,KAAK,IAAIT,aAAA,KAAA;IAAIM,SAAS,EAAC;GAAd,EAA0CG,KAA1C,CADd,EAEKC,IAAI,GAAGV,aAAA,CAACY,UAAD;IAAYC,IAAI,EAAC;IAAsBC,UAAU,EAAC;IAAWJ,IAAI,EAAEA;IAAMJ,SAAS,EAAC;GAAnF,CAAH,GAAuG,IAFhH,CADJ,EAKKK,QALL,CADJ;AASH,CAhBmB;AAmBpBH,IAAI,CAACT,OAAL,GAAeA,OAAf;;;;"}
+{"version":3,"file":"Card.js","sources":["../../../../src/components/Card/Card.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\n\nimport { MenuProps, IconButton } from '../..';\n\nexport type CardContentProps = React.HTMLAttributes<HTMLDivElement> & {\n    noPadding?: boolean;\n};\n\nconst Content = React.forwardRef<HTMLDivElement, CardContentProps>(function CardContent(externalProps, ref) {\n    const { noPadding, ...props } = externalProps;\n    const className = cn(\n        'flex-grow overflow-auto',\n        {\n            'mx-4 mb-4': !noPadding,\n        },\n        props.className\n    );\n    return <div {...props} className={className} ref={ref} />;\n});\n\nexport type CardProps = React.HTMLAttributes<HTMLDivElement> & {\n    /** Title of the Card */\n    title: string | React.ReactElement;\n    /** Menu component associated with the Card */\n    menu?: (props: Partial<MenuProps>) => JSX.Element;\n};\n\nexport const Card = React.forwardRef<HTMLDivElement, CardProps>(function Card(props, ref) {\n    const { title, menu, children } = props;\n    const className = cn(\n        'bg-white flex flex-col rounded-xl shadow-[0px_0px_1px_rgba(0,0,0,0.1),0px_6px_18px_rgba(47,51,68,0.2)]',\n        props.className\n    );\n\n    return (\n        <div className={className} data-taco=\"card\" ref={ref}>\n            <div className=\"mx-4 mt-4 mb-2 flex\">\n                {title && <h4 className=\"mb-0 flex-grow text-left\">{title}</h4>}\n                {menu ? <IconButton icon=\"ellipsis-horizontal\" appearance=\"discrete\" menu={menu} className=\"-mt-[4px]\" /> : null}\n            </div>\n            {children}\n        </div>\n    );\n}) as React.ForwardRefExoticComponent<CardProps> & {\n    Content: React.ForwardRefExoticComponent<CardContentProps>;\n};\nCard.Content = Content;\n"],"names":["Content","React","CardContent","externalProps","ref","noPadding","props","className","cn","Card","title","menu","children","IconButton","icon","appearance"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASA,MAAMA,OAAO,gBAAGC,UAAA,CAAmD,SAASC,WAAT,CAAqBC,aAArB,EAAoCC,GAApC;EAC/D,MAAM;IAAEC,SAAF;IAAa,GAAGC;MAAUH,aAAhC;EACA,MAAMI,SAAS,GAAGC,EAAE,CAChB,yBADgB,EAEhB;IACI,aAAa,CAACH;GAHF,EAKhBC,KAAK,CAACC,SALU,CAApB;EAOA,OAAON,aAAA,MAAA,oBAASK;IAAOC,SAAS,EAAEA;IAAWH,GAAG,EAAEA;IAA3C,CAAP;AACH,CAVe,CAAhB;MAmBaK,IAAI,gBAAGR,UAAA,CAA4C,SAASQ,IAAT,CAAcH,KAAd,EAAqBF,GAArB;EAC5D,MAAM;IAAEM,KAAF;IAASC,IAAT;IAAeC;MAAaN,KAAlC;EACA,MAAMC,SAAS,GAAGC,EAAE,CAChB,wGADgB,EAEhBF,KAAK,CAACC,SAFU,CAApB;EAKA,OACIN,aAAA,MAAA;IAAKM,SAAS,EAAEA;iBAAqB;IAAOH,GAAG,EAAEA;GAAjD,EACIH,aAAA,MAAA;IAAKM,SAAS,EAAC;GAAf,EACKG,KAAK,IAAIT,aAAA,KAAA;IAAIM,SAAS,EAAC;GAAd,EAA0CG,KAA1C,CADd,EAEKC,IAAI,GAAGV,aAAA,CAACY,UAAD;IAAYC,IAAI,EAAC;IAAsBC,UAAU,EAAC;IAAWJ,IAAI,EAAEA;IAAMJ,SAAS,EAAC;GAAnF,CAAH,GAAuG,IAFhH,CADJ,EAKKK,QALL,CADJ;AASH,CAhBmB;AAmBpBH,IAAI,CAACT,OAAL,GAAeA,OAAf;;;;"}

package/dist/esm/components/Navigation/Navigation.js

@@ -58,7 +58,7 @@ const Panel = /*#__PURE__*/React__default.forwardRef(function Panel(props, ref)
 const MenuGroup = /*#__PURE__*/React__default.forwardRef(function MenuGroup(props, ref) {
   const className = cn('flex-shrink-0 space-y-1 outline-none', {
     'bg-white pb-2': props.fixed
-  }, props.className);
+  }, typeof props.className === 'function' ? props.className(false) : props.className);
 
   const title = expanded => {
     const className = cn('bg-white h-10 pl-3 pr-1 flex items-center justify-between w-full', {

package/dist/esm/components/Navigation/Navigation.js.map

@@ -1 +1 @@
-{"version":3,"file":"Navigation.js","sources":["../../../../src/components/Navigation/Navigation.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { TreeviewProps, Treeview, TreeviewGroupProps, TreeviewItemProps } from '../Treeview/Treeview';\nimport { Icon } from '../Icon/Icon';\nimport { useDropTarget } from '../../utils/hooks/useDropTarget';\nimport { useProxiedRef } from '../../utils/hooks/useProxiedRef';\nimport './Navigation.css';\n\n// Item\nexport type NavigationItemProps = Omit<TreeviewItemProps, 'prefix'> & {\n    /** Change the style to indicate the link is selected */\n    active?: boolean;\n    /** Handler to be used when dropping a dragged element over the navigation link */\n    onDrop?: React.DragEventHandler;\n    /**\n     * Small amount of information placed next to the text of the link.\n     * This can be any valid react element, for e.g. a `span`.\n     * Should be used to indicate a relevant information of the link,\n     * for e.g. the number of unread notifications\n     */\n    postfix?: React.ReactNode;\n    /**\n     * Small amount of information placed before the text of the link.\n     * This can be any valid react element, for e.g. a `span`.\n     * Should be used to indicate a feedback for user,\n     * for e.g. display some sort of visual informational state or a relevant icon.\n     */\n    prefix?: React.ReactNode;\n    /** Target of the link */\n    target?: string;\n};\n\nconst Item = React.forwardRef(function Item(props: NavigationItemProps, ref: React.Ref<HTMLAnchorElement>) {\n    const { active, children, onDrop, postfix, prefix, role, ...otherProps } = props;\n    const proxyRef = useProxiedRef<HTMLAnchorElement>(ref);\n    const [isDraggedOver, dropTargetProps] = useDropTarget(onDrop);\n    const isTreeitem = role === 'treeitem';\n    const className = cn(\n        'yt-navigation__item cursor-pointer',\n        {\n            'w-full mb-px py-1 px-3 flex items-center hover:bg-grey-dark': isTreeitem,\n            'bg-white w-full h-10 px-3 flex-shrink-0 flex items-center justify-between cursor-pointer': !isTreeitem,\n            'yt-navigation__item--active': active && !isDraggedOver,\n            'bg-grey-dark': isTreeitem && active && !isDraggedOver,\n            'yt-navigation__item--dropping bg-blue': isDraggedOver,\n        },\n        props.className\n    );\n\n    const handleClick = (event: React.MouseEvent<HTMLSpanElement>): void => {\n        if (event.target instanceof HTMLAnchorElement || event.target instanceof HTMLButtonElement) {\n            return;\n        }\n\n        if (proxyRef.current) {\n            proxyRef.current.click();\n        }\n    };\n\n    return (\n        <span {...dropTargetProps} className={className} onClick={handleClick} role={role}>\n            {prefix && <span className=\"yt-navigation__item__prefix flex items-center\">{prefix}</span>}\n            <a {...otherProps} className=\"block flex-grow truncate\" ref={proxyRef}>\n                {children}\n            </a>\n            {postfix && <span className=\"yt-navigation__item__postfix ml-1\">{postfix}</span>}\n        </span>\n    );\n});\n\n// Panel\nexport type NavigationPanelProps = React.HTMLAttributes<HTMLDivElement>;\n\nconst Panel = React.forwardRef(function Panel(props: NavigationPanelProps, ref: React.Ref<HTMLDivElement>) {\n    return <div {...props} className={cn('w-full bg-white p-3', props.className)} ref={ref} />;\n});\n\n// Group\nexport type NavigationMenuGroupProps = TreeviewGroupProps;\n\nconst MenuGroup = React.forwardRef(function MenuGroup(props: NavigationMenuGroupProps, ref: React.Ref<HTMLDivElement>) {\n    const className = cn(\n        'flex-shrink-0 space-y-1 outline-none',\n        {\n            'bg-white pb-2': props.fixed,\n        },\n        props.className\n    );\n    const title = (expanded: boolean): JSX.Element => {\n        const className = cn('bg-white h-10 pl-3 pr-1 flex items-center justify-between w-full', {\n            'mb-1': expanded,\n            'cursor-pointer hover:text-blue': !props.fixed,\n        });\n\n        return (\n            <span className={className}>\n                {typeof props.title === 'function' ? props.title(expanded) : props.title}\n                {!props.fixed && <Icon name={expanded ? 'chevron-up' : 'chevron-down'} />}\n            </span>\n        );\n    };\n\n    return <Treeview.Group {...props} className={className} title={title} ref={ref} />;\n});\n\n// Menu\nexport type NavigationMenuProps = React.PropsWithChildren<TreeviewProps>;\n\nexport type ForwardedNavigationMenuWithStatics = React.ForwardRefExoticComponent<\n    NavigationMenuProps & React.RefAttributes<HTMLDivElement>\n> & {\n    /** Expandable region reprezenting a group of related links */\n    Group: React.ForwardRefExoticComponent<NavigationMenuGroupProps & React.RefAttributes<HTMLDivElement>>;\n};\n\nconst Menu = React.forwardRef(function Menu(props: NavigationMenuProps, ref: React.Ref<HTMLDivElement>) {\n    const scrollableAreas = React.useMemo(() => {\n        const scrollableAreas: any[] = [];\n\n        const children = React.Children.toArray(props.children).filter(\n            child => !!child\n        ) as React.ReactElement<NavigationMenuGroupProps>[];\n\n        children.forEach(child => {\n            if (child.props.fixed) {\n                scrollableAreas.push(child);\n            } else {\n                const x = scrollableAreas[scrollableAreas.length - 1];\n                if (Array.isArray(x)) {\n                    x.push(child);\n                } else {\n                    scrollableAreas.push([child]);\n                }\n            }\n        });\n\n        return scrollableAreas;\n    }, [props.children]);\n\n    return (\n        <Treeview\n            {...props}\n            className={cn('divide-grey-light flex flex-grow flex-col divide-y-2 overflow-y-auto', props.className)}\n            ref={ref}>\n            {scrollableAreas.map((area, i) =>\n                Array.isArray(area) ? (\n                    <div\n                        className=\"divide-grey-light flex h-0 flex-auto flex-shrink-0 flex-grow flex-col divide-y-2 overflow-y-auto\"\n                        key={i}>\n                        {area}\n                    </div>\n                ) : (\n                    area\n                )\n            )}\n        </Treeview>\n    );\n}) as ForwardedNavigationMenuWithStatics;\n\nMenu.Group = MenuGroup;\n\n// Navigation\nexport type NavigationProps = React.HTMLAttributes<HTMLDivElement>;\n\nexport type ForwardedNavigationWithStatics = React.ForwardRefExoticComponent<\n    NavigationProps & React.RefAttributes<HTMLDivElement>\n> & {\n    /** Navigation link */\n    Item: React.ForwardRefExoticComponent<NavigationItemProps & React.RefAttributes<HTMLAnchorElement>>;\n    /**\n     * Container for the expandable groups that hold navigation links.\n     * Should be used as a direct child of Navigation component, e.g. `Navigation.Menu`.\n     * Should have the menu groups as a direct child, e.g. `Navigation.Menu.Group`\n     */\n    Menu: ForwardedNavigationMenuWithStatics;\n    /**\n     * Isolated container within the Navigation.\n     * This can be used to create a region in the Navigation that is usually not scrollable, nor expandable,\n     * containing useful information for user and quick actions\n     */\n    Panel: React.ForwardRefExoticComponent<NavigationPanelProps & React.RefAttributes<HTMLDivElement>>;\n};\n\nexport const Navigation = React.forwardRef(function Navigation(props: NavigationProps, ref: React.Ref<HTMLDivElement>) {\n    const { children, ...otherProps } = props;\n    const className = cn('h-full flex flex-col bg-grey-light divide-y-2 divide-grey-light', props.className);\n\n    return (\n        <div {...otherProps} className={className} data-taco=\"navigation\" ref={ref}>\n            {children}\n        </div>\n    );\n}) as ForwardedNavigationWithStatics;\n\nNavigation.Menu = Menu;\nNavigation.Item = Item;\nNavigation.Panel = Panel;\n"],"names":["Item","React","forwardRef","props","ref","active","children","onDrop","postfix","prefix","role","otherProps","proxyRef","useProxiedRef","isDraggedOver","dropTargetProps","useDropTarget","isTreeitem","className","cn","handleClick","event","target","HTMLAnchorElement","HTMLButtonElement","current","click","onClick","Panel","MenuGroup","fixed","title","expanded","Icon","name","Treeview","Group","Menu","scrollableAreas","useMemo","Children","toArray","filter","child","forEach","push","x","length","Array","isArray","map","area","i","key","Navigation"],"mappings":"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"}
+{"version":3,"file":"Navigation.js","sources":["../../../../src/components/Navigation/Navigation.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { TreeviewProps, Treeview, TreeviewGroupProps, TreeviewItemProps } from '../Treeview/Treeview';\nimport { Icon } from '../Icon/Icon';\nimport { useDropTarget } from '../../utils/hooks/useDropTarget';\nimport { useProxiedRef } from '../../utils/hooks/useProxiedRef';\nimport './Navigation.css';\n\n// Item\nexport type NavigationItemProps = Omit<TreeviewItemProps, 'prefix'> & {\n    /** Change the style to indicate the link is selected */\n    active?: boolean;\n    /** Handler to be used when dropping a dragged element over the navigation link */\n    onDrop?: React.DragEventHandler;\n    /**\n     * Small amount of information placed next to the text of the link.\n     * This can be any valid react element, for e.g. a `span`.\n     * Should be used to indicate a relevant information of the link,\n     * for e.g. the number of unread notifications\n     */\n    postfix?: React.ReactNode;\n    /**\n     * Small amount of information placed before the text of the link.\n     * This can be any valid react element, for e.g. a `span`.\n     * Should be used to indicate a feedback for user,\n     * for e.g. display some sort of visual informational state or a relevant icon.\n     */\n    prefix?: React.ReactNode;\n    /** Target of the link */\n    target?: string;\n};\n\nconst Item = React.forwardRef(function Item(props: NavigationItemProps, ref: React.Ref<HTMLAnchorElement>) {\n    const { active, children, onDrop, postfix, prefix, role, ...otherProps } = props;\n    const proxyRef = useProxiedRef<HTMLAnchorElement>(ref);\n    const [isDraggedOver, dropTargetProps] = useDropTarget(onDrop);\n    const isTreeitem = role === 'treeitem';\n    const className = cn(\n        'yt-navigation__item cursor-pointer',\n        {\n            'w-full mb-px py-1 px-3 flex items-center hover:bg-grey-dark': isTreeitem,\n            'bg-white w-full h-10 px-3 flex-shrink-0 flex items-center justify-between cursor-pointer': !isTreeitem,\n            'yt-navigation__item--active': active && !isDraggedOver,\n            'bg-grey-dark': isTreeitem && active && !isDraggedOver,\n            'yt-navigation__item--dropping bg-blue': isDraggedOver,\n        },\n        props.className\n    );\n\n    const handleClick = (event: React.MouseEvent<HTMLSpanElement>): void => {\n        if (event.target instanceof HTMLAnchorElement || event.target instanceof HTMLButtonElement) {\n            return;\n        }\n\n        if (proxyRef.current) {\n            proxyRef.current.click();\n        }\n    };\n\n    return (\n        <span {...dropTargetProps} className={className} onClick={handleClick} role={role}>\n            {prefix && <span className=\"yt-navigation__item__prefix flex items-center\">{prefix}</span>}\n            <a {...otherProps} className=\"block flex-grow truncate\" ref={proxyRef}>\n                {children}\n            </a>\n            {postfix && <span className=\"yt-navigation__item__postfix ml-1\">{postfix}</span>}\n        </span>\n    );\n});\n\n// Panel\nexport type NavigationPanelProps = React.HTMLAttributes<HTMLDivElement>;\n\nconst Panel = React.forwardRef(function Panel(props: NavigationPanelProps, ref: React.Ref<HTMLDivElement>) {\n    return <div {...props} className={cn('w-full bg-white p-3', props.className)} ref={ref} />;\n});\n\n// Group\nexport type NavigationMenuGroupProps = TreeviewGroupProps;\n\nconst MenuGroup = React.forwardRef(function MenuGroup(props: NavigationMenuGroupProps, ref: React.Ref<HTMLDivElement>) {\n    const className = cn(\n        'flex-shrink-0 space-y-1 outline-none',\n        {\n            'bg-white pb-2': props.fixed,\n        },\n        typeof props.className === 'function' ? props.className(false) : props.className\n    );\n    const title = (expanded: boolean): JSX.Element => {\n        const className = cn('bg-white h-10 pl-3 pr-1 flex items-center justify-between w-full', {\n            'mb-1': expanded,\n            'cursor-pointer hover:text-blue': !props.fixed,\n        });\n\n        return (\n            <span className={className}>\n                {typeof props.title === 'function' ? props.title(expanded) : props.title}\n                {!props.fixed && <Icon name={expanded ? 'chevron-up' : 'chevron-down'} />}\n            </span>\n        );\n    };\n\n    return <Treeview.Group {...props} className={className} title={title} ref={ref} />;\n});\n\n// Menu\nexport type NavigationMenuProps = React.PropsWithChildren<TreeviewProps>;\n\nexport type ForwardedNavigationMenuWithStatics = React.ForwardRefExoticComponent<\n    NavigationMenuProps & React.RefAttributes<HTMLDivElement>\n> & {\n    /** Expandable region reprezenting a group of related links */\n    Group: React.ForwardRefExoticComponent<NavigationMenuGroupProps & React.RefAttributes<HTMLDivElement>>;\n};\n\nconst Menu = React.forwardRef(function Menu(props: NavigationMenuProps, ref: React.Ref<HTMLDivElement>) {\n    const scrollableAreas = React.useMemo(() => {\n        const scrollableAreas: any[] = [];\n\n        const children = React.Children.toArray(props.children).filter(\n            child => !!child\n        ) as React.ReactElement<NavigationMenuGroupProps>[];\n\n        children.forEach(child => {\n            if (child.props.fixed) {\n                scrollableAreas.push(child);\n            } else {\n                const x = scrollableAreas[scrollableAreas.length - 1];\n                if (Array.isArray(x)) {\n                    x.push(child);\n                } else {\n                    scrollableAreas.push([child]);\n                }\n            }\n        });\n\n        return scrollableAreas;\n    }, [props.children]);\n\n    return (\n        <Treeview\n            {...props}\n            className={cn('divide-grey-light flex flex-grow flex-col divide-y-2 overflow-y-auto', props.className)}\n            ref={ref}>\n            {scrollableAreas.map((area, i) =>\n                Array.isArray(area) ? (\n                    <div\n                        className=\"divide-grey-light flex h-0 flex-auto flex-shrink-0 flex-grow flex-col divide-y-2 overflow-y-auto\"\n                        key={i}>\n                        {area}\n                    </div>\n                ) : (\n                    area\n                )\n            )}\n        </Treeview>\n    );\n}) as ForwardedNavigationMenuWithStatics;\n\nMenu.Group = MenuGroup;\n\n// Navigation\nexport type NavigationProps = React.HTMLAttributes<HTMLDivElement>;\n\nexport type ForwardedNavigationWithStatics = React.ForwardRefExoticComponent<\n    NavigationProps & React.RefAttributes<HTMLDivElement>\n> & {\n    /** Navigation link */\n    Item: React.ForwardRefExoticComponent<NavigationItemProps & React.RefAttributes<HTMLAnchorElement>>;\n    /**\n     * Container for the expandable groups that hold navigation links.\n     * Should be used as a direct child of Navigation component, e.g. `Navigation.Menu`.\n     * Should have the menu groups as a direct child, e.g. `Navigation.Menu.Group`\n     */\n    Menu: ForwardedNavigationMenuWithStatics;\n    /**\n     * Isolated container within the Navigation.\n     * This can be used to create a region in the Navigation that is usually not scrollable, nor expandable,\n     * containing useful information for user and quick actions\n     */\n    Panel: React.ForwardRefExoticComponent<NavigationPanelProps & React.RefAttributes<HTMLDivElement>>;\n};\n\nexport const Navigation = React.forwardRef(function Navigation(props: NavigationProps, ref: React.Ref<HTMLDivElement>) {\n    const { children, ...otherProps } = props;\n    const className = cn('h-full flex flex-col bg-grey-light divide-y-2 divide-grey-light', props.className);\n\n    return (\n        <div {...otherProps} className={className} data-taco=\"navigation\" ref={ref}>\n            {children}\n        </div>\n    );\n}) as ForwardedNavigationWithStatics;\n\nNavigation.Menu = Menu;\nNavigation.Item = Item;\nNavigation.Panel = Panel;\n"],"names":["Item","React","forwardRef","props","ref","active","children","onDrop","postfix","prefix","role","otherProps","proxyRef","useProxiedRef","isDraggedOver","dropTargetProps","useDropTarget","isTreeitem","className","cn","handleClick","event","target","HTMLAnchorElement","HTMLButtonElement","current","click","onClick","Panel","MenuGroup","fixed","title","expanded","Icon","name","Treeview","Group","Menu","scrollableAreas","useMemo","Children","toArray","filter","child","forEach","push","x","length","Array","isArray","map","area","i","key","Navigation"],"mappings":"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"}

package/dist/esm/components/SearchInput/SearchInput.js

@@ -49,6 +49,7 @@ import '../Table/hooks/useRowCreation.js';
 import '../Tabs/Tabs.js';
 import '../Textarea/Textarea.js';
 import '../Switch/Switch.js';
+import '../Tag/Tag.js';
 import '../Tour/Tour.js';
 import '../../utils/hooks/useOnClickOutside.js';
 

package/dist/esm/components/SearchInput/SearchInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchInput.js","sources":["../../../../src/components/SearchInput/SearchInput.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Input, InputProps, useLocalization, IconButton } from '../..';\n\nexport type SearchInputTexts = {\n    /**\n     * aria-label text for input\n     */\n    inputLabel: string;\n};\n\nexport type SearchInputProps = Omit<InputProps, 'icon'> & {\n    /** Current input value will be passed to the method. In order to get the value, the component must be controlled otherwise value will always be undefined */\n    onSearch?: (value: string | number | readonly string[] | undefined) => void;\n};\n\nexport const SearchInput = React.forwardRef(function SearchInput(\n    { onSearch, ...props }: SearchInputProps,\n    ref: React.Ref<HTMLInputElement>\n) {\n    const { texts } = useLocalization();\n\n    const handleClick = (): void => {\n        if (!props.disabled) {\n            onSearch?.(props.value);\n        }\n    };\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>): void => {\n        const isEnterKeyPressed = event.key === 'Enter';\n\n        if (isEnterKeyPressed) {\n            handleClick();\n        }\n\n        props.onKeyDown?.(event);\n    };\n\n    return (\n        <Input\n            aria-label={texts.searchInput.inputLabel}\n            {...props}\n            button={\n                <IconButton\n                    icon=\"search\"\n                    className=\"!border-transparent !bg-transparent focus:!border-transparent peer-focus:!border-transparent peer-focus:peer-active:!border-transparent\"\n                    disabled={props.disabled}\n                    onClick={handleClick}\n                />\n            }\n            onKeyDown={handleKeyDown}\n            ref={ref}\n            type=\"search\"\n        />\n    );\n});\n"],"names":["SearchInput","React","onSearch","props","ref","texts","useLocalization","handleClick","disabled","value","handleKeyDown","event","isEnterKeyPressed","key","onKeyDown","Input","searchInput","inputLabel","button","IconButton","icon","className","onClick","type"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAeaA,WAAW,gBAAGC,UAAA,CAAiB,SAASD,WAAT,CACxC;EAAEE,QAAF;EAAY,GAAGC;AAAf,CADwC,EAExCC,GAFwC;EAIxC,MAAM;IAAEC;MAAUC,eAAe,EAAjC;;EAEA,MAAMC,WAAW,GAAG;IAChB,IAAI,CAACJ,KAAK,CAACK,QAAX,EAAqB;MACjBN,QAAQ,SAAR,IAAAA,QAAQ,WAAR,YAAAA,QAAQ,CAAGC,KAAK,CAACM,KAAT,CAAR;;GAFR;;EAMA,MAAMC,aAAa,GAAIC,KAAD;;;IAClB,MAAMC,iBAAiB,GAAGD,KAAK,CAACE,GAAN,KAAc,OAAxC;;IAEA,IAAID,iBAAJ,EAAuB;MACnBL,WAAW;;;IAGf,oBAAAJ,KAAK,CAACW,SAAN,2EAAAX,KAAK,EAAaQ,KAAb,CAAL;GAPJ;;EAUA,OACIV,aAAA,CAACc,KAAD;kBACgBV,KAAK,CAACW,WAAN,CAAkBC;KAC1Bd;IACJe,MAAM,EACFjB,aAAA,CAACkB,UAAD;MACIC,IAAI,EAAC;MACLC,SAAS,EAAC;MACVb,QAAQ,EAAEL,KAAK,CAACK;MAChBc,OAAO,EAAEf;KAJb;IAOJO,SAAS,EAAEJ;IACXN,GAAG,EAAEA;IACLmB,IAAI,EAAC;IAbT,CADJ;AAiBH,CAvC0B;;;;"}
+{"version":3,"file":"SearchInput.js","sources":["../../../../src/components/SearchInput/SearchInput.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Input, InputProps, useLocalization, IconButton } from '../..';\n\nexport type SearchInputTexts = {\n    /**\n     * aria-label text for input\n     */\n    inputLabel: string;\n};\n\nexport type SearchInputProps = Omit<InputProps, 'icon'> & {\n    /** Current input value will be passed to the method. In order to get the value, the component must be controlled otherwise value will always be undefined */\n    onSearch?: (value: string | number | readonly string[] | undefined) => void;\n};\n\nexport const SearchInput = React.forwardRef(function SearchInput(\n    { onSearch, ...props }: SearchInputProps,\n    ref: React.Ref<HTMLInputElement>\n) {\n    const { texts } = useLocalization();\n\n    const handleClick = (): void => {\n        if (!props.disabled) {\n            onSearch?.(props.value);\n        }\n    };\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>): void => {\n        const isEnterKeyPressed = event.key === 'Enter';\n\n        if (isEnterKeyPressed) {\n            handleClick();\n        }\n\n        props.onKeyDown?.(event);\n    };\n\n    return (\n        <Input\n            aria-label={texts.searchInput.inputLabel}\n            {...props}\n            button={\n                <IconButton\n                    icon=\"search\"\n                    className=\"!border-transparent !bg-transparent focus:!border-transparent peer-focus:!border-transparent peer-focus:peer-active:!border-transparent\"\n                    disabled={props.disabled}\n                    onClick={handleClick}\n                />\n            }\n            onKeyDown={handleKeyDown}\n            ref={ref}\n            type=\"search\"\n        />\n    );\n});\n"],"names":["SearchInput","React","onSearch","props","ref","texts","useLocalization","handleClick","disabled","value","handleKeyDown","event","isEnterKeyPressed","key","onKeyDown","Input","searchInput","inputLabel","button","IconButton","icon","className","onClick","type"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAeaA,WAAW,gBAAGC,UAAA,CAAiB,SAASD,WAAT,CACxC;EAAEE,QAAF;EAAY,GAAGC;AAAf,CADwC,EAExCC,GAFwC;EAIxC,MAAM;IAAEC;MAAUC,eAAe,EAAjC;;EAEA,MAAMC,WAAW,GAAG;IAChB,IAAI,CAACJ,KAAK,CAACK,QAAX,EAAqB;MACjBN,QAAQ,SAAR,IAAAA,QAAQ,WAAR,YAAAA,QAAQ,CAAGC,KAAK,CAACM,KAAT,CAAR;;GAFR;;EAMA,MAAMC,aAAa,GAAIC,KAAD;;;IAClB,MAAMC,iBAAiB,GAAGD,KAAK,CAACE,GAAN,KAAc,OAAxC;;IAEA,IAAID,iBAAJ,EAAuB;MACnBL,WAAW;;;IAGf,oBAAAJ,KAAK,CAACW,SAAN,2EAAAX,KAAK,EAAaQ,KAAb,CAAL;GAPJ;;EAUA,OACIV,aAAA,CAACc,KAAD;kBACgBV,KAAK,CAACW,WAAN,CAAkBC;KAC1Bd;IACJe,MAAM,EACFjB,aAAA,CAACkB,UAAD;MACIC,IAAI,EAAC;MACLC,SAAS,EAAC;MACVb,QAAQ,EAAEL,KAAK,CAACK;MAChBc,OAAO,EAAEf;KAJb;IAOJO,SAAS,EAAEJ;IACXN,GAAG,EAAEA;IACLmB,IAAI,EAAC;IAbT,CADJ;AAiBH,CAvC0B;;;;"}

package/dist/esm/components/Tag/Tag.js

@@ -0,0 +1,53 @@
+import React__default from 'react';
+import cn from 'classnames';
+import { Icon } from '../Icon/Icon.js';
+import { Tooltip } from '../Tooltip/Tooltip.js';
+import { colors } from '../../utils/colors.js';
+import { useIsRefOverflowing } from '../../hooks/useIsRefOverflowing.js';
+
+const Tag = /*#__PURE__*/React__default.forwardRef((props, ref) => {
+  const {
+    children,
+    color,
+    disabled,
+    icon,
+    readOnly,
+    onDelete,
+    ...otherProps
+  } = props;
+  const textRef = React__default.useRef(null);
+  const isOverflowed = useIsRefOverflowing(textRef);
+  const className = cn('inline-flex items-center rounded h-6 cursor-default', {
+    'bg-opacity-50': disabled,
+    'hover:bg-opacity-75': !disabled,
+    'cursor-pointer': !!otherProps.onClick,
+    'pointer-events-none': disabled || readOnly
+  }, color ? colors[color] : 'bg-grey-dark', props.className);
+  const content = React__default.createElement("span", Object.assign({}, otherProps, {
+    className: className,
+    ref: ref
+  }), React__default.createElement("span", {
+    className: "truncate px-2",
+    ref: textRef
+  }, icon ? typeof icon === 'string' ? React__default.createElement(Icon, {
+    name: icon,
+    className: "mr-1 -ml-1 -mt-0.5 !h-5 !w-5"
+  }) : React__default.cloneElement(icon, {
+    className: 'mr-1 -ml-1 -mt-0.5 !h-5 !w-5'
+  }) : null, children), onDelete ? React__default.createElement(Icon, {
+    name: "close",
+    onClick: onDelete,
+    className: "-ml-1.5 !h-6 !w-5 flex-shrink-0 cursor-pointer rounded-r p-0.5 hover:bg-black/5"
+  }) : null);
+
+  if (isOverflowed) {
+    return React__default.createElement(Tooltip, {
+      title: children
+    }, content);
+  }
+
+  return content;
+});
+
+export { Tag };
+//# sourceMappingURL=Tag.js.map

package/dist/esm/components/Tag/Tag.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tag.js","sources":["../../../../src/components/Tag/Tag.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { Color, colors } from '../../utils/colors';\nimport { Icon, IconName, IconProps } from '../Icon/Icon';\nimport { Tooltip } from '../Tooltip/Tooltip';\nimport { useIsRefOverflowing } from '../../hooks/useIsRefOverflowing';\n\nexport type TagProps = Omit<React.HTMLAttributes<HTMLSpanElement>, 'children'> & {\n    children: string;\n    color?: Color;\n    disabled?: boolean;\n    icon?: React.ReactElement<IconProps> | IconName;\n    readOnly?: boolean;\n    onDelete?: (event: React.MouseEvent<SVGSVGElement>) => void;\n};\n\nexport const Tag = React.forwardRef<HTMLSpanElement, TagProps>((props, ref) => {\n    const { children, color, disabled, icon, readOnly, onDelete, ...otherProps } = props;\n    const textRef = React.useRef<HTMLDivElement>(null);\n    const isOverflowed = useIsRefOverflowing(textRef);\n\n    const className = cn(\n        'inline-flex items-center rounded h-6 cursor-default',\n        {\n            'bg-opacity-50': disabled,\n            'hover:bg-opacity-75': !disabled,\n            'cursor-pointer': !!otherProps.onClick,\n            'pointer-events-none': disabled || readOnly,\n        },\n        color ? colors[color] : 'bg-grey-dark',\n        props.className\n    );\n\n    const content = (\n        <span {...otherProps} className={className} ref={ref}>\n            <span className=\"truncate px-2\" ref={textRef}>\n                {icon ? (\n                    typeof icon === 'string' ? (\n                        <Icon name={icon} className=\"mr-1 -ml-1 -mt-0.5 !h-5 !w-5\" />\n                    ) : (\n                        React.cloneElement(icon, { className: 'mr-1 -ml-1 -mt-0.5 !h-5 !w-5' })\n                    )\n                ) : null}\n                {children}\n            </span>\n            {onDelete ? (\n                <Icon\n                    name=\"close\"\n                    onClick={onDelete}\n                    className=\"-ml-1.5 !h-6 !w-5 flex-shrink-0 cursor-pointer rounded-r p-0.5 hover:bg-black/5\"\n                />\n            ) : null}\n        </span>\n    );\n\n    if (isOverflowed) {\n        return <Tooltip title={children}>{content}</Tooltip>;\n    }\n\n    return content;\n});\n"],"names":["Tag","React","forwardRef","props","ref","children","color","disabled","icon","readOnly","onDelete","otherProps","textRef","useRef","isOverflowed","useIsRefOverflowing","className","cn","onClick","colors","content","Icon","name","cloneElement","Tooltip","title"],"mappings":";;;;;;;MAgBaA,GAAG,gBAAGC,cAAK,CAACC,UAAN,CAA4C,CAACC,KAAD,EAAQC,GAAR;EAC3D,MAAM;IAAEC,QAAF;IAAYC,KAAZ;IAAmBC,QAAnB;IAA6BC,IAA7B;IAAmCC,QAAnC;IAA6CC,QAA7C;IAAuD,GAAGC;MAAeR,KAA/E;EACA,MAAMS,OAAO,GAAGX,cAAK,CAACY,MAAN,CAA6B,IAA7B,CAAhB;EACA,MAAMC,YAAY,GAAGC,mBAAmB,CAACH,OAAD,CAAxC;EAEA,MAAMI,SAAS,GAAGC,EAAE,CAChB,qDADgB,EAEhB;IACI,iBAAiBV,QADrB;IAEI,uBAAuB,CAACA,QAF5B;IAGI,kBAAkB,CAAC,CAACI,UAAU,CAACO,OAHnC;IAII,uBAAuBX,QAAQ,IAAIE;GANvB,EAQhBH,KAAK,GAAGa,MAAM,CAACb,KAAD,CAAT,GAAmB,cARR,EAShBH,KAAK,CAACa,SATU,CAApB;EAYA,MAAMI,OAAO,GACTnB,4BAAA,OAAA,oBAAUU;IAAYK,SAAS,EAAEA;IAAWZ,GAAG,EAAEA;IAAjD,EACIH,4BAAA,OAAA;IAAMe,SAAS,EAAC;IAAgBZ,GAAG,EAAEQ;GAArC,EACKJ,IAAI,GACD,OAAOA,IAAP,KAAgB,QAAhB,GACIP,4BAAA,CAACoB,IAAD;IAAMC,IAAI,EAAEd;IAAMQ,SAAS,EAAC;GAA5B,CADJ,GAGIf,cAAK,CAACsB,YAAN,CAAmBf,IAAnB,EAAyB;IAAEQ,SAAS,EAAE;GAAtC,CAJH,GAMD,IAPR,EAQKX,QARL,CADJ,EAWKK,QAAQ,GACLT,4BAAA,CAACoB,IAAD;IACIC,IAAI,EAAC;IACLJ,OAAO,EAAER;IACTM,SAAS,EAAC;GAHd,CADK,GAML,IAjBR,CADJ;;EAsBA,IAAIF,YAAJ,EAAkB;IACd,OAAOb,4BAAA,CAACuB,OAAD;MAASC,KAAK,EAAEpB;KAAhB,EAA2Be,OAA3B,CAAP;;;EAGJ,OAAOA,OAAP;AACH,CA5CkB;;;;"}

package/dist/esm/hooks/useIsRefOverflowing.js

@@ -0,0 +1,15 @@
+import React__default from 'react';
+import { isOverflowing } from '../utils/dom.js';
+
+const useIsRefOverflowing = ref => {
+  const [overflowing, setOverflowing] = React__default.useState(false);
+  React__default.useEffect(() => {
+    if (ref.current && isOverflowing(ref.current)) {
+      setOverflowing(true);
+    }
+  }, [ref.current]);
+  return overflowing;
+};
+
+export { useIsRefOverflowing };
+//# sourceMappingURL=useIsRefOverflowing.js.map

package/dist/esm/hooks/useIsRefOverflowing.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useIsRefOverflowing.js","sources":["../../../src/hooks/useIsRefOverflowing.ts"],"sourcesContent":["import React from 'react';\nimport { isOverflowing } from '../utils/dom';\n\nexport const useIsRefOverflowing = (ref: React.RefObject<HTMLElement>) => {\n    const [overflowing, setOverflowing] = React.useState(false);\n\n    React.useEffect(() => {\n        if (ref.current && isOverflowing(ref.current)) {\n            setOverflowing(true);\n        }\n    }, [ref.current]);\n\n    return overflowing;\n};\n"],"names":["useIsRefOverflowing","ref","overflowing","setOverflowing","React","useState","useEffect","current","isOverflowing"],"mappings":";;;MAGaA,mBAAmB,GAAIC,GAAD;EAC/B,MAAM,CAACC,WAAD,EAAcC,cAAd,IAAgCC,cAAK,CAACC,QAAN,CAAe,KAAf,CAAtC;EAEAD,cAAK,CAACE,SAAN,CAAgB;IACZ,IAAIL,GAAG,CAACM,OAAJ,IAAeC,aAAa,CAACP,GAAG,CAACM,OAAL,CAAhC,EAA+C;MAC3CJ,cAAc,CAAC,IAAD,CAAd;;GAFR,EAIG,CAACF,GAAG,CAACM,OAAL,CAJH;EAMA,OAAOL,WAAP;AACH;;;;"}

package/dist/esm/index.js

@@ -49,6 +49,7 @@ export { insertChildTableRow, removeChildTableRow, useTableRowCreation } from '.
 export { Tabs } from './components/Tabs/Tabs.js';
 export { Textarea } from './components/Textarea/Textarea.js';
 export { Switch } from './components/Switch/Switch.js';
+export { Tag } from './components/Tag/Tag.js';
 export { Tour, TourStep } from './components/Tour/Tour.js';
 export { useOnClickOutside } from './utils/hooks/useOnClickOutside.js';
 //# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/esm/utils/colors.js

@@ -0,0 +1,15 @@
+const colors = {
+  green: 'bg-[#E5FAF2] text-[#124537]',
+  yellow: 'bg-[#FCF0D0] text-[#733700]',
+  red: 'bg-[#FFDAD2] text-[#6E001D]',
+  blue: 'bg-[#DEEBFF] text-[#29283E]',
+  purple: 'bg-[#EEE5FF] text-[#412970]',
+  orange: 'bg-[#FFE3BB] text-[#4A2811]',
+  brown: 'bg-[#EEE0DA] text-[#45291F]',
+  pink: 'bg-[#FFE3F7] text-[#55003E]',
+  grey: 'bg-grey-light text-grey-darkest',
+  black: 'bg-grey-darkest text-white'
+};
+
+export { colors };
+//# sourceMappingURL=colors.js.map

package/dist/esm/utils/colors.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"colors.js","sources":["../../../src/utils/colors.ts"],"sourcesContent":["export const colors = {\n    green: 'bg-[#E5FAF2] text-[#124537]',\n    yellow: 'bg-[#FCF0D0] text-[#733700]',\n    red: 'bg-[#FFDAD2] text-[#6E001D]',\n    blue: 'bg-[#DEEBFF] text-[#29283E]',\n    purple: 'bg-[#EEE5FF] text-[#412970]',\n    orange: 'bg-[#FFE3BB] text-[#4A2811]',\n    brown: 'bg-[#EEE0DA] text-[#45291F]',\n    pink: 'bg-[#FFE3F7] text-[#55003E]',\n    grey: 'bg-grey-light text-grey-darkest',\n    black: 'bg-grey-darkest text-white',\n};\n\nexport type Color = keyof typeof colors;\n"],"names":["colors","green","yellow","red","blue","purple","orange","brown","pink","grey","black"],"mappings":"MAAaA,MAAM,GAAG;EAClBC,KAAK,EAAE,6BADW;EAElBC,MAAM,EAAE,6BAFU;EAGlBC,GAAG,EAAE,6BAHa;EAIlBC,IAAI,EAAE,6BAJY;EAKlBC,MAAM,EAAE,6BALU;EAMlBC,MAAM,EAAE,6BANU;EAOlBC,KAAK,EAAE,6BAPW;EAQlBC,IAAI,EAAE,6BARY;EASlBC,IAAI,EAAE,iCATY;EAUlBC,KAAK,EAAE;AAVW;;;;"}

package/dist/esm/utils/dom.js

@@ -0,0 +1,4 @@
+const isOverflowing = element => element !== null ? element.scrollWidth > element.offsetWidth : false;
+
+export { isOverflowing };
+//# sourceMappingURL=dom.js.map

package/dist/esm/utils/dom.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dom.js","sources":["../../../src/utils/dom.ts"],"sourcesContent":["export const isOverflowing = (element: HTMLElement | null) =>\n    element !== null ? element.scrollWidth > element.offsetWidth : false;\n"],"names":["isOverflowing","element","scrollWidth","offsetWidth"],"mappings":"MAAaA,aAAa,GAAIC,OAAD,IACzBA,OAAO,KAAK,IAAZ,GAAmBA,OAAO,CAACC,WAAR,GAAsBD,OAAO,CAACE,WAAjD,GAA+D;;;;"}

package/dist/hooks/useIsRefOverflowing.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const useIsRefOverflowing: (ref: React.RefObject<HTMLElement>) => boolean;

package/dist/index.d.ts

@@ -34,6 +34,7 @@ export * from './components/Tabs/Tabs';
 export * from './components/Textarea/Textarea';
 export * from './components/Toast/Toaster';
 export * from './components/Switch/Switch';
+export * from './components/Tag/Tag';
 export * from './components/Tooltip/Tooltip';
 export * from './components/Tour/Tour';
 export * from './components/Treeview/Treeview';

package/dist/taco.cjs.development.js

@@ -6974,7 +6974,7 @@ const Panel = /*#__PURE__*/React__default.forwardRef(function Panel(props, ref)
 const MenuGroup = /*#__PURE__*/React__default.forwardRef(function MenuGroup(props, ref) {
   const className = cn('flex-shrink-0 space-y-1 outline-none', {
     'bg-white pb-2': props.fixed
-  }, props.className);
+  }, typeof props.className === 'function' ? props.className(false) : props.className);
 
   const title = expanded => {
     const className = cn('bg-white h-10 pl-3 pr-1 flex items-center justify-between w-full', {
@@ -9285,6 +9285,75 @@ const Switch = /*#__PURE__*/React.forwardRef(function Switch(props, ref) {
   return element;
 });
 
+const colors = {
+  green: 'bg-[#E5FAF2] text-[#124537]',
+  yellow: 'bg-[#FCF0D0] text-[#733700]',
+  red: 'bg-[#FFDAD2] text-[#6E001D]',
+  blue: 'bg-[#DEEBFF] text-[#29283E]',
+  purple: 'bg-[#EEE5FF] text-[#412970]',
+  orange: 'bg-[#FFE3BB] text-[#4A2811]',
+  brown: 'bg-[#EEE0DA] text-[#45291F]',
+  pink: 'bg-[#FFE3F7] text-[#55003E]',
+  grey: 'bg-grey-light text-grey-darkest',
+  black: 'bg-grey-darkest text-white'
+};
+
+const isOverflowing = element => element !== null ? element.scrollWidth > element.offsetWidth : false;
+
+const useIsRefOverflowing = ref => {
+  const [overflowing, setOverflowing] = React__default.useState(false);
+  React__default.useEffect(() => {
+    if (ref.current && isOverflowing(ref.current)) {
+      setOverflowing(true);
+    }
+  }, [ref.current]);
+  return overflowing;
+};
+
+const Tag$1 = /*#__PURE__*/React__default.forwardRef((props, ref) => {
+  const {
+    children,
+    color,
+    disabled,
+    icon,
+    readOnly,
+    onDelete,
+    ...otherProps
+  } = props;
+  const textRef = React__default.useRef(null);
+  const isOverflowed = useIsRefOverflowing(textRef);
+  const className = cn('inline-flex items-center rounded h-6 cursor-default', {
+    'bg-opacity-50': disabled,
+    'hover:bg-opacity-75': !disabled,
+    'cursor-pointer': !!otherProps.onClick,
+    'pointer-events-none': disabled || readOnly
+  }, color ? colors[color] : 'bg-grey-dark', props.className);
+  const content = React__default.createElement("span", Object.assign({}, otherProps, {
+    className: className,
+    ref: ref
+  }), React__default.createElement("span", {
+    className: "truncate px-2",
+    ref: textRef
+  }, icon ? typeof icon === 'string' ? React__default.createElement(Icon, {
+    name: icon,
+    className: "mr-1 -ml-1 -mt-0.5 !h-5 !w-5"
+  }) : React__default.cloneElement(icon, {
+    className: 'mr-1 -ml-1 -mt-0.5 !h-5 !w-5'
+  }) : null, children), onDelete ? React__default.createElement(Icon, {
+    name: "close",
+    onClick: onDelete,
+    className: "-ml-1.5 !h-6 !w-5 flex-shrink-0 cursor-pointer rounded-r p-0.5 hover:bg-black/5"
+  }) : null);
+
+  if (isOverflowed) {
+    return React__default.createElement(Tooltip, {
+      title: children
+    }, content);
+  }
+
+  return content;
+});
+
 const Tooltip$1 = ({
   continuous,
   index,
@@ -9475,6 +9544,7 @@ exports.Spinner = Spinner$1;
 exports.Switch = Switch;
 exports.Table = Table;
 exports.Tabs = Tabs;
+exports.Tag = Tag$1;
 exports.Textarea = Textarea;
 exports.Title = Title$1;
 exports.ToastProvider = ToastProvider;