@phpsoftbox/react-softbox 1.16.1 → 2.1.0

package/README.md

@@ -106,6 +106,19 @@ yarn build
 <Button variant="info" appearance="outline">Info</Button>
 <Button variant="danger" appearance="ghost">Danger</Button>
 <Button variant="primary" size="sm">Small</Button>
+
+<Button.Group aria-label="Режим просмотра">
+  <Button appearance="outline">День</Button>
+  <Button appearance="outline">Неделя</Button>
+  <Button appearance="outline">Месяц</Button>
+</Button.Group>
+```
+
+Custom variants задаются через `--variant-{name}-*` токены:
+
+```tsx
+<Button variant="brand">Brand</Button>
+<Badge variant="brand">Brand</Badge>
 ```
 
 ### Input / FloatLabel
@@ -263,10 +276,15 @@ const collapsible = [
 ```tsx
 <Badge>Default</Badge>
 <Badge variant="primary">Primary</Badge>
+<Badge variant="secondary">Secondary</Badge>
 <Badge variant="info">Info</Badge>
 <Badge variant="success">Success</Badge>
 <Badge variant="warning">Warning</Badge>
 <Badge variant="danger">Danger</Badge>
+<Badge variant="brand">Brand</Badge>
+<Badge variant="warning" className="rounded-circle size-6 p-0 f-2">3</Badge>
+<Badge variant="info" className="border border-info text-uppercase f-2">helper styled</Badge>
+<Badge variant="danger" dot aria-label="Ошибка" className="p-2" />
 ```
 
 ### Typography

package/dist/components/Alert/Alert.d.ts

@@ -11,5 +11,5 @@ type Props = React.HTMLAttributes<HTMLDivElement> & {
     actions?: React.ReactNode;
     onClose?: () => void;
 };
-export default function Alert({ variant, title, icon, iconPlacement, iconBgFilled, actions, onClose, className, children, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+export default function Alert({ variant, title, icon, iconPlacement, iconBgFilled, actions, onClose, className, style, children, ...props }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Alert/Alert.js

@@ -1,12 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styles from './Alert.module.css';
+import { buildAlertVariantStyle, getBuiltinUiVariantClass, isBuiltinUiVariant, mergeStyles, } from '../../utils/uiVariant';
 const classMap = {
     default: styles.default,
     primary: styles.primary,
+    secondary: styles.secondary,
     info: styles.info,
     success: styles.success,
     warning: styles.warning,
     danger: styles.danger,
+    dark: styles.dark,
+    light: styles.light,
+    neutral: styles.neutral,
 };
 const iconPlacementClassMap = {
     top: styles.iconTop,
@@ -16,15 +21,20 @@ const iconPlacementClassMap = {
 const defaultIcons = {
     default: (_jsxs("svg", { viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", strokeWidth: "1.8", "aria-hidden": "true", children: [_jsx("circle", { cx: "10", cy: "10", r: "7.2" }), _jsx("path", { d: "M10 8v4", strokeLinecap: "round" }), _jsx("circle", { cx: "10", cy: "6", r: "0.8", fill: "currentColor", stroke: "none" })] })),
     primary: (_jsxs("svg", { viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", strokeWidth: "1.8", "aria-hidden": "true", children: [_jsx("circle", { cx: "10", cy: "10", r: "7.2" }), _jsx("path", { d: "M10 8v4", strokeLinecap: "round" }), _jsx("circle", { cx: "10", cy: "6", r: "0.8", fill: "currentColor", stroke: "none" })] })),
+    secondary: (_jsxs("svg", { viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", strokeWidth: "1.8", "aria-hidden": "true", children: [_jsx("circle", { cx: "10", cy: "10", r: "7.2" }), _jsx("path", { d: "M10 8v4", strokeLinecap: "round" }), _jsx("circle", { cx: "10", cy: "6", r: "0.8", fill: "currentColor", stroke: "none" })] })),
     info: (_jsxs("svg", { viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", strokeWidth: "1.8", "aria-hidden": "true", children: [_jsx("circle", { cx: "10", cy: "10", r: "7.2" }), _jsx("path", { d: "M10 8v4", strokeLinecap: "round" }), _jsx("circle", { cx: "10", cy: "6", r: "0.8", fill: "currentColor", stroke: "none" })] })),
     success: (_jsxs("svg", { viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", strokeWidth: "1.8", "aria-hidden": "true", children: [_jsx("circle", { cx: "10", cy: "10", r: "7.2" }), _jsx("path", { d: "m6.8 10 2.1 2.2 4.3-4.4", strokeLinecap: "round", strokeLinejoin: "round" })] })),
     warning: (_jsxs("svg", { viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", strokeWidth: "1.8", "aria-hidden": "true", children: [_jsx("path", { d: "M10 3.4 17 16.2a1 1 0 0 1-.88 1.4H3.88A1 1 0 0 1 3 16.2L10 3.4Z", strokeLinejoin: "round" }), _jsx("path", { d: "M10 8v4", strokeLinecap: "round" }), _jsx("circle", { cx: "10", cy: "14.4", r: "0.8", fill: "currentColor", stroke: "none" })] })),
     danger: (_jsxs("svg", { viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", strokeWidth: "1.8", "aria-hidden": "true", children: [_jsx("circle", { cx: "10", cy: "10", r: "7.2" }), _jsx("path", { d: "m7.5 7.5 5 5m0-5-5 5", strokeLinecap: "round" })] })),
+    dark: (_jsxs("svg", { viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", strokeWidth: "1.8", "aria-hidden": "true", children: [_jsx("circle", { cx: "10", cy: "10", r: "7.2" }), _jsx("path", { d: "M10 8v4", strokeLinecap: "round" }), _jsx("circle", { cx: "10", cy: "6", r: "0.8", fill: "currentColor", stroke: "none" })] })),
+    light: (_jsxs("svg", { viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", strokeWidth: "1.8", "aria-hidden": "true", children: [_jsx("circle", { cx: "10", cy: "10", r: "7.2" }), _jsx("path", { d: "M10 8v4", strokeLinecap: "round" }), _jsx("circle", { cx: "10", cy: "6", r: "0.8", fill: "currentColor", stroke: "none" })] })),
+    neutral: (_jsxs("svg", { viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", strokeWidth: "1.8", "aria-hidden": "true", children: [_jsx("circle", { cx: "10", cy: "10", r: "7.2" }), _jsx("path", { d: "M10 8v4", strokeLinecap: "round" }), _jsx("circle", { cx: "10", cy: "6", r: "0.8", fill: "currentColor", stroke: "none" })] })),
 };
-export default function Alert({ variant = 'info', title, icon, iconPlacement = 'top', iconBgFilled = false, actions, onClose, className, children, ...props }) {
+export default function Alert({ variant = 'info', title, icon, iconPlacement = 'top', iconBgFilled = false, actions, onClose, className, style, children, ...props }) {
+    const variantStyle = isBuiltinUiVariant(variant) ? undefined : buildAlertVariantStyle(variant);
     const classes = [
         styles.alert,
-        classMap[variant],
+        getBuiltinUiVariantClass(classMap, variant),
         iconBgFilled ? styles.alertIconBgFilled : null,
         className,
     ].filter(Boolean).join(' ');
@@ -32,7 +42,7 @@ export default function Alert({ variant = 'info', title, icon, iconPlacement = '
         styles.icon,
         iconPlacementClassMap[iconPlacement],
     ].filter(Boolean).join(' ');
-    const resolvedIcon = icon === undefined ? defaultIcons[variant] : icon;
-    return (_jsxs("div", { className: classes, role: "status", ...props, children: [resolvedIcon !== null ? (_jsx("div", { className: iconClasses, "data-alert-icon-placement": iconPlacement, children: resolvedIcon })) : null, _jsxs("div", { className: styles.main, children: [title ? _jsx("div", { className: styles.title, children: title }) : null, children ? _jsx("div", { className: styles.message, children: children }) : null, actions ? _jsx("div", { className: styles.actions, children: actions }) : null] }), onClose ? (_jsx("button", { type: "button", className: styles.close, onClick: onClose, "aria-label": "\u0417\u0430\u043A\u0440\u044B\u0442\u044C", children: "\u00D7" })) : null] }));
+    const resolvedIcon = icon === undefined ? defaultIcons[isBuiltinUiVariant(variant) ? variant : 'default'] : icon;
+    return (_jsxs("div", { className: classes, role: "status", style: mergeStyles(variantStyle, style), ...props, children: [resolvedIcon !== null ? (_jsx("div", { className: iconClasses, "data-alert-icon-placement": iconPlacement, children: resolvedIcon })) : null, _jsxs("div", { className: styles.main, children: [title ? _jsx("div", { className: styles.title, children: title }) : null, children ? _jsx("div", { className: styles.message, children: children }) : null, actions ? _jsx("div", { className: styles.actions, children: actions }) : null] }), onClose ? (_jsx("button", { type: "button", className: styles.close, onClick: onClose, "aria-label": "\u0417\u0430\u043A\u0440\u044B\u0442\u044C", children: "\u00D7" })) : null] }));
 }
 //# sourceMappingURL=Alert.js.map

package/dist/components/Alert/Alert.js.map

@@ -1 +1 @@
-{"version":3,"file":"Alert.js","sourceRoot":"","sources":["../../../src/components/Alert/Alert.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Alert.js","sourceRoot":"","sources":["../../../src/components/Alert/Alert.tsx"],"names":[],"mappings":"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"}

package/dist/components/Alert/Alert.module.css

@@ -3,7 +3,7 @@
   gap: var(--spacing-4);
   align-items: flex-start;
   padding: var(--spacing-4);
-  border-radius: var(--radius-md);
+  border-radius: var(--alert-border-radius, var(--radius-default));
   border: 1px solid transparent;
   background: var(--surface-panel-soft);
   color: var(--color-text);
@@ -34,8 +34,8 @@
   margin-top: 0;
   background: var(--alert-icon-bg, transparent);
   border-right: 1px solid var(--alert-icon-bg-border, transparent);
-  border-top-left-radius: var(--radius-md);
-  border-bottom-left-radius: var(--radius-md);
+  border-top-left-radius: var(--alert-border-radius, var(--radius-default));
+  border-bottom-left-radius: var(--alert-border-radius, var(--radius-default));
 }
 
 .alertIconBgFilled .iconTop,
@@ -123,49 +123,81 @@
 }
 
 .default {
-  border-color: rgba(30, 51, 85, 0.6);
-  box-shadow: 0 0 0 1px rgba(30, 51, 85, 0.2);
-  --alert-icon-color: #9fb2cc;
-  --alert-icon-bg: rgba(159, 178, 204, 0.16);
-  --alert-icon-bg-border: rgba(159, 178, 204, 0.35);
+  border-color: var(--variant-default-border);
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--variant-default-bg) 20%, transparent);
+  --alert-icon-color: var(--variant-default-accent);
+  --alert-icon-bg: var(--variant-default-soft);
+  --alert-icon-bg-border: color-mix(in srgb, var(--variant-default-border) 55%, transparent);
 }
 
 .primary {
-  border-color: rgba(20, 201, 214, 0.5);
-  box-shadow: 0 0 0 1px rgba(20, 201, 214, 0.2);
-  --alert-icon-color: #14c9d6;
-  --alert-icon-bg: rgba(20, 201, 214, 0.16);
-  --alert-icon-bg-border: rgba(20, 201, 214, 0.36);
+  border-color: var(--variant-primary-border);
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--variant-primary-bg) 20%, transparent);
+  --alert-icon-color: var(--variant-primary-bg);
+  --alert-icon-bg: var(--variant-primary-soft);
+  --alert-icon-bg-border: color-mix(in srgb, var(--variant-primary-border) 55%, transparent);
+}
+
+.secondary {
+  border-color: var(--variant-secondary-border);
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--variant-secondary-bg) 20%, transparent);
+  --alert-icon-color: var(--variant-secondary-bg);
+  --alert-icon-bg: var(--variant-secondary-soft);
+  --alert-icon-bg-border: color-mix(in srgb, var(--variant-secondary-border) 55%, transparent);
 }
 
 .info {
-  border-color: rgba(30, 99, 233, 0.4);
-  box-shadow: 0 0 0 1px rgba(30, 99, 233, 0.2);
-  --alert-icon-color: #1e63e9;
-  --alert-icon-bg: rgba(30, 99, 233, 0.16);
-  --alert-icon-bg-border: rgba(30, 99, 233, 0.34);
+  border-color: var(--variant-info-border);
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--variant-info-bg) 20%, transparent);
+  --alert-icon-color: var(--variant-info-bg);
+  --alert-icon-bg: var(--variant-info-soft);
+  --alert-icon-bg-border: color-mix(in srgb, var(--variant-info-border) 55%, transparent);
 }
 
 .success {
-  border-color: rgba(79, 230, 163, 0.5);
-  box-shadow: 0 0 0 1px rgba(79, 230, 163, 0.2);
-  --alert-icon-color: #4fe6a3;
-  --alert-icon-bg: rgba(79, 230, 163, 0.16);
-  --alert-icon-bg-border: rgba(79, 230, 163, 0.36);
+  border-color: var(--variant-success-border);
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--variant-success-bg) 20%, transparent);
+  --alert-icon-color: var(--variant-success-bg);
+  --alert-icon-bg: var(--variant-success-soft);
+  --alert-icon-bg-border: color-mix(in srgb, var(--variant-success-border) 55%, transparent);
 }
 
 .warning {
-  border-color: rgba(246, 200, 106, 0.5);
-  box-shadow: 0 0 0 1px rgba(246, 200, 106, 0.2);
-  --alert-icon-color: #f6c86a;
-  --alert-icon-bg: rgba(246, 200, 106, 0.18);
-  --alert-icon-bg-border: rgba(246, 200, 106, 0.36);
+  border-color: var(--variant-warning-border);
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--variant-warning-bg) 20%, transparent);
+  --alert-icon-color: var(--variant-warning-bg);
+  --alert-icon-bg: var(--variant-warning-soft);
+  --alert-icon-bg-border: color-mix(in srgb, var(--variant-warning-border) 55%, transparent);
 }
 
 .danger {
-  border-color: rgba(255, 107, 107, 0.5);
-  box-shadow: 0 0 0 1px rgba(255, 107, 107, 0.2);
-  --alert-icon-color: #ff6b6b;
-  --alert-icon-bg: rgba(255, 107, 107, 0.16);
-  --alert-icon-bg-border: rgba(255, 107, 107, 0.36);
+  border-color: var(--variant-danger-border);
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--variant-danger-bg) 20%, transparent);
+  --alert-icon-color: var(--variant-danger-bg);
+  --alert-icon-bg: var(--variant-danger-soft);
+  --alert-icon-bg-border: color-mix(in srgb, var(--variant-danger-border) 55%, transparent);
+}
+
+.dark {
+  border-color: var(--variant-dark-border);
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--variant-dark-bg) 20%, transparent);
+  --alert-icon-color: var(--variant-dark-text);
+  --alert-icon-bg: color-mix(in srgb, var(--variant-dark-bg) 75%, transparent);
+  --alert-icon-bg-border: var(--variant-dark-border);
+}
+
+.light {
+  border-color: var(--variant-light-border);
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--variant-light-bg) 30%, transparent);
+  --alert-icon-color: var(--variant-light-text);
+  --alert-icon-bg: color-mix(in srgb, var(--variant-light-bg) 80%, transparent);
+  --alert-icon-bg-border: var(--variant-light-border);
+}
+
+.neutral {
+  border-color: var(--variant-neutral-border);
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--variant-neutral-bg) 20%, transparent);
+  --alert-icon-color: var(--variant-neutral-bg);
+  --alert-icon-bg: var(--variant-neutral-soft);
+  --alert-icon-bg-border: color-mix(in srgb, var(--variant-neutral-border) 55%, transparent);
 }

package/dist/components/Badge/Badge.d.ts

@@ -2,9 +2,12 @@ import React from 'react';
 import type { UiVariant } from '../../types';
 type BadgeVariant = UiVariant;
 type BadgeSize = 'sm' | 'md' | 'lg';
+type BadgeShape = 'rounded' | 'pill' | 'circle';
 type Props = React.HTMLAttributes<HTMLSpanElement> & {
     variant?: BadgeVariant;
     size?: BadgeSize;
+    shape?: BadgeShape;
+    dot?: boolean;
 };
-export default function Badge({ variant, size, className, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+export default function Badge({ variant, size, shape, dot, className, style, children, ...props }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Badge/Badge.js

@@ -1,20 +1,44 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import styles from './Badge.module.css';
+import { buildBadgeVariantStyle, getBuiltinUiVariantClass, isBuiltinUiVariant, mergeStyles, } from '../../utils/uiVariant';
 const classMap = {
     default: styles.default,
     primary: styles.primary,
+    secondary: styles.secondary,
     info: styles.info,
     success: styles.success,
     warning: styles.warning,
     danger: styles.danger,
+    dark: styles.dark,
+    light: styles.light,
+    neutral: styles.neutral,
 };
 const sizeMap = {
     sm: styles.sizeSm,
     md: styles.sizeMd,
     lg: styles.sizeLg,
 };
-export default function Badge({ variant = 'default', size = 'md', className, ...props }) {
-    const classes = [styles.badge, classMap[variant], sizeMap[size], className].filter(Boolean).join(' ');
-    return _jsx("span", { className: classes, ...props });
+const shapeMap = {
+    rounded: styles.shapeRounded,
+    pill: styles.shapePill,
+    circle: styles.shapeCircle,
+};
+const isEmptyChildren = (children) => (children === null
+    || children === undefined
+    || children === ''
+    || (Array.isArray(children) && children.length === 0));
+export default function Badge({ variant = 'default', size = 'md', shape = 'rounded', dot = false, className, style, children, ...props }) {
+    const isDot = dot || isEmptyChildren(children);
+    const resolvedShape = isDot ? 'circle' : shape;
+    const variantStyle = isBuiltinUiVariant(variant) ? undefined : buildBadgeVariantStyle(variant);
+    const classes = [
+        styles.badge,
+        getBuiltinUiVariantClass(classMap, variant),
+        sizeMap[size],
+        shapeMap[resolvedShape],
+        isDot ? styles.dot : null,
+        className,
+    ].filter(Boolean).join(' ');
+    return _jsx("span", { className: classes, style: mergeStyles(variantStyle, style), ...props, children: isDot ? null : children });
 }
 //# sourceMappingURL=Badge.js.map

package/dist/components/Badge/Badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.js","sourceRoot":"","sources":["../../../src/components/Badge/Badge.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,MAAM,oBAAoB,CAAC;AAWxC,MAAM,QAAQ,GAAiC;IAC7C,OAAO,EAAE,MAAM,CAAC,OAAO;IACvB,OAAO,EAAE,MAAM,CAAC,OAAO;IACvB,IAAI,EAAE,MAAM,CAAC,IAAI;IACjB,OAAO,EAAE,MAAM,CAAC,OAAO;IACvB,OAAO,EAAE,MAAM,CAAC,OAAO;IACvB,MAAM,EAAE,MAAM,CAAC,MAAM;CACtB,CAAC;AAEF,MAAM,OAAO,GAA8B;IACzC,EAAE,EAAE,MAAM,CAAC,MAAM;IACjB,EAAE,EAAE,MAAM,CAAC,MAAM;IACjB,EAAE,EAAE,MAAM,CAAC,MAAM;CAClB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAAE,OAAO,GAAG,SAAS,EAAE,IAAI,GAAG,IAAI,EAAE,SAAS,EAAE,GAAG,KAAK,EAAS;IAC5F,MAAM,OAAO,GAAG,CAAC,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC,IAAI,CAAC,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAEtG,OAAO,eAAM,SAAS,EAAE,OAAO,KAAM,KAAK,GAAI,CAAC;AACjD,CAAC"}
+{"version":3,"file":"Badge.js","sourceRoot":"","sources":["../../../src/components/Badge/Badge.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,MAAM,oBAAoB,CAAC;AAExC,OAAO,EACL,sBAAsB,EACtB,wBAAwB,EACxB,kBAAkB,EAClB,WAAW,GACZ,MAAM,uBAAuB,CAAC;AAa/B,MAAM,QAAQ,GAAqC;IACjD,OAAO,EAAE,MAAM,CAAC,OAAO;IACvB,OAAO,EAAE,MAAM,CAAC,OAAO;IACvB,SAAS,EAAE,MAAM,CAAC,SAAS;IAC3B,IAAI,EAAE,MAAM,CAAC,IAAI;IACjB,OAAO,EAAE,MAAM,CAAC,OAAO;IACvB,OAAO,EAAE,MAAM,CAAC,OAAO;IACvB,MAAM,EAAE,MAAM,CAAC,MAAM;IACrB,IAAI,EAAE,MAAM,CAAC,IAAI;IACjB,KAAK,EAAE,MAAM,CAAC,KAAK;IACnB,OAAO,EAAE,MAAM,CAAC,OAAO;CACxB,CAAC;AAEF,MAAM,OAAO,GAA8B;IACzC,EAAE,EAAE,MAAM,CAAC,MAAM;IACjB,EAAE,EAAE,MAAM,CAAC,MAAM;IACjB,EAAE,EAAE,MAAM,CAAC,MAAM;CAClB,CAAC;AAEF,MAAM,QAAQ,GAA+B;IAC3C,OAAO,EAAE,MAAM,CAAC,YAAY;IAC5B,IAAI,EAAE,MAAM,CAAC,SAAS;IACtB,MAAM,EAAE,MAAM,CAAC,WAAW;CAC3B,CAAC;AAEF,MAAM,eAAe,GAAG,CAAC,QAAyB,EAAE,EAAE,CAAC,CACrD,QAAQ,KAAK,IAAI;OACd,QAAQ,KAAK,SAAS;OACtB,QAAQ,KAAK,EAAE;OACf,CAAC,KAAK,CAAC,OAAO,CAAC,QAAQ,CAAC,IAAI,QAAQ,CAAC,MAAM,KAAK,CAAC,CAAC,CACtD,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAC5B,OAAO,GAAG,SAAS,EACnB,IAAI,GAAG,IAAI,EACX,KAAK,GAAG,SAAS,EACjB,GAAG,GAAG,KAAK,EACX,SAAS,EACT,KAAK,EACL,QAAQ,EACR,GAAG,KAAK,EACF;IACN,MAAM,KAAK,GAAG,GAAG,IAAI,eAAe,CAAC,QAAQ,CAAC,CAAC;IAC/C,MAAM,aAAa,GAAG,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC;IAC/C,MAAM,YAAY,GAAG,kBAAkB,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,sBAAsB,CAAC,OAAO,CAAC,CAAC;IAC/F,MAAM,OAAO,GAAG;QACd,MAAM,CAAC,KAAK;QACZ,wBAAwB,CAAC,QAAQ,EAAE,OAAO,CAAC;QAC3C,OAAO,CAAC,IAAI,CAAC;QACb,QAAQ,CAAC,aAAa,CAAC;QACvB,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI;QACzB,SAAS;KACV,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAE5B,OAAO,eAAM,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,WAAW,CAAC,YAAY,EAAE,KAAK,CAAC,KAAM,KAAK,YAAG,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,QAAQ,GAAQ,CAAC;AACxH,CAAC"}

package/dist/components/Badge/Badge.module.css

@@ -1,65 +1,122 @@
 .badge {
   display: inline-flex;
   align-items: center;
+  justify-content: center;
   gap: 6px;
-  padding: 4px 10px;
-  border-radius: 999px;
-  font-size: 12px;
+  padding: var(--badge-padding-y, 0.25rem) var(--badge-padding-x, 0.5rem);
+  border-radius: var(--badge-border-radius, var(--radius-default));
   line-height: 1;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  border: 1px solid transparent;
+  border: 0 solid var(--ui-border-color, var(--badge-border, transparent));
+  background: var(--badge-bg, var(--variant-default-bg));
+  color: var(--badge-color, var(--variant-default-text));
+  --ui-border-color: var(--badge-border, var(--variant-default-border));
+  min-width: 0;
+  box-sizing: border-box;
 }
 
 .sizeSm {
-  padding: 2px 8px;
-  font-size: 10px;
-  letter-spacing: 0.1em;
+  --badge-padding-y: 0.125rem;
+  --badge-padding-x: 0.375rem;
+  --badge-circle-size: 1.125rem;
+  --badge-dot-padding: 0.25rem;
 }
 
 .sizeMd {
-  padding: 4px 10px;
-  font-size: 12px;
+  --badge-padding-y: 0.25rem;
+  --badge-padding-x: 0.5rem;
+  --badge-circle-size: 1.375rem;
+  --badge-dot-padding: 0.3125rem;
 }
 
 .sizeLg {
-  padding: 6px 12px;
-  font-size: 13px;
-  letter-spacing: 0.07em;
+  --badge-padding-y: 0.375rem;
+  --badge-padding-x: 0.75rem;
+  --badge-circle-size: 1.625rem;
+  --badge-dot-padding: 0.375rem;
+}
+
+.shapeRounded {
+  border-radius: var(--badge-border-radius, var(--radius-default));
+}
+
+.shapePill {
+  border-radius: var(--badge-pill-border-radius, var(--radius-pill));
+}
+
+.shapeCircle {
+  width: var(--badge-circle-size, 1.375rem);
+  min-width: var(--badge-circle-size, 1.375rem);
+  height: var(--badge-circle-size, 1.375rem);
+  padding: 0;
+  border-radius: var(--badge-circle-border-radius, var(--radius-circle));
+  overflow: hidden;
+}
+
+.dot {
+  width: 0;
+  min-width: 0;
+  height: 0;
+  padding: var(--badge-dot-padding, 0.3125rem);
+  border-radius: var(--badge-circle-border-radius, var(--radius-circle));
+  flex: 0 0 auto;
 }
 
 .default {
-  background: var(--badge-default-bg, #1e3355);
-  color: var(--badge-default-color, var(--color-muted));
-  border-color: var(--badge-default-border, #2b4268);
+  --badge-bg: var(--variant-default-bg);
+  --badge-color: var(--variant-default-text);
+  --badge-border: var(--variant-default-border);
 }
 
 .primary {
-  background: var(--badge-primary-bg, #0f3a2d);
-  color: var(--badge-primary-color, var(--color-mint));
-  border-color: var(--badge-primary-border, #1a6a4f);
+  --badge-bg: var(--variant-primary-bg);
+  --badge-color: var(--variant-primary-text);
+  --badge-border: var(--variant-primary-border);
+}
+
+.secondary {
+  --badge-bg: var(--variant-secondary-bg);
+  --badge-color: var(--variant-secondary-text);
+  --badge-border: var(--variant-secondary-border);
 }
 
 .info {
-  background: var(--badge-info-bg, #122a4d);
-  color: var(--badge-info-color, #9cc0ff);
-  border-color: var(--badge-info-border, #264a8b);
+  --badge-bg: var(--variant-info-bg);
+  --badge-color: var(--variant-info-text);
+  --badge-border: var(--variant-info-border);
 }
 
 .success {
-  background: var(--badge-success-bg, #103b2a);
-  color: var(--badge-success-color, var(--color-mint));
-  border-color: var(--badge-success-border, #1f6b4a);
+  --badge-bg: var(--variant-success-bg);
+  --badge-color: var(--variant-success-text);
+  --badge-border: var(--variant-success-border);
 }
 
 .warning {
-  background: var(--badge-warning-bg, #5a4318);
-  color: var(--badge-warning-color, #f6c86a);
-  border-color: var(--badge-warning-border, #8b6425);
+  --badge-bg: var(--variant-warning-bg);
+  --badge-color: var(--variant-warning-text);
+  --badge-border: var(--variant-warning-border);
 }
 
 .danger {
-  background: var(--badge-danger-bg, #4c2222);
-  color: var(--badge-danger-color, #ff6b6b);
-  border-color: var(--badge-danger-border, #7a3030);
+  --badge-bg: var(--variant-danger-bg);
+  --badge-color: var(--variant-danger-text);
+  --badge-border: var(--variant-danger-border);
+}
+
+.dark {
+  --badge-bg: var(--variant-dark-bg);
+  --badge-color: var(--variant-dark-text);
+  --badge-border: var(--variant-dark-border);
+}
+
+.light {
+  --badge-bg: var(--variant-light-bg);
+  --badge-color: var(--variant-light-text);
+  --badge-border: var(--variant-light-border);
+}
+
+.neutral {
+  --badge-bg: var(--variant-neutral-bg);
+  --badge-color: var(--variant-neutral-text);
+  --badge-border: var(--variant-neutral-border);
 }

package/dist/components/Button/Button.d.ts

@@ -3,10 +3,19 @@ import type { UiVariant } from '../../types';
 type ButtonVariant = UiVariant;
 type ButtonAppearance = 'solid' | 'outline' | 'ghost';
 type ButtonSize = 'sm' | 'md' | 'lg';
+type ButtonGroupOrientation = 'horizontal' | 'vertical';
 type Props = React.ButtonHTMLAttributes<HTMLButtonElement> & {
     variant?: ButtonVariant | 'ghost' | 'outline';
     appearance?: ButtonAppearance;
     size?: ButtonSize;
 };
-export default function Button({ variant, appearance, size, className, ...props }: Props): import("react/jsx-runtime").JSX.Element;
-export {};
+type ButtonGroupProps = React.HTMLAttributes<HTMLDivElement> & {
+    orientation?: ButtonGroupOrientation;
+    stretch?: boolean;
+};
+declare function ButtonBase({ variant, appearance, size, className, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+declare function ButtonGroup({ orientation, stretch, className, role, ...props }: ButtonGroupProps): import("react/jsx-runtime").JSX.Element;
+declare const Button: typeof ButtonBase & {
+    Group: typeof ButtonGroup;
+};
+export default Button;

package/dist/components/Button/Button.js

@@ -1,11 +1,16 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { buildButtonVariantStyle, getBuiltinUiVariantClass, isBuiltinUiVariant, mergeStyles, } from '../../utils/uiVariant';
 const variantClass = {
     default: 'btn-default',
     primary: 'btn-primary',
+    secondary: 'btn-secondary',
     info: 'btn-info',
     success: 'btn-success',
     warning: 'btn-warning',
     danger: 'btn-danger',
+    dark: 'btn-dark',
+    light: 'btn-light',
+    neutral: 'btn-neutral',
 };
 const appearanceClass = {
     solid: 'btn-solid',
@@ -18,19 +23,44 @@ const sizeClass = {
     lg: 'btn-lg',
 };
 const normalizeVariant = (variant, appearance) => {
-    if (variant === 'ghost' || variant === 'outline') {
-        return { variant: 'primary', appearance: variant };
+    if (variant === 'ghost') {
+        return { variant: 'primary', appearance: 'ghost' };
+    }
+    if (variant === 'outline') {
+        return { variant: 'primary', appearance: 'outline' };
     }
     return {
         variant: variant ?? 'primary',
         appearance: appearance ?? 'solid',
     };
 };
-export default function Button({ variant, appearance, size = 'md', className, ...props }) {
+function ButtonBase({ variant, appearance, size = 'md', className, ...props }) {
     const resolved = normalizeVariant(variant, appearance);
-    const classes = ['btn', variantClass[resolved.variant], appearanceClass[resolved.appearance], sizeClass[size], className]
+    const variantStyle = isBuiltinUiVariant(resolved.variant) ? undefined : buildButtonVariantStyle(resolved.variant);
+    const classes = [
+        'btn',
+        getBuiltinUiVariantClass(variantClass, resolved.variant),
+        appearanceClass[resolved.appearance],
+        sizeClass[size],
+        className,
+    ]
+        .filter(Boolean)
+        .join(' ');
+    return _jsx("button", { className: classes, ...props, style: mergeStyles(variantStyle, props.style) });
+}
+function ButtonGroup({ orientation = 'horizontal', stretch = false, className, role = 'group', ...props }) {
+    const classes = [
+        'btn-group',
+        orientation === 'vertical' ? 'btn-group-vertical' : 'btn-group-horizontal',
+        stretch ? 'btn-group-stretch' : null,
+        className,
+    ]
         .filter(Boolean)
         .join(' ');
-    return _jsx("button", { className: classes, ...props });
+    return _jsx("div", { className: classes, role: role, ...props });
 }
+const Button = Object.assign(ButtonBase, {
+    Group: ButtonGroup,
+});
+export default Button;
 //# sourceMappingURL=Button.js.map

package/dist/components/Button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":";AAaA,MAAM,YAAY,GAAkC;IAClD,OAAO,EAAE,aAAa;IACtB,OAAO,EAAE,aAAa;IACtB,IAAI,EAAE,UAAU;IAChB,OAAO,EAAE,aAAa;IACtB,OAAO,EAAE,aAAa;IACtB,MAAM,EAAE,YAAY;CACrB,CAAC;AAEF,MAAM,eAAe,GAAqC;IACxD,KAAK,EAAE,WAAW;IAClB,OAAO,EAAE,aAAa;IACtB,KAAK,EAAE,WAAW;CACnB,CAAC;AAEF,MAAM,SAAS,GAA+B;IAC5C,EAAE,EAAE,QAAQ;IACZ,EAAE,EAAE,QAAQ;IACZ,EAAE,EAAE,QAAQ;CACb,CAAC;AAEF,MAAM,gBAAgB,GAAG,CAAC,OAA6C,EAAE,UAA6B,EAAE,EAAE;IACxG,IAAI,OAAO,KAAK,OAAO,IAAI,OAAO,KAAK,SAAS,EAAE,CAAC;QACjD,OAAO,EAAE,OAAO,EAAE,SAA0B,EAAE,UAAU,EAAE,OAAO,EAAE,CAAC;IACtE,CAAC;IAED,OAAO;QACL,OAAO,EAAE,OAAO,IAAI,SAAS;QAC7B,UAAU,EAAE,UAAU,IAAI,OAAO;KAClC,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAAE,OAAO,EAAE,UAAU,EAAE,IAAI,GAAG,IAAI,EAAE,SAAS,EAAE,GAAG,KAAK,EAAS;IAC7F,MAAM,QAAQ,GAAG,gBAAgB,CAAC,OAAO,EAAE,UAAU,CAAC,CAAC;IACvD,MAAM,OAAO,GAAG,CAAC,KAAK,EAAE,YAAY,CAAC,QAAQ,CAAC,OAAO,CAAC,EAAE,eAAe,CAAC,QAAQ,CAAC,UAAU,CAAC,EAAE,SAAS,CAAC,IAAI,CAAC,EAAE,SAAS,CAAC;SACtH,MAAM,CAAC,OAAO,CAAC;SACf,IAAI,CAAC,GAAG,CAAC,CAAC;IAEb,OAAO,iBAAQ,SAAS,EAAE,OAAO,KAAM,KAAK,GAAI,CAAC;AACnD,CAAC"}
+{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"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"}

package/dist/components/Card/Card.d.ts

@@ -21,7 +21,9 @@ type CardToolbarProps = React.HTMLAttributes<HTMLDivElement> & {
     align?: 'left' | 'right' | 'between';
     buttonHideLabelOn?: 'never' | 'md';
 };
-type CardToolbarGroupProps = React.HTMLAttributes<HTMLDivElement>;
+type CardToolbarGroupProps = React.HTMLAttributes<HTMLDivElement> & {
+    attached?: boolean;
+};
 type CardToolbarButtonBaseProps = Omit<React.ComponentProps<typeof Button>, 'children'> & {
     icon?: React.ReactNode;
     label?: React.ReactNode;

package/dist/components/Card/Card.js

@@ -150,9 +150,15 @@ function CardToolbarButton({ icon, label, hideLabelOn, className, ...props }) {
         .join(' ');
     return (_jsxs(Button, { size: "sm", appearance: "outline", className: classes, ...props, children: [hasIcon ? _jsx("span", { className: styles.toolbarButtonIcon, children: icon }) : null, hasBoth ? _jsx("span", { className: styles.toolbarButtonSeparator, "aria-hidden": "true" }) : null, hasLabel ? (_jsx("span", { className: styles.toolbarButtonLabel, children: label })) : null] }));
 }
-function CardToolbarGroup({ className, ...props }) {
-    const classes = [styles.toolbarGroup, className].filter(Boolean).join(' ');
-    return _jsx("div", { className: classes, ...props });
+function CardToolbarGroup({ attached = false, className, role, ...props }) {
+    const classes = [
+        styles.toolbarGroup,
+        attached ? styles.toolbarGroupAttached : null,
+        attached ? 'btn-group btn-group-horizontal' : null,
+        className,
+    ].filter(Boolean).join(' ');
+    const resolvedRole = role ?? (attached ? 'group' : undefined);
+    return _jsx("div", { className: classes, role: resolvedRole, ...props });
 }
 const CardToolbar = Object.assign(CardToolbarBase, {
     Group: CardToolbarGroup,