@a-type/ui 4.1.0-beta.4 → 4.1.0-beta.6

package/dist/cjs/components/input/Input.d.ts

@@ -13,6 +13,8 @@ export interface InputProps extends Omit<BaseInputProps, 'className'> {
     ref?: Ref<HTMLInputElement>;
 }
 export declare const Input: (({ className, borderRef, startAccessory, endAccessory, ...props }: InputProps) => import("react/jsx-runtime.js").JSX.Element) & {
-    Border: import("react").FunctionComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
+    Border: import("react").FunctionComponent<import("react").HTMLAttributes<HTMLDivElement> & {
+        ref?: Ref<HTMLDivElement>;
+    }>;
     Input: ({ autoSelect, onFocus, onBlur, className, placeholders, placeholder, placeholdersIntervalMs, onValueChange, ...props }: InputProps) => import("react/jsx-runtime.js").JSX.Element;
 };

package/dist/cjs/components/input/Input.js

@@ -21,10 +21,14 @@ const input_1 = require("@base-ui/react/input");
 const clsx_1 = __importDefault(require("clsx"));
 const hooks_js_1 = require("../../hooks.js");
 const useRotatingShuffledValue_js_1 = require("../../hooks/useRotatingShuffledValue.js");
+const GroupScale_js_1 = require("../../systems/GroupScale.js");
 const inputs_js_1 = require("../../systems/inputs.js");
 exports.inputClassName = (0, clsx_1.default)('layer-components:min-w-60px layer-components:flex-1 layer-components:select-auto layer-components:border-none layer-components:px-0 layer-components:py-1.25 layer-components:text-md layer-components:font-inherit layer-components:bg-transparent', 'layer-components:md:min-w-120px', 'layer-components:placeholder:color-gray-dark', 'layer-components:focus:outline-none', 'layer-components:focus-visible:outline-none', 'layer-components:first:rounded-l-inherit layer-components:first:pl-md', 'layer-components:last:rounded-r-inherit layer-components:last:pr-md');
-const inputBorderClassName = (0, clsx_1.default)('layer-components:flex layer-components:flex-row layer-components:items-center layer-components:gap-xs layer-components:border-1 layer-components:rounded-lg layer-components:border-solid layer-components:text-md layer-components:shadow-sm layer-components:shadow-inset layer-components:transition-shadow layer-components:color-black layer-components:bg-white layer-components:border-gray-dark', 'layer-components:w-max-content layer-components:overflow-clip', 'layer-components:[&:has(input:disabled)]:shadow-none layer-components:[&:has(input:disabled)]:bg-transparent layer-components:[&:has(input:disabled)]:border-gray layer-components:[&:has(input:disabled)]:placeholder-gray-dark', 'layer-components:[&:has(input:focus-visible)]:outline-none layer-components:[&:has(input:focus-visible)]:ring layer-components:[&:has(input:focus-visible)]:ring-4 layer-components:[&:has(input:focus-visible)]:ring-accent', 'layer-variants:[&:has(input:focus[data-focus-clicked])]:outline-none layer-variants:[&:has(input:focus[data-focus-clicked])]:ring layer-variants:[&:has(input:focus[data-focus-clicked])]:ring-4 layer-variants:[&:has(input:focus[data-focus-clicked])]:bg-lighten-3 layer-variants:[&:has(input:focus[data-focus-clicked])]:ring-main-light', 'layer-components:[&:has(input:hover)]:border-black', 'layer-components:[&>.icon]:mx-sm');
-const InputBorder = (0, hooks_js_1.withClassName)('div', inputBorderClassName);
+const inputBorderClassName = (0, clsx_1.default)('layer-components:flex layer-components:flex-row layer-components:items-center layer-components:gap-xs layer-components:border-1 layer-components:rounded-lg layer-components:border-solid layer-components:text-md layer-components:shadow-sm layer-components:shadow-inset layer-components:transition-shadow layer-components:color-black layer-components:bg-white layer-components:border-gray-dark', 'layer-components:w-max-content layer-components:overflow-clip', 'layer-components:[&:has(input:disabled),&:has(textarea:disabled)]:shadow-none layer-components:[&:has(input:disabled),&:has(textarea:disabled)]:bg-transparent layer-components:[&:has(input:disabled),&:has(textarea:disabled)]:border-gray layer-components:[&:has(input:disabled),&:has(textarea:disabled)]:placeholder-gray-dark', 'layer-components:[&:has(input:focus-visible),&:has(textarea:focus-visible)]:outline-none layer-components:[&:has(input:focus-visible),&:has(textarea:focus-visible)]:ring layer-components:[&:has(input:focus-visible),&:has(textarea:focus-visible)]:ring-4 layer-components:[&:has(input:focus-visible),&:has(textarea:focus-visible)]:ring-accent', 'layer-variants:[&:has(input:focus[data-focus-clicked]),&:has(textarea:focus[data-focus-clicked])]:outline-none layer-variants:[&:has(input:focus[data-focus-clicked]),&:has(textarea:focus[data-focus-clicked])]:ring layer-variants:[&:has(input:focus[data-focus-clicked]),&:has(textarea:focus[data-focus-clicked])]:ring-4 layer-variants:[&:has(input:focus[data-focus-clicked]),&:has(textarea:focus[data-focus-clicked])]:bg-lighten-3 layer-variants:[&:has(input:focus[data-focus-clicked]),&:has(textarea:focus[data-focus-clicked])]:ring-main-light', 'layer-components:[&:has(input:hover),&:has(textarea:hover)]:border-black', 'layer-components:[&>.icon]:mx-sm');
+function InputBorderImpl(props) {
+    return ((0, jsx_runtime_1.jsx)(GroupScale_js_1.GroupScaleReset, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({}, props)) }));
+}
+const InputBorder = (0, hooks_js_1.withClassName)(InputBorderImpl, inputBorderClassName);
 const InnerInput = function InnerInput(_a) {
     var { autoSelect, onFocus, onBlur, className, placeholders, placeholder, placeholdersIntervalMs = 5000, onValueChange } = _a, props = __rest(_a, ["autoSelect", "onFocus", "onBlur", "className", "placeholders", "placeholder", "placeholdersIntervalMs", "onValueChange"]);
     const handleFocus = (ev) => {

package/dist/cjs/components/input/Input.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../../../src/components/input/Input.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAAA,gDAG8B;AAC9B,gDAAwB;AAExB,6CAA+C;AAC/C,yFAAmF;AACnF,uDAAoD;AAEvC,QAAA,cAAc,GAAG,IAAA,cAAI,EACjC,+GAA+G,EAC/G,mCAAmC,EACnC,gDAAgD,EAChD,uCAAuC,EACvC,+CAA+C,EAC/C,kDAAkD,EAClD,iDAAiD,CACjD,CAAC;AAEF,MAAM,oBAAoB,GAAG,IAAA,cAAI,EAChC,8KAA8K,EAC9K,gDAAgD,EAChD,yGAAyG,EACzG,sFAAsF,EACtF,iHAAiH,EACjH,sDAAsD,EACtD,oCAAoC,CACpC,CAAC;AAEF,MAAM,WAAW,GAAG,IAAA,wBAAa,EAAC,KAAK,EAAE,oBAAoB,CAAC,CAAC;AAE/D,MAAM,UAAU,GAAG,SAAS,UAAU,CAAC,EAW1B;QAX0B,EACtC,UAAU,EACV,OAAO,EACP,MAAM,EACN,SAAS,EACT,YAAY,EACZ,WAAW,EACX,sBAAsB,GAAG,IAAI,EAC7B,aAAa,OAGD,EADT,KAAK,cAV8B,0HAWtC,CADQ;IAER,MAAM,WAAW,GAA8B,CAAC,EAAE,EAAE,EAAE;QACrD,IAAI,UAAU,EAAE,CAAC;YAChB,EAAE,CAAC,MAAM,CAAC,MAAM,EAAE,CAAC;QACpB,CAAC;QACD,IACC,qBAAS,CAAC,eAAe;YACzB,IAAI,CAAC,GAAG,EAAE,GAAG,qBAAS,CAAC,eAAe,GAAG,GAAG,EAC3C,CAAC;YACF,EAAE,CAAC,aAAa,CAAC,YAAY,CAAC,oBAAoB,EAAE,MAAM,CAAC,CAAC;QAC7D,CAAC;QACD,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAG,EAAE,CAAC,CAAC;IACf,CAAC,CAAC;IACF,MAAM,UAAU,GAA6B,CAAC,EAAE,EAAE,EAAE;QACnD,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAG,EAAE,CAAC,CAAC;QACb,EAAE,CAAC,aAAa,CAAC,eAAe,CAAC,oBAAoB,CAAC,CAAC;IACxD,CAAC,CAAC;IACF,MAAM,iBAAiB,GAAG,IAAA,sDAAwB,EACjD,YAAY,aAAZ,YAAY,cAAZ,YAAY,GAAI,EAAE,EAClB,sBAAsB,CACtB,CAAC;IAEF,OAAO,CACN,uBAAC,aAAS,kBACT,WAAW,EAAE,WAAW,aAAX,WAAW,cAAX,WAAW,GAAI,iBAAiB,EAC7C,OAAO,EAAE,WAAW,EACpB,aAAa,EAAE,aAAa,EAC5B,MAAM,EAAE,UAAU,EAClB,SAAS,EAAE,IAAA,cAAI,EAAC,sBAAc,EAAE,SAAS,CAAC,IACtC,KAAK,EACR,CACF,CAAC;AACH,CAAC,CAAC;AAcF,MAAM,YAAY,GAAG,SAAS,YAAY,CAAC,EAM9B;QAN8B,EAC1C,SAAS,EACT,SAAS,EACT,cAAc,EACd,YAAY,OAEA,EADT,KAAK,cALkC,4DAM1C,CADQ;IAER,OAAO,CACN,wBAAC,WAAW,IAAC,GAAG,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,aAC/C,cAAc,EACf,uBAAC,UAAU,oBAAK,KAAK,EAAI,EACxB,YAAY,IACA,CACd,CAAC;AACH,CAAC,CAAC;AAEW,QAAA,KAAK,GAAG,MAAM,CAAC,MAAM,CAAC,YAAY,EAAE;IAChD,MAAM,EAAE,WAAW;IACnB,KAAK,EAAE,UAAU;CACjB,CAAC,CAAC"}
+{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../../../src/components/input/Input.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAAA,gDAG8B;AAC9B,gDAAwB;AAExB,6CAA+C;AAC/C,yFAAmF;AACnF,+DAA8D;AAC9D,uDAAoD;AAEvC,QAAA,cAAc,GAAG,IAAA,cAAI,EACjC,+GAA+G,EAC/G,mCAAmC,EACnC,gDAAgD,EAChD,uCAAuC,EACvC,+CAA+C,EAC/C,kDAAkD,EAClD,iDAAiD,CACjD,CAAC;AAEF,MAAM,oBAAoB,GAAG,IAAA,cAAI,EAChC,8KAA8K,EAC9K,gDAAgD,EAChD,kIAAkI,EAClI,oHAAoH,EACpH,2JAA2J,EAC3J,4EAA4E,EAC5E,oCAAoC,CACpC,CAAC;AAEF,SAAS,eAAe,CACvB,KAEC;IAED,OAAO,CACN,uBAAC,+BAAe,cACf,gDAAS,KAAK,EAAI,GACD,CAClB,CAAC;AACH,CAAC;AACD,MAAM,WAAW,GAAG,IAAA,wBAAa,EAAC,eAAe,EAAE,oBAAoB,CAAC,CAAC;AAEzE,MAAM,UAAU,GAAG,SAAS,UAAU,CAAC,EAW1B;QAX0B,EACtC,UAAU,EACV,OAAO,EACP,MAAM,EACN,SAAS,EACT,YAAY,EACZ,WAAW,EACX,sBAAsB,GAAG,IAAI,EAC7B,aAAa,OAGD,EADT,KAAK,cAV8B,0HAWtC,CADQ;IAER,MAAM,WAAW,GAA8B,CAAC,EAAE,EAAE,EAAE;QACrD,IAAI,UAAU,EAAE,CAAC;YAChB,EAAE,CAAC,MAAM,CAAC,MAAM,EAAE,CAAC;QACpB,CAAC;QACD,IACC,qBAAS,CAAC,eAAe;YACzB,IAAI,CAAC,GAAG,EAAE,GAAG,qBAAS,CAAC,eAAe,GAAG,GAAG,EAC3C,CAAC;YACF,EAAE,CAAC,aAAa,CAAC,YAAY,CAAC,oBAAoB,EAAE,MAAM,CAAC,CAAC;QAC7D,CAAC;QACD,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAG,EAAE,CAAC,CAAC;IACf,CAAC,CAAC;IACF,MAAM,UAAU,GAA6B,CAAC,EAAE,EAAE,EAAE;QACnD,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAG,EAAE,CAAC,CAAC;QACb,EAAE,CAAC,aAAa,CAAC,eAAe,CAAC,oBAAoB,CAAC,CAAC;IACxD,CAAC,CAAC;IACF,MAAM,iBAAiB,GAAG,IAAA,sDAAwB,EACjD,YAAY,aAAZ,YAAY,cAAZ,YAAY,GAAI,EAAE,EAClB,sBAAsB,CACtB,CAAC;IAEF,OAAO,CACN,uBAAC,aAAS,kBACT,WAAW,EAAE,WAAW,aAAX,WAAW,cAAX,WAAW,GAAI,iBAAiB,EAC7C,OAAO,EAAE,WAAW,EACpB,aAAa,EAAE,aAAa,EAC5B,MAAM,EAAE,UAAU,EAClB,SAAS,EAAE,IAAA,cAAI,EAAC,sBAAc,EAAE,SAAS,CAAC,IACtC,KAAK,EACR,CACF,CAAC;AACH,CAAC,CAAC;AAcF,MAAM,YAAY,GAAG,SAAS,YAAY,CAAC,EAM9B;QAN8B,EAC1C,SAAS,EACT,SAAS,EACT,cAAc,EACd,YAAY,OAEA,EADT,KAAK,cALkC,4DAM1C,CADQ;IAER,OAAO,CACN,wBAAC,WAAW,IAAC,GAAG,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,aAC/C,cAAc,EACf,uBAAC,UAAU,oBAAK,KAAK,EAAI,EACxB,YAAY,IACA,CACd,CAAC;AACH,CAAC,CAAC;AAEW,QAAA,KAAK,GAAG,MAAM,CAAC,MAAM,CAAC,YAAY,EAAE;IAChD,MAAM,EAAE,WAAW;IACnB,KAAK,EAAE,UAAU;CACjB,CAAC,CAAC"}

package/dist/cjs/components/input/Input.stories.d.ts

@@ -3,7 +3,9 @@ import { Input } from './Input.js';
 declare const meta: {
     title: string;
     component: (({ className, borderRef, startAccessory, endAccessory, ...props }: import("./Input.js").InputProps) => import("react/jsx-runtime.js").JSX.Element) & {
-        Border: import("react").FunctionComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
+        Border: import("react").FunctionComponent<import("react").HTMLAttributes<HTMLDivElement> & {
+            ref?: import("react").Ref<HTMLDivElement>;
+        }>;
         Input: ({ autoSelect, onFocus, onBlur, className, placeholders, placeholder, placeholdersIntervalMs, onValueChange, ...props }: import("./Input.js").InputProps) => import("react/jsx-runtime.js").JSX.Element;
     };
     argTypes: {

package/dist/cjs/components/note/Note.d.ts

@@ -4,4 +4,9 @@ export interface NoteProps extends HTMLAttributes<HTMLDivElement> {
     children?: ReactNode;
     color?: PaletteName;
 }
-export declare function Note({ className, color, children, ...rest }: NoteProps): import("react/jsx-runtime.js").JSX.Element;
+declare function NoteRoot({ className, color, children, ...rest }: NoteProps): import("react/jsx-runtime.js").JSX.Element;
+export declare const NoteInput: import("react").FunctionComponent<import("../textArea/TextArea.js").TextAreaProps>;
+export declare const Note: typeof NoteRoot & {
+    Input: import("react").FunctionComponent<import("../textArea/TextArea.js").TextAreaProps>;
+};
+export {};

package/dist/cjs/components/note/Note.js

@@ -45,11 +45,17 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Note = Note;
+exports.Note = exports.NoteInput = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const clsx_1 = __importStar(require("clsx"));
-function Note(_a) {
+const hooks_js_1 = require("../../hooks.js");
+const TextArea_js_1 = require("../textArea/TextArea.js");
+function NoteRoot(_a) {
     var { className, color, children } = _a, rest = __rest(_a, ["className", "color", "children"]);
-    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: (0, clsx_1.default)(color && `palette-${color}`, className) }, rest, { children: (0, jsx_runtime_1.jsxs)("div", { className: "layer-components:flex layer-components:flex-row", children: [(0, jsx_runtime_1.jsx)("div", { className: (0, clsx_1.clsx)('layer-components:relative layer-components:flex-1 layer-components:border layer-components:border-solid layer-components:p-2 layer-components:text-sm layer-components:italic layer-components:color-black layer-components:bg-main-wash layer-components:bg-darken-1 layer-components:border-main-dark layer-variants:border-r-0', 'layer-variants:[&_input,&_textarea]:shadow-none'), children: children }), (0, jsx_runtime_1.jsxs)("div", { className: "layer-components:flex layer-components:flex-[0_0_20px] layer-components:flex-col layer-components:items-stretch layer-components:justify-stretch", "aria-hidden": true, children: [(0, jsx_runtime_1.jsxs)("div", { className: "layer-components:relative layer-components:h-[20px] layer-components:w-[20px] layer-components:flex-[0_0_20px] layer-components:border-0 layer-components:border-solid layer-components:border-main-dark layer-variants:border-b-1px layer-variants:border-l-1px", children: [(0, jsx_runtime_1.jsx)("div", { className: `layer-components:box-content layer-components:h-0 layer-components:w-0 layer-components:transform-origin-br layer-components:translate--7px layer-components:rotate--45 layer-components:border-13px layer-components:border-solid layer-components:border-transparent layer-components:border-r-main-wash layer-components:border-r-darken-1` }), (0, jsx_runtime_1.jsx)("div", { className: "layer-components:absolute layer-components:left-9px layer-components:top--3px layer-components:h-27px layer-components:w-0.5px layer-components:transform-origin-cc layer-components:rotate--45 layer-components:bg-main-dark" })] }), (0, jsx_runtime_1.jsx)("div", { className: "layer-components:flex-1 layer-components:border-0 layer-components:border-solid layer-components:bg-main-wash layer-components:bg-darken-1 layer-components:border-main-dark layer-variants:border-b-1px layer-variants:border-r-1px" })] })] }) })));
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: (0, clsx_1.default)(color && `palette-${color}`, 'layer-components:[&:has(input:focus-visible),&:has(textarea:focus-visible)]:ring layer-components:[&:has(input:focus-visible),&:has(textarea:focus-visible)]:ring-4 layer-components:[&:has(input:focus-visible),&:has(textarea:focus-visible)]:ring-accent', 'layer-variants:[&:has(input:focus[data-focus-clicked]),&:has(textarea:focus[data-focus-clicked])]:ring layer-variants:[&:has(input:focus[data-focus-clicked]),&:has(textarea:focus[data-focus-clicked])]:ring-4 layer-variants:[&:has(input:focus[data-focus-clicked]),&:has(textarea:focus[data-focus-clicked])]:bg-lighten-3 layer-variants:[&:has(input:focus[data-focus-clicked]),&:has(textarea:focus[data-focus-clicked])]:ring-main-light', className) }, rest, { children: (0, jsx_runtime_1.jsxs)("div", { className: "layer-components:flex layer-components:flex-row", children: [(0, jsx_runtime_1.jsx)("div", { className: (0, clsx_1.clsx)('layer-components:relative layer-components:flex-1 layer-components:border layer-components:border-solid layer-components:p-2 layer-components:text-sm layer-components:italic layer-components:color-black layer-components:bg-main-wash layer-components:bg-darken-1 layer-components:border-main-dark layer-variants:border-r-0', 'layer-variants:[&_input,&_textarea]:border-none layer-variants:[&_input,&_textarea]:p-0 layer-variants:[&_input,&_textarea]:shadow-none layer-variants:[&_input,&_textarea]:bg-transparent layer-variants:[&_input,&_textarea]:ring-none'), children: children }), (0, jsx_runtime_1.jsxs)("div", { className: "layer-components:flex layer-components:flex-[0_0_20px] layer-components:flex-col layer-components:items-stretch layer-components:justify-stretch", "aria-hidden": true, children: [(0, jsx_runtime_1.jsxs)("div", { className: "layer-components:relative layer-components:h-[20px] layer-components:w-[20px] layer-components:flex-[0_0_20px] layer-components:border-0 layer-components:border-solid layer-components:border-main-dark layer-variants:border-b-1px layer-variants:border-l-1px", children: [(0, jsx_runtime_1.jsx)("div", { className: `layer-components:box-content layer-components:h-0 layer-components:w-0 layer-components:transform-origin-br layer-components:translate--7px layer-components:rotate--45 layer-components:border-13px layer-components:border-solid layer-components:border-transparent layer-components:border-r-main-wash layer-components:border-r-darken-1` }), (0, jsx_runtime_1.jsx)("div", { className: "layer-components:absolute layer-components:left-9px layer-components:top--3px layer-components:h-27px layer-components:w-0.5px layer-components:transform-origin-cc layer-components:rotate--45 layer-components:bg-main-dark" })] }), (0, jsx_runtime_1.jsx)("div", { className: "layer-components:flex-1 layer-components:border-0 layer-components:border-solid layer-components:bg-main-wash layer-components:bg-darken-1 layer-components:border-main-dark layer-variants:border-b-1px layer-variants:border-r-1px" })] })] }) })));
 }
+exports.NoteInput = (0, hooks_js_1.withClassName)(TextArea_js_1.TextArea.Input, 'layer-composed2:w-full layer-composed2:p-0');
+exports.Note = Object.assign(NoteRoot, {
+    Input: exports.NoteInput,
+});
 //# sourceMappingURL=Note.js.map

package/dist/cjs/components/note/Note.js.map

@@ -1 +1 @@
-{"version":3,"file":"Note.js","sourceRoot":"","sources":["../../../../src/components/note/Note.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASA,oBAkCC;;AA3CD,6CAAwC;AASxC,SAAgB,IAAI,CAAC,EAAkD;QAAlD,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,OAAsB,EAAjB,IAAI,cAArC,kCAAuC,CAAF;IACzD,OAAO,CACN,8CACC,SAAS,EAAE,IAAA,cAAU,EAAC,KAAK,IAAI,WAAW,KAAK,EAAE,EAAE,SAAS,CAAC,IACzD,IAAI,cAER,iCAAK,SAAS,EAAC,kCAAkC,aAChD,gCACC,SAAS,EAAE,IAAA,WAAI,EACd,2JAA2J,EAC3J,iDAAiD,CACjD,YAEA,QAAQ,GACJ,EACN,iCACC,SAAS,EAAC,gFAAgF,kCAI1F,iCAAK,SAAS,EAAC,iJAAiJ,aAE/J,gCACC,SAAS,EAAE,uKAAuK,GACjL,EAEF,gCAAK,SAAS,EAAC,0GAA0G,GAAG,IACvH,EAEN,gCAAK,SAAS,EAAC,sIAAsI,GAAG,IACnJ,IACD,IACD,CACN,CAAC;AACH,CAAC"}
+{"version":3,"file":"Note.js","sourceRoot":"","sources":["../../../../src/components/note/Note.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAAwC;AAExC,6CAA+C;AAE/C,yDAAmD;AAOnD,SAAS,QAAQ,CAAC,EAAkD;QAAlD,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,OAAsB,EAAjB,IAAI,cAArC,kCAAuC,CAAF;IACtD,OAAO,CACN,8CACC,SAAS,EAAE,IAAA,cAAU,EACpB,KAAK,IAAI,WAAW,KAAK,EAAE,EAC3B,uGAAuG,EACvG,8IAA8I,EAC9I,SAAS,CACT,IACG,IAAI,cAER,iCAAK,SAAS,EAAC,kCAAkC,aAChD,gCACC,SAAS,EAAE,IAAA,WAAI,EACd,2JAA2J,EAC3J,4FAA4F,CAC5F,YAEA,QAAQ,GACJ,EACN,iCACC,SAAS,EAAC,gFAAgF,kCAI1F,iCAAK,SAAS,EAAC,iJAAiJ,aAE/J,gCACC,SAAS,EAAE,uKAAuK,GACjL,EAEF,gCAAK,SAAS,EAAC,0GAA0G,GAAG,IACvH,EAEN,gCAAK,SAAS,EAAC,sIAAsI,GAAG,IACnJ,IACD,IACD,CACN,CAAC;AACH,CAAC;AAEY,QAAA,SAAS,GAAG,IAAA,wBAAa,EACrC,sBAAQ,CAAC,KAAK,EACd,8BAA8B,CAC9B,CAAC;AAEW,QAAA,IAAI,GAAG,MAAM,CAAC,MAAM,CAAC,QAAQ,EAAE;IAC3C,KAAK,EAAE,iBAAS;CAChB,CAAC,CAAC"}

package/dist/cjs/components/note/Note.stories.d.ts

@@ -2,7 +2,9 @@ import type { StoryObj } from '@storybook/react';
 import { Note } from './Note.js';
 declare const meta: {
     title: string;
-    component: typeof Note;
+    component: (({ className, color, children, ...rest }: import("./Note.js").NoteProps) => import("react/jsx-runtime.js").JSX.Element) & {
+        Input: import("react").FunctionComponent<import("../index.js").TextAreaProps>;
+    };
     args: {
         children: string;
     };
@@ -15,3 +17,4 @@ declare const meta: {
 export default meta;
 type Story = StoryObj<typeof Note>;
 export declare const Default: Story;
+export declare const Editable: Story;

package/dist/cjs/components/note/Note.stories.js

@@ -1,7 +1,8 @@
 // @unocss-include
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Default = void 0;
+exports.Editable = exports.Default = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
 const Note_js_1 = require("./Note.js");
 const meta = {
     title: 'Components/Note',
@@ -15,4 +16,9 @@ const meta = {
 };
 exports.default = meta;
 exports.Default = {};
+exports.Editable = {
+    render(args) {
+        return ((0, jsx_runtime_1.jsx)(Note_js_1.Note, Object.assign({}, args, { children: (0, jsx_runtime_1.jsx)(Note_js_1.Note.Input, {}) })));
+    },
+};
 //# sourceMappingURL=Note.stories.js.map

package/dist/cjs/components/note/Note.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Note.stories.js","sourceRoot":"","sources":["../../../../src/components/note/Note.stories.tsx"],"names":[],"mappings":";;;AACA,uCAAiC;AAEjC,MAAM,IAAI,GAAG;IACZ,KAAK,EAAE,iBAAiB;IACxB,SAAS,EAAE,cAAI;IAEf,IAAI,EAAE;QACL,QAAQ,EAAE,gBAAgB;KAC1B;IACD,UAAU,EAAE;QACX,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;KAC5B;CAC2B,CAAC;AAE9B,kBAAe,IAAI,CAAC;AAIP,QAAA,OAAO,GAAU,EAAE,CAAC"}
+{"version":3,"file":"Note.stories.js","sourceRoot":"","sources":["../../../../src/components/note/Note.stories.tsx"],"names":[],"mappings":";;;;AACA,uCAAiC;AAEjC,MAAM,IAAI,GAAG;IACZ,KAAK,EAAE,iBAAiB;IACxB,SAAS,EAAE,cAAI;IAEf,IAAI,EAAE;QACL,QAAQ,EAAE,gBAAgB;KAC1B;IACD,UAAU,EAAE;QACX,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;KAC5B;CAC2B,CAAC;AAE9B,kBAAe,IAAI,CAAC;AAIP,QAAA,OAAO,GAAU,EAAE,CAAC;AAEpB,QAAA,QAAQ,GAAU;IAC9B,MAAM,CAAC,IAAI;QACV,OAAO,CACN,uBAAC,cAAI,oBAAK,IAAI,cACb,uBAAC,cAAI,CAAC,KAAK,KAAG,IACR,CACP,CAAC;IACH,CAAC;CACD,CAAC"}

package/dist/cjs/components/textArea/TextArea.d.ts

@@ -8,6 +8,13 @@ export interface TextAreaProps extends InputProps {
     placeholdersIntervalMs?: number;
     rows?: number;
 }
-export declare const TextArea: ({ ref, autoSize, className, rows, padBottomPixels, onValueChange, ...rest }: TextAreaProps & {
+declare function TextAreaInput({ ref, autoSize, padBottomPixels, onValueChange, className, rows, ...rest }: TextAreaProps): import("react/jsx-runtime.js").JSX.Element;
+export declare const TextArea: (({ className, ...rest }: TextAreaProps & {
     ref?: React.Ref<any>;
-}) => import("react/jsx-runtime.js").JSX.Element;
+}) => import("react/jsx-runtime.js").JSX.Element) & {
+    Border: import("react").FunctionComponent<import("react").HTMLAttributes<HTMLDivElement> & {
+        ref?: import("react").Ref<HTMLDivElement>;
+    }>;
+    Input: typeof TextAreaInput;
+};
+export {};

package/dist/cjs/components/textArea/TextArea.js

@@ -1,5 +1,38 @@
 // @unocss-include
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -17,14 +50,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TextArea = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const clsx_1 = __importDefault(require("clsx"));
+const clsx_1 = __importStar(require("clsx"));
 const react_1 = require("react");
+const hooks_js_1 = require("../../hooks.js");
 const useMergedRef_js_1 = __importDefault(require("../../hooks/useMergedRef.js"));
-const index_js_1 = require("../input/index.js");
 const Input_js_1 = require("../input/Input.js");
-const TextArea = function TextArea(_a) {
+function TextAreaInput(_a) {
     var _b;
-    var { ref, autoSize, className, rows, padBottomPixels = 0, onValueChange } = _a, rest = __rest(_a, ["ref", "autoSize", "className", "rows", "padBottomPixels", "onValueChange"]);
+    var { ref, autoSize = true, padBottomPixels = 0, onValueChange, className, rows } = _a, rest = __rest(_a, ["ref", "autoSize", "padBottomPixels", "onValueChange", "className", "rows"]);
     const innerRef = (0, react_1.useRef)(null);
     const finalRef = (0, useMergedRef_js_1.default)(innerRef, ref);
     const [innerValue, setInnerValue] = (0, react_1.useState)('');
@@ -48,10 +81,18 @@ const TextArea = function TextArea(_a) {
             onValueChange(value, eventDetails);
         }
     }, [onValueChange]);
-    return ((0, jsx_runtime_1.jsx)(Input_js_1.Input.Border, { children: (0, jsx_runtime_1.jsx)(Input_js_1.Input.Input, Object.assign({ render: (0, jsx_runtime_1.jsx)("textarea", { rows: autoSize ? 1 : rows }), ref: finalRef, className: (0, clsx_1.default)(index_js_1.inputClassName, 'layer-components:[font-family:inherit] layer-components:resize-none layer-components:overflow-hidden layer-components:color-inherit', 'layer-variants:rounded-lg layer-variants:px-4 layer-variants:py-4', {
-                'layer-components:[resize:vertical]': !autoSize,
-                'layer-components:[resize:none]': autoSize,
-            }, className), onValueChange: handleValueChange }, rest)) }));
+    return ((0, jsx_runtime_1.jsx)(Input_js_1.Input.Input, Object.assign({ render: (0, jsx_runtime_1.jsx)("textarea", { rows: autoSize ? 1 : rows }), ref: finalRef, className: (0, clsx_1.default)('layer-composed:[font-family:inherit] layer-composed:overflow-hidden layer-composed:color-inherit', 'layer-composed:py-md', {
+            'layer-variants:[resize:vertical]': !autoSize,
+            'layer-variants:resize-none': autoSize,
+        }, className), onValueChange: handleValueChange }, rest)));
+}
+const TextAreaBorder = (0, hooks_js_1.withClassName)(Input_js_1.Input.Border, (0, clsx_1.clsx)('layer-composed:rounded-lg'));
+const TextAreaDefault = function TextArea(_a) {
+    var { className } = _a, rest = __rest(_a, ["className"]);
+    return ((0, jsx_runtime_1.jsx)(TextAreaBorder, { className: className, children: (0, jsx_runtime_1.jsx)(TextAreaInput, Object.assign({}, rest)) }));
 };
-exports.TextArea = TextArea;
+exports.TextArea = Object.assign(TextAreaDefault, {
+    Border: TextAreaBorder,
+    Input: TextAreaInput,
+});
 //# sourceMappingURL=TextArea.js.map

package/dist/cjs/components/textArea/TextArea.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextArea.js","sourceRoot":"","sources":["../../../../src/components/textArea/TextArea.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAAA,gDAA8B;AAC9B,iCAAuE;AACvE,kFAAuD;AACvD,gDAAmD;AACnD,gDAAsD;AAe/C,MAAM,QAAQ,GAAG,SAAS,QAAQ,CAAC,EAUzC;;QAVyC,EACzC,GAAG,EACH,QAAQ,EACR,SAAS,EACT,IAAI,EACJ,eAAe,GAAG,CAAC,EACnB,aAAa,OAIb,EAHG,IAAI,cAPkC,4EAQzC,CADO;IAIP,MAAM,QAAQ,GAAG,IAAA,cAAM,EAAM,IAAI,CAAC,CAAC;IACnC,MAAM,QAAQ,GAAG,IAAA,yBAAY,EAAC,QAAQ,EAAE,GAAG,CAAC,CAAC;IAE7C,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,IAAA,gBAAQ,EAAC,EAAE,CAAC,CAAC;IACjD,MAAM,UAAU,GAAG,MAAA,IAAI,CAAC,KAAK,mCAAI,UAAU,CAAC;IAE5C,gFAAgF;IAChF,IAAA,uBAAe,EAAC,GAAG,EAAE;QACpB,IAAI,CAAC,QAAQ;YAAE,OAAO;QACtB,MAAM,OAAO,GAAG,QAAQ,CAAC,OAAO,CAAC;QACjC,IAAI,OAAO,EAAE,CAAC;YACb,IAAI,OAAO,CAAC,KAAK,KAAK,EAAE,IAAI,eAAe,EAAE,CAAC;gBAC7C,OAAQ,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC;gBAC/B,MAAM,UAAU,GAAG,OAAO,CAAC,YAAY,CAAC;gBACxC,OAAO,CAAC,KAAK,CAAC,MAAM,GAAG,UAAU,GAAG,eAAe,GAAG,IAAI,CAAC;YAC5D,CAAC;QACF,CAAC;IACF,CAAC,EAAE,CAAC,QAAQ,EAAE,eAAe,EAAE,UAAU,CAAC,CAAC,CAAC;IAE5C,MAAM,iBAAiB,GAAG,IAAA,mBAAW,EACpC,CAAC,KAAK,EAAE,YAAY,EAAE,EAAE;QACvB,aAAa,CAAC,KAAK,CAAC,CAAC;QACrB,IAAI,aAAa,EAAE,CAAC;YACnB,aAAa,CAAC,KAAK,EAAE,YAAY,CAAC,CAAC;QACpC,CAAC;IACF,CAAC,EACD,CAAC,aAAa,CAAC,CACf,CAAC;IAEF,OAAO,CACN,uBAAC,gBAAK,CAAC,MAAM,cACZ,uBAAC,gBAAK,CAAC,KAAK,kBACX,MAAM,EAAE,qCAAU,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,GAAI,EAC/C,GAAG,EAAE,QAAQ,EACb,SAAS,EAAE,IAAA,cAAU,EACpB,yBAAc,EACd,oFAAoF,EACpF,uCAAuC,EACvC;gBACC,oCAAoC,EAAE,CAAC,QAAQ;gBAC/C,gCAAgC,EAAE,QAAQ;aAC1C,EACD,SAAS,CACT,EACD,aAAa,EAAE,iBAAiB,IAC5B,IAAI,EACP,GACY,CACf,CAAC;AACH,CAAC,CAAC;AA5DW,QAAA,QAAQ,YA4DnB"}
+{"version":3,"file":"TextArea.js","sourceRoot":"","sources":["../../../../src/components/textArea/TextArea.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAAwC;AACxC,iCAAuE;AACvE,6CAA+C;AAC/C,kFAAuD;AACvD,gDAAsD;AAetD,SAAS,aAAa,CAAC,EAQP;;QARO,EACtB,GAAG,EACH,QAAQ,GAAG,IAAI,EACf,eAAe,GAAG,CAAC,EACnB,aAAa,EACb,SAAS,EACT,IAAI,OAEW,EADZ,IAAI,cAPe,4EAQtB,CADO;IAEP,MAAM,QAAQ,GAAG,IAAA,cAAM,EAAM,IAAI,CAAC,CAAC;IACnC,MAAM,QAAQ,GAAG,IAAA,yBAAY,EAAC,QAAQ,EAAE,GAAG,CAAC,CAAC;IAE7C,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,IAAA,gBAAQ,EAAC,EAAE,CAAC,CAAC;IACjD,MAAM,UAAU,GAAG,MAAA,IAAI,CAAC,KAAK,mCAAI,UAAU,CAAC;IAE5C,gFAAgF;IAChF,IAAA,uBAAe,EAAC,GAAG,EAAE;QACpB,IAAI,CAAC,QAAQ;YAAE,OAAO;QACtB,MAAM,OAAO,GAAG,QAAQ,CAAC,OAAO,CAAC;QACjC,IAAI,OAAO,EAAE,CAAC;YACb,IAAI,OAAO,CAAC,KAAK,KAAK,EAAE,IAAI,eAAe,EAAE,CAAC;gBAC7C,OAAQ,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC;gBAC/B,MAAM,UAAU,GAAG,OAAO,CAAC,YAAY,CAAC;gBACxC,OAAO,CAAC,KAAK,CAAC,MAAM,GAAG,UAAU,GAAG,eAAe,GAAG,IAAI,CAAC;YAC5D,CAAC;QACF,CAAC;IACF,CAAC,EAAE,CAAC,QAAQ,EAAE,eAAe,EAAE,UAAU,CAAC,CAAC,CAAC;IAE5C,MAAM,iBAAiB,GAAG,IAAA,mBAAW,EACpC,CAAC,KAAK,EAAE,YAAY,EAAE,EAAE;QACvB,aAAa,CAAC,KAAK,CAAC,CAAC;QACrB,IAAI,aAAa,EAAE,CAAC;YACnB,aAAa,CAAC,KAAK,EAAE,YAAY,CAAC,CAAC;QACpC,CAAC;IACF,CAAC,EACD,CAAC,aAAa,CAAC,CACf,CAAC;IAEF,OAAO,CACN,uBAAC,gBAAK,CAAC,KAAK,kBACX,MAAM,EAAE,qCAAU,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,GAAI,EAC/C,GAAG,EAAE,QAAQ,EACb,SAAS,EAAE,IAAA,cAAU,EACpB,sEAAsE,EACtE,sBAAsB,EACtB;YACC,kCAAkC,EAAE,CAAC,QAAQ;YAC7C,4BAA4B,EAAE,QAAQ;SACtC,EACD,SAAS,CACT,EACD,aAAa,EAAE,iBAAiB,IAC5B,IAAI,EACP,CACF,CAAC;AACH,CAAC;AAED,MAAM,cAAc,GAAG,IAAA,wBAAa,EACnC,gBAAK,CAAC,MAAM,EACZ,IAAA,WAAI,EAAC,2BAA2B,CAAC,CACjC,CAAC;AAEF,MAAM,eAAe,GAAG,SAAS,QAAQ,CAAC,EAKzC;QALyC,EACzC,SAAS,OAIT,EAHG,IAAI,cAFkC,aAGzC,CADO;IAIP,OAAO,CACN,uBAAC,cAAc,IAAC,SAAS,EAAE,SAAS,YACnC,uBAAC,aAAa,oBAAK,IAAI,EAAI,GACX,CACjB,CAAC;AACH,CAAC,CAAC;AAEW,QAAA,QAAQ,GAAG,MAAM,CAAC,MAAM,CAAC,eAAe,EAAE;IACtD,MAAM,EAAE,cAAc;IACtB,KAAK,EAAE,aAAa;CACpB,CAAC,CAAC"}

package/dist/cjs/components/textArea/TextArea.stories.d.ts

@@ -2,9 +2,14 @@ import type { StoryObj } from '@storybook/react';
 import { TextArea } from './TextArea.js';
 declare const meta: {
     title: string;
-    component: ({ ref, autoSize, className, rows, padBottomPixels, onValueChange, ...rest }: import("./TextArea.js").TextAreaProps & {
+    component: (({ className, ...rest }: import("./TextArea.js").TextAreaProps & {
         ref?: React.Ref<any>;
-    }) => import("react/jsx-runtime.js").JSX.Element;
+    }) => import("react/jsx-runtime.js").JSX.Element) & {
+        Border: import("react").FunctionComponent<import("react").HTMLAttributes<HTMLDivElement> & {
+            ref?: import("react").Ref<HTMLDivElement>;
+        }>;
+        Input: ({ ref, autoSize, padBottomPixels, onValueChange, className, rows, ...rest }: import("./TextArea.js").TextAreaProps) => import("react/jsx-runtime.js").JSX.Element;
+    };
     argTypes: {};
     parameters: {
         controls: {