@spaced-out/ui-design-system 0.6.23 → 0.6.24

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.6.24](https://github.com/spaced-out/ui-design-system/compare/v0.6.23...v0.6.24) (2026-06-25)
+
+
+### Features
+
+* pill component ([#492](https://github.com/spaced-out/ui-design-system/issues/492)) ([001a9ef](https://github.com/spaced-out/ui-design-system/commit/001a9ef9c132642ffd17cfde9fe990dabac3cb8f))
+
 ### [0.6.23](https://github.com/spaced-out/ui-design-system/compare/v0.6.22...v0.6.23) (2026-06-25)
 
 

package/lib/components/Chip/Chip.module.css

@@ -21,7 +21,8 @@
   spaceSmall
 ) from '../../styles/variables/_space.css';
 @value (
-  borderRadiusXSmall
+  borderRadiusXSmall,
+  borderRadiusXLarge
 ) from '../../styles/variables/_border.css';
 @value (
   size18,
@@ -72,6 +73,10 @@
   background-color: colorNeutralLightest;
 }
 
+.pill {
+  border-radius: borderRadiusXLarge;
+}
+
 .noHoverState {
   cursor: initial;
 }

package/lib/components/Chip/Pill.d.ts

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import type { Flow } from 'flow-to-typescript-codemod';
+import type { ChipSemanticType } from '../../components/Chip/Chip';
+import type { IconType } from '../../components/Icon';
+type ClassNames = Readonly<{
+    wrapper?: string;
+    icon?: string;
+}>;
+export declare const PILL_SEMANTIC: Readonly<{
+    primary: "primary";
+    information: "information";
+    success: "success";
+    warning: "warning";
+    danger: "danger";
+    secondary: "secondary";
+}>;
+export type PillSemanticType = ChipSemanticType;
+export interface PillProps {
+    classNames?: ClassNames;
+    semantic?: PillSemanticType;
+    size?: 'large' | 'medium' | 'small';
+    children: React.ReactNode;
+    disabled?: boolean;
+    line?: number;
+    wordBreak?: string;
+    iconName?: string;
+    iconType?: IconType;
+    testId?: string;
+}
+export declare const Pill: Flow.AbstractComponent<PillProps, HTMLDivElement>;
+export {};
+//# sourceMappingURL=Pill.d.ts.map

package/lib/components/Chip/Pill.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pill.d.ts","sourceRoot":"","sources":["../../../src/components/Chip/Pill.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAKrD,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,0BAA0B,CAAC;AAE/D,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,qBAAqB,CAAC;AAOlD,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC,CAAC;AAEH,eAAO,MAAM,aAAa;;;;;;;EAAgB,CAAC;AAE3C,MAAM,MAAM,gBAAgB,GAAG,gBAAgB,CAAC;AAEhD,MAAM,WAAW,SAAS;IACxB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,QAAQ,CAAC,EAAE,gBAAgB,CAAC;IAC5B,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,IAAI,EAAE,IAAI,CAAC,iBAAiB,CAAC,SAAS,EAAE,cAAc,CA8DhE,CAAC"}

package/lib/components/Chip/Pill.js

@@ -0,0 +1,72 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Pill = exports.PILL_SEMANTIC = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _classify = require("../../utils/classify");
+var _qa = require("../../utils/qa");
+var _Chip = require("./Chip");
+var _Icon = require("../Icon");
+var _Truncate = require("../Truncate");
+var _ChipModule = _interopRequireDefault(require("./Chip.module.css"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const PILL_SEMANTIC = exports.PILL_SEMANTIC = _Chip.CHIP_SEMANTIC;
+const Pill = exports.Pill = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    classNames,
+    semantic = 'primary',
+    size = 'medium',
+    children,
+    disabled,
+    line = 1,
+    wordBreak,
+    iconName,
+    iconType = 'regular',
+    testId
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    "data-testid": (0, _qa.generateTestId)({
+      base: testId,
+      slot: 'root'
+    }),
+    ref: ref,
+    className: (0, _classify.classify)(_ChipModule.default.chipWrapper, _ChipModule.default.pill, _ChipModule.default.noHoverState, {
+      [_ChipModule.default.primary]: semantic === _Chip.CHIP_SEMANTIC.primary,
+      [_ChipModule.default.information]: semantic === _Chip.CHIP_SEMANTIC.information,
+      [_ChipModule.default.success]: semantic === _Chip.CHIP_SEMANTIC.success,
+      [_ChipModule.default.warning]: semantic === _Chip.CHIP_SEMANTIC.warning,
+      [_ChipModule.default.danger]: semantic === _Chip.CHIP_SEMANTIC.danger,
+      [_ChipModule.default.secondary]: semantic === _Chip.CHIP_SEMANTIC.secondary,
+      [_ChipModule.default.large]: size === 'large',
+      [_ChipModule.default.medium]: size === 'medium',
+      [_ChipModule.default.small]: size === 'small',
+      [_ChipModule.default.withIcon]: !!iconName && size !== 'small',
+      [_ChipModule.default.disabled]: disabled
+    }, classNames?.wrapper),
+    children: [iconName && size !== 'small' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
+      className: (0, _classify.classify)(_ChipModule.default.chipIcon, {
+        [_ChipModule.default.alignTop]: line > 1
+      }, classNames?.icon),
+      name: iconName,
+      type: iconType,
+      size: "small",
+      testId: (0, _qa.generateTestId)({
+        base: testId,
+        slot: 'icon'
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Truncate.Truncate, {
+      line: line,
+      wordBreak: wordBreak,
+      testId: (0, _qa.generateTestId)({
+        base: testId,
+        slot: 'text'
+      }),
+      children: children
+    })]
+  });
+});
+Pill.displayName = 'Pill';

package/lib/components/Chip/index.d.ts

@@ -1,3 +1,5 @@
 export type { ChipProps, ChipSemanticType } from '../../components/Chip/Chip';
 export { Chip, CHIP_SEMANTIC } from '../../components/Chip/Chip';
+export type { PillProps, PillSemanticType } from '../../components/Chip/Pill';
+export { Pill, PILL_SEMANTIC } from '../../components/Chip/Pill';
 //# sourceMappingURL=index.d.ts.map

package/lib/components/Chip/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Chip/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAC,SAAS,EAAE,gBAAgB,EAAC,MAAM,0BAA0B,CAAC;AAC1E,OAAO,EAAC,IAAI,EAAE,aAAa,EAAC,MAAM,0BAA0B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Chip/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAC,SAAS,EAAE,gBAAgB,EAAC,MAAM,0BAA0B,CAAC;AAC1E,OAAO,EAAC,IAAI,EAAE,aAAa,EAAC,MAAM,0BAA0B,CAAC;AAC7D,YAAY,EAAC,SAAS,EAAE,gBAAgB,EAAC,MAAM,0BAA0B,CAAC;AAC1E,OAAO,EAAC,IAAI,EAAE,aAAa,EAAC,MAAM,0BAA0B,CAAC"}

package/lib/components/Chip/index.js

@@ -15,4 +15,17 @@ Object.defineProperty(exports, "Chip", {
     return _Chip.Chip;
   }
 });
-var _Chip = require("./Chip");
+Object.defineProperty(exports, "PILL_SEMANTIC", {
+  enumerable: true,
+  get: function () {
+    return _Pill.PILL_SEMANTIC;
+  }
+});
+Object.defineProperty(exports, "Pill", {
+  enumerable: true,
+  get: function () {
+    return _Pill.Pill;
+  }
+});
+var _Chip = require("./Chip");
+var _Pill = require("./Pill");

package/mcp/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spaced-out/genesis-mcp",
-  "version": "1.0.35",
+  "version": "1.0.36",
   "description": "MCP server for Genesis UI Design System - provides AI assistants with access to components, hooks, and design tokens",
   "type": "module",
   "main": "index.js",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spaced-out/ui-design-system",
-  "version": "0.6.23",
+  "version": "0.6.24",
   "description": "Sense UI components library",
   "author": {
     "name": "Spaced Out"