@umami/react-zen 0.86.0 → 0.88.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

@@ -764,7 +764,8 @@ declare module '@umami/react-zen/SearchField' {
 }
 
 declare module '@umami/react-zen/Select' {
-    import { PopoverProps, SelectProps as AriaSelectProps } from 'react-aria-components';
+    import { ReactNode } from 'react';
+    import { PopoverProps, SelectProps as AriaSelectProps, SelectValueRenderProps } from 'react-aria-components';
     import { ListProps } from '@umami/react-zen/List';
     interface SelectProps extends AriaSelectProps<HTMLSelectElement> {
         items?: any[];
@@ -777,6 +778,9 @@ declare module '@umami/react-zen/Select' {
         onChange?: (e: any) => void;
         listProps?: ListProps;
         popoverProps?: PopoverProps;
+        renderValue?: ReactNode | ((values: SelectValueRenderProps<object> & {
+            defaultChildren: ReactNode;
+        }) => ReactNode);
     }
     const Select: import("react").ForwardRefExoticComponent<SelectProps & import("react").RefAttributes<any>>;
     export { Select };
@@ -967,7 +971,7 @@ declare module '@umami/react-zen/ToggleGroup' {
         label?: string;
         value?: string[];
         defaultValue?: string[];
-        onChange?: (value: string | string[]) => void;
+        onChange?: (value: string[]) => void;
     }
     function ToggleGroup({ label, value, defaultValue, onChange, className, children, selectionMode, selectedKeys, defaultSelectedKeys, onSelectionChange, ...props }: ToggleGroupProps): import("react").JSX.Element;
     export interface ToggleGroupItemProps extends TagProps {

package/dist/index.js

@@ -31026,6 +31026,7 @@ var Select2 = (0, import_react189.forwardRef)(
     onChange,
     listProps,
     popoverProps,
+    renderValue,
     className,
     children,
     ...props
@@ -31045,7 +31046,7 @@ var Select2 = (0, import_react189.forwardRef)(
         children: [
           label && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Label2, { children: label }),
           /* @__PURE__ */ (0, import_jsx_runtime53.jsx)($d2b4bc8c273e7be6$export$353f5b6fc5456de1, { className: (0, import_classnames43.default)(input_default.input, className), children: /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(Row, { justifyContent: "space-between", gap: "3", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime53.jsx)($82d7e5349645de74$export$e288731fd71264f0, {}),
+            /* @__PURE__ */ (0, import_jsx_runtime53.jsx)($82d7e5349645de74$export$e288731fd71264f0, { children: renderValue }),
             /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Icon, { rotate: 90, size: "xs", className: input_default.icon, children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Icons.Chevron, {}) }) })
           ] }) }),
           /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Popover2, { ...popoverProps, children: /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(Column, { className: Select_default.popover, children: [
@@ -31371,7 +31372,7 @@ 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");

package/dist/index.mjs

@@ -30919,6 +30919,7 @@ var Select2 = forwardRef9(
     onChange,
     listProps,
     popoverProps,
+    renderValue,
     className,
     children,
     ...props
@@ -30938,7 +30939,7 @@ var Select2 = forwardRef9(
         children: [
           label && /* @__PURE__ */ jsx53(Label2, { children: label }),
           /* @__PURE__ */ jsx53($d2b4bc8c273e7be6$export$353f5b6fc5456de1, { className: (0, import_classnames43.default)(input_default.input, className), children: /* @__PURE__ */ jsxs30(Row, { justifyContent: "space-between", gap: "3", children: [
-            /* @__PURE__ */ jsx53($82d7e5349645de74$export$e288731fd71264f0, {}),
+            /* @__PURE__ */ jsx53($82d7e5349645de74$export$e288731fd71264f0, { children: renderValue }),
             /* @__PURE__ */ jsx53("span", { "aria-hidden": "true", children: /* @__PURE__ */ jsx53(Icon, { rotate: 90, size: "xs", className: input_default.icon, children: /* @__PURE__ */ jsx53(Icons.Chevron, {}) }) })
           ] }) }),
           /* @__PURE__ */ jsx53(Popover2, { ...popoverProps, children: /* @__PURE__ */ jsxs30(Column, { className: Select_default.popover, children: [
@@ -31264,7 +31265,7 @@ 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";

package/package.json

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

package/styles.css

@@ -30,12 +30,12 @@
   --letter-spacing-4: 0.025em;
   --letter-spacing-5: 0.05em;
 
-  --heading-size-1: 60px;
-  --heading-size-2: 36px;
-  --heading-size-3: 28px;
-  --heading-size-4: 24px;
-  --heading-size-5: 16px;
-  --heading-size-6: 14px;
+  --heading-size-1: 16px;
+  --heading-size-2: 20px;
+  --heading-size-3: 24px;
+  --heading-size-4: 32px;
+  --heading-size-5: 42px;
+  --heading-size-6: 60px;
 
   /* Spacing */
 
@@ -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);
 }