eidos-ui 3.6.2 → 3.7.0

package/dist/index.css

@@ -1582,49 +1582,49 @@ svg.lucide {
   background-color: var(--primary-color);
   color: var(--primary-contrast);
 }
-.eidos-chip--filled:hover:not(.eidos-chip--disabled) {
+.eidos-chip--filled.eidos-chip--clickable:hover:not(.eidos-chip--disabled) {
   background-color: var(--primary-dark);
 }
 .eidos-chip--filled.eidos-chip--primary {
   background-color: var(--primary-color);
   color: var(--primary-contrast);
 }
-.eidos-chip--filled.eidos-chip--primary:hover:not(.eidos-chip--disabled) {
+.eidos-chip--filled.eidos-chip--primary.eidos-chip--clickable:hover:not(.eidos-chip--disabled) {
   background-color: var(--primary-dark);
 }
 .eidos-chip--filled.eidos-chip--secondary {
   background-color: var(--secondary-color);
   color: var(--secondary-contrast);
 }
-.eidos-chip--filled.eidos-chip--secondary:hover:not(.eidos-chip--disabled) {
+.eidos-chip--filled.eidos-chip--secondary.eidos-chip--clickable:hover:not(.eidos-chip--disabled) {
   background-color: var(--secondary-dark);
 }
 .eidos-chip--filled.eidos-chip--success {
   background-color: var(--success-color);
   color: var(--success-contrast);
 }
-.eidos-chip--filled.eidos-chip--success:hover:not(.eidos-chip--disabled) {
+.eidos-chip--filled.eidos-chip--success.eidos-chip--clickable:hover:not(.eidos-chip--disabled) {
   background-color: var(--success-dark);
 }
 .eidos-chip--filled.eidos-chip--danger {
   background-color: var(--danger-color);
   color: var(--danger-contrast);
 }
-.eidos-chip--filled.eidos-chip--danger:hover:not(.eidos-chip--disabled) {
+.eidos-chip--filled.eidos-chip--danger.eidos-chip--clickable:hover:not(.eidos-chip--disabled) {
   background-color: var(--danger-dark);
 }
 .eidos-chip--filled.eidos-chip--warning {
   background-color: var(--warning-color);
   color: var(--warning-contrast);
 }
-.eidos-chip--filled.eidos-chip--warning:hover:not(.eidos-chip--disabled) {
+.eidos-chip--filled.eidos-chip--warning.eidos-chip--clickable:hover:not(.eidos-chip--disabled) {
   background-color: var(--warning-dark);
 }
 .eidos-chip--filled.eidos-chip--info {
   background-color: var(--info-color);
   color: var(--info-contrast);
 }
-.eidos-chip--filled.eidos-chip--info:hover:not(.eidos-chip--disabled) {
+.eidos-chip--filled.eidos-chip--info.eidos-chip--clickable:hover:not(.eidos-chip--disabled) {
   background-color: var(--info-dark);
 }
 .eidos-chip--outlined {
@@ -1632,49 +1632,49 @@ svg.lucide {
   border: 1px solid var(--primary-color);
   color: var(--primary-color);
 }
-.eidos-chip--outlined:hover:not(.eidos-chip--disabled) {
+.eidos-chip--outlined.eidos-chip--clickable:hover:not(.eidos-chip--disabled) {
   background-color: rgba(var(--primary-rgb), 0.05);
 }
 .eidos-chip--outlined.eidos-chip--primary {
   border-color: var(--primary-color);
   color: var(--primary-color);
 }
-.eidos-chip--outlined.eidos-chip--primary:hover:not(.eidos-chip--disabled) {
+.eidos-chip--outlined.eidos-chip--primary.eidos-chip--clickable:hover:not(.eidos-chip--disabled) {
   background-color: rgba(var(--primary-rgb), 0.05);
 }
 .eidos-chip--outlined.eidos-chip--secondary {
   border-color: var(--secondary-color);
   color: var(--secondary-color);
 }
-.eidos-chip--outlined.eidos-chip--secondary:hover:not(.eidos-chip--disabled) {
+.eidos-chip--outlined.eidos-chip--secondary.eidos-chip--clickable:hover:not(.eidos-chip--disabled) {
   background-color: rgba(var(--secondary-rgb), 0.05);
 }
 .eidos-chip--outlined.eidos-chip--success {
   border-color: var(--success-color);
   color: var(--success-color);
 }
-.eidos-chip--outlined.eidos-chip--success:hover:not(.eidos-chip--disabled) {
+.eidos-chip--outlined.eidos-chip--success.eidos-chip--clickable:hover:not(.eidos-chip--disabled) {
   background-color: rgba(var(--success-rgb), 0.05);
 }
 .eidos-chip--outlined.eidos-chip--danger {
   border-color: var(--danger-color);
   color: var(--danger-color);
 }
-.eidos-chip--outlined.eidos-chip--danger:hover:not(.eidos-chip--disabled) {
+.eidos-chip--outlined.eidos-chip--danger.eidos-chip--clickable:hover:not(.eidos-chip--disabled) {
   background-color: rgba(var(--danger-rgb), 0.05);
 }
 .eidos-chip--outlined.eidos-chip--warning {
   border-color: var(--warning-color);
   color: var(--warning-color);
 }
-.eidos-chip--outlined.eidos-chip--warning:hover:not(.eidos-chip--disabled) {
+.eidos-chip--outlined.eidos-chip--warning.eidos-chip--clickable:hover:not(.eidos-chip--disabled) {
   background-color: rgba(var(--warning-rgb), 0.05);
 }
 .eidos-chip--outlined.eidos-chip--info {
   border-color: var(--info-color);
   color: var(--info-color);
 }
-.eidos-chip--outlined.eidos-chip--info:hover:not(.eidos-chip--disabled) {
+.eidos-chip--outlined.eidos-chip--info.eidos-chip--clickable:hover:not(.eidos-chip--disabled) {
   background-color: rgba(var(--info-rgb), 0.05);
 }
 .eidos-chip--text {
@@ -1684,37 +1684,37 @@ svg.lucide {
 .eidos-chip--text.eidos-chip--primary {
   color: var(--primary-color);
 }
-.eidos-chip--text.eidos-chip--primary:hover:not(.eidos-chip--disabled) {
+.eidos-chip--text.eidos-chip--primary.eidos-chip--clickable:hover:not(.eidos-chip--disabled) {
   background-color: rgba(var(--primary-rgb), 0.1);
 }
 .eidos-chip--text.eidos-chip--secondary {
   color: var(--secondary-color);
 }
-.eidos-chip--text.eidos-chip--secondary:hover:not(.eidos-chip--disabled) {
+.eidos-chip--text.eidos-chip--secondary.eidos-chip--clickable:hover:not(.eidos-chip--disabled) {
   background-color: rgba(var(--secondary-rgb), 0.1);
 }
 .eidos-chip--text.eidos-chip--success {
   color: var(--success-color);
 }
-.eidos-chip--text.eidos-chip--success:hover:not(.eidos-chip--disabled) {
+.eidos-chip--text.eidos-chip--success.eidos-chip--clickable:hover:not(.eidos-chip--disabled) {
   background-color: rgba(var(--success-rgb), 0.1);
 }
 .eidos-chip--text.eidos-chip--danger {
   color: var(--danger-color);
 }
-.eidos-chip--text.eidos-chip--danger:hover:not(.eidos-chip--disabled) {
+.eidos-chip--text.eidos-chip--danger.eidos-chip--clickable:hover:not(.eidos-chip--disabled) {
   background-color: rgba(var(--danger-rgb), 0.1);
 }
 .eidos-chip--text.eidos-chip--warning {
   color: var(--warning-color);
 }
-.eidos-chip--text.eidos-chip--warning:hover:not(.eidos-chip--disabled) {
+.eidos-chip--text.eidos-chip--warning.eidos-chip--clickable:hover:not(.eidos-chip--disabled) {
   background-color: rgba(var(--warning-rgb), 0.1);
 }
 .eidos-chip--text.eidos-chip--info {
   color: var(--info-color);
 }
-.eidos-chip--text.eidos-chip--info:hover:not(.eidos-chip--disabled) {
+.eidos-chip--text.eidos-chip--info.eidos-chip--clickable:hover:not(.eidos-chip--disabled) {
   background-color: rgba(var(--info-rgb), 0.1);
 }
 .eidos-chip--disabled {
@@ -2854,15 +2854,18 @@ kbd.eidos-cmd-kbd {
   padding: 0;
   display: flex;
   flex-wrap: wrap;
-  gap: var(--spacing-xs);
+  gap: var(--spacing-sm);
+  font-weight: var(--font-weight-semibold);
+  font-family: var(--font-family-mono);
+  line-height: 1;
 }
 
 .eidos-message-attachment-link {
   display: flex;
   align-items: center;
-  gap: var(--spacing-xs);
-  padding: var(--spacing-xs) var(--spacing-sm);
-  border: 1px solid var(--gray-200);
+  gap: var(--spacing-sm);
+  padding: var(--spacing-sm);
+  border: 1px solid var(--gray-500);
   border-radius: var(--border-radius-sm);
   background: var(--white);
   font-size: var(--font-size-xs);
@@ -2875,11 +2878,12 @@ kbd.eidos-cmd-kbd {
   height: 12px;
   flex-shrink: 0;
 }
-.eidos-message-attachment-link:hover {
-  border-color: var(--gray-300);
+
+a.eidos-message-attachment-link:hover {
+  border-color: var(--gray-600);
   background: var(--gray-50);
 }
-.eidos-message-attachment-link:focus-visible {
+a.eidos-message-attachment-link:focus-visible {
   outline: none;
   box-shadow: inset 0 0 0 2px var(--primary-color);
 }
@@ -2891,6 +2895,7 @@ kbd.eidos-cmd-kbd {
 }
 
 .eidos-message-attachment-size {
+  margin-left: var(--spacing-md);
   color: var(--text-muted);
   flex-shrink: 0;
 }
@@ -3080,9 +3085,13 @@ kbd.eidos-cmd-kbd {
 }
 .eidos-message--chat.eidos-message--own .eidos-message-attachment-link {
   background: rgba(var(--black-rgb), 0.18);
-  border-color: rgba(var(--white-rgb), 0.35);
+  border-color: var(--primary-contrast);
   color: inherit;
 }
+.eidos-message--chat.eidos-message--own a.eidos-message-attachment-link:hover {
+  background: rgba(var(--black-rgb), 0.3);
+  border-color: var(--primary-contrast);
+}
 .eidos-message--chat.eidos-message--own .eidos-message-attachment-size {
   color: inherit;
 }
@@ -3240,6 +3249,9 @@ kbd.eidos-cmd-kbd {
   min-width: 0;
 }
 
+.eidos-message--comment .eidos-message-header .eidos-message-time {
+  margin-left: auto;
+}
 .eidos-message--comment .eidos-message-bubble {
   padding: var(--spacing-sm) var(--spacing-md);
   border: 1px solid var(--gray-200);
@@ -7513,6 +7525,45 @@ kbd.eidos-cmd-kbd {
     transform: rotate(360deg);
   }
 }
+.eidos-split-chip {
+  display: inline-flex;
+  align-items: stretch;
+  max-width: 100%;
+}
+.eidos-split-chip > .eidos-tooltip-trigger {
+  display: flex;
+  align-items: stretch;
+  min-width: 0;
+}
+.eidos-split-chip .eidos-split-chip__segment {
+  border-radius: 0;
+}
+.eidos-split-chip .eidos-split-chip__segment--joined-start {
+  border-left-width: 0;
+}
+.eidos-split-chip .eidos-split-chip__segment--joined-end {
+  border-right-width: 0;
+}
+.eidos-split-chip .eidos-split-chip__segment--divided {
+  border-left: 1px solid currentColor;
+}
+.eidos-split-chip .eidos-split-chip__segment--first {
+  border-top-left-radius: var(--border-radius-sm);
+  border-bottom-left-radius: var(--border-radius-sm);
+}
+.eidos-split-chip .eidos-split-chip__segment--last {
+  border-top-right-radius: var(--border-radius-sm);
+  border-bottom-right-radius: var(--border-radius-sm);
+}
+.eidos-split-chip .eidos-split-chip__segment.eidos-chip--clickable {
+  min-width: 24px;
+  justify-content: center;
+}
+.eidos-split-chip .eidos-split-chip__segment:focus-visible {
+  outline: none;
+  box-shadow: inset 0 0 0 2px var(--primary-color);
+}
+
 .eidos-stepper {
   display: flex;
   width: 100%;

package/dist/index.d.cts

@@ -40,7 +40,9 @@ export { S as SegmentedControlColorProps, a as SegmentedControlProps, b as Segme
 export { SplitButton, SplitButtonOption, SplitButtonProps } from './split-button/index.cjs';
 export { ContextMenu, ContextMenuProps } from './context-menu/index.cjs';
 export { Tooltip, TooltipProps } from './tooltip/index.cjs';
-export { Chip, ChipColorProps, ChipProps, ChipVariantProps, TextChipProps } from './chip/index.cjs';
+export { Chip } from './chip/index.cjs';
+export { C as ChipColorProps, a as ChipProps, b as ChipVariantProps, T as TextChipProps } from './Chip.types-B6y3Wifa.cjs';
+export { SplitChip, SplitChipProps, SplitChipSegment } from './split-chip/index.cjs';
 export { Divider, DividerProps } from './divider/index.cjs';
 export { Spinner, SpinnerColorProps, SpinnerProps } from './spinner/index.cjs';
 export { Dropdown, DropdownPosition, DropdownProps, DropdownProvider, DropdownState, NestedDropdownItem, useDropdownContext } from './dropdown/index.cjs';

package/dist/index.d.ts

@@ -40,7 +40,9 @@ export { S as SegmentedControlColorProps, a as SegmentedControlProps, b as Segme
 export { SplitButton, SplitButtonOption, SplitButtonProps } from './split-button/index.js';
 export { ContextMenu, ContextMenuProps } from './context-menu/index.js';
 export { Tooltip, TooltipProps } from './tooltip/index.js';
-export { Chip, ChipColorProps, ChipProps, ChipVariantProps, TextChipProps } from './chip/index.js';
+export { Chip } from './chip/index.js';
+export { C as ChipColorProps, a as ChipProps, b as ChipVariantProps, T as TextChipProps } from './Chip.types-COQfx2Ru.js';
+export { SplitChip, SplitChipProps, SplitChipSegment } from './split-chip/index.js';
 export { Divider, DividerProps } from './divider/index.js';
 export { Spinner, SpinnerColorProps, SpinnerProps } from './spinner/index.js';
 export { Dropdown, DropdownPosition, DropdownProps, DropdownProvider, DropdownState, NestedDropdownItem, useDropdownContext } from './dropdown/index.js';

package/dist/index.js

@@ -4,6 +4,9 @@ import {
 import {
   VirtualList
 } from "./chunk-H2RS6Z6Q.js";
+import {
+  Switch
+} from "./chunk-7HEUWGYW.js";
 import {
   Table
 } from "./chunk-RHFD2Z5V.js";
@@ -45,12 +48,12 @@ import {
   useSnackbar,
   useSnackbarContext
 } from "./chunk-MPIVBAMY.js";
+import {
+  SplitChip
+} from "./chunk-L7I5NEGI.js";
 import {
   Stepper
 } from "./chunk-3LBWAUCR.js";
-import {
-  Switch
-} from "./chunk-7HEUWGYW.js";
 import {
   OTPInput
 } from "./chunk-U233KQZX.js";
@@ -151,7 +154,7 @@ import {
   Chat,
   CommentThread,
   MessageComposer
-} from "./chunk-2JW3WSBF.js";
+} from "./chunk-SNRRF64M.js";
 import {
   Skeleton
 } from "./chunk-Y55M34RQ.js";
@@ -272,6 +275,7 @@ export {
   SnackbarProvider,
   Spinner,
   SplitButton,
+  SplitChip,
   Stepper,
   Switch,
   Tab,

package/dist/split-chip/index.cjs

@@ -0,0 +1,11 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+
+var _chunkPCTHJZROcjs = require('../chunk-PCTHJZRO.cjs');
+require('../chunk-TTLFY76J.cjs');
+require('../chunk-BEOECPVJ.cjs');
+require('../chunk-35LGEPLP.cjs');
+require('../chunk-DZUJEN5N.cjs');
+
+
+exports.SplitChip = _chunkPCTHJZROcjs.SplitChip;
+//# sourceMappingURL=index.cjs.map

package/dist/split-chip/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/home/runner/work/eidos-ui/eidos-ui/dist/split-chip/index.cjs"],"names":[],"mappings":"AAAA;AACE;AACF,yDAA8B;AAC9B,iCAA8B;AAC9B,iCAA8B;AAC9B,iCAA8B;AAC9B,iCAA8B;AAC9B;AACE;AACF,gDAAC","file":"/home/runner/work/eidos-ui/eidos-ui/dist/split-chip/index.cjs"}

package/dist/split-chip/index.d.cts

@@ -0,0 +1,67 @@
+import React__default from 'react';
+import { I as IconType } from '../renderIcon-C2lEMMzb.cjs';
+import { C as ComponentSizeProps } from '../sizes-DM6Rrrgq.cjs';
+import { b as ChipVariantProps, C as ChipColorProps } from '../Chip.types-B6y3Wifa.cjs';
+
+interface SplitChipSegment {
+    /** Stable, unique key for the segment. */
+    id: string;
+    /** Content of the segment. */
+    label: React.ReactNode;
+    /** Visual style of this segment. Falls back to the `SplitChip`'s `variant`. */
+    variant?: ChipVariantProps;
+    /** Colour of this segment. Falls back to the `SplitChip`'s `color`. */
+    color?: ChipColorProps;
+    /**
+     * Makes the segment a button with hover and press feedback. A segment
+     * without it is static: no pointer cursor, no hover state.
+     */
+    onClick?: () => void;
+    /** Icon before the label. Lucide component or icon name. */
+    preIcon?: IconType;
+    /** Icon after the label. Lucide component or icon name. */
+    posIcon?: IconType;
+    /** Tooltip shown when this segment is hovered or focused. */
+    tooltip?: string;
+    /** Disables this segment only. */
+    disabled?: boolean;
+}
+interface SplitChipProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children' | 'color'> {
+    /** The segments, rendered left to right as one joined chip. */
+    segments: SplitChipSegment[];
+    /** Default visual style for segments that do not set their own. */
+    variant?: ChipVariantProps;
+    /** Default colour for segments that do not set their own. */
+    color?: ChipColorProps;
+    /** Size of every segment. */
+    size?: ComponentSizeProps;
+    /** Disables every segment. */
+    disabled?: boolean;
+    /** Draws a 1px divider between adjacent segments. */
+    showDividers?: boolean;
+    className?: string;
+}
+
+/**
+ * SplitChip - one chip split into independent segments, each with its own
+ * label, variant, colour and optional click handler.
+ *
+ * Every segment is a real `Chip`, the same way `SplitButton` is built from
+ * `Button`, so variants, sizes, icons, tooltips, disabled styling and the
+ * "hover only when clickable" rule cannot drift between the two. This
+ * component only adds the join: collapsed inner borders, radii on the outer
+ * ends, and optional dividers.
+ *
+ * @example
+ * ```tsx
+ * <SplitChip
+ *   segments={[
+ *     { id: 'label', label: 'Status', variant: 'outlined' },
+ *     { id: 'value', label: 'Open', color: 'success', onClick: openFilter },
+ *   ]}
+ * />
+ * ```
+ */
+declare const SplitChip: React__default.FC<SplitChipProps>;
+
+export { SplitChip, type SplitChipProps, type SplitChipSegment };

package/dist/split-chip/index.d.ts

@@ -0,0 +1,67 @@
+import React__default from 'react';
+import { I as IconType } from '../renderIcon-C2lEMMzb.js';
+import { C as ComponentSizeProps } from '../sizes-DM6Rrrgq.js';
+import { b as ChipVariantProps, C as ChipColorProps } from '../Chip.types-COQfx2Ru.js';
+
+interface SplitChipSegment {
+    /** Stable, unique key for the segment. */
+    id: string;
+    /** Content of the segment. */
+    label: React.ReactNode;
+    /** Visual style of this segment. Falls back to the `SplitChip`'s `variant`. */
+    variant?: ChipVariantProps;
+    /** Colour of this segment. Falls back to the `SplitChip`'s `color`. */
+    color?: ChipColorProps;
+    /**
+     * Makes the segment a button with hover and press feedback. A segment
+     * without it is static: no pointer cursor, no hover state.
+     */
+    onClick?: () => void;
+    /** Icon before the label. Lucide component or icon name. */
+    preIcon?: IconType;
+    /** Icon after the label. Lucide component or icon name. */
+    posIcon?: IconType;
+    /** Tooltip shown when this segment is hovered or focused. */
+    tooltip?: string;
+    /** Disables this segment only. */
+    disabled?: boolean;
+}
+interface SplitChipProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children' | 'color'> {
+    /** The segments, rendered left to right as one joined chip. */
+    segments: SplitChipSegment[];
+    /** Default visual style for segments that do not set their own. */
+    variant?: ChipVariantProps;
+    /** Default colour for segments that do not set their own. */
+    color?: ChipColorProps;
+    /** Size of every segment. */
+    size?: ComponentSizeProps;
+    /** Disables every segment. */
+    disabled?: boolean;
+    /** Draws a 1px divider between adjacent segments. */
+    showDividers?: boolean;
+    className?: string;
+}
+
+/**
+ * SplitChip - one chip split into independent segments, each with its own
+ * label, variant, colour and optional click handler.
+ *
+ * Every segment is a real `Chip`, the same way `SplitButton` is built from
+ * `Button`, so variants, sizes, icons, tooltips, disabled styling and the
+ * "hover only when clickable" rule cannot drift between the two. This
+ * component only adds the join: collapsed inner borders, radii on the outer
+ * ends, and optional dividers.
+ *
+ * @example
+ * ```tsx
+ * <SplitChip
+ *   segments={[
+ *     { id: 'label', label: 'Status', variant: 'outlined' },
+ *     { id: 'value', label: 'Open', color: 'success', onClick: openFilter },
+ *   ]}
+ * />
+ * ```
+ */
+declare const SplitChip: React__default.FC<SplitChipProps>;
+
+export { SplitChip, type SplitChipProps, type SplitChipSegment };

package/dist/split-chip/index.js

@@ -0,0 +1,11 @@
+import {
+  SplitChip
+} from "../chunk-L7I5NEGI.js";
+import "../chunk-GWHZFX2H.js";
+import "../chunk-JNY7TUDS.js";
+import "../chunk-RHHZRTWM.js";
+import "../chunk-5WRI5ZAA.js";
+export {
+  SplitChip
+};
+//# sourceMappingURL=index.js.map

package/dist/split-chip/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eidos-ui",
-  "version": "3.6.2",
+  "version": "3.7.0",
   "description": "A modern React component library with TypeScript and SCSS",
   "type": "module",
   "main": "./dist/index.cjs",