@umami/react-zen 0.6.0 → 0.7.0

package/dist/index.css

@@ -894,6 +894,7 @@
   gap: var(--gap);
   min-width: 120px;
   cursor: pointer;
+  outline: none;
 }
 .ListItem_item:hover {
   background: var(--highlight-bg-color);
@@ -1481,6 +1482,7 @@
   color: var(--font-color);
   background: var(--background-color);
   box-shadow: var(--box-shadow);
+  min-width: 160px;
 }
 .Select_button {
   display: flex;

package/dist/index.d.ts

@@ -567,15 +567,15 @@ declare module '@umami/react-zen/SearchField' {
 }
 
 declare module '@umami/react-zen/Select' {
-    import { ReactNode } from 'react';
-    export interface SelectProps {
+    import { SelectProps as AriaSelectProps } from 'react-aria-components';
+    interface SelectProps extends AriaSelectProps<HTMLSelectElement> {
         items: any[];
         value: string;
-        className?: string;
-        children?: ReactNode;
+        label?: string;
     }
-    function Select({ children, items, value, className, ...props }: SelectProps): import("react").JSX.Element;
+    function Select({ children, items, value, label, className, ...props }: SelectProps): import("react").JSX.Element;
     export { Select };
+    export type { SelectProps };
 }
 
 declare module '@umami/react-zen/Slider' {

package/dist/index.js

@@ -27242,13 +27242,14 @@ var Select_default = {
 
 // src/components/Select.tsx
 var import_jsx_runtime44 = require("react/jsx-runtime");
-function Select({ children, items = [], value, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)($82d7e5349645de74$export$ef9b1a59e592288f, { ...props, className: (0, import_classnames39.default)(Select_default.select, className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)($d2b4bc8c273e7be6$export$353f5b6fc5456de1, { className: Select_default.button, children: [
+function Select({ children, items = [], value, label, className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)($82d7e5349645de74$export$ef9b1a59e592288f, { ...props, className: (0, import_classnames39.default)(Input_default.field, className), children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)($01b77f81d0f07f68$export$b04be29aa201d4f5, { className: Input_default.label, children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)($d2b4bc8c273e7be6$export$353f5b6fc5456de1, { className: (0, import_classnames39.default)(Input_default.input, className), children: /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(Row, { justifyContent: "space-between", gap: "md", children: [
       /* @__PURE__ */ (0, import_jsx_runtime44.jsx)($82d7e5349645de74$export$e288731fd71264f0, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Icon, { rotate: 90, size: "xs", className: Select_default.icon, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Icons.Chevron, {}) }) })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Popover, { children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(List, { items, className: Select_default.list, children: children || items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(ListItem, { id: item, className: Select_default.item, children: item }, item)) }) })
+      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Icon, { rotate: 90, size: "xs", className: Input_default.icon, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Icons.Chevron, {}) }) })
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Popover, { children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(List, { items, className: Select_default.list, children }) })
   ] });
 }
 

package/dist/index.mjs

@@ -27304,13 +27304,14 @@ var Select_default = {
 
 // src/components/Select.tsx
 import { jsx as jsx44, jsxs as jsxs25 } from "react/jsx-runtime";
-function Select({ children, items = [], value, className, ...props }) {
-  return /* @__PURE__ */ jsxs25($82d7e5349645de74$export$ef9b1a59e592288f, { ...props, className: (0, import_classnames39.default)(Select_default.select, className), children: [
-    /* @__PURE__ */ jsxs25($d2b4bc8c273e7be6$export$353f5b6fc5456de1, { className: Select_default.button, children: [
+function Select({ children, items = [], value, label, className, ...props }) {
+  return /* @__PURE__ */ jsxs25($82d7e5349645de74$export$ef9b1a59e592288f, { ...props, className: (0, import_classnames39.default)(Input_default.field, className), children: [
+    label && /* @__PURE__ */ jsx44($01b77f81d0f07f68$export$b04be29aa201d4f5, { className: Input_default.label, children: label }),
+    /* @__PURE__ */ jsx44($d2b4bc8c273e7be6$export$353f5b6fc5456de1, { className: (0, import_classnames39.default)(Input_default.input, className), children: /* @__PURE__ */ jsxs25(Row, { justifyContent: "space-between", gap: "md", children: [
       /* @__PURE__ */ jsx44($82d7e5349645de74$export$e288731fd71264f0, {}),
-      /* @__PURE__ */ jsx44("span", { "aria-hidden": "true", children: /* @__PURE__ */ jsx44(Icon, { rotate: 90, size: "xs", className: Select_default.icon, children: /* @__PURE__ */ jsx44(Icons.Chevron, {}) }) })
-    ] }),
-    /* @__PURE__ */ jsx44(Popover, { children: /* @__PURE__ */ jsx44(List, { items, className: Select_default.list, children: children || items.map((item) => /* @__PURE__ */ jsx44(ListItem, { id: item, className: Select_default.item, children: item }, item)) }) })
+      /* @__PURE__ */ jsx44("span", { "aria-hidden": "true", children: /* @__PURE__ */ jsx44(Icon, { rotate: 90, size: "xs", className: Input_default.icon, children: /* @__PURE__ */ jsx44(Icons.Chevron, {}) }) })
+    ] }) }),
+    /* @__PURE__ */ jsx44(Popover, { children: /* @__PURE__ */ jsx44(List, { items, className: Select_default.list, children }) })
   ] });
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umami/react-zen",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "React components built by Umami.",
   "author": "Umami <hello@umami.is>",
   "license": "MIT",