diff --git a/.webstorm/bookmarks.json b/.webstorm/bookmarks.json index 95120f1fe..cbf90eacd 100644 --- a/.webstorm/bookmarks.json +++ b/.webstorm/bookmarks.json @@ -176,13 +176,13 @@ { "description": "angular-docs", "provider": "com.intellij.ide.bookmark.providers.LineBookmarkProvider", - "url": "file://$PROJECT_DIR$/packages/docs/angular-docs/src/routes/components+/badge+", + "url": "file://$PROJECT_DIR$/packages/docs/angular-docs/src/routes/components+/badges+", "line": "-1" }, { "description": "react-docs", "provider": "com.intellij.ide.bookmark.providers.LineBookmarkProvider", - "url": "file://$PROJECT_DIR$/packages/docs/react-docs/src/routes/components+/badge+", + "url": "file://$PROJECT_DIR$/packages/docs/react-docs/src/routes/components+/badges+", "line": "-1" }, { diff --git a/packages/common/qds-core/CHANGELOG.md b/packages/common/qds-core/CHANGELOG.md index 59d83a48b..925237f32 100644 --- a/packages/common/qds-core/CHANGELOG.md +++ b/packages/common/qds-core/CHANGELOG.md @@ -1,5 +1,15 @@ # @qualcomm-ui/qds-core +## 1.5.0 (2025/11/24) + +### Features + +- add badge component + +### Bug Fixes + +- [badge]: categories > colors + ## 1.4.2 (2025/11/21) ### Miscellaneous Chores diff --git a/packages/common/qds-core/package.json b/packages/common/qds-core/package.json index dc560043f..e8533f1b3 100644 --- a/packages/common/qds-core/package.json +++ b/packages/common/qds-core/package.json @@ -1,6 +1,6 @@ { "name": "@qualcomm-ui/qds-core", - "version": "1.4.2", + "version": "1.5.0", "description": "qds core components", "repository": "https://github.com/qualcomm/qualcomm-ui", "author": "Ryan Bower", diff --git a/packages/common/qds-core/src/badge/badge.classes.ts b/packages/common/qds-core/src/badge/badge.classes.ts new file mode 100644 index 000000000..5b94bf2f2 --- /dev/null +++ b/packages/common/qds-core/src/badge/badge.classes.ts @@ -0,0 +1,7 @@ +// Copyright (c) Qualcomm Technologies, Inc. and/or its subsidiaries. +// SPDX-License-Identifier: BSD-3-Clause-Clear + +export const badgeClasses = { + icon: "qui-badge__icon", + root: "qui-badge__root", +} as const diff --git a/packages/common/qds-core/src/badge/badge.types.ts b/packages/common/qds-core/src/badge/badge.types.ts new file mode 100644 index 000000000..6bc6d27da --- /dev/null +++ b/packages/common/qds-core/src/badge/badge.types.ts @@ -0,0 +1,37 @@ +// Copyright (c) Qualcomm Technologies, Inc. and/or its subsidiaries. +// SPDX-License-Identifier: BSD-3-Clause-Clear + +import type {badgeClasses} from "./badge.classes" + +export type BadgeClasses = typeof badgeClasses + +export type QdsBadgeBasicSize = "sm" | "md" | "lg" +export type QdsBadgeExtraSize = "xs" | QdsBadgeBasicSize | "xl" +export type QdsBadgeExtendedSize = "xxs" | QdsBadgeExtraSize + +export type QdsBadgeSemanticEmphasis = + | "neutral" + | "brand" + | "info" + | "success" + | "warning" + | "danger" + +export type QdsBadgeCategoryEmphasis = + | "blue" + | "cyan" + | "green" + | "kiwi" + | "magenta" + | "orange" + | "purple" + | "red" + | "teal" + | "yellow" + +export interface QdsBaseBadgeProps { + /** + * The badge disabled state. + */ + disabled?: boolean +} diff --git a/packages/common/qds-core/src/badge/icon-badge.api.ts b/packages/common/qds-core/src/badge/icon-badge.api.ts new file mode 100644 index 000000000..3077995f4 --- /dev/null +++ b/packages/common/qds-core/src/badge/icon-badge.api.ts @@ -0,0 +1,42 @@ +// Copyright (c) Qualcomm Technologies, Inc. and/or its subsidiaries. +// SPDX-License-Identifier: BSD-3-Clause-Clear + +import {booleanDataAttr} from "@qualcomm-ui/utils/attributes" +import type {PropNormalizer} from "@qualcomm-ui/utils/machine" + +import {badgeClasses} from "./badge.classes" +import type { + QdsIconBadgeApi, + QdsIconBadgeIconBindings, + QdsIconBadgeProps, + QdsIconBadgeRootBindings, +} from "./icon-badge.types" + +export function createQdsIconBadgeApi( + props: QdsIconBadgeProps, + normalize: PropNormalizer, +): QdsIconBadgeApi { + const size = props.size || "md" + return { + getIconBindings(): QdsIconBadgeIconBindings { + return normalize.element({ + className: badgeClasses.icon, + "data-part": "icon", + "data-scope": "icon-badge", + "data-size": size, + }) + }, + getRootBindings(): QdsIconBadgeRootBindings { + return normalize.element({ + className: badgeClasses.root, + "data-disabled": booleanDataAttr(props.disabled), + "data-emphasis": props.emphasis || "neutral", + "data-overflow": booleanDataAttr(false), + "data-part": "root", + "data-scope": "icon-badge", + "data-size": size, + "data-variant": props.variant || "default", + }) + }, + } +} diff --git a/packages/common/qds-core/src/badge/icon-badge.types.ts b/packages/common/qds-core/src/badge/icon-badge.types.ts new file mode 100644 index 000000000..dbd84b52f --- /dev/null +++ b/packages/common/qds-core/src/badge/icon-badge.types.ts @@ -0,0 +1,56 @@ +// Copyright (c) Qualcomm Technologies, Inc. and/or its subsidiaries. +// SPDX-License-Identifier: BSD-3-Clause-Clear + +import type {BooleanDataAttr} from "@qualcomm-ui/utils/attributes" + +import type { + BadgeClasses, + QdsBadgeCategoryEmphasis, + QdsBadgeExtendedSize, + QdsBadgeSemanticEmphasis, + QdsBaseBadgeProps, +} from "./badge.types" + +export type QdsIconBadgeVariant = "default" | "subtle" + +export interface QdsIconBadgeProps extends QdsBaseBadgeProps { + /** + * Governs the color of the icon badge. + * @default 'neutral' + */ + emphasis?: QdsBadgeSemanticEmphasis | QdsBadgeCategoryEmphasis + + /** + * Governs the size of the badge. + * @default 'md' + */ + size?: QdsBadgeExtendedSize + + /** + * Governs the style of the icon badge. + * @default 'default' + */ + variant?: QdsIconBadgeVariant +} + +export interface QdsIconBadgeRootBindings { + className: BadgeClasses["root"] + "data-disabled": BooleanDataAttr + "data-emphasis": QdsBadgeSemanticEmphasis | QdsBadgeCategoryEmphasis + "data-part": "root" + "data-scope": "icon-badge" + "data-size": QdsBadgeExtendedSize + "data-variant": QdsIconBadgeVariant +} + +export interface QdsIconBadgeIconBindings { + className: BadgeClasses["icon"] + "data-part": "icon" + "data-scope": "icon-badge" + "data-size": QdsBadgeExtendedSize +} + +export interface QdsIconBadgeApi { + getIconBindings(): QdsIconBadgeIconBindings + getRootBindings(): QdsIconBadgeRootBindings +} diff --git a/packages/common/qds-core/src/badge/index.ts b/packages/common/qds-core/src/badge/index.ts new file mode 100644 index 000000000..67aefe56e --- /dev/null +++ b/packages/common/qds-core/src/badge/index.ts @@ -0,0 +1,10 @@ +export type * from "./badge.types" +export * from "./text-badge.api" +export type * from "./text-badge.types" +export * from "./number-badge.api" +export type * from "./number-badge.types" +export * from "./icon-badge.api" +export type * from "./icon-badge.types" +export * from "./status-badge.api" +export type * from "./status-badge.types" +export * from "./badge.classes" diff --git a/packages/common/qds-core/src/badge/number-badge.api.ts b/packages/common/qds-core/src/badge/number-badge.api.ts new file mode 100644 index 000000000..f609cbaa0 --- /dev/null +++ b/packages/common/qds-core/src/badge/number-badge.api.ts @@ -0,0 +1,41 @@ +// Copyright (c) Qualcomm Technologies, Inc. and/or its subsidiaries. +// SPDX-License-Identifier: BSD-3-Clause-Clear + +import {booleanDataAttr} from "@qualcomm-ui/utils/attributes" +import type {PropNormalizer} from "@qualcomm-ui/utils/machine" + +import {badgeClasses} from "./badge.classes" +import type { + QdsNumberBadgeApi, + QdsNumberBadgeProps, + QdsNumberBadgeRootBindings, +} from "./number-badge.types" + +export function createQdsNumberBadgeApi( + props: QdsNumberBadgeProps, + normalize: PropNormalizer, +): QdsNumberBadgeApi { + let overflow = false + let displayValue: number | string | null = null + + if (props.value != null) { + const max = props.max ?? 99 + overflow = props.value > max + displayValue = overflow ? `${max}+` : props.value + } + + return { + displayValue, + getRootBindings(): QdsNumberBadgeRootBindings { + return normalize.element({ + className: badgeClasses.root, + "data-disabled": booleanDataAttr(props.disabled), + "data-emphasis": props.emphasis || "neutral", + "data-overflow": booleanDataAttr(overflow), + "data-part": "root", + "data-scope": "number-badge", + "data-size": props.size || "md", + }) + }, + } +} diff --git a/packages/common/qds-core/src/badge/number-badge.types.ts b/packages/common/qds-core/src/badge/number-badge.types.ts new file mode 100644 index 000000000..dc7b41584 --- /dev/null +++ b/packages/common/qds-core/src/badge/number-badge.types.ts @@ -0,0 +1,62 @@ +// Copyright (c) Qualcomm Technologies, Inc. and/or its subsidiaries. +// SPDX-License-Identifier: BSD-3-Clause-Clear + +import type {BooleanDataAttr} from "@qualcomm-ui/utils/attributes" + +import type { + BadgeClasses, + QdsBadgeBasicSize, + QdsBaseBadgeProps, +} from "./badge.types" + +export type QdsNumberBadgeEmphasis = + | "neutral" + | "neutral-outline" + | "brand" + | "brand-outline" + | "info" + | "success" + | "warning" + | "danger" + | "persistent-black" + | "persistent-white" + +export interface QdsNumberBadgeProps extends QdsBaseBadgeProps { + /** + * Governs the color and style of the number badge. + * @default 'neutral' + */ + emphasis?: QdsNumberBadgeEmphasis + + /** + * Maximum value to display. + * @default 99 + */ + max?: number + + /** + * Governs the size of the badge. + * @default 'md' + */ + size?: QdsBadgeBasicSize + + /** + * The numeric value to display. + */ + value?: number +} + +export interface QdsNumberBadgeRootBindings { + className: BadgeClasses["root"] + "data-disabled": BooleanDataAttr + "data-emphasis": QdsNumberBadgeEmphasis + "data-overflow": BooleanDataAttr + "data-part": "root" + "data-scope": "number-badge" + "data-size": QdsBadgeBasicSize +} + +export interface QdsNumberBadgeApi { + displayValue: number | string | null + getRootBindings(): QdsNumberBadgeRootBindings +} diff --git a/packages/common/qds-core/src/badge/qds-badge-colors.css b/packages/common/qds-core/src/badge/qds-badge-colors.css new file mode 100644 index 000000000..b3893000f --- /dev/null +++ b/packages/common/qds-core/src/badge/qds-badge-colors.css @@ -0,0 +1,120 @@ +/* default variant */ +.qui-badge__root { + &[data-emphasis] { + --badge-text: var(--color-utility-persistent-white); + } + &[data-emphasis="brand"] { + --badge-background: var(--color-background-brand-primary); + } + &[data-emphasis="info"] { + --badge-background: var(--color-background-support-info); + } + &[data-emphasis="success"] { + --badge-background: var(--color-background-support-success); + } + &[data-emphasis="danger"] { + --badge-background: var(--color-background-support-danger); + } + &[data-emphasis="blue"] { + --badge-background: var(--color-category-blue-strong); + } + &[data-emphasis="cyan"] { + --badge-background: var(--color-category-cyan-strong); + } + &[data-emphasis="green"] { + --badge-background: var(--color-category-green-strong); + } + &[data-emphasis="kiwi"] { + --badge-background: var(--color-category-kiwi-strong); + } + &[data-emphasis="magenta"] { + --badge-background: var(--color-category-magenta-strong); + } + &[data-emphasis="orange"] { + --badge-background: var(--color-category-orange-strong); + } + &[data-emphasis="purple"] { + --badge-background: var(--color-category-purple-strong); + } + &[data-emphasis="red"] { + --badge-background: var(--color-category-red-strong); + } + &[data-emphasis="teal"] { + --badge-background: var(--color-category-teal-strong); + } + &[data-emphasis="warning"] { + --badge-background: var(--color-background-support-warning); + --badge-text: var(--color-utility-persistent-black); + } + &[data-emphasis="neutral"] { + --badge-background: var(--color-background-neutral-10); + --badge-text: var(--color-text-neutral-inverse); + } + &[data-emphasis="yellow"] { + --badge-background: var(--color-category-yellow-strong); + --badge-text: var(--color-utility-persistent-black); + } +} + +/* Shared color definitions for subtle variant (used by text and icon badges) */ +.qui-badge__root[data-variant="subtle"] { + &[data-emphasis] { + --badge-text: var(--color-text-neutral-primary); + } + &[data-emphasis="brand"] { + --badge-background: var(--color-background-brand-primary-subtle); + } + &[data-emphasis="info"] { + --badge-background: var(--color-background-support-info-medium); + } + &[data-emphasis="success"] { + --badge-background: var(--color-background-support-success-medium); + } + &[data-emphasis="warning"] { + --badge-background: var(--color-background-support-warning-medium); + } + &[data-emphasis="danger"] { + --badge-background: var(--color-background-support-danger-medium); + } + &[data-emphasis="blue"] { + --badge-background: var(--color-category-blue-subtle); + } + &[data-emphasis="cyan"] { + --badge-background: var(--color-category-cyan-subtle); + } + &[data-emphasis="green"] { + --badge-background: var(--color-category-green-subtle); + } + &[data-emphasis="kiwi"] { + --badge-background: var(--color-category-kiwi-subtle); + } + &[data-emphasis="magenta"] { + --badge-background: var(--color-category-magenta-subtle); + } + &[data-emphasis="orange"] { + --badge-background: var(--color-category-orange-subtle); + } + &[data-emphasis="purple"] { + --badge-background: var(--color-category-purple-subtle); + } + &[data-emphasis="red"] { + --badge-background: var(--color-category-red-subtle); + } + &[data-emphasis="teal"] { + --badge-background: var(--color-category-teal-subtle); + } + &[data-emphasis="yellow"] { + --badge-background: var(--color-category-yellow-subtle); + } + &[data-emphasis="neutral"] { + --badge-background: var(--color-background-support-neutral); + --badge-text: var(--color-utility-persistent-white); + } +} + +.qui-badge__root[data-scope][data-emphasis][data-disabled] { + --badge-background: var(--color-utility-disabled-background); + --badge-border: var(--color-utility-disabled-border); + --badge-text: var(--color-utility-disabled-text); + --icon-color: var(--color-utility-disabled-icon); +} diff --git a/packages/common/qds-core/src/badge/qds-badge.css b/packages/common/qds-core/src/badge/qds-badge.css new file mode 100644 index 000000000..b3341b41b --- /dev/null +++ b/packages/common/qds-core/src/badge/qds-badge.css @@ -0,0 +1,8 @@ +.qui-badge__root { + align-items: center; + box-sizing: border-box; + cursor: default; + display: inline-flex; + justify-content: center; + line-height: 1; +} diff --git a/packages/common/qds-core/src/badge/qds-icon-badge.css b/packages/common/qds-core/src/badge/qds-icon-badge.css new file mode 100644 index 000000000..63814f546 --- /dev/null +++ b/packages/common/qds-core/src/badge/qds-icon-badge.css @@ -0,0 +1,61 @@ +.qui-badge__root { + &[data-size="xxs"] { + --icon-radius: var(--border-radius-xs); + --icon-size: var(--sizing-60); + } + &[data-size="xs"] { + --icon-radius: var(--border-radius-xs); + --icon-size: var(--sizing-70); + } + &[data-size="sm"] { + --icon-radius: var(--border-radius-sm); + --icon-size: var(--sizing-80); + } + &[data-size="md"] { + --icon-radius: var(--border-radius-sm); + --icon-size: var(--sizing-90); + } + &[data-size="lg"] { + --icon-radius: var(--border-radius-md); + --icon-size: var(--sizing-120); + } + &[data-size="xl"] { + --icon-radius: var(--border-radius-lg); + --icon-size: var(--sizing-140); + } +} + +.qui-badge__root[data-scope="icon-badge"] { + background: var(--badge-background); + border: solid var(--border-size, 0) var(--badge-border); + border-radius: var(--icon-radius); + color: var(--badge-text); + + &[data-size="xxs"], + &[data-size="xs"], + &[data-size="sm"] { + padding: var(--spacing-20); + } + + &[data-size="md"] { + padding: var(--spacing-40); + } + + &[data-size="lg"] { + padding: var(--spacing-50); + } + + &[data-size="xl"] { + padding: var(--spacing-60); + } +} + +.qui-badge__icon[data-scope="icon-badge"] { + color: var(--icon-color, inherit); + --icon-size: inherit; +} + +.qui-badge__root[data-scope="icon-badge"] > svg { + block-size: var(--icon-size); + inline-size: var(--icon-size); +} diff --git a/packages/common/qds-core/src/badge/qds-number-badge.css b/packages/common/qds-core/src/badge/qds-number-badge.css new file mode 100644 index 000000000..f8aefaf8b --- /dev/null +++ b/packages/common/qds-core/src/badge/qds-number-badge.css @@ -0,0 +1,57 @@ +.qui-badge__root { + &[data-size="sm"] { + font: var(--font-static-body-xs-default); + --count-size: var(--sizing-80); + } + &[data-size="md"] { + font: var(--font-static-body-sm-default); + --count-size: var(--sizing-90); + } + &[data-size="lg"] { + font: var(--font-static-body-md-default); + --count-size: var(--sizing-120); + } +} + +.qui-badge__root[data-scope="number-badge"] { + background: var(--badge-background); + block-size: var(--count-size); + border: solid var(--border-size, 0) var(--badge-border); + border-radius: var(--border-radius-rounded); + color: var(--badge-text); + min-inline-size: var(--count-size); + padding: 0; + + &[data-overflow] { + padding: 0 var(--spacing-50); + } + + &[data-emphasis="neutral"] { + --badge-background: var(--color-background-support-neutral); + --badge-text: var(--color-utility-persistent-white); + } + + &[data-emphasis="neutral-outline"] { + --badge-background: transparent; + --badge-border: var(--color-border-support-neutral); + --badge-text: var(--color-text-neutral-primary); + --border-size: 1px; + } + + &[data-emphasis="brand-outline"] { + --badge-background: transparent; + --badge-border: var(--color-border-support-neutral); + --badge-text: var(--color-text-brand-primary); + --border-size: 1px; + } + + &[data-emphasis="persistent-black"] { + --badge-background: var(--color-utility-persistent-black); + --badge-text: var(--color-utility-persistent-white); + } + + &[data-emphasis="persistent-white"] { + --badge-background: var(--color-utility-persistent-white); + --badge-text: var(--color-utility-persistent-black); + } +} diff --git a/packages/common/qds-core/src/badge/qds-status-badge.css b/packages/common/qds-core/src/badge/qds-status-badge.css new file mode 100644 index 000000000..f447272b3 --- /dev/null +++ b/packages/common/qds-core/src/badge/qds-status-badge.css @@ -0,0 +1,60 @@ +.qui-badge__root { + &[data-size="xxs"] { + --status-size: var(--sizing-40); + } + &[data-size="xs"] { + --status-size: var(--sizing-40); + } + &[data-size="sm"] { + --status-size: var(--sizing-50); + } + &[data-size="md"] { + --status-size: var(--sizing-60); + } + &[data-size="lg"] { + --status-size: var(--sizing-70); + } + &[data-size="xl"] { + --status-size: var(--sizing-80); + } +} + +.qui-badge__root[data-scope="status-badge"] { + background: var(--badge-background); + border: solid var(--border-size, 0) var(--badge-background); + border-radius: var(--border-radius-rounded); + color: var(--badge-text); + height: var(--status-size); + min-width: var(--status-size); + padding: 0; + width: var(--status-size); + + &[data-emphasis="neutral"] { + --badge-background: var(--color-background-support-neutral); + } + + &[data-emphasis="brand"] { + --badge-background: var(--color-background-brand-primary); + } + + &[data-emphasis="info"] { + --badge-background: var(--color-background-support-info); + } + + &[data-emphasis="success"] { + --badge-background: var(--color-background-support-success); + } + + &[data-emphasis="warning"] { + --badge-background: var(--color-background-support-warning); + } + + &[data-emphasis="danger"] { + --badge-background: var(--color-background-support-danger); + } + + &[data-variant="outlined"] { + background: transparent; + border-width: 1px; + } +} diff --git a/packages/common/qds-core/src/badge/qds-text-badge.css b/packages/common/qds-core/src/badge/qds-text-badge.css new file mode 100644 index 000000000..2027d7df9 --- /dev/null +++ b/packages/common/qds-core/src/badge/qds-text-badge.css @@ -0,0 +1,23 @@ +.qui-badge__root[data-scope="text-badge"] { + background: var(--badge-background); + border: solid var(--border-size, 0) var(--badge-border); + color: var(--badge-text); + + &[data-size="sm"] { + border-radius: var(--border-radius-xs); + font: var(--font-static-body-xs-default); + padding: var(--spacing-10) var(--spacing-40); + } + + &[data-size="md"] { + border-radius: var(--border-radius-sm); + font: var(--font-static-body-sm-default); + padding: var(--spacing-20) var(--spacing-50); + } + + &[data-size="lg"] { + border-radius: var(--border-radius-sm); + font: var(--font-static-body-md-default); + padding: var(--spacing-40) var(--spacing-70); + } +} diff --git a/packages/common/qds-core/src/badge/status-badge.api.ts b/packages/common/qds-core/src/badge/status-badge.api.ts new file mode 100644 index 000000000..90272ba6f --- /dev/null +++ b/packages/common/qds-core/src/badge/status-badge.api.ts @@ -0,0 +1,32 @@ +// Copyright (c) Qualcomm Technologies, Inc. and/or its subsidiaries. +// SPDX-License-Identifier: BSD-3-Clause-Clear + +import {booleanDataAttr} from "@qualcomm-ui/utils/attributes" +import type {PropNormalizer} from "@qualcomm-ui/utils/machine" + +import {badgeClasses} from "./badge.classes" +import type { + QdsStatusBadgeApi, + QdsStatusBadgeProps, + QdsStatusBadgeRootBindings, +} from "./status-badge.types" + +export function createQdsStatusBadgeApi( + props: QdsStatusBadgeProps, + normalize: PropNormalizer, +): QdsStatusBadgeApi { + return { + getRootBindings(): QdsStatusBadgeRootBindings { + return normalize.element({ + className: badgeClasses.root, + "data-disabled": booleanDataAttr(props.disabled), + "data-emphasis": props.emphasis || "neutral", + "data-overflow": booleanDataAttr(false), + "data-part": "root", + "data-scope": "status-badge", + "data-size": props.size || "md", + "data-variant": props.variant || "filled", + }) + }, + } +} diff --git a/packages/common/qds-core/src/badge/status-badge.types.ts b/packages/common/qds-core/src/badge/status-badge.types.ts new file mode 100644 index 000000000..7430cceb6 --- /dev/null +++ b/packages/common/qds-core/src/badge/status-badge.types.ts @@ -0,0 +1,47 @@ +// Copyright (c) Qualcomm Technologies, Inc. and/or its subsidiaries. +// SPDX-License-Identifier: BSD-3-Clause-Clear + +import type {BooleanDataAttr} from "@qualcomm-ui/utils/attributes" + +import type { + BadgeClasses, + QdsBadgeExtraSize, + QdsBadgeSemanticEmphasis, + QdsBaseBadgeProps, +} from "./badge.types" + +export type QdsStatusBadgeVariant = "filled" | "outlined" + +export interface QdsStatusBadgeProps extends QdsBaseBadgeProps { + /** + * Governs the color of the status badge. + * @default 'neutral' + */ + emphasis?: QdsBadgeSemanticEmphasis + + /** + * Governs the size of the badge. + * @default 'md' + */ + size?: QdsBadgeExtraSize + + /** + * Governs the style of the status badge. + * @default 'filled' + */ + variant?: QdsStatusBadgeVariant +} + +export interface QdsStatusBadgeRootBindings { + className: BadgeClasses["root"] + "data-disabled": BooleanDataAttr + "data-emphasis": QdsBadgeSemanticEmphasis + "data-part": "root" + "data-scope": "status-badge" + "data-size": QdsBadgeExtraSize + "data-variant": QdsStatusBadgeVariant +} + +export interface QdsStatusBadgeApi { + getRootBindings(): QdsStatusBadgeRootBindings +} diff --git a/packages/common/qds-core/src/badge/text-badge.api.ts b/packages/common/qds-core/src/badge/text-badge.api.ts new file mode 100644 index 000000000..1de56f597 --- /dev/null +++ b/packages/common/qds-core/src/badge/text-badge.api.ts @@ -0,0 +1,31 @@ +// Copyright (c) Qualcomm Technologies, Inc. and/or its subsidiaries. +// SPDX-License-Identifier: BSD-3-Clause-Clear + +import {booleanDataAttr} from "@qualcomm-ui/utils/attributes" +import type {PropNormalizer} from "@qualcomm-ui/utils/machine" + +import {badgeClasses} from "./badge.classes" +import type { + QdsTextBadgeApi, + QdsTextBadgeProps, + QdsTextBadgeRootBindings, +} from "./text-badge.types" + +export function createQdsTextBadgeApi( + props: QdsTextBadgeProps, + normalize: PropNormalizer, +): QdsTextBadgeApi { + return { + getRootBindings(): QdsTextBadgeRootBindings { + return normalize.element({ + className: badgeClasses.root, + "data-disabled": booleanDataAttr(props.disabled), + "data-emphasis": props.emphasis || "neutral", + "data-part": "root", + "data-scope": "text-badge", + "data-size": props.size || "md", + "data-variant": props.variant || "default", + }) + }, + } +} diff --git a/packages/common/qds-core/src/badge/text-badge.types.ts b/packages/common/qds-core/src/badge/text-badge.types.ts new file mode 100644 index 000000000..016e66d60 --- /dev/null +++ b/packages/common/qds-core/src/badge/text-badge.types.ts @@ -0,0 +1,48 @@ +// Copyright (c) Qualcomm Technologies, Inc. and/or its subsidiaries. +// SPDX-License-Identifier: BSD-3-Clause-Clear + +import type {BooleanDataAttr} from "@qualcomm-ui/utils/attributes" + +import type { + BadgeClasses, + QdsBadgeBasicSize, + QdsBadgeCategoryEmphasis, + QdsBadgeSemanticEmphasis, + QdsBaseBadgeProps, +} from "./badge.types" + +export type QdsTextBadgeVariant = "default" | "subtle" + +export interface QdsTextBadgeProps extends QdsBaseBadgeProps { + /** + * Governs the color of the text badge. + * @default 'neutral' + */ + emphasis?: QdsBadgeSemanticEmphasis | QdsBadgeCategoryEmphasis + + /** + * Governs the size of the badge. + * @default 'md' + */ + size?: QdsBadgeBasicSize + + /** + * Governs the style of the text badge. + * @default 'default' + */ + variant?: QdsTextBadgeVariant +} + +export interface QdsTextBadgeRootBindings { + className: BadgeClasses["root"] + "data-disabled": BooleanDataAttr + "data-emphasis": QdsBadgeSemanticEmphasis | QdsBadgeCategoryEmphasis + "data-part": "root" + "data-scope": "text-badge" + "data-size": QdsBadgeBasicSize + "data-variant": QdsTextBadgeVariant +} + +export interface QdsTextBadgeApi { + getRootBindings(): QdsTextBadgeRootBindings +} diff --git a/packages/docs/angular-docs/qui-docs.config.ts b/packages/docs/angular-docs/qui-docs.config.ts index 8488d1e00..365e80443 100644 --- a/packages/docs/angular-docs/qui-docs.config.ts +++ b/packages/docs/angular-docs/qui-docs.config.ts @@ -44,6 +44,13 @@ export default { separator: true, }, { + children: [ + { + group: "Data Display", + id: "badges", + ignoreRouteMetaOrder: true, + }, + ], expanded: true, groupOrder: [ "Buttons", diff --git a/packages/docs/angular-docs/src/routes/components+/badges+/icon-badge+/_icon-badge.mdx b/packages/docs/angular-docs/src/routes/components+/badges+/icon-badge+/_icon-badge.mdx new file mode 100644 index 000000000..07ea29eeb --- /dev/null +++ b/packages/docs/angular-docs/src/routes/components+/badges+/icon-badge+/_icon-badge.mdx @@ -0,0 +1,57 @@ +--- +title: Icon Badge +--- + +import {QdsDemo} from "~components/demo" +import { + TypeDocProps, + TypeDocAngularAttributes, +} from "@qualcomm-ui/react-mdx/typedoc" + +# {frontmatter.title} + +Display icons within compact, color-coded containers. Use icon badges to represent actions, status, or categories with visual symbols instead of text. + +```typescript +import {IconBadgeDirective} from "@qualcomm-ui/angular/badge" +``` + +## Examples + +### Icon + +Use the [icon](./#icon-1) input to provide a Lucide icon name, or use content projection for custom SVG content. + + + +### Emphasis + +Use the [emphasis](./#emphasis-1) input to convey semantic meaning or add color. + + + +### Variant + +The [variant](./#variant-1) input controls the aspect of the badge. Two variants are available: `default` (bolder appearance) and `subtle` (muted appearance). + + + +### Size + +Control dimensions using the [size](./#size-1) input. Six sizes are available: `xxs`, `xs`, `sm`, `md` (default), `lg`, and `xl`. + + + +### Disabled + +Set the [disabled](./#disabled-1) input to visually indicate that the badge is inactive. + + + +## API + +### q-icon-badge + + + + diff --git a/packages/docs/angular-docs/src/routes/components+/badges+/icon-badge+/demos/icon-badge-disabled-demo.ts b/packages/docs/angular-docs/src/routes/components+/badges+/icon-badge+/demos/icon-badge-disabled-demo.ts new file mode 100644 index 000000000..56fce5c85 --- /dev/null +++ b/packages/docs/angular-docs/src/routes/components+/badges+/icon-badge+/demos/icon-badge-disabled-demo.ts @@ -0,0 +1,20 @@ +import {Component} from "@angular/core" +import {Star} from "lucide-angular" + +import {IconBadgeDirective} from "@qualcomm-ui/angular/badge" +import {provideIcons} from "@qualcomm-ui/angular-core/lucide" + +@Component({ + imports: [IconBadgeDirective], + providers: [provideIcons({Star})], + selector: "icon-badge-disabled-demo", + template: ` +
+ + + + +
+ `, +}) +export class IconBadgeDisabledDemo {} diff --git a/packages/docs/angular-docs/src/routes/components+/badges+/icon-badge+/demos/icon-badge-emphasis-demo.ts b/packages/docs/angular-docs/src/routes/components+/badges+/icon-badge+/demos/icon-badge-emphasis-demo.ts new file mode 100644 index 000000000..cac5f7a69 --- /dev/null +++ b/packages/docs/angular-docs/src/routes/components+/badges+/icon-badge+/demos/icon-badge-emphasis-demo.ts @@ -0,0 +1,36 @@ +import {Component} from "@angular/core" +import {Star} from "lucide-angular" + +import {IconBadgeDirective} from "@qualcomm-ui/angular/badge" +import {provideIcons} from "@qualcomm-ui/angular-core/lucide" + +@Component({ + imports: [IconBadgeDirective], + providers: [provideIcons({Star})], + selector: "icon-badge-emphasis-demo", + template: ` +
+
+ + + + + + +
+
+ + + + + + + + + + +
+
+ `, +}) +export class IconBadgeEmphasisDemo {} diff --git a/packages/docs/angular-docs/src/routes/components+/badges+/icon-badge+/demos/icon-badge-icon-demo.ts b/packages/docs/angular-docs/src/routes/components+/badges+/icon-badge+/demos/icon-badge-icon-demo.ts new file mode 100644 index 000000000..935257aa0 --- /dev/null +++ b/packages/docs/angular-docs/src/routes/components+/badges+/icon-badge+/demos/icon-badge-icon-demo.ts @@ -0,0 +1,24 @@ +import {Component} from "@angular/core" +import {Star} from "lucide-angular" + +import {IconBadgeDirective} from "@qualcomm-ui/angular/badge" +import {provideIcons} from "@qualcomm-ui/angular-core/lucide" + +@Component({ + imports: [IconBadgeDirective], + providers: [provideIcons({Star})], + selector: "icon-badge-icon-demo", + template: ` +
+ + + + + + + + +
+ `, +}) +export class IconBadgeIconDemo {} diff --git a/packages/docs/angular-docs/src/routes/components+/badges+/icon-badge+/demos/icon-badge-size-demo.ts b/packages/docs/angular-docs/src/routes/components+/badges+/icon-badge+/demos/icon-badge-size-demo.ts new file mode 100644 index 000000000..716019778 --- /dev/null +++ b/packages/docs/angular-docs/src/routes/components+/badges+/icon-badge+/demos/icon-badge-size-demo.ts @@ -0,0 +1,24 @@ +import {Component} from "@angular/core" +import {Star} from "lucide-angular" + +import {IconBadgeDirective} from "@qualcomm-ui/angular/badge" +import {provideIcons} from "@qualcomm-ui/angular-core/lucide" + +@Component({ + imports: [IconBadgeDirective], + providers: [provideIcons({Star})], + selector: "icon-badge-size-demo", + template: ` +
+ + + + + + + + +
+ `, +}) +export class IconBadgeSizeDemo {} diff --git a/packages/docs/angular-docs/src/routes/components+/badges+/icon-badge+/demos/icon-badge-variant-demo.ts b/packages/docs/angular-docs/src/routes/components+/badges+/icon-badge+/demos/icon-badge-variant-demo.ts new file mode 100644 index 000000000..651c48073 --- /dev/null +++ b/packages/docs/angular-docs/src/routes/components+/badges+/icon-badge+/demos/icon-badge-variant-demo.ts @@ -0,0 +1,76 @@ +import {Component} from "@angular/core" +import {Star} from "lucide-angular" + +import {IconBadgeDirective} from "@qualcomm-ui/angular/badge" +import {provideIcons} from "@qualcomm-ui/angular-core/lucide" + +@Component({ + imports: [IconBadgeDirective], + providers: [provideIcons({Star})], + selector: "icon-badge-variant-demo", + template: ` +
+
+ + + + + + +
+
+ + + + + + + + + + +
+
+ `, +}) +export class IconBadgeVariantDemo {} diff --git a/packages/docs/angular-docs/src/routes/components+/badges+/number-badge+/_number-badge.mdx b/packages/docs/angular-docs/src/routes/components+/badges+/number-badge+/_number-badge.mdx new file mode 100644 index 000000000..a0923fe3c --- /dev/null +++ b/packages/docs/angular-docs/src/routes/components+/badges+/number-badge+/_number-badge.mdx @@ -0,0 +1,57 @@ +--- +title: Number Badge +--- + +import {QdsDemo} from "~components/demo" +import { + TypeDocProps, + TypeDocAngularAttributes, +} from "@qualcomm-ui/react-mdx/typedoc" + +# {frontmatter.title} + +Display numeric values in compact, color-coded containers. Use number badges to show counts, notifications, or other numerical indicators. + +```typescript +import {NumberBadgeDirective} from "@qualcomm-ui/angular/badge" +``` + +## Examples + +### Value + +Use the [value](./#value-1) input for auto formatting, or use content projection for manual content. + + + +### Max (Auto Formatting) + +When using the [value](./#value-1) input with [max](./#max), overflow values are automatically formatted. If value exceeds max, the badge displays "max+" and applies special styling. The default max is 99. + + + +### Variant + +Multiple color and style options are available via the [variant](./#variant-1) input: `neutral` (default), `neutral-outline`, `brand`, `brand-outline`, `info`, `success`, `warning`, `danger`, `persistent-black` and `persistent-white`. + + + +### Size + +Control dimensions using the [size](./#size-1) input. Three sizes are available: `sm`, `md` (default), and `lg`. + + + +### Disabled + +Set the [disabled](./#disabled-1) input to visually indicate that the badge is inactive. + + + +## API + +### q-number-badge + + + + diff --git a/packages/docs/angular-docs/src/routes/components+/badges+/number-badge+/demos/number-badge-disabled-demo.ts b/packages/docs/angular-docs/src/routes/components+/badges+/number-badge+/demos/number-badge-disabled-demo.ts new file mode 100644 index 000000000..e72e3098e --- /dev/null +++ b/packages/docs/angular-docs/src/routes/components+/badges+/number-badge+/demos/number-badge-disabled-demo.ts @@ -0,0 +1,17 @@ +import {Component} from "@angular/core" + +import {NumberBadgeDirective} from "@qualcomm-ui/angular/badge" + +@Component({ + imports: [NumberBadgeDirective], + selector: "number-badge-disabled-demo", + template: ` +
+ + + + +
+ `, +}) +export class NumberBadgeDisabledDemo {} diff --git a/packages/docs/angular-docs/src/routes/components+/badges+/number-badge+/demos/number-badge-max-demo.ts b/packages/docs/angular-docs/src/routes/components+/badges+/number-badge+/demos/number-badge-max-demo.ts new file mode 100644 index 000000000..dc9588d19 --- /dev/null +++ b/packages/docs/angular-docs/src/routes/components+/badges+/number-badge+/demos/number-badge-max-demo.ts @@ -0,0 +1,19 @@ +import {Component} from "@angular/core" + +import {NumberBadgeDirective} from "@qualcomm-ui/angular/badge" + +@Component({ + imports: [NumberBadgeDirective], + selector: "number-badge-max-demo", + template: ` +
+ + + + + + +
+ `, +}) +export class NumberBadgeMaxDemo {} diff --git a/packages/docs/angular-docs/src/routes/components+/badges+/number-badge+/demos/number-badge-size-demo.ts b/packages/docs/angular-docs/src/routes/components+/badges+/number-badge+/demos/number-badge-size-demo.ts new file mode 100644 index 000000000..680d410b7 --- /dev/null +++ b/packages/docs/angular-docs/src/routes/components+/badges+/number-badge+/demos/number-badge-size-demo.ts @@ -0,0 +1,18 @@ +import {Component} from "@angular/core" + +import {NumberBadgeDirective} from "@qualcomm-ui/angular/badge" + +@Component({ + imports: [NumberBadgeDirective], + selector: "number-badge-size-demo", + template: ` +
+ + + + + +
+ `, +}) +export class NumberBadgeSizeDemo {} diff --git a/packages/docs/angular-docs/src/routes/components+/badges+/number-badge+/demos/number-badge-value-demo.ts b/packages/docs/angular-docs/src/routes/components+/badges+/number-badge+/demos/number-badge-value-demo.ts new file mode 100644 index 000000000..690f70ab2 --- /dev/null +++ b/packages/docs/angular-docs/src/routes/components+/badges+/number-badge+/demos/number-badge-value-demo.ts @@ -0,0 +1,18 @@ +import {Component} from "@angular/core" + +import {NumberBadgeDirective} from "@qualcomm-ui/angular/badge" + +@Component({ + imports: [NumberBadgeDirective], + selector: "number-badge-value-demo", + template: ` +
+ + 42 + + + +
+ `, +}) +export class NumberBadgeValueDemo {} diff --git a/packages/docs/angular-docs/src/routes/components+/badges+/number-badge+/demos/number-badge-variant-demo.ts b/packages/docs/angular-docs/src/routes/components+/badges+/number-badge+/demos/number-badge-variant-demo.ts new file mode 100644 index 000000000..7bda87b61 --- /dev/null +++ b/packages/docs/angular-docs/src/routes/components+/badges+/number-badge+/demos/number-badge-variant-demo.ts @@ -0,0 +1,25 @@ +import {Component} from "@angular/core" + +import {NumberBadgeDirective} from "@qualcomm-ui/angular/badge" + +@Component({ + imports: [NumberBadgeDirective], + selector: "number-badge-variant-demo", + template: ` +
+ + + + + + + + + + + + +
+ `, +}) +export class NumberBadgeVariantDemo {} diff --git a/packages/docs/angular-docs/src/routes/components+/badges+/status-badge+/_status-badge.mdx b/packages/docs/angular-docs/src/routes/components+/badges+/status-badge+/_status-badge.mdx new file mode 100644 index 000000000..3daa8deb8 --- /dev/null +++ b/packages/docs/angular-docs/src/routes/components+/badges+/status-badge+/_status-badge.mdx @@ -0,0 +1,51 @@ +--- +title: Status Badge +--- + +import {QdsDemo} from "~components/demo" +import { + TypeDocProps, + TypeDocAngularAttributes, +} from "@qualcomm-ui/react-mdx/typedoc" + +# {frontmatter.title} + +Display colored dot indicators to communicate status or availability. Use status badges to show online/offline states, connection status, or other binary conditions. + +```typescript +import {StatusBadgeDirective} from "@qualcomm-ui/angular/badge" +``` + +## Examples + +### Emphasis + +Use the [emphasis](./#emphasis-1) input to convey semantic meaning with colors. + + + +### Variant + +The [variant](./#variant-1) input controls the aspect of the badge. Two variants are available: `filled` (default) and `outlined`. + + + +### Size + +Control dimensions using the [size](./#size-1) input. Five sizes are available: `xs`, `sm`, `md` (default), `lg`, and `xl`. + + + +### Disabled + +Set the [disabled](./#disabled-1) input to visually indicate that the badge is inactive. + + + +## API + +### q-status-badge + + + + diff --git a/packages/docs/angular-docs/src/routes/components+/badges+/status-badge+/demos/status-badge-disabled-demo.ts b/packages/docs/angular-docs/src/routes/components+/badges+/status-badge+/demos/status-badge-disabled-demo.ts new file mode 100644 index 000000000..a9635c7d2 --- /dev/null +++ b/packages/docs/angular-docs/src/routes/components+/badges+/status-badge+/demos/status-badge-disabled-demo.ts @@ -0,0 +1,17 @@ +import {Component} from "@angular/core" + +import {StatusBadgeDirective} from "@qualcomm-ui/angular/badge" + +@Component({ + imports: [StatusBadgeDirective], + selector: "status-badge-disabled-demo", + template: ` +
+ + + + +
+ `, +}) +export class StatusBadgeDisabledDemo {} diff --git a/packages/docs/angular-docs/src/routes/components+/badges+/status-badge+/demos/status-badge-emphasis-demo.ts b/packages/docs/angular-docs/src/routes/components+/badges+/status-badge+/demos/status-badge-emphasis-demo.ts new file mode 100644 index 000000000..c5d6e04a6 --- /dev/null +++ b/packages/docs/angular-docs/src/routes/components+/badges+/status-badge+/demos/status-badge-emphasis-demo.ts @@ -0,0 +1,21 @@ +import {Component} from "@angular/core" + +import {StatusBadgeDirective} from "@qualcomm-ui/angular/badge" + +@Component({ + imports: [StatusBadgeDirective], + selector: "status-badge-emphasis-demo", + template: ` +
+ + + + + + + + +
+ `, +}) +export class StatusBadgeEmphasisDemo {} diff --git a/packages/docs/angular-docs/src/routes/components+/badges+/status-badge+/demos/status-badge-size-demo.ts b/packages/docs/angular-docs/src/routes/components+/badges+/status-badge+/demos/status-badge-size-demo.ts new file mode 100644 index 000000000..81ff7a21e --- /dev/null +++ b/packages/docs/angular-docs/src/routes/components+/badges+/status-badge+/demos/status-badge-size-demo.ts @@ -0,0 +1,20 @@ +import {Component} from "@angular/core" + +import {StatusBadgeDirective} from "@qualcomm-ui/angular/badge" + +@Component({ + imports: [StatusBadgeDirective], + selector: "status-badge-size-demo", + template: ` +
+ + + + + + + +
+ `, +}) +export class StatusBadgeSizeDemo {} diff --git a/packages/docs/angular-docs/src/routes/components+/badges+/status-badge+/demos/status-badge-variant-demo.ts b/packages/docs/angular-docs/src/routes/components+/badges+/status-badge+/demos/status-badge-variant-demo.ts new file mode 100644 index 000000000..72bc771af --- /dev/null +++ b/packages/docs/angular-docs/src/routes/components+/badges+/status-badge+/demos/status-badge-variant-demo.ts @@ -0,0 +1,21 @@ +import {Component} from "@angular/core" + +import {StatusBadgeDirective} from "@qualcomm-ui/angular/badge" + +@Component({ + imports: [StatusBadgeDirective], + selector: "status-badge-variant-demo", + template: ` +
+ + + + + + + + +
+ `, +}) +export class StatusBadgeVariantDemo {} diff --git a/packages/docs/angular-docs/src/routes/components+/badges+/text-badge+/_text-badge.mdx b/packages/docs/angular-docs/src/routes/components+/badges+/text-badge+/_text-badge.mdx new file mode 100644 index 000000000..9a7472542 --- /dev/null +++ b/packages/docs/angular-docs/src/routes/components+/badges+/text-badge+/_text-badge.mdx @@ -0,0 +1,51 @@ +--- +title: Text Badge +--- + +import {QdsDemo} from "~components/demo" +import { + TypeDocProps, + TypeDocAngularAttributes, +} from "@qualcomm-ui/react-mdx/typedoc" + +# {frontmatter.title} + +Display text labels in compact, color-coded containers. Use text badges to categorize content, show status, or highlight information with concise labels. + +```typescript +import {BadgeDirective} from "@qualcomm-ui/angular/badge" +``` + +## Examples + +### Emphasis + +Use the [emphasis](./#emphasis-1) input to convey semantic meaning or categorize content. + + + +### Variant + +The [variant](./#variant-1) input controls the aspect of the badge. Two variants are available: `default` (bolder appearance) and `subtle` (muted appearance). + + + +### Size + +Control dimensions using the [size](./#size-1) input. Three sizes are available: `sm`, `md` (default), and `lg`. + + + +### Disabled + +Set the [disabled](./#disabled-1) input to visually indicate that the badge is inactive. + + + +## API + +### q-badge + + + + diff --git a/packages/docs/angular-docs/src/routes/components+/badges+/text-badge+/demos/text-badge-disabled-demo.ts b/packages/docs/angular-docs/src/routes/components+/badges+/text-badge+/demos/text-badge-disabled-demo.ts new file mode 100644 index 000000000..1f31fcaae --- /dev/null +++ b/packages/docs/angular-docs/src/routes/components+/badges+/text-badge+/demos/text-badge-disabled-demo.ts @@ -0,0 +1,17 @@ +import {Component} from "@angular/core" + +import {BadgeDirective} from "@qualcomm-ui/angular/badge" + +@Component({ + imports: [BadgeDirective], + selector: "text-badge-disabled-demo", + template: ` +
+ + Enabled + Disabled + +
+ `, +}) +export class TextBadgeDisabledDemo {} diff --git a/packages/docs/angular-docs/src/routes/components+/badges+/text-badge+/demos/text-badge-emphasis-demo.ts b/packages/docs/angular-docs/src/routes/components+/badges+/text-badge+/demos/text-badge-emphasis-demo.ts new file mode 100644 index 000000000..8b5be0654 --- /dev/null +++ b/packages/docs/angular-docs/src/routes/components+/badges+/text-badge+/demos/text-badge-emphasis-demo.ts @@ -0,0 +1,33 @@ +import {Component} from "@angular/core" + +import {BadgeDirective} from "@qualcomm-ui/angular/badge" + +@Component({ + imports: [BadgeDirective], + selector: "text-badge-emphasis-demo", + template: ` +
+
+ neutral + brand + info + success + warning + danger +
+
+ blue + cyan + green + kiwi + magenta + orange + purple + red + teal + yellow +
+
+ `, +}) +export class TextBadgeEmphasisDemo {} diff --git a/packages/docs/angular-docs/src/routes/components+/badges+/text-badge+/demos/text-badge-size-demo.ts b/packages/docs/angular-docs/src/routes/components+/badges+/text-badge+/demos/text-badge-size-demo.ts new file mode 100644 index 000000000..117d79aa3 --- /dev/null +++ b/packages/docs/angular-docs/src/routes/components+/badges+/text-badge+/demos/text-badge-size-demo.ts @@ -0,0 +1,18 @@ +import {Component} from "@angular/core" + +import {BadgeDirective} from "@qualcomm-ui/angular/badge" + +@Component({ + imports: [BadgeDirective], + selector: "text-badge-size-demo", + template: ` +
+ + Small + Medium + Large + +
+ `, +}) +export class TextBadgeSizeDemo {} diff --git a/packages/docs/angular-docs/src/routes/components+/badges+/text-badge+/demos/text-badge-variant-demo.ts b/packages/docs/angular-docs/src/routes/components+/badges+/text-badge+/demos/text-badge-variant-demo.ts new file mode 100644 index 000000000..7045892a4 --- /dev/null +++ b/packages/docs/angular-docs/src/routes/components+/badges+/text-badge+/demos/text-badge-variant-demo.ts @@ -0,0 +1,33 @@ +import {Component} from "@angular/core" + +import {BadgeDirective} from "@qualcomm-ui/angular/badge" + +@Component({ + imports: [BadgeDirective], + selector: "text-badge-variant-demo", + template: ` +
+
+ neutral + brand + info + success + warning + danger +
+
+ blue + cyan + green + kiwi + magenta + orange + purple + red + teal + yellow +
+
+ `, +}) +export class TextBadgeVariantDemo {} diff --git a/packages/docs/react-docs/package.json b/packages/docs/react-docs/package.json index 5121d3e05..0745a5508 100644 --- a/packages/docs/react-docs/package.json +++ b/packages/docs/react-docs/package.json @@ -11,7 +11,8 @@ "build:site": "react-router build --mode production", "build:typedoc": "qui-typedoc build", "watch:typedoc": "qui-typedoc watch", - "dev": "run-p dev:app typecheck", + "clean": "shx rm -rf .react-router", + "dev": "pnpm clean && run-p dev:app typecheck", "dev:app": "vite -c vite.config.ts", "lint": "eslint --quiet", "start": "cross-env NODE_ENV=production react-router-serve ./build/server/index.js", diff --git a/packages/docs/react-docs/qui-docs.config.ts b/packages/docs/react-docs/qui-docs.config.ts index b165e570e..d0e3d99cc 100644 --- a/packages/docs/react-docs/qui-docs.config.ts +++ b/packages/docs/react-docs/qui-docs.config.ts @@ -57,6 +57,11 @@ export default { { id: "all-components", }, + { + group: "Data Display", + id: "badges", + ignoreRouteMetaOrder: true, + }, ], expanded: true, groupOrder: [ diff --git a/packages/docs/react-docs/src/routes/components+/badges+/icon-badge+/_icon-badge.mdx b/packages/docs/react-docs/src/routes/components+/badges+/icon-badge+/_icon-badge.mdx new file mode 100644 index 000000000..7fc731fd7 --- /dev/null +++ b/packages/docs/react-docs/src/routes/components+/badges+/icon-badge+/_icon-badge.mdx @@ -0,0 +1,54 @@ +--- +title: Icon Badge +--- + +import {TypeDocAttributes, TypeDocProps} from "@qualcomm-ui/react-mdx/typedoc" +import {Demo} from "~components/demo" +import * as demos from "./demos" + +# {frontmatter.title} + +Display icons within compact, color-coded containers. Use icon badges to represent actions, status, or categories with visual symbols instead of text. + +```typescript +import {IconBadge} from "@qualcomm-ui/react/badge" +``` + +## Examples + +### Icon + +Use the [icon](./#icon-1) prop to provide a Lucide icon, or use [children](./#children) for custom SVG content. + + + +### Emphasis + +Use the [emphasis](./#emphasis-1) prop to convey semantic meaning or categorize content. + + + +### Variant + +The [variant](./#variant-1) prop controls the aspect of the badge. Two variants are available: `default` (bolder appearance) and `subtle` (muted appearance). + + + +### Size + +Control dimensions using the [size](./#size-1) prop. Six sizes are available: `xxs`, `xs`, `sm`, `md` (default), `lg`, and `xl`. + + + +### Disabled + +Set the [disabled](./#disabled-1) prop to visually indicate that the badge is inactive. + + +## API + +### \ + + + + diff --git a/packages/docs/react-docs/src/routes/components+/badges+/icon-badge+/demos/icon-badge-disabled-demo.tsx b/packages/docs/react-docs/src/routes/components+/badges+/icon-badge+/demos/icon-badge-disabled-demo.tsx new file mode 100644 index 000000000..b65e764ce --- /dev/null +++ b/packages/docs/react-docs/src/routes/components+/badges+/icon-badge+/demos/icon-badge-disabled-demo.tsx @@ -0,0 +1,16 @@ +import type {ReactElement} from "react" + +import {Star} from "lucide-react" + +import {IconBadge} from "@qualcomm-ui/react/badge" + +export function IconBadgeDisabledDemo(): ReactElement { + return ( +
+ {/* preview */} + + + {/* preview */} +
+ ) +} diff --git a/packages/docs/react-docs/src/routes/components+/badges+/icon-badge+/demos/icon-badge-emphasis-demo.tsx b/packages/docs/react-docs/src/routes/components+/badges+/icon-badge+/demos/icon-badge-emphasis-demo.tsx new file mode 100644 index 000000000..61e2ef674 --- /dev/null +++ b/packages/docs/react-docs/src/routes/components+/badges+/icon-badge+/demos/icon-badge-emphasis-demo.tsx @@ -0,0 +1,32 @@ +import type {ReactElement} from "react" + +import {Star} from "lucide-react" + +import {IconBadge} from "@qualcomm-ui/react/badge" + +export function IconBadgeEmphasisDemo(): ReactElement { + return ( +
+
+ + + + + + +
+
+ + + + + + + + + + +
+
+ ) +} diff --git a/packages/docs/react-docs/src/routes/components+/badges+/icon-badge+/demos/icon-badge-icon-demo.tsx b/packages/docs/react-docs/src/routes/components+/badges+/icon-badge+/demos/icon-badge-icon-demo.tsx new file mode 100644 index 000000000..dc51f3402 --- /dev/null +++ b/packages/docs/react-docs/src/routes/components+/badges+/icon-badge+/demos/icon-badge-icon-demo.tsx @@ -0,0 +1,20 @@ +import type {ReactElement} from "react" + +import {Star} from "lucide-react" + +import {IconBadge} from "@qualcomm-ui/react/badge" + +export function IconBadgeIconDemo(): ReactElement { + return ( +
+ {/* preview */} + + + + + + + {/* preview */} +
+ ) +} diff --git a/packages/docs/react-docs/src/routes/components+/badges+/icon-badge+/demos/icon-badge-size-demo.tsx b/packages/docs/react-docs/src/routes/components+/badges+/icon-badge+/demos/icon-badge-size-demo.tsx new file mode 100644 index 000000000..ed586b9a5 --- /dev/null +++ b/packages/docs/react-docs/src/routes/components+/badges+/icon-badge+/demos/icon-badge-size-demo.tsx @@ -0,0 +1,20 @@ +import type {ReactElement} from "react" + +import {Star} from "lucide-react" + +import {IconBadge} from "@qualcomm-ui/react/badge" + +export function IconBadgeSizeDemo(): ReactElement { + return ( +
+ {/* preview */} + + + + + + + {/* preview */} +
+ ) +} diff --git a/packages/docs/react-docs/src/routes/components+/badges+/icon-badge+/demos/icon-badge-variant-demo.tsx b/packages/docs/react-docs/src/routes/components+/badges+/icon-badge+/demos/icon-badge-variant-demo.tsx new file mode 100644 index 000000000..bd9031fa9 --- /dev/null +++ b/packages/docs/react-docs/src/routes/components+/badges+/icon-badge+/demos/icon-badge-variant-demo.tsx @@ -0,0 +1,32 @@ +import type {ReactElement} from "react" + +import {Star} from "lucide-react" + +import {IconBadge} from "@qualcomm-ui/react/badge" + +export function IconBadgeVariantDemo(): ReactElement { + return ( +
+
+ + + + + + +
+
+ + + + + + + + + + +
+
+ ) +} diff --git a/packages/docs/react-docs/src/routes/components+/badges+/icon-badge+/demos/index.ts b/packages/docs/react-docs/src/routes/components+/badges+/icon-badge+/demos/index.ts new file mode 100644 index 000000000..00af16584 --- /dev/null +++ b/packages/docs/react-docs/src/routes/components+/badges+/icon-badge+/demos/index.ts @@ -0,0 +1,5 @@ +export * from "./icon-badge-disabled-demo" +export * from "./icon-badge-emphasis-demo" +export * from "./icon-badge-icon-demo" +export * from "./icon-badge-size-demo" +export * from "./icon-badge-variant-demo" diff --git a/packages/docs/react-docs/src/routes/components+/badges+/number-badge+/_number-badge.mdx b/packages/docs/react-docs/src/routes/components+/badges+/number-badge+/_number-badge.mdx new file mode 100644 index 000000000..22b8b77bd --- /dev/null +++ b/packages/docs/react-docs/src/routes/components+/badges+/number-badge+/_number-badge.mdx @@ -0,0 +1,61 @@ +--- +title: Number Badge +--- + +import {TypeDocAttributes, TypeDocProps} from "@qualcomm-ui/react-mdx/typedoc" +import {Demo} from "~components/demo" +import * as demos from "./demos" + +# {frontmatter.title} + +Display numeric values in compact, color-coded containers. Use number badges to show counts, notifications, or other numerical indicators. + +```typescript +import {NumberBadge} from "@qualcomm-ui/react/badge" +``` + +## Examples + +### Value + +Use the [value](./#value-1) prop for auto formatting, or use [children](./#children) for manual content. + + + +### Max (Auto Formatting) + +When using the [value](./#value-1) prop with [max](./#max), overflow values are automatically formatted. If value exceeds max, the badge displays "max+" and applies special styling. The default max is 99. + + + +### Emphasis + +Multiple color and style options are available via the [emphasis](./#emphasis-1) prop: `neutral` (default), `neutral-outline`, `brand`, `brand-outline`, `info`, `success`, `warning`, `danger`, `persistent-black` and `persistent-white`. + + + +### Size + +Control dimensions using the [size](./#size-1) prop. Three sizes are available: `sm`, `md` (default), and `lg`. + + + +### Disabled + +Set the [disabled](./#disabled-1) prop to visually indicate that the badge is inactive. + + + +## API + +### \ + + + + diff --git a/packages/docs/react-docs/src/routes/components+/badges+/number-badge+/demos/index.ts b/packages/docs/react-docs/src/routes/components+/badges+/number-badge+/demos/index.ts new file mode 100644 index 000000000..5f0eaf639 --- /dev/null +++ b/packages/docs/react-docs/src/routes/components+/badges+/number-badge+/demos/index.ts @@ -0,0 +1,5 @@ +export * from "./number-badge-disabled-demo" +export * from "./number-badge-emphasis-demo" +export * from "./number-badge-max-demo" +export * from "./number-badge-size-demo" +export * from "./number-badge-value-demo" diff --git a/packages/docs/react-docs/src/routes/components+/badges+/number-badge+/demos/number-badge-disabled-demo.tsx b/packages/docs/react-docs/src/routes/components+/badges+/number-badge+/demos/number-badge-disabled-demo.tsx new file mode 100644 index 000000000..e8a3a361c --- /dev/null +++ b/packages/docs/react-docs/src/routes/components+/badges+/number-badge+/demos/number-badge-disabled-demo.tsx @@ -0,0 +1,14 @@ +import type {ReactElement} from "react" + +import {NumberBadge} from "@qualcomm-ui/react/badge" + +export function NumberBadgeDisabledDemo(): ReactElement { + return ( +
+ {/* preview */} + + + {/* preview */} +
+ ) +} diff --git a/packages/docs/react-docs/src/routes/components+/badges+/number-badge+/demos/number-badge-emphasis-demo.tsx b/packages/docs/react-docs/src/routes/components+/badges+/number-badge+/demos/number-badge-emphasis-demo.tsx new file mode 100644 index 000000000..10e4a3156 --- /dev/null +++ b/packages/docs/react-docs/src/routes/components+/badges+/number-badge+/demos/number-badge-emphasis-demo.tsx @@ -0,0 +1,22 @@ +import type {ReactElement} from "react" + +import {NumberBadge} from "@qualcomm-ui/react/badge" + +export function NumberBadgeEmphasisDemo(): ReactElement { + return ( +
+ {/* preview */} + + + + + + + + + + + {/* preview */} +
+ ) +} diff --git a/packages/docs/react-docs/src/routes/components+/badges+/number-badge+/demos/number-badge-max-demo.tsx b/packages/docs/react-docs/src/routes/components+/badges+/number-badge+/demos/number-badge-max-demo.tsx new file mode 100644 index 000000000..be9d81694 --- /dev/null +++ b/packages/docs/react-docs/src/routes/components+/badges+/number-badge+/demos/number-badge-max-demo.tsx @@ -0,0 +1,16 @@ +import type {ReactElement} from "react" + +import {NumberBadge} from "@qualcomm-ui/react/badge" + +export function NumberBadgeMaxDemo(): ReactElement { + return ( +
+ {/* preview */} + + + + + {/* preview */} +
+ ) +} diff --git a/packages/docs/react-docs/src/routes/components+/badges+/number-badge+/demos/number-badge-size-demo.tsx b/packages/docs/react-docs/src/routes/components+/badges+/number-badge+/demos/number-badge-size-demo.tsx new file mode 100644 index 000000000..cdf6c398c --- /dev/null +++ b/packages/docs/react-docs/src/routes/components+/badges+/number-badge+/demos/number-badge-size-demo.tsx @@ -0,0 +1,15 @@ +import type {ReactElement} from "react" + +import {NumberBadge} from "@qualcomm-ui/react/badge" + +export function NumberBadgeSizeDemo(): ReactElement { + return ( +
+ {/* preview */} + + + + {/* preview */} +
+ ) +} diff --git a/packages/docs/react-docs/src/routes/components+/badges+/number-badge+/demos/number-badge-value-demo.tsx b/packages/docs/react-docs/src/routes/components+/badges+/number-badge+/demos/number-badge-value-demo.tsx new file mode 100644 index 000000000..fcb9b9333 --- /dev/null +++ b/packages/docs/react-docs/src/routes/components+/badges+/number-badge+/demos/number-badge-value-demo.tsx @@ -0,0 +1,15 @@ +import type {ReactElement} from "react" + +import {NumberBadge} from "@qualcomm-ui/react/badge" + +export function NumberBadgeValueDemo(): ReactElement { + return ( +
+ {/* preview */} + 42 + + + {/* preview */} +
+ ) +} diff --git a/packages/docs/react-docs/src/routes/components+/badges+/status-badge+/_status-badge.mdx b/packages/docs/react-docs/src/routes/components+/badges+/status-badge+/_status-badge.mdx new file mode 100644 index 000000000..4d39cadf6 --- /dev/null +++ b/packages/docs/react-docs/src/routes/components+/badges+/status-badge+/_status-badge.mdx @@ -0,0 +1,55 @@ +--- +title: Status Badge +--- + +import {TypeDocAttributes, TypeDocProps} from "@qualcomm-ui/react-mdx/typedoc" +import {Demo} from "~components/demo" +import * as demos from "./demos" + +# {frontmatter.title} + +Display colored dot indicators to communicate status or availability. Use status badges to show online/offline states, connection status, or other binary conditions. + +```typescript +import {StatusBadge} from "@qualcomm-ui/react/badge" +``` + +## Examples + +### Emphasis + +Use the [emphasis](./#emphasis-1) prop to convey semantic meaning with colors. + + + +### Variant + +The [variant](./#variant-1) prop controls the aspect of the badge. Two variants are available: `filled` (default) and `outlined`. + + + +### Size + +Control dimensions using the [size](./#size-1) prop. Five sizes are available: `xs`, `sm`, `md` (default), `lg`, and `xl`. + + + +### Disabled + +Set the [disabled](./#disabled-1) prop to visually indicate that the badge is inactive. + + + +## API + +### \ + + + + diff --git a/packages/docs/react-docs/src/routes/components+/badges+/status-badge+/demos/index.ts b/packages/docs/react-docs/src/routes/components+/badges+/status-badge+/demos/index.ts new file mode 100644 index 000000000..2e6e93f8f --- /dev/null +++ b/packages/docs/react-docs/src/routes/components+/badges+/status-badge+/demos/index.ts @@ -0,0 +1,4 @@ +export * from "./status-badge-disabled-demo" +export * from "./status-badge-emphasis-demo" +export * from "./status-badge-size-demo" +export * from "./status-badge-variant-demo" diff --git a/packages/docs/react-docs/src/routes/components+/badges+/status-badge+/demos/status-badge-disabled-demo.tsx b/packages/docs/react-docs/src/routes/components+/badges+/status-badge+/demos/status-badge-disabled-demo.tsx new file mode 100644 index 000000000..04947a793 --- /dev/null +++ b/packages/docs/react-docs/src/routes/components+/badges+/status-badge+/demos/status-badge-disabled-demo.tsx @@ -0,0 +1,14 @@ +import type {ReactElement} from "react" + +import {StatusBadge} from "@qualcomm-ui/react/badge" + +export function StatusBadgeDisabledDemo(): ReactElement { + return ( +
+ {/* preview */} + + + {/* preview */} +
+ ) +} diff --git a/packages/docs/react-docs/src/routes/components+/badges+/status-badge+/demos/status-badge-emphasis-demo.tsx b/packages/docs/react-docs/src/routes/components+/badges+/status-badge+/demos/status-badge-emphasis-demo.tsx new file mode 100644 index 000000000..72c1f8572 --- /dev/null +++ b/packages/docs/react-docs/src/routes/components+/badges+/status-badge+/demos/status-badge-emphasis-demo.tsx @@ -0,0 +1,18 @@ +import type {ReactElement} from "react" + +import {StatusBadge} from "@qualcomm-ui/react/badge" + +export function StatusBadgeEmphasisDemo(): ReactElement { + return ( +
+ {/* preview */} + + + + + + + {/* preview */} +
+ ) +} diff --git a/packages/docs/react-docs/src/routes/components+/badges+/status-badge+/demos/status-badge-size-demo.tsx b/packages/docs/react-docs/src/routes/components+/badges+/status-badge+/demos/status-badge-size-demo.tsx new file mode 100644 index 000000000..39831fd72 --- /dev/null +++ b/packages/docs/react-docs/src/routes/components+/badges+/status-badge+/demos/status-badge-size-demo.tsx @@ -0,0 +1,17 @@ +import type {ReactElement} from "react" + +import {StatusBadge} from "@qualcomm-ui/react/badge" + +export function StatusBadgeSizeDemo(): ReactElement { + return ( +
+ {/* preview */} + + + + + + {/* preview */} +
+ ) +} diff --git a/packages/docs/react-docs/src/routes/components+/badges+/status-badge+/demos/status-badge-variant-demo.tsx b/packages/docs/react-docs/src/routes/components+/badges+/status-badge+/demos/status-badge-variant-demo.tsx new file mode 100644 index 000000000..ec3e6ee80 --- /dev/null +++ b/packages/docs/react-docs/src/routes/components+/badges+/status-badge+/demos/status-badge-variant-demo.tsx @@ -0,0 +1,18 @@ +import type {ReactElement} from "react" + +import {StatusBadge} from "@qualcomm-ui/react/badge" + +export function StatusBadgeVariantDemo(): ReactElement { + return ( +
+ {/* preview */} + + + + + + + {/* preview */} +
+ ) +} diff --git a/packages/docs/react-docs/src/routes/components+/badges+/text-badge+/_text-badge.mdx b/packages/docs/react-docs/src/routes/components+/badges+/text-badge+/_text-badge.mdx new file mode 100644 index 000000000..be9f774cd --- /dev/null +++ b/packages/docs/react-docs/src/routes/components+/badges+/text-badge+/_text-badge.mdx @@ -0,0 +1,49 @@ +--- +title: Text Badge +--- + +import {TypeDocAttributes, TypeDocProps} from "@qualcomm-ui/react-mdx/typedoc" +import {Demo} from "~components/demo" +import * as demos from "./demos" + +# {frontmatter.title} + +Display text labels in compact, color-coded containers. Use text badges to categorize content, show status, or highlight information with concise labels. + +```typescript +import {Badge} from "@qualcomm-ui/react/badge" +``` + +## Examples + +### Emphasis + +Use the [emphasis](./#emphasis-1) prop to convey semantic meaning or categorize content. + + + +### Variant + +The [variant](./#variant-1) prop controls the aspect of the badge. Two variants are available: `default` (bolder appearance) and `subtle` (muted appearance). + + + +### Size + +Control dimensions using the [size](./#size-1) prop. Three sizes are available: `sm`, `md` (default), and `lg`. + + + +### Disabled + +Set the [disabled](./#disabled-1) prop to visually indicate that the badge is inactive. + + + +## API + +### \ + + + + diff --git a/packages/docs/react-docs/src/routes/components+/badges+/text-badge+/demos/index.ts b/packages/docs/react-docs/src/routes/components+/badges+/text-badge+/demos/index.ts new file mode 100644 index 000000000..e8625d17c --- /dev/null +++ b/packages/docs/react-docs/src/routes/components+/badges+/text-badge+/demos/index.ts @@ -0,0 +1,4 @@ +export * from "./text-badge-disabled-demo" +export * from "./text-badge-emphasis-demo" +export * from "./text-badge-size-demo" +export * from "./text-badge-variant-demo" diff --git a/packages/docs/react-docs/src/routes/components+/badges+/text-badge+/demos/text-badge-disabled-demo.tsx b/packages/docs/react-docs/src/routes/components+/badges+/text-badge+/demos/text-badge-disabled-demo.tsx new file mode 100644 index 000000000..7b196dfb3 --- /dev/null +++ b/packages/docs/react-docs/src/routes/components+/badges+/text-badge+/demos/text-badge-disabled-demo.tsx @@ -0,0 +1,16 @@ +import type {ReactElement} from "react" + +import {Badge} from "@qualcomm-ui/react/badge" + +export function TextBadgeDisabledDemo(): ReactElement { + return ( +
+ {/* preview */} + Enabled + + Disabled + + {/* preview */} +
+ ) +} diff --git a/packages/docs/react-docs/src/routes/components+/badges+/text-badge+/demos/text-badge-emphasis-demo.tsx b/packages/docs/react-docs/src/routes/components+/badges+/text-badge+/demos/text-badge-emphasis-demo.tsx new file mode 100644 index 000000000..40e14381b --- /dev/null +++ b/packages/docs/react-docs/src/routes/components+/badges+/text-badge+/demos/text-badge-emphasis-demo.tsx @@ -0,0 +1,30 @@ +import type {ReactElement} from "react" + +import {Badge} from "@qualcomm-ui/react/badge" + +export function TextBadgeEmphasisDemo(): ReactElement { + return ( +
+
+ neutral + brand + info + success + warning + danger +
+
+ blue + cyan + green + kiwi + magenta + orange + purple + red + teal + yellow +
+
+ ) +} diff --git a/packages/docs/react-docs/src/routes/components+/badges+/text-badge+/demos/text-badge-size-demo.tsx b/packages/docs/react-docs/src/routes/components+/badges+/text-badge+/demos/text-badge-size-demo.tsx new file mode 100644 index 000000000..6130e59e3 --- /dev/null +++ b/packages/docs/react-docs/src/routes/components+/badges+/text-badge+/demos/text-badge-size-demo.tsx @@ -0,0 +1,15 @@ +import type {ReactElement} from "react" + +import {Badge} from "@qualcomm-ui/react/badge" + +export function TextBadgeSizeDemo(): ReactElement { + return ( +
+ {/* preview */} + Small + Medium + Large + {/* preview */} +
+ ) +} diff --git a/packages/docs/react-docs/src/routes/components+/badges+/text-badge+/demos/text-badge-variant-demo.tsx b/packages/docs/react-docs/src/routes/components+/badges+/text-badge+/demos/text-badge-variant-demo.tsx new file mode 100644 index 000000000..325e768e1 --- /dev/null +++ b/packages/docs/react-docs/src/routes/components+/badges+/text-badge+/demos/text-badge-variant-demo.tsx @@ -0,0 +1,62 @@ +import type {ReactElement} from "react" + +import {Badge} from "@qualcomm-ui/react/badge" + +export function TextBadgeVariantDemo(): ReactElement { + return ( +
+
+ + neutral + + + brand + + + info + + + success + + + warning + + + danger + +
+
+ + blue + + + cyan + + + green + + + kiwi + + + magenta + + + orange + + + purple + + + red + + + teal + + + yellow + +
+
+ ) +} diff --git a/packages/frameworks/angular/CHANGELOG.md b/packages/frameworks/angular/CHANGELOG.md index 7f308dedb..63d82fc56 100644 --- a/packages/frameworks/angular/CHANGELOG.md +++ b/packages/frameworks/angular/CHANGELOG.md @@ -1,5 +1,19 @@ # @qualcomm-ui/angular +## 1.4.0 (2025/11/24) + +### Features + +- add badge component + +### Bug Fixes + +- remove useless context, fix doc + +### Miscellaneous Chores + +- **deps:** update dependencies [@qualcomm-ui/qds-core] + ## 1.3.3 (2025/11/23) ### Bug Fixes diff --git a/packages/frameworks/angular/package.json b/packages/frameworks/angular/package.json index 888935b6d..eb85c4061 100644 --- a/packages/frameworks/angular/package.json +++ b/packages/frameworks/angular/package.json @@ -1,6 +1,6 @@ { "name": "@qualcomm-ui/angular", - "version": "1.3.3", + "version": "1.4.0", "author": "Ryan Bower", "license": "BSD-3-Clause-Clear", "description": "QUI Angular Components", @@ -59,7 +59,7 @@ "@qualcomm-ui/angular-core": "workspace:^1.0.5", "@qualcomm-ui/cli": "workspace:^1", "@qualcomm-ui/core": "workspace:^1.0.7", - "@qualcomm-ui/qds-core": "workspace:^1.4.2", + "@qualcomm-ui/qds-core": "workspace:^1.5.0", "@qualcomm-ui/tailwind-plugin": "workspace:^1.1.0", "@qualcomm-ui/tsconfig": "workspace:^1.0.4", "@qualcomm-ui/utils": "workspace:^1.0.3", @@ -101,7 +101,7 @@ "@angular/platform-browser-dynamic": ">=20.1.0 <21", "@qualcomm-ui/angular-core": "workspace:^1.0.5", "@qualcomm-ui/core": "workspace:^1.0.7", - "@qualcomm-ui/qds-core": "workspace:^1.4.2", + "@qualcomm-ui/qds-core": "workspace:^1.5.0", "@qualcomm-ui/utils": "workspace:^1.0.3", "@tanstack/virtual-core": ">=3.13.12", "lucide-angular": ">=0.487.0 <1", diff --git a/packages/frameworks/angular/src/badge/badge.directive.ts b/packages/frameworks/angular/src/badge/badge.directive.ts new file mode 100644 index 000000000..3fea20373 --- /dev/null +++ b/packages/frameworks/angular/src/badge/badge.directive.ts @@ -0,0 +1,82 @@ +// Copyright (c) Qualcomm Technologies, Inc. and/or its subsidiaries. +// SPDX-License-Identifier: BSD-3-Clause-Clear + +import { + booleanAttribute, + Component, + computed, + input, + type OnInit, +} from "@angular/core" + +import { + normalizeProps, + useTrackBindings, +} from "@qualcomm-ui/angular-core/machine" +import type {SignalifyInput} from "@qualcomm-ui/angular-core/signals" +import { + createQdsTextBadgeApi, + type QdsBadgeBasicSize, + type QdsBadgeCategoryEmphasis, + type QdsBadgeSemanticEmphasis, + type QdsTextBadgeProps, + type QdsTextBadgeVariant, +} from "@qualcomm-ui/qds-core/badge" +import type {Booleanish} from "@qualcomm-ui/utils/coercion" + +@Component({ + selector: "[q-badge]", + template: ` + + `, +}) +export class BadgeDirective + implements OnInit, SignalifyInput +{ + /** + * Governs the size of the badge. + * @default 'md' + */ + readonly size = input() + + /** + * The badge disabled state. + */ + readonly disabled = input(undefined, { + transform: booleanAttribute, + }) + + /** + * Governs the color of the text badge. + * @default 'neutral' + */ + readonly emphasis = input< + QdsBadgeSemanticEmphasis | QdsBadgeCategoryEmphasis + >() + + /** + * Governs the style of the badge. + * @default 'default' + */ + readonly variant = input() + + protected readonly api = computed(() => { + return createQdsTextBadgeApi( + { + disabled: this.disabled(), + emphasis: this.emphasis(), + size: this.size(), + variant: this.variant(), + }, + normalizeProps, + ) + }) + + protected readonly trackBindings = useTrackBindings(() => + this.api().getRootBindings(), + ) + + ngOnInit() { + this.trackBindings() + } +} diff --git a/packages/frameworks/angular/src/badge/icon-badge.directive.ts b/packages/frameworks/angular/src/badge/icon-badge.directive.ts new file mode 100644 index 000000000..41dbc0d61 --- /dev/null +++ b/packages/frameworks/angular/src/badge/icon-badge.directive.ts @@ -0,0 +1,99 @@ +// Copyright (c) Qualcomm Technologies, Inc. and/or its subsidiaries. +// SPDX-License-Identifier: BSD-3-Clause-Clear + +import { + booleanAttribute, + Component, + computed, + input, + type OnInit, +} from "@angular/core" + +import {IconDirective} from "@qualcomm-ui/angular/icon" +import { + type LucideIconOrString, + provideIcons, +} from "@qualcomm-ui/angular-core/lucide" +import { + normalizeProps, + QBindDirective, + useTrackBindings, +} from "@qualcomm-ui/angular-core/machine" +import type {SignalifyInput} from "@qualcomm-ui/angular-core/signals" +import { + createQdsIconBadgeApi, + type QdsBadgeCategoryEmphasis, + type QdsBadgeExtendedSize, + type QdsBadgeSemanticEmphasis, + type QdsIconBadgeProps, + type QdsIconBadgeVariant, +} from "@qualcomm-ui/qds-core/badge" +import type {Booleanish} from "@qualcomm-ui/utils/coercion" + +@Component({ + imports: [IconDirective, QBindDirective], + providers: [provideIcons({})], + selector: "[q-icon-badge]", + template: ` + + @if (icon()) { + + } + + `, +}) +export class IconBadgeDirective + implements OnInit, SignalifyInput +{ + /** + * Governs the size of the badge. + * @default 'md' + */ + readonly size = input() + + /** + * The badge disabled state. + */ + readonly disabled = input(undefined, { + transform: booleanAttribute, + }) + + /** + * Governs the color of the icon badge. + * @default 'neutral' + */ + readonly emphasis = input< + QdsBadgeSemanticEmphasis | QdsBadgeCategoryEmphasis + >() + + /** + * Governs the style of the icon badge. + * @default 'default' + */ + readonly variant = input() + + /** + * {@link https://lucide.dev/icons lucide-angular} icon to display in the icon badge. + */ + readonly icon = input() + + protected readonly api = computed(() => { + return createQdsIconBadgeApi( + { + disabled: this.disabled(), + emphasis: this.emphasis(), + size: this.size(), + variant: this.variant(), + }, + normalizeProps, + ) + }) + + protected readonly trackBindings = useTrackBindings(() => + this.api().getRootBindings(), + ) + + ngOnInit() { + this.trackBindings() + } +} diff --git a/packages/frameworks/angular/src/badge/index.ts b/packages/frameworks/angular/src/badge/index.ts new file mode 100644 index 000000000..e8907af98 --- /dev/null +++ b/packages/frameworks/angular/src/badge/index.ts @@ -0,0 +1,4 @@ +export * from "./badge.directive" +export * from "./number-badge.directive" +export * from "./icon-badge.directive" +export * from "./status-badge.directive" diff --git a/packages/frameworks/angular/src/badge/ng-package.json b/packages/frameworks/angular/src/badge/ng-package.json new file mode 100644 index 000000000..020455f6f --- /dev/null +++ b/packages/frameworks/angular/src/badge/ng-package.json @@ -0,0 +1,6 @@ +{ + "$schema": "../../node_modules/ng-packagr/ng-package.schema.json", + "lib": { + "entryFile": "./index.ts" + } +} diff --git a/packages/frameworks/angular/src/badge/number-badge.directive.ts b/packages/frameworks/angular/src/badge/number-badge.directive.ts new file mode 100644 index 000000000..5b30b3e64 --- /dev/null +++ b/packages/frameworks/angular/src/badge/number-badge.directive.ts @@ -0,0 +1,91 @@ +// Copyright (c) Qualcomm Technologies, Inc. and/or its subsidiaries. +// SPDX-License-Identifier: BSD-3-Clause-Clear + +import { + booleanAttribute, + Component, + computed, + input, + numberAttribute, + type OnInit, +} from "@angular/core" + +import { + normalizeProps, + useTrackBindings, +} from "@qualcomm-ui/angular-core/machine" +import type {SignalifyInput} from "@qualcomm-ui/angular-core/signals" +import { + createQdsNumberBadgeApi, + type QdsBadgeBasicSize, + type QdsNumberBadgeEmphasis, + type QdsNumberBadgeProps, +} from "@qualcomm-ui/qds-core/badge" +import type {Booleanish} from "@qualcomm-ui/utils/coercion" + +@Component({ + selector: "[q-number-badge]", + template: ` + {{ displayValue() }} + `, +}) +export class NumberBadgeDirective + implements OnInit, SignalifyInput +{ + /** + * The badge disabled state. + */ + readonly disabled = input(undefined, { + transform: booleanAttribute, + }) + + /** + * Governs the color and style of the number badge. + * @default 'neutral' + */ + readonly emphasis = input() + + /** + * Maximum value to display for the number badge. + * @default 99 + */ + readonly max = input(undefined, { + transform: numberAttribute, + }) + + /** + * Governs the size of the badge. + * @default 'md' + */ + readonly size = input() + + /** + * The numeric value to display for the number badge. + */ + readonly value = input(undefined, { + transform: numberAttribute, + }) + + protected readonly api = computed(() => { + return createQdsNumberBadgeApi( + { + disabled: this.disabled(), + emphasis: this.emphasis(), + max: this.max(), + size: this.size(), + value: this.value(), + }, + normalizeProps, + ) + }) + + protected readonly displayValue = computed(() => this.api().displayValue) + + protected readonly trackBindings = useTrackBindings(() => + this.api().getRootBindings(), + ) + + ngOnInit() { + this.trackBindings() + } +} diff --git a/packages/frameworks/angular/src/badge/status-badge.directive.ts b/packages/frameworks/angular/src/badge/status-badge.directive.ts new file mode 100644 index 000000000..6d6c233df --- /dev/null +++ b/packages/frameworks/angular/src/badge/status-badge.directive.ts @@ -0,0 +1,76 @@ +// Copyright (c) Qualcomm Technologies, Inc. and/or its subsidiaries. +// SPDX-License-Identifier: BSD-3-Clause-Clear + +import { + booleanAttribute, + computed, + Directive, + input, + type OnInit, +} from "@angular/core" + +import { + normalizeProps, + useTrackBindings, +} from "@qualcomm-ui/angular-core/machine" +import type {SignalifyInput} from "@qualcomm-ui/angular-core/signals" +import { + createQdsStatusBadgeApi, + type QdsBadgeExtraSize, + type QdsBadgeSemanticEmphasis, + type QdsStatusBadgeProps, + type QdsStatusBadgeVariant, +} from "@qualcomm-ui/qds-core/badge" +import type {Booleanish} from "@qualcomm-ui/utils/coercion" + +@Directive({ + selector: "[q-status-badge]", +}) +export class StatusBadgeDirective + implements OnInit, SignalifyInput +{ + /** + * Governs the size of the badge. + * @default 'md' + */ + readonly size = input() + + /** + * The badge disabled state. + */ + readonly disabled = input(undefined, { + transform: booleanAttribute, + }) + + /** + * Governs the color of the status badge. + * @default 'neutral' + */ + readonly emphasis = input() + + /** + * Governs the style of the status badge. + * @default 'filled' + */ + readonly variant = input() + + protected readonly api = computed(() => { + return createQdsStatusBadgeApi( + { + disabled: this.disabled(), + emphasis: this.emphasis(), + size: this.size(), + variant: this.variant(), + }, + normalizeProps, + ) + }) + + protected readonly trackBindings = useTrackBindings(() => + this.api().getRootBindings(), + ) + + ngOnInit() { + this.trackBindings() + } +} diff --git a/packages/frameworks/react-mdx/CHANGELOG.md b/packages/frameworks/react-mdx/CHANGELOG.md index fd4920afe..0d89d48cc 100644 --- a/packages/frameworks/react-mdx/CHANGELOG.md +++ b/packages/frameworks/react-mdx/CHANGELOG.md @@ -1,5 +1,11 @@ # @qualcomm-ui/react-mdx +## 1.5.1 (2025/11/24) + +### Miscellaneous Chores + +- **deps:** update dependencies [@qualcomm-ui/react] + ## 1.5.0 (2025/11/21) ### Features diff --git a/packages/frameworks/react-mdx/package.json b/packages/frameworks/react-mdx/package.json index 5eb269854..5f3dc57d6 100644 --- a/packages/frameworks/react-mdx/package.json +++ b/packages/frameworks/react-mdx/package.json @@ -1,6 +1,6 @@ { "name": "@qualcomm-ui/react-mdx", - "version": "1.5.0", + "version": "1.5.1", "description": "React components and utilities for MDX documentation sites based on QUI Docs", "author": "Ryan Bower", "license": "BSD-3-Clause-Clear", @@ -58,7 +58,7 @@ "@qualcomm-ui/dom": "workspace:^1.0.5", "@qualcomm-ui/esbuild": "workspace:^1.0.3", "@qualcomm-ui/mdx-common": "workspace:^1.2.0", - "@qualcomm-ui/react": "workspace:^1.1.6", + "@qualcomm-ui/react": "workspace:^1.2.0", "@qualcomm-ui/react-core": "workspace:^1.0.7", "@qualcomm-ui/react-test-utils": "workspace:^1.0.0", "@qualcomm-ui/tsconfig": "workspace:^1.0.4", @@ -100,7 +100,7 @@ "@mdx-js/react": ">=3.0.1 <4", "@qualcomm-ui/core": "workspace:^1.0.7", "@qualcomm-ui/mdx-common": "workspace:^1.2.0", - "@qualcomm-ui/react": "workspace:^1.1.6", + "@qualcomm-ui/react": "workspace:^1.2.0", "@qualcomm-ui/react-core": "workspace:^1.0.7", "@qualcomm-ui/utils": "workspace:^1.0.3", "@shikijs/langs": ">=3.13.0", diff --git a/packages/frameworks/react/CHANGELOG.md b/packages/frameworks/react/CHANGELOG.md index 96b61798f..4eabd8136 100644 --- a/packages/frameworks/react/CHANGELOG.md +++ b/packages/frameworks/react/CHANGELOG.md @@ -1,5 +1,15 @@ # @qualcomm-ui/react +## 1.2.0 (2025/11/24) + +### Features + +- add badge component + +### Miscellaneous Chores + +- **deps:** update dependencies [@qualcomm-ui/qds-core] + ## 1.1.6 (2025/11/21) ### Code Refactoring diff --git a/packages/frameworks/react/package.json b/packages/frameworks/react/package.json index 6031fd4f9..c63dda64d 100644 --- a/packages/frameworks/react/package.json +++ b/packages/frameworks/react/package.json @@ -1,7 +1,7 @@ { "name": "@qualcomm-ui/react", "sideEffects": false, - "version": "1.1.6", + "version": "1.2.0", "description": "QUI React components", "author": "Ryan Bower", "license": "BSD-3-Clause-Clear", @@ -43,7 +43,7 @@ "@qualcomm-ui/cli": "workspace:^1.0.5", "@qualcomm-ui/core": "workspace:^1.0.7", "@qualcomm-ui/esbuild": "workspace:^1.0.3", - "@qualcomm-ui/qds-core": "workspace:^1.4.2", + "@qualcomm-ui/qds-core": "workspace:^1.5.0", "@qualcomm-ui/react-core": "workspace:^1.0.7", "@qualcomm-ui/react-test-utils": "workspace:^1.0.0", "@qualcomm-ui/tsconfig": "workspace:^1.0.4", @@ -80,7 +80,7 @@ "peerDependencies": { "@tanstack/react-virtual": ">=3.13.9", "@qualcomm-ui/core": "workspace:^1.0.7", - "@qualcomm-ui/qds-core": "workspace:^1.4.2", + "@qualcomm-ui/qds-core": "workspace:^1.5.0", "@qualcomm-ui/react-core": "workspace:^1.0.7", "@qualcomm-ui/utils": "workspace:^1.0.3", "lucide-react": ">=0.379.0 <1", diff --git a/packages/frameworks/react/src/badge/badge.tsx b/packages/frameworks/react/src/badge/badge.tsx new file mode 100644 index 000000000..51bf5ae03 --- /dev/null +++ b/packages/frameworks/react/src/badge/badge.tsx @@ -0,0 +1,51 @@ +// Copyright (c) Qualcomm Technologies, Inc. and/or its subsidiaries. +// SPDX-License-Identifier: BSD-3-Clause-Clear + +import type {ReactElement, ReactNode} from "react" + +import { + createQdsTextBadgeApi, + type QdsTextBadgeProps as QdsTextBadgeProps, +} from "@qualcomm-ui/qds-core/badge" +import {normalizeProps} from "@qualcomm-ui/react-core/machine" +import { + type ElementRenderProp, + PolymorphicElement, +} from "@qualcomm-ui/react-core/system" +import {mergeProps} from "@qualcomm-ui/utils/merge-props" + +export interface BadgeProps + extends QdsTextBadgeProps, + ElementRenderProp<"span"> { + /** + * React {@link https://react.dev/learn/passing-props-to-a-component#passing-jsx-as-children children} prop. + */ + children?: ReactNode +} + +export function Badge({ + children, + disabled, + emphasis, + size, + variant, + ...restProps +}: BadgeProps): ReactElement { + const qdsApi = createQdsTextBadgeApi( + { + disabled, + emphasis, + size, + variant, + }, + normalizeProps, + ) + + const mergedProps = mergeProps(qdsApi.getRootBindings(), restProps) + + return ( + + {children} + + ) +} diff --git a/packages/frameworks/react/src/badge/icon-badge.tsx b/packages/frameworks/react/src/badge/icon-badge.tsx new file mode 100644 index 000000000..d760f9058 --- /dev/null +++ b/packages/frameworks/react/src/badge/icon-badge.tsx @@ -0,0 +1,63 @@ +// Copyright (c) Qualcomm Technologies, Inc. and/or its subsidiaries. +// SPDX-License-Identifier: BSD-3-Clause-Clear + +import type {ReactElement, ReactNode} from "react" + +import { + createQdsIconBadgeApi, + type QdsIconBadgeProps as QdsIconBadgeProps, +} from "@qualcomm-ui/qds-core/badge" +import {IconOrNode} from "@qualcomm-ui/react/icon" +import type {LucideIconOrElement} from "@qualcomm-ui/react-core/lucide" +import {normalizeProps} from "@qualcomm-ui/react-core/machine" +import { + type ElementRenderProp, + PolymorphicElement, +} from "@qualcomm-ui/react-core/system" +import {mergeProps} from "@qualcomm-ui/utils/merge-props" + +export interface IconBadgeProps + extends QdsIconBadgeProps, + ElementRenderProp<"span"> { + /** + * React {@link https://react.dev/learn/passing-props-to-a-component#passing-jsx-as-children children} prop. + * When provided, overrides the icon prop. + */ + children?: ReactNode + + /** + * {@link https://lucide.dev lucide-react} icon to display in the badge. + */ + icon?: LucideIconOrElement +} + +export function IconBadge({ + children, + disabled, + emphasis, + icon, + size, + variant, + ...restProps +}: IconBadgeProps): ReactElement { + const qdsApi = createQdsIconBadgeApi( + { + disabled, + emphasis, + size, + variant, + }, + normalizeProps, + ) + + const mergedProps = mergeProps(qdsApi.getRootBindings(), restProps) + + return ( + + {children || + (icon ? ( + + ) : null)} + + ) +} diff --git a/packages/frameworks/react/src/badge/index.ts b/packages/frameworks/react/src/badge/index.ts new file mode 100644 index 000000000..de14bf279 --- /dev/null +++ b/packages/frameworks/react/src/badge/index.ts @@ -0,0 +1,4 @@ +export {Badge, type BadgeProps} from "./badge" +export {NumberBadge, type NumberBadgeProps} from "./number-badge" +export {IconBadge, type IconBadgeProps} from "./icon-badge" +export {StatusBadge, type StatusBadgeProps} from "./status-badge" diff --git a/packages/frameworks/react/src/badge/number-badge.tsx b/packages/frameworks/react/src/badge/number-badge.tsx new file mode 100644 index 000000000..9d1b9597f --- /dev/null +++ b/packages/frameworks/react/src/badge/number-badge.tsx @@ -0,0 +1,54 @@ +// Copyright (c) Qualcomm Technologies, Inc. and/or its subsidiaries. +// SPDX-License-Identifier: BSD-3-Clause-Clear + +import type {ReactElement, ReactNode} from "react" + +import { + createQdsNumberBadgeApi, + type QdsNumberBadgeProps as QdsNumberBadgeProps, +} from "@qualcomm-ui/qds-core/badge" +import {normalizeProps} from "@qualcomm-ui/react-core/machine" +import { + type ElementRenderProp, + PolymorphicElement, +} from "@qualcomm-ui/react-core/system" +import {mergeProps} from "@qualcomm-ui/utils/merge-props" + +export interface NumberBadgeProps + extends QdsNumberBadgeProps, + ElementRenderProp<"span"> { + /** + * React {@link https://react.dev/learn/passing-props-to-a-component#passing-jsx-as-children children} prop. + * When provided, overrides type-specific content. + */ + children?: ReactNode +} + +export function NumberBadge({ + children, + disabled, + emphasis, + max, + size, + value, + ...restProps +}: NumberBadgeProps): ReactElement { + const qdsApi = createQdsNumberBadgeApi( + { + disabled, + emphasis, + max, + size, + value, + }, + normalizeProps, + ) + + const mergedProps = mergeProps(qdsApi.getRootBindings(), restProps) + + return ( + + {children ?? qdsApi.displayValue} + + ) +} diff --git a/packages/frameworks/react/src/badge/status-badge.tsx b/packages/frameworks/react/src/badge/status-badge.tsx new file mode 100644 index 000000000..f66dfb54d --- /dev/null +++ b/packages/frameworks/react/src/badge/status-badge.tsx @@ -0,0 +1,41 @@ +// Copyright (c) Qualcomm Technologies, Inc. and/or its subsidiaries. +// SPDX-License-Identifier: BSD-3-Clause-Clear + +import type {ReactElement} from "react" + +import { + createQdsStatusBadgeApi, + type QdsStatusBadgeProps as QdsStatusBadgeProps, +} from "@qualcomm-ui/qds-core/badge" +import {normalizeProps} from "@qualcomm-ui/react-core/machine" +import { + type ElementRenderProp, + PolymorphicElement, +} from "@qualcomm-ui/react-core/system" +import {mergeProps} from "@qualcomm-ui/utils/merge-props" + +export interface StatusBadgeProps + extends QdsStatusBadgeProps, + ElementRenderProp<"span"> {} + +export function StatusBadge({ + disabled, + emphasis, + size, + variant, + ...restProps +}: StatusBadgeProps): ReactElement { + const qdsApi = createQdsStatusBadgeApi( + { + disabled, + emphasis, + size, + variant, + }, + normalizeProps, + ) + + const mergedProps = mergeProps(qdsApi.getRootBindings(), restProps) + + return +} diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 67519f31f..55a3e98a5 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1087,10 +1087,10 @@ importers: version: 10.1.0 eslint-plugin-boundaries: specifier: ^5.0.1 - version: 5.1.0(@typescript-eslint/parser@8.46.2(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3))(eslint@9.37.0(jiti@2.6.1)) + version: 5.1.0(@typescript-eslint/parser@8.46.4(eslint@9.37.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.37.0(jiti@2.6.1)) eslint-plugin-import: specifier: ^2.31.0 - version: 2.32.0(@typescript-eslint/parser@8.46.2(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3))(eslint@9.37.0(jiti@2.6.1)) + version: 2.32.0(@typescript-eslint/parser@8.46.4(eslint@9.37.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.37.0(jiti@2.6.1)) vitest: specifier: ^4.0.8 version: 4.0.9(@types/debug@4.1.12)(@types/node@24.10.1)(@vitest/browser-playwright@4.0.9)(@vitest/ui@4.0.9)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.30.2)(sass-embedded@1.93.3)(sass@1.94.0)(stylus@0.62.0)(terser@5.44.1)(tsx@4.20.6)(yaml@2.8.1) @@ -3318,7 +3318,7 @@ importers: specifier: workspace:^1.0.7 version: link:../../common/core '@qualcomm-ui/qds-core': - specifier: workspace:^1.4.2 + specifier: workspace:^1.5.0 version: link:../../common/qds-core '@qualcomm-ui/tailwind-plugin': specifier: workspace:^1.1.0 @@ -3594,7 +3594,7 @@ importers: specifier: workspace:^1.0.3 version: link:../../common/esbuild '@qualcomm-ui/qds-core': - specifier: workspace:^1.4.2 + specifier: workspace:^1.5.0 version: link:../../common/qds-core '@qualcomm-ui/react-core': specifier: workspace:^1.0.7 @@ -3943,7 +3943,7 @@ importers: specifier: workspace:^1.2.0 version: link:../../common/mdx-common '@qualcomm-ui/react': - specifier: workspace:^1.1.6 + specifier: workspace:^1.2.0 version: link:../react '@qualcomm-ui/react-core': specifier: workspace:^1.0.7 @@ -23206,7 +23206,7 @@ snapshots: sirv: 3.0.2 tinyglobby: 0.2.15 tinyrainbow: 3.0.3 - vitest: 4.0.9(@types/debug@4.1.12)(@types/node@24.9.2)(@vitest/browser-playwright@4.0.9)(@vitest/ui@4.0.9)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.30.2)(sass-embedded@1.93.3)(sass@1.94.0)(stylus@0.62.0)(terser@5.44.1)(tsx@4.20.6)(yaml@2.8.1) + vitest: 4.0.9(@types/debug@4.1.12)(@types/node@24.10.1)(@vitest/browser-playwright@4.0.9)(@vitest/ui@4.0.9)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.30.2)(sass-embedded@1.93.3)(sass@1.94.0)(stylus@0.62.0)(terser@5.44.1)(tsx@4.20.6)(yaml@2.8.1) '@vitest/utils@4.0.9': dependencies: @@ -25033,32 +25033,32 @@ snapshots: transitivePeerDependencies: - supports-color - eslint-module-utils@2.12.1(@typescript-eslint/parser@8.46.2(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3))(eslint-import-resolver-node@0.3.9)(eslint@9.37.0(jiti@2.6.1)): + eslint-module-utils@2.12.1(@typescript-eslint/parser@8.46.2(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3))(eslint-import-resolver-node@0.3.9)(eslint@9.39.1(jiti@2.6.1)): dependencies: debug: 3.2.7 optionalDependencies: '@typescript-eslint/parser': 8.46.2(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3) - eslint: 9.37.0(jiti@2.6.1) + eslint: 9.39.1(jiti@2.6.1) eslint-import-resolver-node: 0.3.9 transitivePeerDependencies: - supports-color - eslint-module-utils@2.12.1(@typescript-eslint/parser@8.46.2(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3))(eslint-import-resolver-node@0.3.9)(eslint@9.39.1(jiti@2.6.1)): + eslint-module-utils@2.12.1(@typescript-eslint/parser@8.46.4(eslint@9.37.0(jiti@2.6.1))(typescript@5.9.3))(eslint-import-resolver-node@0.3.9)(eslint@9.37.0(jiti@2.6.1)): dependencies: debug: 3.2.7 optionalDependencies: - '@typescript-eslint/parser': 8.46.2(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3) - eslint: 9.39.1(jiti@2.6.1) + '@typescript-eslint/parser': 8.46.4(eslint@9.37.0(jiti@2.6.1))(typescript@5.9.3) + eslint: 9.37.0(jiti@2.6.1) eslint-import-resolver-node: 0.3.9 transitivePeerDependencies: - supports-color - eslint-plugin-boundaries@5.1.0(@typescript-eslint/parser@8.46.2(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3))(eslint@9.37.0(jiti@2.6.1)): + eslint-plugin-boundaries@5.1.0(@typescript-eslint/parser@8.46.4(eslint@9.37.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.37.0(jiti@2.6.1)): dependencies: chalk: 4.1.2 eslint: 9.37.0(jiti@2.6.1) eslint-import-resolver-node: 0.3.9 - eslint-module-utils: 2.12.1(@typescript-eslint/parser@8.46.2(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3))(eslint-import-resolver-node@0.3.9)(eslint@9.37.0(jiti@2.6.1)) + eslint-module-utils: 2.12.1(@typescript-eslint/parser@8.46.4(eslint@9.37.0(jiti@2.6.1))(typescript@5.9.3))(eslint-import-resolver-node@0.3.9)(eslint@9.37.0(jiti@2.6.1)) micromatch: 4.0.8 transitivePeerDependencies: - '@typescript-eslint/parser' @@ -25103,7 +25103,7 @@ snapshots: - eslint-import-resolver-webpack - supports-color - eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.46.2(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3))(eslint@9.37.0(jiti@2.6.1)): + eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.46.2(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.1(jiti@2.6.1)): dependencies: '@rtsao/scc': 1.1.0 array-includes: 3.1.9 @@ -25112,9 +25112,9 @@ snapshots: array.prototype.flatmap: 1.3.3 debug: 3.2.7 doctrine: 2.1.0 - eslint: 9.37.0(jiti@2.6.1) + eslint: 9.39.1(jiti@2.6.1) eslint-import-resolver-node: 0.3.9 - eslint-module-utils: 2.12.1(@typescript-eslint/parser@8.46.2(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3))(eslint-import-resolver-node@0.3.9)(eslint@9.37.0(jiti@2.6.1)) + eslint-module-utils: 2.12.1(@typescript-eslint/parser@8.46.2(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3))(eslint-import-resolver-node@0.3.9)(eslint@9.39.1(jiti@2.6.1)) hasown: 2.0.2 is-core-module: 2.16.1 is-glob: 4.0.3 @@ -25132,7 +25132,7 @@ snapshots: - eslint-import-resolver-webpack - supports-color - eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.46.2(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.1(jiti@2.6.1)): + eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.46.4(eslint@9.37.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.37.0(jiti@2.6.1)): dependencies: '@rtsao/scc': 1.1.0 array-includes: 3.1.9 @@ -25141,9 +25141,9 @@ snapshots: array.prototype.flatmap: 1.3.3 debug: 3.2.7 doctrine: 2.1.0 - eslint: 9.39.1(jiti@2.6.1) + eslint: 9.37.0(jiti@2.6.1) eslint-import-resolver-node: 0.3.9 - eslint-module-utils: 2.12.1(@typescript-eslint/parser@8.46.2(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3))(eslint-import-resolver-node@0.3.9)(eslint@9.39.1(jiti@2.6.1)) + eslint-module-utils: 2.12.1(@typescript-eslint/parser@8.46.4(eslint@9.37.0(jiti@2.6.1))(typescript@5.9.3))(eslint-import-resolver-node@0.3.9)(eslint@9.37.0(jiti@2.6.1)) hasown: 2.0.2 is-core-module: 2.16.1 is-glob: 4.0.3 @@ -25155,7 +25155,7 @@ snapshots: string.prototype.trimend: 1.0.9 tsconfig-paths: 3.15.0 optionalDependencies: - '@typescript-eslint/parser': 8.46.2(eslint@9.39.1(jiti@2.6.1))(typescript@5.9.3) + '@typescript-eslint/parser': 8.46.4(eslint@9.37.0(jiti@2.6.1))(typescript@5.9.3) transitivePeerDependencies: - eslint-import-resolver-typescript - eslint-import-resolver-webpack