@umami/react-zen 0.85.0 → 0.87.0

package/dist/index.css

@@ -4217,8 +4217,8 @@ body a.Button_button__NDYwM {
 }
 
 /* virtual-css:css:a7fa90aea7daca4292e76cc01f7615ea */
-.ToggleGroup_group__Y2YyN {
-  font-size: var(--font-size);
+.ToggleGroup_group__OWVhM {
+  font-size: var(--font-size-1);
   color: var(--font-color);
   background-color: var(--background-color);
   box-shadow: var(--box-shadow);
@@ -4226,12 +4226,12 @@ body a.Button_button__NDYwM {
   border-radius: var(--border-radius);
   overflow: hidden;
 }
-.ToggleGroup_list__MjNjO {
+.ToggleGroup_list__NWU3Y {
   display: flex;
   flex-direction: row;
   align-items: center;
 }
-.ToggleGroup_item__YTNhN {
+.ToggleGroup_item__OTAwZ {
   background-color: var(--background-color);
   display: flex;
   align-items: center;
@@ -4240,14 +4240,16 @@ body a.Button_button__NDYwM {
   cursor: pointer;
   outline: none;
 }
-.ToggleGroup_item__YTNhN:not(:first-child) {
+.ToggleGroup_item__OTAwZ:not(:first-child) {
   border-left: var(--border);
 }
-.ToggleGroup_item__YTNhN:hover {
+.ToggleGroup_item__OTAwZ:hover {
   background-color: var(--highlight-color);
 }
-.ToggleGroup_item__YTNhN[data-selected] {
+.ToggleGroup_item__OTAwZ[data-selected] {
   font-weight: 700;
   background-color: var(--highlight-color);
-  font-size-adjust: 0.5;
+}
+.ToggleGroup_item__OTAwZ[data-disabled] {
+  color: var(--font-color-disabled);
 }

package/dist/index.d.ts

@@ -965,9 +965,11 @@ declare module '@umami/react-zen/ToggleGroup' {
     import { TagGroupProps, TagProps } from 'react-aria-components';
     export interface ToggleGroupProps extends TagGroupProps {
         label?: string;
-        onChange?: (value: string | string[]) => void;
+        value?: string[];
+        defaultValue?: string[];
+        onChange?: (value: string[]) => void;
     }
-    function ToggleGroup({ label, className, children, selectionMode, onChange, ...props }: ToggleGroupProps): import("react").JSX.Element;
+    function ToggleGroup({ label, value, defaultValue, onChange, className, children, selectionMode, selectedKeys, defaultSelectedKeys, onSelectionChange, ...props }: ToggleGroupProps): import("react").JSX.Element;
     export interface ToggleGroupItemProps extends TagProps {
     }
     function ToggleGroupItem({ className, children, ...props }: ToggleGroupItemProps): import("react").JSX.Element;

package/dist/index.js

@@ -31371,25 +31371,33 @@ var Toggle = (0, import_react194.forwardRef)(
 var import_classnames51 = __toESM(require_classnames());
 
 // css-modules:E:\dev\umami-react-zen\src\components\ToggleGroup.module.css
-var ToggleGroup_default = { "group": "ToggleGroup_group__Y2YyN", "list": "ToggleGroup_list__MjNjO", "item": "ToggleGroup_item__YTNhN" };
+var ToggleGroup_default = { "group": "ToggleGroup_group__OWVhM", "list": "ToggleGroup_list__NWU3Y", "item": "ToggleGroup_item__OTAwZ" };
 
 // src/components/ToggleGroup.tsx
 var import_jsx_runtime62 = require("react/jsx-runtime");
 function ToggleGroup({
   label,
+  value,
+  defaultValue,
+  onChange,
   className,
   children,
   selectionMode = "single",
-  onChange,
+  selectedKeys,
+  defaultSelectedKeys,
+  onSelectionChange,
   ...props
 }) {
   const handleChange = (keys) => {
+    onSelectionChange?.(keys);
     onChange?.(Array.from(keys).map((k) => k.toString()));
   };
   return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(
     $eaf9e70818b436db$export$67ea30858aaf75e3,
     {
       ...props,
+      selectedKeys: value || selectedKeys,
+      defaultSelectedKeys: defaultValue || defaultSelectedKeys,
       selectionMode,
       onSelectionChange: handleChange,
       className: (0, import_classnames51.default)(ToggleGroup_default.group, className),

package/dist/index.mjs

@@ -31264,25 +31264,33 @@ var Toggle = forwardRef13(
 var import_classnames51 = __toESM(require_classnames());
 
 // css-modules:E:\dev\umami-react-zen\src\components\ToggleGroup.module.css
-var ToggleGroup_default = { "group": "ToggleGroup_group__Y2YyN", "list": "ToggleGroup_list__MjNjO", "item": "ToggleGroup_item__YTNhN" };
+var ToggleGroup_default = { "group": "ToggleGroup_group__OWVhM", "list": "ToggleGroup_list__NWU3Y", "item": "ToggleGroup_item__OTAwZ" };
 
 // src/components/ToggleGroup.tsx
 import { jsx as jsx62, jsxs as jsxs37 } from "react/jsx-runtime";
 function ToggleGroup({
   label,
+  value,
+  defaultValue,
+  onChange,
   className,
   children,
   selectionMode = "single",
-  onChange,
+  selectedKeys,
+  defaultSelectedKeys,
+  onSelectionChange,
   ...props
 }) {
   const handleChange = (keys) => {
+    onSelectionChange?.(keys);
     onChange?.(Array.from(keys).map((k) => k.toString()));
   };
   return /* @__PURE__ */ jsxs37(
     $eaf9e70818b436db$export$67ea30858aaf75e3,
     {
       ...props,
+      selectedKeys: value || selectedKeys,
+      defaultSelectedKeys: defaultValue || defaultSelectedKeys,
       selectionMode,
       onSelectionChange: handleChange,
       className: (0, import_classnames51.default)(ToggleGroup_default.group, className),

package/package.json

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

package/styles.css

@@ -4537,8 +4537,8 @@ body a.Button_button__NDYwM {
 }
 
 /* virtual-css:css:a7fa90aea7daca4292e76cc01f7615ea */
-.ToggleGroup_group__Y2YyN {
-  font-size: var(--font-size);
+.ToggleGroup_group__OWVhM {
+  font-size: var(--font-size-1);
   color: var(--font-color);
   background-color: var(--background-color);
   box-shadow: var(--box-shadow);
@@ -4546,12 +4546,12 @@ body a.Button_button__NDYwM {
   border-radius: var(--border-radius);
   overflow: hidden;
 }
-.ToggleGroup_list__MjNjO {
+.ToggleGroup_list__NWU3Y {
   display: flex;
   flex-direction: row;
   align-items: center;
 }
-.ToggleGroup_item__YTNhN {
+.ToggleGroup_item__OTAwZ {
   background-color: var(--background-color);
   display: flex;
   align-items: center;
@@ -4560,14 +4560,16 @@ body a.Button_button__NDYwM {
   cursor: pointer;
   outline: none;
 }
-.ToggleGroup_item__YTNhN:not(:first-child) {
+.ToggleGroup_item__OTAwZ:not(:first-child) {
   border-left: var(--border);
 }
-.ToggleGroup_item__YTNhN:hover {
+.ToggleGroup_item__OTAwZ:hover {
   background-color: var(--highlight-color);
 }
-.ToggleGroup_item__YTNhN[data-selected] {
+.ToggleGroup_item__OTAwZ[data-selected] {
   font-weight: 700;
   background-color: var(--highlight-color);
-  font-size-adjust: 0.5;
+}
+.ToggleGroup_item__OTAwZ[data-disabled] {
+  color: var(--font-color-disabled);
 }