@devup-ui/components 0.1.39 → 0.1.41

package/dist/components/Checkbox/index.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsxs as c, jsx as o } from "react/jsx-runtime";
-import { Flex as x, css as p, Input as k, Box as y, Text as b } from "@devup-ui/react";
+import { Flex as x, Input as k, Box as y, css as p, Text as b } from "@devup-ui/react";
 import { useId as v, useState as D } from "react";
 import { CheckIcon as E } from "./CheckIcon.js";
 function _({

package/dist/components/Stepper/index.js

@@ -2,13 +2,13 @@
 import { jsx as s } from "react/jsx-runtime";
 import { Flex as f, css as i } from "@devup-ui/react";
 import F from "clsx";
-import { useState as S, createContext as h, useContext as g } from "react";
+import { useState as S, useContext as h, createContext as g } from "react";
 import { Button as m } from "../Button/index.js";
 import { Input as C } from "../Input/index.js";
 import { IconMinus as I } from "./IconMinus.js";
 import { IconPlus as k } from "./IconPlus.js";
-const b = h(null), c = () => {
-  const e = g(b);
+const b = g(null), c = () => {
+  const e = h(b);
   if (!e)
     throw new Error("useStepper must be used within a StepperProvider");
   return e;

package/dist/components/Textarea/Textarea.stories.d.ts

@@ -0,0 +1,14 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { Textarea } from './index';
+type Story = StoryObj<typeof meta>;
+declare const meta: Meta<typeof Textarea>;
+export declare const Default: Story;
+export declare const WithDefaultValue: Story;
+export declare const Disabled: Story;
+export declare const DisabledWithValue: Story;
+export declare const Error: Story;
+export declare const ErrorWithMessage: Story;
+export declare const CustomRows: Story;
+export declare const CustomColors: Story;
+export default meta;
+//# sourceMappingURL=Textarea.stories.d.ts.map

package/dist/components/Textarea/Textarea.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Textarea.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Textarea/Textarea.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAEtD,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAElC,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAElC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,QAAQ,CAU/B,CAAA;AAED,eAAO,MAAM,OAAO,EAAE,KAIrB,CAAA;AAED,eAAO,MAAM,gBAAgB,EAAE,KAK9B,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAA;AAED,eAAO,MAAM,iBAAiB,EAAE,KAK/B,CAAA;AAED,eAAO,MAAM,KAAK,EAAE,KAKnB,CAAA;AAED,eAAO,MAAM,gBAAgB,EAAE,KAM9B,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAKxB,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KAS1B,CAAA;AAED,eAAe,IAAI,CAAA"}

package/dist/components/Textarea/index.cjs

@@ -0,0 +1,2 @@
+"use client";
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),o=require("@devup-ui/react");function g({typography:d,error:t=!1,errorMessage:l,colors:r,disabled:i,className:n,classNames:e,rows:b=3,...s}){return a.jsxs(o.Box,{className:e?.container,display:"inline-block",pos:"relative",selectors:{"&, & *":{boxSizing:"border-box"}},w:"100%",children:[a.jsx(o.Box,{_disabled:{_placeholder:{color:"var(--disabledText, light-dark(#D6D7DE, #373737))"},bg:"var(--disabledBg, light-dark(#F0F0F3, #414244))",borderColor:"var(--border, light-dark(#E4E4E4, #434343))",color:"var(--disabledText, light-dark(#D6D7DE, #373737))",cursor:"not-allowed",opacity:.5},_focus:{borderColor:"var(--primary, light-dark(#674DC7, #8163E1))",boxShadow:"0 0 0 3px var(--focusRing, light-dark(rgba(103, 77, 199, 0.15), rgba(129, 99, 225, 0.25)))",outline:"none"},_hover:!i&&{borderColor:"var(--primary, light-dark(#674DC7, #8163E1))"},_placeholder:{color:"var(--placeholder, light-dark(#A9A8AB, #CBCBCB))"},"aria-invalid":t||void 0,"aria-label":"textarea",as:"textarea",bg:"var(--background, light-dark(#FFFFFF, #2E2E2E))",borderColor:"var(--border, light-dark(#E4E4E4, #434343))",borderRadius:"8px",borderStyle:"solid",borderWidth:"1px",className:`${n||""} ${e?.textarea||""}`.trim(),color:"var(--text, light-dark(#272727, #F6F6F6))",disabled:i,fontSize:["16px",null,null,null,"14px"],lineHeight:"1.5",minH:"80px",p:"12px",rows:b,selectors:{'&[aria-invalid="true"]':{borderColor:"var(--error, light-dark(#D52B2E, #FF5B5E))"},'&[aria-invalid="true"]:focus':{borderColor:"var(--error, light-dark(#D52B2E, #FF5B5E))",boxShadow:"0 0 0 3px var(--focusRing, light-dark(rgba(213, 43, 46, 0.2), rgba(255, 91, 94, 0.4)))"}},styleOrder:1,styleVars:{primary:r?.primary,error:r?.error,text:r?.text,border:r?.border,background:r?.background,placeholder:r?.placeholder,focusRing:r?.focusRing},transition:"border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out",typography:d,w:"100%",...s}),t&&l&&a.jsx(o.Text,{"aria-label":"error-message",bottom:"-8px",className:e?.errorMessage,color:"var(--error, light-dark(#D52B2E, #FF5B5E))",fontSize:"12px",left:"0",pos:"absolute",styleOrder:1,transform:"translateY(100%)",children:l})]})}exports.Textarea=g;

package/dist/components/Textarea/index.d.ts

@@ -0,0 +1,24 @@
+import { DevupThemeTypography } from '@devup-ui/react';
+import { ComponentProps } from 'react';
+interface TextareaProps extends ComponentProps<'textarea'> {
+    typography?: keyof DevupThemeTypography;
+    error?: boolean;
+    errorMessage?: string;
+    classNames?: {
+        container?: string;
+        textarea?: string;
+        errorMessage?: string;
+    };
+    colors?: {
+        primary?: string;
+        error?: string;
+        text?: string;
+        border?: string;
+        background?: string;
+        placeholder?: string;
+        focusRing?: string;
+    };
+}
+export declare function Textarea({ typography, error, errorMessage, colors, disabled, className, classNames, rows, ...props }: TextareaProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Textarea/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Textarea/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAO,KAAK,oBAAoB,EAAQ,MAAM,iBAAiB,CAAA;AACtE,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,OAAO,CAAA;AAE3C,UAAU,aAAc,SAAQ,cAAc,CAAC,UAAU,CAAC;IACxD,UAAU,CAAC,EAAE,MAAM,oBAAoB,CAAA;IACvC,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,UAAU,CAAC,EAAE;QACX,SAAS,CAAC,EAAE,MAAM,CAAA;QAClB,QAAQ,CAAC,EAAE,MAAM,CAAA;QACjB,YAAY,CAAC,EAAE,MAAM,CAAA;KACtB,CAAA;IACD,MAAM,CAAC,EAAE;QACP,OAAO,CAAC,EAAE,MAAM,CAAA;QAChB,KAAK,CAAC,EAAE,MAAM,CAAA;QACd,IAAI,CAAC,EAAE,MAAM,CAAA;QACb,MAAM,CAAC,EAAE,MAAM,CAAA;QACf,UAAU,CAAC,EAAE,MAAM,CAAA;QACnB,WAAW,CAAC,EAAE,MAAM,CAAA;QACpB,SAAS,CAAC,EAAE,MAAM,CAAA;KACnB,CAAA;CACF;AAED,wBAAgB,QAAQ,CAAC,EACvB,UAAU,EACV,KAAa,EACb,YAAY,EACZ,MAAM,EACN,QAAQ,EACR,SAAS,EACT,UAAU,EACV,IAAQ,EACR,GAAG,KAAK,EACT,EAAE,aAAa,2CA4Ff"}

package/dist/components/Textarea/index.js

@@ -0,0 +1,110 @@
+"use client";
+import { jsxs as g, jsx as i } from "react/jsx-runtime";
+import { Box as t, Text as x } from "@devup-ui/react";
+function c({
+  typography: d,
+  error: e = !1,
+  errorMessage: o,
+  colors: r,
+  disabled: l,
+  className: b,
+  classNames: a,
+  rows: n = 3,
+  ...s
+}) {
+  return /* @__PURE__ */ g(
+    t,
+    {
+      className: a?.container,
+      display: "inline-block",
+      pos: "relative",
+      selectors: { "&, & *": { boxSizing: "border-box" } },
+      w: "100%",
+      children: [
+        /* @__PURE__ */ i(
+          t,
+          {
+            _disabled: {
+              _placeholder: {
+                color: "var(--disabledText, light-dark(#D6D7DE, #373737))"
+              },
+              bg: "var(--disabledBg, light-dark(#F0F0F3, #414244))",
+              borderColor: "var(--border, light-dark(#E4E4E4, #434343))",
+              color: "var(--disabledText, light-dark(#D6D7DE, #373737))",
+              cursor: "not-allowed",
+              opacity: 0.5
+            },
+            _focus: {
+              borderColor: "var(--primary, light-dark(#674DC7, #8163E1))",
+              boxShadow: "0 0 0 3px var(--focusRing, light-dark(rgba(103, 77, 199, 0.15), rgba(129, 99, 225, 0.25)))",
+              outline: "none"
+            },
+            _hover: !l && {
+              borderColor: "var(--primary, light-dark(#674DC7, #8163E1))"
+            },
+            _placeholder: {
+              color: "var(--placeholder, light-dark(#A9A8AB, #CBCBCB))"
+            },
+            "aria-invalid": e || void 0,
+            "aria-label": "textarea",
+            as: "textarea",
+            bg: "var(--background, light-dark(#FFFFFF, #2E2E2E))",
+            borderColor: "var(--border, light-dark(#E4E4E4, #434343))",
+            borderRadius: "8px",
+            borderStyle: "solid",
+            borderWidth: "1px",
+            className: `${b || ""} ${a?.textarea || ""}`.trim(),
+            color: "var(--text, light-dark(#272727, #F6F6F6))",
+            disabled: l,
+            fontSize: ["16px", null, null, null, "14px"],
+            lineHeight: "1.5",
+            minH: "80px",
+            p: "12px",
+            rows: n,
+            selectors: {
+              '&[aria-invalid="true"]': {
+                borderColor: "var(--error, light-dark(#D52B2E, #FF5B5E))"
+              },
+              '&[aria-invalid="true"]:focus': {
+                borderColor: "var(--error, light-dark(#D52B2E, #FF5B5E))",
+                boxShadow: "0 0 0 3px var(--focusRing, light-dark(rgba(213, 43, 46, 0.2), rgba(255, 91, 94, 0.4)))"
+              }
+            },
+            styleOrder: 1,
+            styleVars: {
+              primary: r?.primary,
+              error: r?.error,
+              text: r?.text,
+              border: r?.border,
+              background: r?.background,
+              placeholder: r?.placeholder,
+              focusRing: r?.focusRing
+            },
+            transition: "border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out",
+            typography: d,
+            w: "100%",
+            ...s
+          }
+        ),
+        e && o && /* @__PURE__ */ i(
+          x,
+          {
+            "aria-label": "error-message",
+            bottom: "-8px",
+            className: a?.errorMessage,
+            color: "var(--error, light-dark(#D52B2E, #FF5B5E))",
+            fontSize: "12px",
+            left: "0",
+            pos: "absolute",
+            styleOrder: 1,
+            transform: "translateY(100%)",
+            children: o
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  c as Textarea
+};

package/dist/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("./components/Button/index.cjs"),o=require("./components/Checkbox/index.cjs"),i=require("./components/Input/index.cjs"),p=require("./components/Radio/index.cjs"),c=require("./components/RadioGroup/index.cjs"),t=require("./components/Select/index.cjs"),e=require("./components/Stepper/index.cjs"),u=require("./components/Toggle/index.cjs"),r=require("./contexts/useSelect.cjs");exports.Button=n.Button;exports.Checkbox=o.Checkbox;exports.Input=i.Input;exports.Radio=p.Radio;exports.RadioGroup=c.RadioGroup;exports.Select=t.Select;exports.SelectContainer=t.SelectContainer;exports.SelectDivider=t.SelectDivider;exports.SelectOption=t.SelectOption;exports.SelectTrigger=t.SelectTrigger;exports.Stepper=e.Stepper;exports.StepperContainer=e.StepperContainer;exports.StepperDecreaseButton=e.StepperDecreaseButton;exports.StepperIncreaseButton=e.StepperIncreaseButton;exports.StepperInput=e.StepperInput;exports.useStepper=e.useStepper;exports.Toggle=u.Toggle;exports.SelectContext=r.SelectContext;exports.useSelect=r.useSelect;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("./components/Button/index.cjs"),i=require("./components/Checkbox/index.cjs"),o=require("./components/Input/index.cjs"),c=require("./components/Radio/index.cjs"),p=require("./components/RadioGroup/index.cjs"),t=require("./components/Select/index.cjs"),e=require("./components/Stepper/index.cjs"),u=require("./components/Textarea/index.cjs"),S=require("./components/Toggle/index.cjs"),r=require("./contexts/useSelect.cjs");exports.Button=n.Button;exports.Checkbox=i.Checkbox;exports.Input=o.Input;exports.Radio=c.Radio;exports.RadioGroup=p.RadioGroup;exports.Select=t.Select;exports.SelectContainer=t.SelectContainer;exports.SelectDivider=t.SelectDivider;exports.SelectOption=t.SelectOption;exports.SelectTrigger=t.SelectTrigger;exports.Stepper=e.Stepper;exports.StepperContainer=e.StepperContainer;exports.StepperDecreaseButton=e.StepperDecreaseButton;exports.StepperIncreaseButton=e.StepperIncreaseButton;exports.StepperInput=e.StepperInput;exports.useStepper=e.useStepper;exports.Textarea=u.Textarea;exports.Toggle=S.Toggle;exports.SelectContext=r.SelectContext;exports.useSelect=r.useSelect;

package/dist/index.d.ts

@@ -5,6 +5,7 @@ export { Radio } from './components/Radio';
 export { RadioGroup } from './components/RadioGroup';
 export { Select, SelectContainer, SelectDivider, SelectOption, SelectTrigger, } from './components/Select';
 export { Stepper, StepperContainer, StepperDecreaseButton, StepperIncreaseButton, StepperInput, useStepper, } from './components/Stepper';
+export { Textarea } from './components/Textarea';
 export { Toggle } from './components/Toggle';
 export { SelectContext, useSelect } from './contexts/useSelect';
 export type { SelectType, SelectValue } from './types/select';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAA;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAChD,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAA;AAC1C,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAA;AAC1C,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAA;AACpD,OAAO,EACL,MAAM,EACN,eAAe,EACf,aAAa,EACb,YAAY,EACZ,aAAa,GACd,MAAM,qBAAqB,CAAA;AAC5B,OAAO,EACL,OAAO,EACP,gBAAgB,EAChB,qBAAqB,EACrB,qBAAqB,EACrB,YAAY,EACZ,UAAU,GACX,MAAM,sBAAsB,CAAA;AAC7B,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAA;AAC5C,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAA;AAC/D,YAAY,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAA;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAChD,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAA;AAC1C,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAA;AAC1C,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAA;AACpD,OAAO,EACL,MAAM,EACN,eAAe,EACf,aAAa,EACb,YAAY,EACZ,aAAa,GACd,MAAM,qBAAqB,CAAA;AAC5B,OAAO,EACL,OAAO,EACP,gBAAgB,EAChB,qBAAqB,EACrB,qBAAqB,EACrB,YAAY,EACZ,UAAU,GACX,MAAM,sBAAsB,CAAA;AAC7B,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAChD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAA;AAC5C,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAA;AAC/D,YAAY,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA"}

package/dist/index.js

@@ -1,30 +1,32 @@
 import { Button as r } from "./components/Button/index.js";
 import { Checkbox as p } from "./components/Checkbox/index.js";
-import { Input as n } from "./components/Input/index.js";
+import { Input as S } from "./components/Input/index.js";
 import { Radio as c } from "./components/Radio/index.js";
 import { RadioGroup as m } from "./components/RadioGroup/index.js";
-import { Select as l, SelectContainer as u, SelectDivider as a, SelectOption as g, SelectTrigger as s } from "./components/Select/index.js";
-import { Stepper as d, StepperContainer as B, StepperDecreaseButton as I, StepperIncreaseButton as D, StepperInput as R, useStepper as T } from "./components/Stepper/index.js";
-import { Toggle as h } from "./components/Toggle/index.js";
-import { SelectContext as v, useSelect as G } from "./contexts/useSelect.js";
+import { Select as i, SelectContainer as l, SelectDivider as u, SelectOption as g, SelectTrigger as s } from "./components/Select/index.js";
+import { Stepper as d, StepperContainer as B, StepperDecreaseButton as I, StepperIncreaseButton as T, StepperInput as D, useStepper as R } from "./components/Stepper/index.js";
+import { Textarea as h } from "./components/Textarea/index.js";
+import { Toggle as v } from "./components/Toggle/index.js";
+import { SelectContext as O, useSelect as j } from "./contexts/useSelect.js";
 export {
   r as Button,
   p as Checkbox,
-  n as Input,
+  S as Input,
   c as Radio,
   m as RadioGroup,
-  l as Select,
-  u as SelectContainer,
-  v as SelectContext,
-  a as SelectDivider,
+  i as Select,
+  l as SelectContainer,
+  O as SelectContext,
+  u as SelectDivider,
   g as SelectOption,
   s as SelectTrigger,
   d as Stepper,
   B as StepperContainer,
   I as StepperDecreaseButton,
-  D as StepperIncreaseButton,
-  R as StepperInput,
-  h as Toggle,
-  G as useSelect,
-  T as useStepper
+  T as StepperIncreaseButton,
+  D as StepperInput,
+  h as Textarea,
+  v as Toggle,
+  j as useSelect,
+  R as useStepper
 };

package/package.json

@@ -16,7 +16,7 @@
     "css-in-js-framework",
     "react"
   ],
-  "version": "0.1.39",
+  "version": "0.1.41",
   "type": "module",
   "scripts": {
     "lint": "eslint",
@@ -43,27 +43,27 @@
   ],
   "types": "./dist/index.d.ts",
   "dependencies": {
-    "@devup-ui/react": "^1.0.31",
+    "@devup-ui/react": "^1.0.33",
     "csstype-extra": "latest",
-    "react": "^19.2.3",
-    "react-dom": "^19.2.3",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
     "clsx": "^2.1"
   },
   "devDependencies": {
-    "@devup-ui/vite-plugin": "^1.0.52",
-    "@storybook/addon-docs": "^10.1",
-    "@storybook/addon-onboarding": "^10.1",
-    "@storybook/react-vite": "^10.1",
+    "@devup-ui/vite-plugin": "^1.0.55",
+    "@storybook/addon-docs": "^10.2",
+    "@storybook/addon-onboarding": "^10.2",
+    "@storybook/react-vite": "^10.2",
     "@types/react": "^19.2",
-    "eslint-plugin-storybook": "^10.1",
+    "eslint-plugin-storybook": "^10.2",
     "rollup-plugin-preserve-directives": "^0.4",
-    "storybook": "^10.1",
+    "storybook": "^10.2",
     "typescript": "^5.9",
     "vite": "^7.3",
     "vite-plugin-dts": "^4.5"
   },
   "peerDependencies": {
-    "@devup-ui/react": "^1.0.31",
+    "@devup-ui/react": "^1.0.33",
     "csstype-extra": "*",
     "react": "*"
   }