@pittorica/select-react 0.22.3 → 0.23.0

package/dist/Select.d.ts

@@ -1,24 +1,28 @@
 import { type ReactNode, type Ref } from 'react';
 import { type BoxProps } from '@pittorica/box-react';
 import type { PittoricaColor } from '@pittorica/text-react';
+type SelectSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export interface SelectRootProps extends BoxProps {
     label?: ReactNode;
     helperText?: ReactNode;
     error?: boolean;
     color?: PittoricaColor;
     disabled?: boolean;
+    /** @default 'sm' */
+    size?: SelectSize;
 }
-export declare const SelectRoot: ({ children, label, helperText, error, color, disabled, className, style, ...props }: SelectRootProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SelectRoot: ({ children, label, helperText, error, color, disabled, size, className, style, ...props }: SelectRootProps) => import("react/jsx-runtime").JSX.Element;
 export type SelectContentProps = React.SelectHTMLAttributes<HTMLSelectElement>;
 export declare const SelectContent: ({ children, className, ref, ...props }: SelectContentProps & {
     ref?: Ref<HTMLSelectElement>;
 }) => import("react/jsx-runtime").JSX.Element;
 export declare const SelectSlot: ({ children, className, ...props }: BoxProps) => import("react/jsx-runtime").JSX.Element;
 export declare const Select: {
-    Root: ({ children, label, helperText, error, color, disabled, className, style, ...props }: SelectRootProps) => import("react/jsx-runtime").JSX.Element;
+    Root: ({ children, label, helperText, error, color, disabled, size, className, style, ...props }: SelectRootProps) => import("react/jsx-runtime").JSX.Element;
     Content: ({ children, className, ref, ...props }: SelectContentProps & {
         ref?: Ref<HTMLSelectElement>;
     }) => import("react/jsx-runtime").JSX.Element;
     Slot: ({ children, className, ...props }: BoxProps) => import("react/jsx-runtime").JSX.Element;
 };
+export {};
 //# sourceMappingURL=Select.d.ts.map

package/dist/Select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../src/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,SAAS,EAAE,KAAK,GAAG,EAAc,MAAM,OAAO,CAAC;AAM5E,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAoB5D,MAAM,WAAW,eAAgB,SAAQ,QAAQ;IAC/C,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,UAAU,GAAI,qFAUxB,eAAe,4CAkDjB,CAAC;AAGF,MAAM,MAAM,kBAAkB,GAAG,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;AAE/E,eAAO,MAAM,aAAa,GAAI,wCAK3B,kBAAkB,GAAG;IAAE,GAAG,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,CAAA;CAAE,4CAevD,CAAC;AAGF,eAAO,MAAM,UAAU,GAAI,mCAAmC,QAAQ,4CAIrE,CAAC;AAEF,eAAO,MAAM,MAAM;gGApFhB,eAAe;sDA4Df,kBAAkB,GAAG;QAAE,GAAG,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,CAAA;KAAE;8CAkBM,QAAQ;CAUrE,CAAC"}
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../src/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,SAAS,EAAE,KAAK,GAAG,EAAc,MAAM,OAAO,CAAC;AAM5E,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAG5D,KAAK,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAmBnD,MAAM,WAAW,eAAgB,SAAQ,QAAQ;IAC/C,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oBAAoB;IACpB,IAAI,CAAC,EAAE,UAAU,CAAC;CACnB;AAED,eAAO,MAAM,UAAU,GAAI,2FAWxB,eAAe,4CA2DjB,CAAC;AAGF,MAAM,MAAM,kBAAkB,GAAG,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;AAE/E,eAAO,MAAM,aAAa,GAAI,wCAK3B,kBAAkB,GAAG;IAAE,GAAG,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,CAAA;CAAE,4CAevD,CAAC;AAGF,eAAO,MAAM,UAAU,GAAI,mCAAmC,QAAQ,4CAIrE,CAAC;AAEF,eAAO,MAAM,MAAM;sGA7FhB,eAAe;sDAqEf,kBAAkB,GAAG;QAAE,GAAG,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,CAAA;KAAE;8CAkBM,QAAQ;CAUrE,CAAC"}

package/dist/Select.stories.d.ts

@@ -2,7 +2,6 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { Select } from './Select.js';
 declare const meta: Meta<typeof Select.Root>;
 export default meta;
-export declare const Basic: StoryObj;
+export declare const AllSizes: StoryObj;
 export declare const WithStartDecorator: StoryObj;
-export declare const States: StoryObj;
 //# sourceMappingURL=Select.stories.d.ts.map

package/dist/Select.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Select.stories.d.ts","sourceRoot":"","sources":["../src/Select.stories.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CAAC,IAAI,CAIlC,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,KAAK,EAAE,QAanB,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,QAahC,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,QAoBpB,CAAC"}
+{"version":3,"file":"Select.stories.d.ts","sourceRoot":"","sources":["../src/Select.stories.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CAAC,IAAI,CAWlC,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,QAAQ,EAAE,QAYtB,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,QAYhC,CAAC"}

package/dist/index.js

@@ -1,5 +1,5 @@
-import { jsx as g, jsxs as L } from "react/jsx-runtime";
-import { forwardRef as M, createElement as j, createContext as z, useId as F, use as G } from "react";
+import { jsx as f, jsxs as L } from "react/jsx-runtime";
+import { forwardRef as M, createElement as B, createContext as z, useId as F, use as G } from "react";
 function W(t) {
   var i, r, e = "";
   if (typeof t == "string" || typeof t == "number") e += t;
@@ -9,7 +9,7 @@ function W(t) {
   } else for (r in t) t[r] && (e && (e += " "), e += r);
   return e;
 }
-function B() {
+function j() {
   for (var t, i, r = 0, e = "", a = arguments.length; r < a; r++) (t = arguments[r]) && (i = W(t)) && (e && (e += " "), e += i);
   return e;
 }
@@ -48,21 +48,21 @@ var H = {
  */
 const J = (t, i, r, e) => {
   const a = M(
-    ({ color: n = "currentColor", size: s = 24, stroke: d = 2, title: l, className: p, children: c, ...m }, h) => j(
+    ({ color: n = "currentColor", size: s = 24, stroke: d = 2, title: l, className: h, children: c, ...p }, g) => B(
       "svg",
       {
-        ref: h,
+        ref: g,
         ...H[t],
         width: s,
         height: s,
-        className: ["tabler-icon", `tabler-icon-${i}`, p].join(" "),
+        className: ["tabler-icon", `tabler-icon-${i}`, h].join(" "),
         strokeWidth: d,
         stroke: n,
-        ...m
+        ...p
       },
       [
-        l && j("title", { key: "svg-title" }, l),
-        ...e.map(([f, u]) => j(f, u)),
+        l && B("title", { key: "svg-title" }, l),
+        ...e.map(([m, u]) => B(m, u)),
         ...Array.isArray(c) ? c : [c]
       ]
     )
@@ -99,11 +99,11 @@ const T = ({
   mr: s,
   mb: d,
   ml: l,
-  p,
+  p: h,
   pt: c,
-  pr: m,
-  pb: h,
-  pl: f,
+  pr: p,
+  pb: g,
+  pl: m,
   width: u,
   height: v,
   position: y,
@@ -118,12 +118,12 @@ const T = ({
   ...k
 }) => {
   const o = {};
-  e && (o.display = e), u && (o.width = u), v && (o.height = v), y && (o.position = y), a && (o.margin = `var(--pittorica-space-${a})`), n && (o.marginTop = `var(--pittorica-space-${n})`), s && (o.marginRight = `var(--pittorica-space-${s})`), d && (o.marginBottom = `var(--pittorica-space-${d})`), l && (o.marginLeft = `var(--pittorica-space-${l})`), p && (o.padding = `var(--pittorica-space-${p})`), c && (o.paddingTop = `var(--pittorica-space-${c})`), m && (o.paddingRight = `var(--pittorica-space-${m})`), h && (o.paddingBottom = `var(--pittorica-space-${h})`), f && (o.paddingLeft = `var(--pittorica-space-${f})`);
+  e && (o.display = e), u && (o.width = u), v && (o.height = v), y && (o.position = y), a && (o.margin = `var(--pittorica-space-${a})`), n && (o.marginTop = `var(--pittorica-space-${n})`), s && (o.marginRight = `var(--pittorica-space-${s})`), d && (o.marginBottom = `var(--pittorica-space-${d})`), l && (o.marginLeft = `var(--pittorica-space-${l})`), h && (o.padding = `var(--pittorica-space-${h})`), c && (o.paddingTop = `var(--pittorica-space-${c})`), p && (o.paddingRight = `var(--pittorica-space-${p})`), g && (o.paddingBottom = `var(--pittorica-space-${g})`), m && (o.paddingLeft = `var(--pittorica-space-${m})`);
   const R = {
     ...b,
     ...o
   };
-  return /* @__PURE__ */ g(
+  return /* @__PURE__ */ f(
     i,
     {
       ref: t,
@@ -177,11 +177,11 @@ const E = ({
   mr: s,
   mb: d,
   ml: l,
-  p,
+  p: h,
   pt: c,
-  pr: m,
-  pb: h,
-  pl: f,
+  pr: p,
+  pb: g,
+  pl: m,
   width: u,
   height: v,
   position: y,
@@ -196,12 +196,12 @@ const E = ({
   ...k
 }) => {
   const o = {};
-  e && (o.display = e), u && (o.width = u), v && (o.height = v), y && (o.position = y), a && (o.margin = `var(--pittorica-space-${a})`), n && (o.marginTop = `var(--pittorica-space-${n})`), s && (o.marginRight = `var(--pittorica-space-${s})`), d && (o.marginBottom = `var(--pittorica-space-${d})`), l && (o.marginLeft = `var(--pittorica-space-${l})`), p && (o.padding = `var(--pittorica-space-${p})`), c && (o.paddingTop = `var(--pittorica-space-${c})`), m && (o.paddingRight = `var(--pittorica-space-${m})`), h && (o.paddingBottom = `var(--pittorica-space-${h})`), f && (o.paddingLeft = `var(--pittorica-space-${f})`);
+  e && (o.display = e), u && (o.width = u), v && (o.height = v), y && (o.position = y), a && (o.margin = `var(--pittorica-space-${a})`), n && (o.marginTop = `var(--pittorica-space-${n})`), s && (o.marginRight = `var(--pittorica-space-${s})`), d && (o.marginBottom = `var(--pittorica-space-${d})`), l && (o.marginLeft = `var(--pittorica-space-${l})`), h && (o.padding = `var(--pittorica-space-${h})`), c && (o.paddingTop = `var(--pittorica-space-${c})`), p && (o.paddingRight = `var(--pittorica-space-${p})`), g && (o.paddingBottom = `var(--pittorica-space-${g})`), m && (o.paddingLeft = `var(--pittorica-space-${m})`);
   const R = {
     ...b,
     ...o
   };
-  return /* @__PURE__ */ g(
+  return /* @__PURE__ */ f(
     i,
     {
       ref: t,
@@ -229,12 +229,12 @@ const V = ({
   className: s,
   style: d,
   href: l,
-  target: p,
+  target: h,
   rel: c,
-  htmlFor: m,
-  ...h
+  htmlFor: p,
+  ...g
 }) => {
-  const f = (n == null ? void 0 : n.startsWith("#")) || (n == null ? void 0 : n.startsWith("rgb")) || (n == null ? void 0 : n.startsWith("hsl")), u = /* @__PURE__ */ new Set([
+  const m = (n == null ? void 0 : n.startsWith("#")) || (n == null ? void 0 : n.startsWith("rgb")) || (n == null ? void 0 : n.startsWith("hsl")), u = /* @__PURE__ */ new Set([
     "danger",
     "success",
     "error",
@@ -248,13 +248,13 @@ const V = ({
     "red"
   ]), v = (() => {
     if (n)
-      return n === "inherit" ? "inherit" : f ? n : u.has(n) ? `var(--pittorica-${n}-9)` : n;
+      return n === "inherit" ? "inherit" : m ? n : u.has(n) ? `var(--pittorica-${n}-9)` : n;
   })(), y = {
     ...d,
     textAlign: e,
     color: v
   };
-  return /* @__PURE__ */ g(
+  return /* @__PURE__ */ f(
     E,
     {
       as: i,
@@ -266,10 +266,10 @@ const V = ({
       "data-weight": r,
       style: y,
       href: l,
-      target: p,
+      target: h,
       rel: c,
-      htmlFor: m,
-      ...h,
+      htmlFor: p,
+      ...g,
       children: t
     }
   );
@@ -285,26 +285,35 @@ const V = ({
   error: e,
   color: a = "indigo",
   disabled: n,
-  className: s,
-  style: d,
-  ...l
+  size: s = "sm",
+  className: d,
+  style: l,
+  ...h
 }) => {
-  const p = F(), c = F(), h = a !== "inherit" && !(a != null && a.startsWith("#")) && !(a != null && a.startsWith("rgb")) ? `var(--pittorica-${a}-9)` : a;
-  return /* @__PURE__ */ g(_, { value: { inputId: p, helperId: c, disabled: n }, children: /* @__PURE__ */ L(
+  const c = F(), p = F(), m = a !== "inherit" && !(a != null && a.startsWith("#")) && !(a != null && a.startsWith("rgb")) ? `var(--pittorica-${a}-9)` : a;
+  return /* @__PURE__ */ f(_, { value: { inputId: c, helperId: p, disabled: n, size: s }, children: /* @__PURE__ */ L(
     T,
     {
-      ...l,
-      className: B("pittorica-select-root", s),
+      ...h,
+      className: j(
+        "pittorica-select-root",
+        `pittorica-select--${s}`,
+        d
+      ),
       "data-error": e,
       children: [
-        i && /* @__PURE__ */ g(
+        i && /* @__PURE__ */ f(
           V,
           {
             as: "label",
-            htmlFor: p,
+            htmlFor: c,
             weight: "medium",
-            mb: "1",
-            style: { paddingLeft: "4px" },
+            style: {
+              paddingLeft: "4px",
+              fontSize: "var(--pittorica-font-size-1)",
+              marginBottom: "4px",
+              display: "inline-block"
+            },
             children: i
           }
         ),
@@ -312,17 +321,18 @@ const V = ({
           "div",
           {
             className: "pittorica-select-wrapper",
+            "data-disabled": n,
             style: {
-              "--pittorica-source-color": h,
-              ...d
+              "--pittorica-source-color": m,
+              ...l
             },
             children: [
               t,
-              /* @__PURE__ */ g("div", { className: "pittorica-select-chevron", children: /* @__PURE__ */ g(O, { size: 20 }) })
+              /* @__PURE__ */ f("div", { className: "pittorica-select-chevron", children: /* @__PURE__ */ f(O, { size: s === "xs" ? 14 : 18 }) })
             ]
           }
         ),
-        r && /* @__PURE__ */ g("div", { id: c, className: "pittorica-select-helper", children: r })
+        r && /* @__PURE__ */ f("div", { id: p, className: "pittorica-select-helper", children: r })
       ]
     }
   ) });
@@ -333,7 +343,7 @@ const V = ({
   ...e
 }) => {
   const { inputId: a, helperId: n, disabled: s } = X();
-  return /* @__PURE__ */ g(
+  return /* @__PURE__ */ f(
     "select",
     {
       ...e,
@@ -341,11 +351,11 @@ const V = ({
       ref: r,
       disabled: s,
       "aria-describedby": n,
-      className: B("pittorica-select-input", i),
+      className: j("pittorica-select-input", i),
       children: t
     }
   );
-}, tt = ({ children: t, className: i, ...r }) => /* @__PURE__ */ g("div", { className: B("pittorica-select-slot", i), ...r, children: t }), it = {
+}, tt = ({ children: t, className: i, ...r }) => /* @__PURE__ */ f("div", { className: j("pittorica-select-slot", i), ...r, children: t }), it = {
   Root: Y,
   Content: Z,
   Slot: tt

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pittorica/select-react",
-  "version": "0.22.3",
+  "version": "0.23.0",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -11,8 +11,8 @@
   "dependencies": {
     "@tabler/icons-react": "^3.36.1",
     "clsx": "^2.1.1",
-    "@pittorica/box-react": "0.22.3",
-    "@pittorica/text-react": "0.22.3"
+    "@pittorica/box-react": "0.23.0",
+    "@pittorica/text-react": "0.23.0"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",
@@ -24,9 +24,9 @@
     "typescript": "^5.0.0",
     "vite": "^5.0.0",
     "vitest": "^2.1.9",
-    "@pittorica/flex-react": "0.22.3",
-    "@pittorica/theme-react": "0.22.3",
-    "pittorica": "0.22.3"
+    "@pittorica/theme-react": "0.23.0",
+    "@pittorica/flex-react": "0.23.0",
+    "pittorica": "0.23.0"
   },
   "peerDependencies": {
     "react": ">=19",