@umami/react-zen 0.129.0 → 0.130.0

package/dist/index.css

@@ -4854,7 +4854,7 @@ body a.Button_button__YTAxZ {
 }
 
 /* virtual-css:css:a7fa90aea7daca4292e76cc01f7615ea */
-.ToggleGroup_group__NTgyM {
+.ToggleGroup_group__MTMwY {
   font-size: var(--font-size-1);
   color: var(--font-color);
   background-color: var(--background-color);
@@ -4863,12 +4863,12 @@ body a.Button_button__YTAxZ {
   border-radius: var(--border-radius);
   overflow: hidden;
 }
-.ToggleGroup_list__OWIyM {
+.ToggleGroup_list__MzBiM {
   display: flex;
   flex-direction: row;
   align-items: center;
 }
-.ToggleGroup_item__NDJmZ {
+.ToggleGroup_item__ZDA1O {
   color: var(--font-color-muted);
   background-color: var(--background-color);
   font-weight: var(--font-weight-bold);
@@ -4879,16 +4879,22 @@ body a.Button_button__YTAxZ {
   cursor: pointer;
   outline: none;
 }
-.ToggleGroup_item__NDJmZ:not(:first-child) {
+.ToggleGroup_item__ZDA1O:not(:first-child) {
   border-left: var(--border);
 }
-.ToggleGroup_item__NDJmZ:hover {
+.ToggleGroup_item__ZDA1O:hover {
   background-color: var(--highlight-color);
 }
-.ToggleGroup_item__NDJmZ[data-selected] {
+.ToggleGroup_item__ZDA1O[data-selected] {
   color: var(--font-color);
   background-color: var(--highlight-color);
 }
-.ToggleGroup_item__NDJmZ[data-disabled] {
+.ToggleGroup_item__ZDA1O[data-disabled] {
   color: var(--font-color-disabled);
 }
+.ToggleGroup_primary__ODIyM {
+  & .ToggleGroup_item__ZDA1O[data-selected] {
+    color: var(--primary-font-color);
+    background-color: var(--primary-color);
+  }
+}

package/dist/index.d.mts

@@ -673,9 +673,10 @@ interface ToggleGroupProps extends TagGroupProps {
     label?: string;
     value?: string[];
     defaultValue?: string[];
+    variant?: 'primary';
     onChange?: (value: string[]) => void;
 }
-declare function ToggleGroup({ label, value, defaultValue, onChange, className, children, selectionMode, selectedKeys, defaultSelectedKeys, onSelectionChange, ...props }: ToggleGroupProps): react.JSX.Element;
+declare function ToggleGroup({ label, value, defaultValue, variant, onChange, className, children, selectionMode, selectedKeys, defaultSelectedKeys, onSelectionChange, ...props }: ToggleGroupProps): react.JSX.Element;
 interface ToggleGroupItemProps extends TagProps {
 }
 declare function ToggleGroupItem({ className, children, ...props }: ToggleGroupItemProps): react.JSX.Element;

package/dist/index.d.ts

@@ -673,9 +673,10 @@ interface ToggleGroupProps extends TagGroupProps {
     label?: string;
     value?: string[];
     defaultValue?: string[];
+    variant?: 'primary';
     onChange?: (value: string[]) => void;
 }
-declare function ToggleGroup({ label, value, defaultValue, onChange, className, children, selectionMode, selectedKeys, defaultSelectedKeys, onSelectionChange, ...props }: ToggleGroupProps): react.JSX.Element;
+declare function ToggleGroup({ label, value, defaultValue, variant, onChange, className, children, selectionMode, selectedKeys, defaultSelectedKeys, onSelectionChange, ...props }: ToggleGroupProps): react.JSX.Element;
 interface ToggleGroupItemProps extends TagProps {
 }
 declare function ToggleGroupItem({ className, children, ...props }: ToggleGroupItemProps): react.JSX.Element;

package/dist/index.js

@@ -31924,7 +31924,7 @@ function Toggle({ label, children, className, ...props }) {
 var import_classnames52 = __toESM(require_classnames());
 
 // css-modules:E:\dev\umami-react-zen\src\components\ToggleGroup.module.css
-var ToggleGroup_default = { "group": "ToggleGroup_group__NTgyM", "list": "ToggleGroup_list__OWIyM", "item": "ToggleGroup_item__NDJmZ" };
+var ToggleGroup_default = { "group": "ToggleGroup_group__MTMwY", "list": "ToggleGroup_list__MzBiM", "item": "ToggleGroup_item__ZDA1O", "primary": "ToggleGroup_primary__ODIyM" };
 
 // src/components/ToggleGroup.tsx
 var import_jsx_runtime67 = require("react/jsx-runtime");
@@ -31932,6 +31932,7 @@ function ToggleGroup({
   label,
   value,
   defaultValue,
+  variant,
   onChange,
   className,
   children,
@@ -31953,7 +31954,7 @@ function ToggleGroup({
       defaultSelectedKeys: defaultValue || defaultSelectedKeys,
       selectionMode,
       onSelectionChange: handleChange,
-      className: (0, import_classnames52.default)(ToggleGroup_default.group, className),
+      className: (0, import_classnames52.default)(ToggleGroup_default.group, className, variant && ToggleGroup_default[variant]),
       children: [
         label && /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Label2, { children: label }),
         /* @__PURE__ */ (0, import_jsx_runtime67.jsx)($eaf9e70818b436db$export$f9fef0f55402315b, { className: ToggleGroup_default.list, children })

package/dist/index.mjs

@@ -31814,7 +31814,7 @@ function Toggle({ label, children, className, ...props }) {
 var import_classnames52 = __toESM(require_classnames());
 
 // css-modules:E:\dev\umami-react-zen\src\components\ToggleGroup.module.css
-var ToggleGroup_default = { "group": "ToggleGroup_group__NTgyM", "list": "ToggleGroup_list__OWIyM", "item": "ToggleGroup_item__NDJmZ" };
+var ToggleGroup_default = { "group": "ToggleGroup_group__MTMwY", "list": "ToggleGroup_list__MzBiM", "item": "ToggleGroup_item__ZDA1O", "primary": "ToggleGroup_primary__ODIyM" };
 
 // src/components/ToggleGroup.tsx
 import { jsx as jsx67, jsxs as jsxs41 } from "react/jsx-runtime";
@@ -31822,6 +31822,7 @@ function ToggleGroup({
   label,
   value,
   defaultValue,
+  variant,
   onChange,
   className,
   children,
@@ -31843,7 +31844,7 @@ function ToggleGroup({
       defaultSelectedKeys: defaultValue || defaultSelectedKeys,
       selectionMode,
       onSelectionChange: handleChange,
-      className: (0, import_classnames52.default)(ToggleGroup_default.group, className),
+      className: (0, import_classnames52.default)(ToggleGroup_default.group, className, variant && ToggleGroup_default[variant]),
       children: [
         label && /* @__PURE__ */ jsx67(Label2, { children: label }),
         /* @__PURE__ */ jsx67($eaf9e70818b436db$export$f9fef0f55402315b, { className: ToggleGroup_default.list, children })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umami/react-zen",
-  "version": "0.129.0",
+  "version": "0.130.0",
   "description": "Modern, minimalist React component library",
   "author": "Umami <hello@umami.is>",
   "license": "MIT",

package/styles.css

@@ -5172,7 +5172,7 @@ body a.Button_button__YTAxZ {
 }
 
 /* virtual-css:css:a7fa90aea7daca4292e76cc01f7615ea */
-.ToggleGroup_group__NTgyM {
+.ToggleGroup_group__MTMwY {
   font-size: var(--font-size-1);
   color: var(--font-color);
   background-color: var(--background-color);
@@ -5181,12 +5181,12 @@ body a.Button_button__YTAxZ {
   border-radius: var(--border-radius);
   overflow: hidden;
 }
-.ToggleGroup_list__OWIyM {
+.ToggleGroup_list__MzBiM {
   display: flex;
   flex-direction: row;
   align-items: center;
 }
-.ToggleGroup_item__NDJmZ {
+.ToggleGroup_item__ZDA1O {
   color: var(--font-color-muted);
   background-color: var(--background-color);
   font-weight: var(--font-weight-bold);
@@ -5197,16 +5197,22 @@ body a.Button_button__YTAxZ {
   cursor: pointer;
   outline: none;
 }
-.ToggleGroup_item__NDJmZ:not(:first-child) {
+.ToggleGroup_item__ZDA1O:not(:first-child) {
   border-left: var(--border);
 }
-.ToggleGroup_item__NDJmZ:hover {
+.ToggleGroup_item__ZDA1O:hover {
   background-color: var(--highlight-color);
 }
-.ToggleGroup_item__NDJmZ[data-selected] {
+.ToggleGroup_item__ZDA1O[data-selected] {
   color: var(--font-color);
   background-color: var(--highlight-color);
 }
-.ToggleGroup_item__NDJmZ[data-disabled] {
+.ToggleGroup_item__ZDA1O[data-disabled] {
   color: var(--font-color-disabled);
 }
+.ToggleGroup_primary__ODIyM {
+  & .ToggleGroup_item__ZDA1O[data-selected] {
+    color: var(--primary-font-color);
+    background-color: var(--primary-color);
+  }
+}