@ssa-ui-kit/core 3.5.0 → 3.6.0

package/dist/components/Counter/Counter.d.ts

@@ -0,0 +1,60 @@
+import { CounterProps } from './types';
+/**
+ * Counter - Compact numeric indicator for displaying counts or notification badges.
+ *
+ * ### Sizing
+ * Accepts `'small' | 'medium' | 'large'` via the `size` prop (default `'medium'`).
+ * When `count` is omitted the counter shrinks to a small dot (`dot` size) — useful
+ * as a presence indicator with no number shown.
+ *
+ * ### Color
+ * Background is driven by `theme.palette[variant].main` for the five semantic variants.
+ * Pass `color` to override: a `theme.colors` key resolves to the design token value,
+ * any other string is used as a raw CSS color.
+ *
+ * ### CSS override
+ * Pass `css` to apply one-off Emotion styles on top of all internal styles
+ * (size → variant → color → css). Useful for margins, positioning, or shape tweaks.
+ *
+ * ### Overflow
+ * Values above 99 are automatically clamped to `"99+"`.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage — primary variant, medium size
+ * <Counter count={5} />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Overflow label
+ * <Counter count={120} variant={CounterVariants.error} size="large" />
+ * // renders "99+"
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Raw hex color override
+ * <Counter count={3} color="#F7931A" />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // theme.colors key as color
+ * <Counter count={7} color="purple" />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Empty dot indicator (no count)
+ * <Counter variant={CounterVariants.error} />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // CSS override for layout / shape
+ * <Counter count={3} css={{ marginLeft: 8, borderRadius: 4 }} />
+ * ```
+ */
+export declare const Counter: ({ count, variant, size, color, className, css, ref, }: CounterProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export default Counter;

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

@@ -0,0 +1 @@
+export * from './Counter';

package/dist/components/Counter/styles.d.ts

@@ -0,0 +1,15 @@
+import { VariantStyle, CounterSizes } from './types';
+import { Theme, SerializedStyles } from '@emotion/react';
+import { ColorsKeys } from '../../types/emotion';
+export declare const variantStyles: VariantStyle;
+export declare const sizeStyles: CounterSizes;
+/**
+ * Builds a background override from a `color` string.
+ * If `color` matches a key in `theme.colors` the design token is used;
+ * otherwise the value is passed through as a raw CSS color string.
+ */
+export declare const makeColorOverride: (theme: Theme, color: ColorsKeys | string) => SerializedStyles;
+export declare const CounterBase: import("@emotion/styled").StyledComponent<{
+    theme?: Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/components/Counter/types.d.ts

@@ -0,0 +1,57 @@
+import React from 'react';
+import { MainSizes } from '../../types/global';
+import { ColorsKeys } from '../../types/emotion';
+import { Interpolation, SerializedStyles, Theme } from '@emotion/react';
+export declare enum CounterVariants {
+    primary = "primary",
+    secondary = "secondary",
+    error = "error",
+    warning = "warning",
+    success = "success"
+}
+export type VariantStyle = {
+    [k in CounterVariants]: (theme: Theme) => SerializedStyles;
+};
+/**
+ * Extends `MainSizes` with a `dot` slot used internally when `count` is
+ * undefined — renders a small dot with no label as a presence indicator.
+ */
+export type CounterSizes = MainSizes & {
+    dot: SerializedStyles;
+};
+export type CounterProps = {
+    /**
+     * The numeric value to display. Values above 99 are clamped to `"99+"`.
+     * When omitted, the counter renders as a dot with no label.
+     */
+    count?: number;
+    /**
+     * Visual style variant. Drives the background color from `theme.palette`.
+     * @default CounterVariants.primary
+     */
+    variant?: CounterVariants;
+    /**
+     * Size of the counter.
+     * Ignored when `count` is undefined — the component uses `dot` automatically.
+     * @default 'medium'
+     */
+    size?: keyof MainSizes;
+    /**
+     * Optional color override. Accepts a `theme.colors` key or any valid CSS color string.
+     * When provided, overrides the variant background.
+     */
+    color?: ColorsKeys | string;
+    /**
+     * Custom CSS class name.
+     */
+    className?: string;
+    /**
+     * Emotion CSS override applied after all internal styles.
+     * Use for one-off layout adjustments (e.g. margins, positioning).
+     */
+    css?: Interpolation<Theme>;
+    /**
+     * Ref forwarded to the root `<div>` element.
+     */
+    ref?: React.Ref<HTMLDivElement>;
+};

package/dist/components/index.d.ts

@@ -70,6 +70,8 @@ export * from './Typography';
 export type * from './Typography/types';
 export { default as Badge } from './Badge';
 export type * from './Badge/types';
+export * from './Counter';
+export type * from './Counter/types';
 export { default as Tag } from './Tag';
 export * from './Tag';
 export type * from './Tag/types';

package/dist/index.js

@@ -7980,6 +7980,7 @@ __webpack_require__.d(__webpack_exports__, {
   CollapsibleNavBarItemProvider: () => (/* reexport */ CollapsibleNavBarItemProvider),
   CollapsibleNavBarProvider: () => (/* reexport */ CollapsibleNavBarProvider),
   ColorPicker: () => (/* reexport */ ColorPicker),
+  Counter: () => (/* reexport */ Counter),
   DEFAULT_EUROPEAN_MASK_FORMAT: () => (/* reexport */ DEFAULT_EUROPEAN_MASK_FORMAT),
   DEFAULT_MASK_FORMAT: () => (/* reexport */ constants_DEFAULT_MASK_FORMAT),
   DEFAULT_MONTH_MASK_FORMAT: () => (/* reexport */ constants_DEFAULT_MONTH_MASK_FORMAT),
@@ -15239,7 +15240,7 @@ const TextareaBase = /*#__PURE__*/base_default()('textarea',  true ? {
   status = 'basic'
 }) => getStatusBoxShadow(theme, status, 'rest'), ";color:", ({
   theme
-}) => theme.colors.greyDarker, ";width:100%;max-width:100%;box-sizing:border-box;min-height:114px;padding:14px;font-weight:400;font-size:0.875rem;line-height:1rem;&::placeholder{color:", ({
+}) => theme.colors.greyDarker, ";width:100%;max-width:100%;max-height:100%;box-sizing:border-box;min-height:114px;padding:14px;font-weight:400;font-size:0.875rem;line-height:1rem;&::placeholder{color:", ({
   theme
 }) => theme.colors.greyDarker60, ";}&[readonly]{cursor:default;}&:disabled{color:", ({
   theme
@@ -28540,6 +28541,154 @@ const CardList = ({
 ;// ./src/components/CardList/index.ts
 
 
+;// ./src/components/Counter/types.ts
+let CounterVariants = /*#__PURE__*/function (CounterVariants) {
+  CounterVariants["primary"] = "primary";
+  CounterVariants["secondary"] = "secondary";
+  CounterVariants["error"] = "error";
+  CounterVariants["warning"] = "warning";
+  CounterVariants["success"] = "success";
+  return CounterVariants;
+}({});
+
+/**
+ * Extends `MainSizes` with a `dot` slot used internally when `count` is
+ * undefined — renders a small dot with no label as a presence indicator.
+ */
+;// ./src/components/Counter/styles.tsx
+
+function Counter_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+
+
+/** Resolves a variant key to its `theme.palette` background + white text. */
+const makeVariantStyle = (theme, key) => /*#__PURE__*/(0,react_namespaceObject.css)("color:", theme.colors.white, ";background:", theme.palette[key].main, ";" + ( true ? "" : 0),  true ? "" : 0);
+const styles_variantStyles = {
+  primary: theme => makeVariantStyle(theme, CounterVariants.primary),
+  secondary: theme => makeVariantStyle(theme, CounterVariants.secondary),
+  error: theme => makeVariantStyle(theme, CounterVariants.error),
+  warning: theme => makeVariantStyle(theme, CounterVariants.warning),
+  success: theme => makeVariantStyle(theme, CounterVariants.success)
+};
+const styles_sizeStyles = {
+  dot:  true ? {
+    name: "9e7m57",
+    styles: "width:8px;height:8px"
+  } : 0,
+  small:  true ? {
+    name: "14h28tx",
+    styles: "height:24px;font-size:12px;padding:4px 9px"
+  } : 0,
+  medium:  true ? {
+    name: "fy8gxb",
+    styles: "padding:4px 13px;height:32px;font-size:14px"
+  } : 0,
+  large:  true ? {
+    name: "irp62o",
+    styles: "font-size:16px;height:44px;padding:4px 19px"
+  } : 0
+};
+
+/**
+ * Builds a background override from a `color` string.
+ * If `color` matches a key in `theme.colors` the design token is used;
+ * otherwise the value is passed through as a raw CSS color string.
+ */
+const makeColorOverride = (theme, color) => /*#__PURE__*/(0,react_namespaceObject.css)("background:", color in theme.colors ? theme.colors[color] : color, ";" + ( true ? "" : 0),  true ? "" : 0);
+const CounterBase = /*#__PURE__*/base_default()("div",  true ? {
+  target: "eg7ht9z0"
+} : 0)( true ? {
+  name: "1tmyl78",
+  styles: "display:flex;align-items:center;justify-content:center;border:none;font:inherit;border-radius:50px;font-family:Manrope,sans-serif;width:min-content;font-style:normal;font-weight:700"
+} : 0);
+;// ./src/components/Counter/Counter.tsx
+
+
+
+
+const MAX_COUNT = 99;
+
+/**
+ * Counter - Compact numeric indicator for displaying counts or notification badges.
+ *
+ * ### Sizing
+ * Accepts `'small' | 'medium' | 'large'` via the `size` prop (default `'medium'`).
+ * When `count` is omitted the counter shrinks to a small dot (`dot` size) — useful
+ * as a presence indicator with no number shown.
+ *
+ * ### Color
+ * Background is driven by `theme.palette[variant].main` for the five semantic variants.
+ * Pass `color` to override: a `theme.colors` key resolves to the design token value,
+ * any other string is used as a raw CSS color.
+ *
+ * ### CSS override
+ * Pass `css` to apply one-off Emotion styles on top of all internal styles
+ * (size → variant → color → css). Useful for margins, positioning, or shape tweaks.
+ *
+ * ### Overflow
+ * Values above 99 are automatically clamped to `"99+"`.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage — primary variant, medium size
+ * <Counter count={5} />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Overflow label
+ * <Counter count={120} variant={CounterVariants.error} size="large" />
+ * // renders "99+"
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Raw hex color override
+ * <Counter count={3} color="#F7931A" />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // theme.colors key as color
+ * <Counter count={7} color="purple" />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Empty dot indicator (no count)
+ * <Counter variant={CounterVariants.error} />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // CSS override for layout / shape
+ * <Counter count={3} css={{ marginLeft: 8, borderRadius: 4 }} />
+ * ```
+ */
+const Counter = ({
+  count,
+  variant = CounterVariants.primary,
+  size = 'medium',
+  color,
+  className,
+  css,
+  ref
+}) => {
+  const theme = (0,react_namespaceObject.useTheme)();
+  const isEmpty = count === undefined;
+  const label = !isEmpty && count > MAX_COUNT ? `${MAX_COUNT}+` : count;
+  const appliedVariantStyle = styles_variantStyles[variant](theme);
+  const appliedSizeStyle = styles_sizeStyles[!isEmpty ? size : 'dot'];
+  const colorOverride = color ? makeColorOverride(theme, color) : undefined;
+  return (0,jsx_runtime_namespaceObject.jsx)(CounterBase, {
+    ref: ref,
+    css: [appliedSizeStyle, appliedVariantStyle, colorOverride, css,  true ? "" : 0,  true ? "" : 0],
+    className: className,
+    children: label
+  });
+};
+/* harmony default export */ const Counter_Counter = ((/* unused pure expression or super */ null && (Counter)));
+;// ./src/components/Counter/index.ts
+
 ;// ./src/components/Tag/styles.ts
 
 
@@ -51248,7 +51397,7 @@ const ValueWithCounter = /*#__PURE__*/base_default()("div",  true ? {
   name: "1j5vobt",
   styles: "display:flex;align-items:center;gap:4px"
 } : 0);
-const Counter = /*#__PURE__*/base_default()(TextBase.withComponent('span',  true ? {
+const styles_Counter = /*#__PURE__*/base_default()(TextBase.withComponent('span',  true ? {
   target: "ej2kihb16"
 } : 0),  true ? {
   target: "ej2kihb7"
@@ -51507,7 +51656,7 @@ const PersonInfoCounter = ({
       children: user.name
     }, user.id))
   });
-  const counterNode = (0,jsx_runtime_namespaceObject.jsx)(Counter, {
+  const counterNode = (0,jsx_runtime_namespaceObject.jsx)(styles_Counter, {
     css: css,
     "data-testid": "person-info-counter",
     children: counterValue
@@ -51956,6 +52105,7 @@ const UserProfile = ({
 
 
 
+
 
 
 // ============================================================================