@canonical/react-ds-core 0.10.0-experimental.0 → 0.10.0-experimental.3

package/dist/esm/ui/Badge/Badge.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "./styles.css";
+import useBadge from "./hooks/useBadge.js";
+const componentCssClassName = "ds badge";
+/**
+ * description of the Badge component
+ * @returns {React.ReactElement} - Rendered Badge
+ * @implements syntax:core:component:badge:1.0.0
+ */
+const Badge = ({ value, className, severity, humanizeOptions, pluralizeOptions, ...props }) => {
+    const { displayValue, title } = useBadge({
+        value,
+        humanizeOptions,
+        pluralizeOptions,
+    });
+    return (_jsx("span", { title: title, className: [componentCssClassName, severity, className]
+            .filter(Boolean)
+            .join(" "), ...props, children: displayValue }));
+};
+export default Badge;
+//# sourceMappingURL=Badge.js.map

package/dist/esm/ui/Badge/Badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.js","sourceRoot":"","sources":["../../../../src/ui/Badge/Badge.tsx"],"names":[],"mappings":";AAIA,OAAO,cAAc,CAAC;AACtB,OAAO,QAAQ,MAAM,qBAAqB,CAAC;AAE3C,MAAM,qBAAqB,GAAG,UAAU,CAAC;AAEzC;;;;GAIG;AACH,MAAM,KAAK,GAAG,CAAC,EACb,KAAK,EACL,SAAS,EACT,QAAQ,EACR,eAAe,EACf,gBAAgB,EAChB,GAAG,KAAK,EACG,EAAsB,EAAE;IACnC,MAAM,EAAE,YAAY,EAAE,KAAK,EAAE,GAAG,QAAQ,CAAC;QACvC,KAAK;QACL,eAAe;QACf,gBAAgB;KACjB,CAAC,CAAC;IAEH,OAAO,CACL,eACE,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,CAAC,qBAAqB,EAAE,QAAQ,EAAE,SAAS,CAAC;aACpD,MAAM,CAAC,OAAO,CAAC;aACf,IAAI,CAAC,GAAG,CAAC,KACR,KAAK,YAER,YAAY,GACR,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/dist/esm/ui/Badge/hooks/useBadge.js

@@ -0,0 +1,23 @@
+import { humanizeNumber, pluralize, } from "@canonical/utils";
+import { useMemo } from "react";
+const DEFAULT_HUMANIZE_OPTIONS = {
+    overflowIndicator: "+",
+};
+/**
+ * A hook to manage a Badge's internal state
+ */
+const useBadge = ({ value, humanizeOptions, pluralizeOptions, }) => {
+    // Badge values must be at least 0 to preserve their purpose as natural number indicators
+    const valueToUse = useMemo(() => Math.max(0, value), [value]);
+    const displayValue = useMemo(() => {
+        const options = { ...DEFAULT_HUMANIZE_OPTIONS, ...humanizeOptions };
+        return humanizeNumber(valueToUse, options).displayValue;
+    }, [valueToUse, humanizeOptions]);
+    const title = useMemo(() => `${displayValue} ${pluralize(valueToUse, pluralizeOptions)}`, [valueToUse, displayValue, pluralizeOptions]);
+    return useMemo(() => ({
+        displayValue,
+        title,
+    }), [displayValue, title]);
+};
+export default useBadge;
+//# sourceMappingURL=useBadge.js.map

package/dist/esm/ui/Badge/hooks/useBadge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useBadge.js","sourceRoot":"","sources":["../../../../../src/ui/Badge/hooks/useBadge.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,cAAc,EACd,SAAS,GACV,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAGhC,MAAM,wBAAwB,GAA0B;IACtD,iBAAiB,EAAE,GAAG;CACvB,CAAC;AAEF;;GAEG;AACH,MAAM,QAAQ,GAAG,CAAC,EAChB,KAAK,EACL,eAAe,EACf,gBAAgB,GACF,EAAkB,EAAE;IAClC,yFAAyF;IACzF,MAAM,UAAU,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAE9D,MAAM,YAAY,GAAW,OAAO,CAAC,GAAG,EAAE;QACxC,MAAM,OAAO,GAAG,EAAE,GAAG,wBAAwB,EAAE,GAAG,eAAe,EAAE,CAAC;QAEpE,OAAO,cAAc,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC,YAAY,CAAC;IAC1D,CAAC,EAAE,CAAC,UAAU,EAAE,eAAe,CAAC,CAAC,CAAC;IAElC,MAAM,KAAK,GAAW,OAAO,CAC3B,GAAG,EAAE,CAAC,GAAG,YAAY,IAAI,SAAS,CAAC,UAAU,EAAE,gBAAgB,CAAC,EAAE,EAClE,CAAC,UAAU,EAAE,YAAY,EAAE,gBAAgB,CAAC,CAC7C,CAAC;IAEF,OAAO,OAAO,CACZ,GAAG,EAAE,CAAC,CAAC;QACL,YAAY;QACZ,KAAK;KACN,CAAC,EACF,CAAC,YAAY,EAAE,KAAK,CAAC,CACtB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/dist/esm/ui/Badge/index.js

@@ -0,0 +1,4 @@
+/* @canonical/generator-ds 0.10.0-experimental.2 */
+export { default as Badge } from "./Badge.js";
+export * from "./types.js";
+//# sourceMappingURL=index.js.map

package/dist/esm/ui/Badge/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/ui/Badge/index.ts"],"names":[],"mappings":"AAAA,mDAAmD;AAEnD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,YAAY,CAAC;AAC9C,cAAc,YAAY,CAAC"}

package/dist/esm/ui/Badge/styles.css

@@ -0,0 +1,21 @@
+/* Badge.css */
+.ds.badge {
+  /** Pull the badge closer to the edge of a chip */
+  --badge-chip-margin-tweak: 0.15rem;
+
+  /* Base badge styles using tokens */
+  background-color: var(--intent-color, var(--badge-color-background));
+  border-radius: var(--badge-border-radius);
+  box-sizing: content-box;
+  color: var(--intent-color-text, var(--badge-color-text));
+  display: inline-block;
+  font-size: var(--badge-font-size);
+  font-weight: var(--badge-font-weight);
+  line-height: var(--badge-line-height);
+  margin-bottom: var(--badge-margin-bottom);
+  max-width: var(--badge-max-width);
+  min-width: var(--badge-min-width);
+  overflow: hidden;
+  padding: var(--badge-padding-vertical) var(--badge-padding-horizontal);
+  text-align: center;
+}

package/dist/esm/ui/Badge/types.js

@@ -0,0 +1,3 @@
+/* @canonical/generator-ds 0.10.0-experimental.2 */
+export {};
+//# sourceMappingURL=types.js.map

package/dist/esm/ui/Badge/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/ui/Badge/types.ts"],"names":[],"mappings":"AAAA,mDAAmD"}

package/dist/esm/ui/Chip/styles.css

@@ -76,4 +76,11 @@
       var(--chip-color-background-active)
     );
   }
+
+  /* Context-specific styling for badges within chips */
+  & .ds.badge {
+    align-self: center;
+    margin-left: var(--spacing-horizontal-small);
+    margin-right: var(--badge-chip-margin-tweak);
+  }
 }

package/dist/esm/ui/Rule/Rule.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "./styles.css";
+const componentCssClassName = "ds rule";
+/**
+ * A component that separates content into logical groups.
+ * @TODO implement fixed-width behavior after implementation of the Grid
+ * @returns {React.ReactElement} - Rendered Rule
+ * @implements syntax:core:component:rule:1.0.0
+ */
+const Rule = ({ className, emphasis, ...props }) => {
+    return (_jsx("hr", { className: [componentCssClassName, emphasis, className]
+            .filter(Boolean)
+            .join(" "), ...props }));
+};
+export default Rule;
+//# sourceMappingURL=Rule.js.map

package/dist/esm/ui/Rule/Rule.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Rule.js","sourceRoot":"","sources":["../../../../src/ui/Rule/Rule.tsx"],"names":[],"mappings":";AAIA,OAAO,cAAc,CAAC;AAEtB,MAAM,qBAAqB,GAAG,SAAS,CAAC;AAExC;;;;;GAKG;AACH,MAAM,IAAI,GAAG,CAAC,EACZ,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACE,EAAsB,EAAE;IAClC,OAAO,CACL,aACE,SAAS,EAAE,CAAC,qBAAqB,EAAE,QAAQ,EAAE,SAAS,CAAC;aACpD,MAAM,CAAC,OAAO,CAAC;aACf,IAAI,CAAC,GAAG,CAAC,KACR,KAAK,GACT,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/dist/esm/ui/Rule/index.js

@@ -0,0 +1,4 @@
+/* @canonical/generator-ds 0.10.0-experimental.2 */
+export { default as Rule } from "./Rule.js";
+export * from "./types.js";
+//# sourceMappingURL=index.js.map

package/dist/esm/ui/Rule/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/ui/Rule/index.ts"],"names":[],"mappings":"AAAA,mDAAmD;AAEnD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,WAAW,CAAC;AAC5C,cAAc,YAAY,CAAC"}

package/dist/esm/ui/Rule/styles.css

@@ -0,0 +1,16 @@
+/* @canonical/generator-ds 0.10.0-experimental.2 */
+
+.ds.rule {
+  background-color: var(
+    --intent-separator-bar-color,
+    var(--rule-color-background)
+  );
+  border-width: var(--rule-border-width);
+  height: var(--intent-separator-bar-height, var(--rule-height));
+  margin-block-start: var(--rule-margin-top);
+  /* global modifiers can change the height of the rule. Subtract the actual height of the rule from the target height to keep baseline alignment    */
+  margin-block-end: calc(
+    var(--rule-height-with-margin) -
+    var(--intent-separator-bar-height, var(--rule-height))
+  );
+}

package/dist/esm/ui/Rule/types.js

@@ -0,0 +1,3 @@
+/* @canonical/generator-ds 0.10.0-experimental.2 */
+export {};
+//# sourceMappingURL=types.js.map

package/dist/esm/ui/Rule/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/ui/Rule/types.ts"],"names":[],"mappings":"AAAA,mDAAmD"}

package/dist/esm/ui/Tooltip/common/TooltipArea/TooltipArea.js

@@ -19,7 +19,7 @@ const TooltipArea = ({ children, style, className, Message, distance = "6px", ta
             .join(" "), onPointerEnter: handleTriggerEnter, onFocus: handleTriggerFocus, ref: popupRef, style: {
             ...messageElementStyle,
             ...popupPositionStyle,
-            // @ts-ignore allow binding arrow size to distance, as it is needed both in JS and CSS calculations
+            // @ts-expect-error allow binding arrow size to distance, as it is needed both in JS and CSS calculations
             "--tooltip-spacing-arrow-size": distance,
             ...(autoFit &&
                 bestPosition?.autoFitOffset && {

package/dist/esm/ui/Tooltip/common/TooltipArea/TooltipArea.js.map

@@ -1 +1 @@
-{"version":3,"file":"TooltipArea.js","sourceRoot":"","sources":["../../../../../../src/ui/Tooltip/common/TooltipArea/TooltipArea.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AACnD,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAGzC,OAAO,cAAc,CAAC;AACtB,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAEzC,MAAM,qBAAqB,GAAG,iBAAiB,CAAC;AAEhD;;;GAGG;AACH,MAAM,WAAW,GAAG,CAAC,EACnB,QAAQ,EACR,KAAK,EACL,SAAS,EACT,OAAO,EACP,QAAQ,GAAG,KAAK,EAChB,eAAe,EACf,sBAAsB,EACtB,kBAAkB,EAClB,uBAAuB,EACvB,mBAAmB,EACnB,aAAa,EACb,OAAO,EACP,GAAG,KAAK,EACS,EAAgB,EAAE;IACnC,MAAM,EACJ,SAAS,EACT,QAAQ,EACR,kBAAkB,EAClB,OAAO,EACP,MAAM,EACN,kBAAkB,EAClB,iBAAiB,EACjB,kBAAkB,EAClB,kBAAkB,EAClB,YAAY,GACb,GAAG,QAAQ,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,CAAC,CAAC;IAE9C,MAAM,qBAAqB,GAAG,CAC5B,KAAC,OAAO,IACN,EAAE,EAAE,OAAO,EACX,SAAS,EAAE;YACT,YAAY,EAAE,YAAY;YAC1B,uBAAuB;YACvB,OAAO,IAAI,SAAS;SACrB;aACE,MAAM,CAAC,OAAO,CAAC;aACf,IAAI,CAAC,GAAG,CAAC,EACZ,cAAc,EAAE,kBAAkB,EAClC,OAAO,EAAE,kBAAkB,EAC3B,GAAG,EAAE,QAAQ,EACb,KAAK,EAAE;YACL,GAAG,mBAAmB;YACtB,GAAG,kBAAkB;YACrB,mGAAmG;YACnG,8BAA8B,EAAE,QAAQ;YACxC,GAAG,CAAC,OAAO;gBACT,YAAY,EAAE,aAAa,IAAI;gBAC7B,4BAA4B,EAAE,GAAG,YAAY,EAAE,aAAa,CAAC,GAAG,IAAI,CAAC,IAAI;gBACzE,6BAA6B,EAAE,GAAG,YAAY,EAAE,aAAa,CAAC,IAAI,IAAI,CAAC,IAAI;aAC5E,CAAC;SACL,EACD,MAAM,EAAE,MAAM,YAEb,OAAO,GACA,CACX,CAAC;IAEF,OAAO;IACL,0GAA0G;IAC1G,gBACE,SAAS,EAAE,CAAC,qBAAqB,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,EACvE,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,kBAAkB,EAC3B,MAAM,EAAE,iBAAiB,EACzB,cAAc,EAAE,kBAAkB,EAClC,cAAc,EAAE,kBAAkB,aAElC,eACE,EAAE,EAAE,eAAe,EACnB,KAAK,EAAE,kBAAkB,EACzB,SAAS,EAAE,CAAC,QAAQ,EAAE,sBAAsB,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,EACvE,GAAG,EAAE,SAAS,sBACI,OAAO,YAExB,QAAQ,GACJ,EAIN,OAAO,MAAM,KAAK,WAAW;gBAC5B,CAAC,CAAC,sEAAsE;oBACtE,8FAA8F;oBAC9F,oCAAoC;oBACpC,YAAY,CAAC,qBAAqB,EAAE,aAAa,IAAI,QAAQ,CAAC,IAAI,CAAC;gBACrE,CAAC,CAAC,qBAAqB,IACpB,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"TooltipArea.js","sourceRoot":"","sources":["../../../../../../src/ui/Tooltip/common/TooltipArea/TooltipArea.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AACnD,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAGzC,OAAO,cAAc,CAAC;AACtB,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAEzC,MAAM,qBAAqB,GAAG,iBAAiB,CAAC;AAEhD;;;GAGG;AACH,MAAM,WAAW,GAAG,CAAC,EACnB,QAAQ,EACR,KAAK,EACL,SAAS,EACT,OAAO,EACP,QAAQ,GAAG,KAAK,EAChB,eAAe,EACf,sBAAsB,EACtB,kBAAkB,EAClB,uBAAuB,EACvB,mBAAmB,EACnB,aAAa,EACb,OAAO,EACP,GAAG,KAAK,EACS,EAAgB,EAAE;IACnC,MAAM,EACJ,SAAS,EACT,QAAQ,EACR,kBAAkB,EAClB,OAAO,EACP,MAAM,EACN,kBAAkB,EAClB,iBAAiB,EACjB,kBAAkB,EAClB,kBAAkB,EAClB,YAAY,GACb,GAAG,QAAQ,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,CAAC,CAAC;IAE9C,MAAM,qBAAqB,GAAG,CAC5B,KAAC,OAAO,IACN,EAAE,EAAE,OAAO,EACX,SAAS,EAAE;YACT,YAAY,EAAE,YAAY;YAC1B,uBAAuB;YACvB,OAAO,IAAI,SAAS;SACrB;aACE,MAAM,CAAC,OAAO,CAAC;aACf,IAAI,CAAC,GAAG,CAAC,EACZ,cAAc,EAAE,kBAAkB,EAClC,OAAO,EAAE,kBAAkB,EAC3B,GAAG,EAAE,QAAQ,EACb,KAAK,EAAE;YACL,GAAG,mBAAmB;YACtB,GAAG,kBAAkB;YACrB,yGAAyG;YACzG,8BAA8B,EAAE,QAAQ;YACxC,GAAG,CAAC,OAAO;gBACT,YAAY,EAAE,aAAa,IAAI;gBAC7B,4BAA4B,EAAE,GAAG,YAAY,EAAE,aAAa,CAAC,GAAG,IAAI,CAAC,IAAI;gBACzE,6BAA6B,EAAE,GAAG,YAAY,EAAE,aAAa,CAAC,IAAI,IAAI,CAAC,IAAI;aAC5E,CAAC;SACL,EACD,MAAM,EAAE,MAAM,YAEb,OAAO,GACA,CACX,CAAC;IAEF,OAAO;IACL,0GAA0G;IAC1G,gBACE,SAAS,EAAE,CAAC,qBAAqB,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,EACvE,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,kBAAkB,EAC3B,MAAM,EAAE,iBAAiB,EACzB,cAAc,EAAE,kBAAkB,EAClC,cAAc,EAAE,kBAAkB,aAElC,eACE,EAAE,EAAE,eAAe,EACnB,KAAK,EAAE,kBAAkB,EACzB,SAAS,EAAE,CAAC,QAAQ,EAAE,sBAAsB,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,EACvE,GAAG,EAAE,SAAS,sBACI,OAAO,YAExB,QAAQ,GACJ,EAIN,OAAO,MAAM,KAAK,WAAW;gBAC5B,CAAC,CAAC,sEAAsE;oBACtE,8FAA8F;oBAC9F,oCAAoC;oBACpC,YAAY,CAAC,qBAAqB,EAAE,aAAa,IAAI,QAAQ,CAAC,IAAI,CAAC;gBACrE,CAAC,CAAC,qBAAqB,IACpB,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/esm/ui/Tooltip/common/TooltipArea/styles.css

@@ -6,7 +6,7 @@
     display: inline-block;
 
     & > * {
-      /* The tooltip targets must have no margin in order for tooltip placements to work correctly */
+      /* biome-ignore lint/complexity/noImportantStyles: The tooltip targets must have no margin in order for tooltip placements to work correctly */
       margin: 0 !important;
     }
   }

package/dist/esm/ui/index.js

@@ -1,4 +1,6 @@
+export * from "./Badge/index.js";
 export * from "./Button/index.js";
 export * from "./Chip/index.js";
+export * from "./Rule/index.js";
 export * from "./Tooltip/index.js";
 //# sourceMappingURL=index.js.map

package/dist/esm/ui/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ui/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ui/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC"}

package/dist/types/ui/Badge/Badge.d.ts

@@ -0,0 +1,11 @@
+import type React from "react";
+import type { BadgeProps } from "./types.js";
+import "./styles.css";
+/**
+ * description of the Badge component
+ * @returns {React.ReactElement} - Rendered Badge
+ * @implements syntax:core:component:badge:1.0.0
+ */
+declare const Badge: ({ value, className, severity, humanizeOptions, pluralizeOptions, ...props }: BadgeProps) => React.ReactElement;
+export default Badge;
+//# sourceMappingURL=Badge.d.ts.map

package/dist/types/ui/Badge/Badge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../../src/ui/Badge/Badge.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAC7C,OAAO,cAAc,CAAC;AAKtB;;;;GAIG;AACH,QAAA,MAAM,KAAK,GAAI,6EAOZ,UAAU,KAAG,KAAK,CAAC,YAkBrB,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/dist/types/ui/Badge/hooks/useBadge.d.ts

@@ -0,0 +1,7 @@
+import type { UseBadgeProps, UseBadgeResult } from "../types.js";
+/**
+ * A hook to manage a Badge's internal state
+ */
+declare const useBadge: ({ value, humanizeOptions, pluralizeOptions, }: UseBadgeProps) => UseBadgeResult;
+export default useBadge;
+//# sourceMappingURL=useBadge.d.ts.map

package/dist/types/ui/Badge/hooks/useBadge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useBadge.d.ts","sourceRoot":"","sources":["../../../../../src/ui/Badge/hooks/useBadge.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAMjE;;GAEG;AACH,QAAA,MAAM,QAAQ,GAAI,+CAIf,aAAa,KAAG,cAsBlB,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/dist/types/ui/Badge/index.d.ts

@@ -0,0 +1,3 @@
+export { default as Badge } from "./Badge.js";
+export * from "./types.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/types/ui/Badge/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/ui/Badge/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,YAAY,CAAC;AAC9C,cAAc,YAAY,CAAC"}

package/dist/types/ui/Badge/types.d.ts

@@ -0,0 +1,42 @@
+import type { ModifierFamily } from "@canonical/ds-types";
+import type { HumanizeNumberOptions, PluralizeOptions } from "@canonical/utils";
+import type { HTMLAttributes } from "react";
+export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
+    /**
+     * Numeric value to be displayed.
+     */
+    value: number;
+    /**
+     * Visual appearance of the badge, typically reflecting status.
+     * Options include:
+     * - "positive": Indicates a positive status
+     * - "negative": Indicates a negative status
+     * - "caution": Indicates a cautionary status
+     * - "information": Indicates an informative status
+     * // TODO neutral intent is currently defined in a very button-centric way. It should unset other appearances, but it currently applies default button styling.
+     *      Possibly we will need to revisit this by binding component variables without component name prefix, so that neutral can reset components to their neutral state.
+     *
+     * When no appearance is specified, uses the default badge styling.
+     */
+    severity?: ModifierFamily<"severity">;
+    /**
+     * Options for humanizing the numeric value displayed in the badge.
+     */
+    humanizeOptions?: HumanizeNumberOptions;
+    /**
+     * Options for the pluralization of the item being counted.
+     */
+    pluralizeOptions?: PluralizeOptions;
+}
+export type UseBadgeProps = Pick<BadgeProps, "value" | "humanizeOptions" | "pluralizeOptions">;
+/**
+ * Result of the useBadge hook.
+ * Contains the formatted display value and ARIA label for accessibility.
+ */
+export interface UseBadgeResult {
+    /** Formatted value to be displayed in the badge */
+    displayValue: string | number;
+    /** Title attribute, for displaying additional context about the badge on hover */
+    title: string;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/types/ui/Badge/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/ui/Badge/types.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAC1D,OAAO,KAAK,EAAE,qBAAqB,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAChF,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5C,MAAM,WAAW,UAAW,SAAQ,cAAc,CAAC,eAAe,CAAC;IACjE;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;;;;;;;;;OAWG;IACH,QAAQ,CAAC,EAAE,cAAc,CAAC,UAAU,CAAC,CAAC;IAEtC;;OAEG;IACH,eAAe,CAAC,EAAE,qBAAqB,CAAC;IAExC;;OAEG;IACH,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;CACrC;AAED,MAAM,MAAM,aAAa,GAAG,IAAI,CAC9B,UAAU,EACV,OAAO,GAAG,iBAAiB,GAAG,kBAAkB,CACjD,CAAC;AAEF;;;GAGG;AACH,MAAM,WAAW,cAAc;IAC7B,mDAAmD;IACnD,YAAY,EAAE,MAAM,GAAG,MAAM,CAAC;IAC9B,kFAAkF;IAClF,KAAK,EAAE,MAAM,CAAC;CACf"}

package/dist/types/ui/Button/types.d.ts

@@ -1,3 +1,4 @@
+import type { ModifierFamily } from "@canonical/ds-types";
 import type { ButtonHTMLAttributes, ReactNode } from "react";
 export interface BaseProps {
     id?: string;
@@ -10,8 +11,11 @@ export interface BaseProps {
      * `aria-label` prop to ensure that the button label is applied properly. Otherwise, the label will be set to [object Object].
      * */
     children: ReactNode;
-    /** The visual style of the button */
-    appearance?: "neutral" | "base" | "positive" | "negative" | "link";
+    /**
+     * The visual style of the button
+     * TODO link button will be a separate component in the future
+     * */
+    appearance?: ModifierFamily<"severity"> | "base" | "link";
 }
 type Props = BaseProps & ButtonHTMLAttributes<HTMLButtonElement>;
 export default Props;

package/dist/types/ui/Button/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/ui/Button/types.ts"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE7D,MAAM,WAAW,SAAS;IAExB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;SAKK;IACL,QAAQ,EAAE,SAAS,CAAC;IACpB,qCAAqC;IACrC,UAAU,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,UAAU,GAAG,UAAU,GAAG,MAAM,CAAC;CACpE;AAED,KAAK,KAAK,GAAG,SAAS,GAAG,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;AAEjE,eAAe,KAAK,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/ui/Button/types.ts"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAC1D,OAAO,KAAK,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE7D,MAAM,WAAW,SAAS;IAExB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;SAKK;IACL,QAAQ,EAAE,SAAS,CAAC;IACpB;;;SAGK;IACL,UAAU,CAAC,EAAE,cAAc,CAAC,UAAU,CAAC,GAAG,MAAM,GAAG,MAAM,CAAC;CAC3D;AAED,KAAK,KAAK,GAAG,SAAS,GAAG,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;AAEjE,eAAe,KAAK,CAAC"}

package/dist/types/ui/Rule/Rule.d.ts

@@ -0,0 +1,12 @@
+import type React from "react";
+import type { RuleProps } from "./types.js";
+import "./styles.css";
+/**
+ * A component that separates content into logical groups.
+ * @TODO implement fixed-width behavior after implementation of the Grid
+ * @returns {React.ReactElement} - Rendered Rule
+ * @implements syntax:core:component:rule:1.0.0
+ */
+declare const Rule: ({ className, emphasis, ...props }: RuleProps) => React.ReactElement;
+export default Rule;
+//# sourceMappingURL=Rule.d.ts.map

package/dist/types/ui/Rule/Rule.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Rule.d.ts","sourceRoot":"","sources":["../../../../src/ui/Rule/Rule.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAC5C,OAAO,cAAc,CAAC;AAItB;;;;;GAKG;AACH,QAAA,MAAM,IAAI,GAAI,mCAIX,SAAS,KAAG,KAAK,CAAC,YASpB,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/dist/types/ui/Rule/index.d.ts

@@ -0,0 +1,3 @@
+export { default as Rule } from "./Rule.js";
+export * from "./types.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/types/ui/Rule/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/ui/Rule/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,WAAW,CAAC;AAC5C,cAAc,YAAY,CAAC"}

package/dist/types/ui/Rule/types.d.ts

@@ -0,0 +1,12 @@
+import type { ModifierFamily } from "@canonical/ds-types";
+import type { HTMLAttributes } from "react";
+/**
+    We have used the `HTMLDivElement` as a default props base.
+    If your component is based on a different HTML element, please update it accordingly.
+    See https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API for a full list of HTML elements interfaces.
+*/
+export interface RuleProps extends HTMLAttributes<HTMLHRElement> {
+    className?: string;
+    emphasis?: ModifierFamily<"emphasis">;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/types/ui/Rule/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/ui/Rule/types.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAC1D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5C;;;;EAIE;AACF,MAAM,WAAW,SAAU,SAAQ,cAAc,CAAC,aAAa,CAAC;IAE9D,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,QAAQ,CAAC,EAAE,cAAc,CAAC,UAAU,CAAC,CAAC;CACvC"}

package/dist/types/ui/index.d.ts

@@ -1,4 +1,6 @@
+export * from "./Badge/index.js";
 export * from "./Button/index.js";
 export * from "./Chip/index.js";
+export * from "./Rule/index.js";
 export * from "./Tooltip/index.js";
 //# sourceMappingURL=index.d.ts.map

package/dist/types/ui/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canonical/react-ds-core",
-  "version": "0.10.0-experimental.0",
+  "version": "0.10.0-experimental.3",
   "type": "module",
   "module": "dist/esm/index.js",
   "types": "dist/types/index.d.ts",
@@ -34,28 +34,28 @@
     "check:ts": "tsc --noEmit",
     "storybook": "storybook dev -p 6006 --no-open --host 0.0.0.0",
     "test": "bun run test:vitest",
-    "test:watch": "bun run test:vitest:watch",
     "test:vitest": "vitest run",
     "test:vitest:watch": "vitest"
   },
   "dependencies": {
-    "@canonical/storybook-config": "^0.10.0-experimental.0",
-    "@canonical/styles": "^0.10.0-experimental.0",
-    "@canonical/utils": "^0.10.0-experimental.0",
+    "@canonical/storybook-config": "^0.10.0-experimental.3",
+    "@canonical/styles": "^0.10.0-experimental.3",
+    "@canonical/utils": "^0.10.0-experimental.3",
     "react": "^19.1.0",
     "react-dom": "^19.1.0"
   },
   "devDependencies": {
-    "@biomejs/biome": "^2.0.0",
-    "@canonical/biome-config": "^0.10.0-experimental.0",
-    "@canonical/typescript-config-react": "^0.10.0-experimental.0",
+    "@biomejs/biome": "2.2.2",
+    "@canonical/biome-config": "^0.10.0-experimental.3",
+    "@canonical/ds-types": "^0.10.0-experimental.3",
+    "@canonical/typescript-config-react": "^0.10.0-experimental.3",
     "@chromatic-com/storybook": "^4.0.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
     "@types/node": "^24.0.0",
     "@types/react": "^19.1.8",
     "@types/react-dom": "^19.1.6",
-    "@vitejs/plugin-react": "^4.5.2",
+    "@vitejs/plugin-react": "^5.0.0",
     "copyfiles": "^2.4.1",
     "globals": "^16.2.0",
     "jsdom": "^26.1.0",
@@ -65,5 +65,5 @@
     "vite-tsconfig-paths": "^5.1.4",
     "vitest": "^3.2.3"
   },
-  "gitHead": "d38f742073a1a0e582ce138bf0eb6dd63889721b"
+  "gitHead": "99c01818f83645f82a1a8971e5da18ce35eff68c"
 }