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

package/dist/esm/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").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").JSX.Element;
 };

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

@@ -15,10 +15,14 @@ import { Input as BaseInput, } from '@base-ui/react/input';
 import clsx from 'clsx';
 import { withClassName } from '../../hooks.js';
 import { useRotatingShuffledValue } from '../../hooks/useRotatingShuffledValue.js';
+import { GroupScaleReset } from '../../systems/GroupScale.js';
 import { inputInfo } from '../../systems/inputs.js';
 export const inputClassName = clsx('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 = clsx('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 = withClassName('div', inputBorderClassName);
+const inputBorderClassName = clsx('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 (_jsx(GroupScaleReset, { children: _jsx("div", Object.assign({}, props)) }));
+}
+const InputBorder = 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/esm/components/input/Input.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../../../src/components/input/Input.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EACN,KAAK,IAAI,SAAS,GAElB,MAAM,sBAAsB,CAAC;AAC9B,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAC/C,OAAO,EAAE,wBAAwB,EAAE,MAAM,yCAAyC,CAAC;AACnF,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAEpD,MAAM,CAAC,MAAM,cAAc,GAAG,IAAI,CACjC,+GAA+G,EAC/G,mCAAmC,EACnC,gDAAgD,EAChD,uCAAuC,EACvC,+CAA+C,EAC/C,kDAAkD,EAClD,iDAAiD,CACjD,CAAC;AAEF,MAAM,oBAAoB,GAAG,IAAI,CAChC,8KAA8K,EAC9K,gDAAgD,EAChD,yGAAyG,EACzG,sFAAsF,EACtF,iHAAiH,EACjH,sDAAsD,EACtD,oCAAoC,CACpC,CAAC;AAEF,MAAM,WAAW,GAAG,aAAa,CAAC,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,SAAS,CAAC,eAAe;YACzB,IAAI,CAAC,GAAG,EAAE,GAAG,SAAS,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,wBAAwB,CACjD,YAAY,aAAZ,YAAY,cAAZ,YAAY,GAAI,EAAE,EAClB,sBAAsB,CACtB,CAAC;IAEF,OAAO,CACN,KAAC,SAAS,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,IAAI,CAAC,cAAc,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,MAAC,WAAW,IAAC,GAAG,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,aAC/C,cAAc,EACf,KAAC,UAAU,oBAAK,KAAK,EAAI,EACxB,YAAY,IACA,CACd,CAAC;AACH,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,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":"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"}

package/dist/esm/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").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").JSX.Element;
     };
     argTypes: {

package/dist/esm/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").JSX.Element;
+declare function NoteRoot({ className, color, children, ...rest }: NoteProps): import("react/jsx-runtime").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/esm/components/note/Note.js

@@ -12,8 +12,14 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import classNames, { clsx } from 'clsx';
-export function Note(_a) {
+import { withClassName } from '../../hooks.js';
+import { TextArea } from '../textArea/TextArea.js';
+function NoteRoot(_a) {
     var { className, color, children } = _a, rest = __rest(_a, ["className", "color", "children"]);
-    return (_jsx("div", Object.assign({ className: classNames(color && `palette-${color}`, className) }, rest, { children: _jsxs("div", { className: "layer-components:flex layer-components:flex-row", children: [_jsx("div", { className: 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 }), _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: [_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: [_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` }), _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" })] }), _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 (_jsx("div", Object.assign({ className: classNames(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: _jsxs("div", { className: "layer-components:flex layer-components:flex-row", children: [_jsx("div", { className: 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 }), _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: [_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: [_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` }), _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" })] }), _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" })] })] }) })));
 }
+export const NoteInput = withClassName(TextArea.Input, 'layer-composed2:w-full layer-composed2:p-0');
+export const Note = Object.assign(NoteRoot, {
+    Input: NoteInput,
+});
 //# sourceMappingURL=Note.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Note.js","sourceRoot":"","sources":["../../../../src/components/note/Note.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,UAAU,EAAE,EAAE,IAAI,EAAE,MAAM,MAAM,CAAC;AASxC,MAAM,UAAU,IAAI,CAAC,EAAkD;QAAlD,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,OAAsB,EAAjB,IAAI,cAArC,kCAAuC,CAAF;IACzD,OAAO,CACN,4BACC,SAAS,EAAE,UAAU,CAAC,KAAK,IAAI,WAAW,KAAK,EAAE,EAAE,SAAS,CAAC,IACzD,IAAI,cAER,eAAK,SAAS,EAAC,kCAAkC,aAChD,cACC,SAAS,EAAE,IAAI,CACd,2JAA2J,EAC3J,iDAAiD,CACjD,YAEA,QAAQ,GACJ,EACN,eACC,SAAS,EAAC,gFAAgF,kCAI1F,eAAK,SAAS,EAAC,iJAAiJ,aAE/J,cACC,SAAS,EAAE,uKAAuK,GACjL,EAEF,cAAK,SAAS,EAAC,0GAA0G,GAAG,IACvH,EAEN,cAAK,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,OAAO,UAAU,EAAE,EAAE,IAAI,EAAE,MAAM,MAAM,CAAC;AAExC,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAE/C,OAAO,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAOnD,SAAS,QAAQ,CAAC,EAAkD;QAAlD,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,OAAsB,EAAjB,IAAI,cAArC,kCAAuC,CAAF;IACtD,OAAO,CACN,4BACC,SAAS,EAAE,UAAU,CACpB,KAAK,IAAI,WAAW,KAAK,EAAE,EAC3B,uGAAuG,EACvG,8IAA8I,EAC9I,SAAS,CACT,IACG,IAAI,cAER,eAAK,SAAS,EAAC,kCAAkC,aAChD,cACC,SAAS,EAAE,IAAI,CACd,2JAA2J,EAC3J,4FAA4F,CAC5F,YAEA,QAAQ,GACJ,EACN,eACC,SAAS,EAAC,gFAAgF,kCAI1F,eAAK,SAAS,EAAC,iJAAiJ,aAE/J,cACC,SAAS,EAAE,uKAAuK,GACjL,EAEF,cAAK,SAAS,EAAC,0GAA0G,GAAG,IACvH,EAEN,cAAK,SAAS,EAAC,sIAAsI,GAAG,IACnJ,IACD,IACD,CACN,CAAC;AACH,CAAC;AAED,MAAM,CAAC,MAAM,SAAS,GAAG,aAAa,CACrC,QAAQ,CAAC,KAAK,EACd,8BAA8B,CAC9B,CAAC;AAEF,MAAM,CAAC,MAAM,IAAI,GAAG,MAAM,CAAC,MAAM,CAAC,QAAQ,EAAE;IAC3C,KAAK,EAAE,SAAS;CAChB,CAAC,CAAC"}

package/dist/esm/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").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/esm/components/note/Note.stories.js

@@ -1,4 +1,5 @@
 // @unocss-include
+import { jsx as _jsx } from "react/jsx-runtime";
 import { Note } from './Note.js';
 const meta = {
     title: 'Components/Note',
@@ -12,4 +13,9 @@ const meta = {
 };
 export default meta;
 export const Default = {};
+export const Editable = {
+    render(args) {
+        return (_jsx(Note, Object.assign({}, args, { children: _jsx(Note.Input, {}) })));
+    },
+};
 //# sourceMappingURL=Note.stories.js.map

package/dist/esm/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,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAEjC,MAAM,IAAI,GAAG;IACZ,KAAK,EAAE,iBAAiB;IACxB,SAAS,EAAE,IAAI;IAEf,IAAI,EAAE;QACL,QAAQ,EAAE,gBAAgB;KAC1B;IACD,UAAU,EAAE;QACX,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;KAC5B;CAC2B,CAAC;AAE9B,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,OAAO,GAAU,EAAE,CAAC"}
+{"version":3,"file":"Note.stories.js","sourceRoot":"","sources":["../../../../src/components/note/Note.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAEjC,MAAM,IAAI,GAAG;IACZ,KAAK,EAAE,iBAAiB;IACxB,SAAS,EAAE,IAAI;IAEf,IAAI,EAAE;QACL,QAAQ,EAAE,gBAAgB;KAC1B;IACD,UAAU,EAAE;QACX,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;KAC5B;CAC2B,CAAC;AAE9B,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,OAAO,GAAU,EAAE,CAAC;AAEjC,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC9B,MAAM,CAAC,IAAI;QACV,OAAO,CACN,KAAC,IAAI,oBAAK,IAAI,cACb,KAAC,IAAI,CAAC,KAAK,KAAG,IACR,CACP,CAAC;IACH,CAAC;CACD,CAAC"}

package/dist/esm/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").JSX.Element;
+export declare const TextArea: (({ className, ...rest }: TextAreaProps & {
     ref?: React.Ref<any>;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element) & {
+    Border: import("react").FunctionComponent<import("react").HTMLAttributes<HTMLDivElement> & {
+        ref?: import("react").Ref<HTMLDivElement>;
+    }>;
+    Input: typeof TextAreaInput;
+};
+export {};

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

@@ -11,14 +11,14 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import classNames from 'clsx';
+import classNames, { clsx } from 'clsx';
 import { useCallback, useLayoutEffect, useRef, useState } from 'react';
+import { withClassName } from '../../hooks.js';
 import useMergedRef from '../../hooks/useMergedRef.js';
-import { inputClassName } from '../input/index.js';
 import { Input } from '../input/Input.js';
-export 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 = useRef(null);
     const finalRef = useMergedRef(innerRef, ref);
     const [innerValue, setInnerValue] = useState('');
@@ -42,9 +42,18 @@ export const TextArea = function TextArea(_a) {
             onValueChange(value, eventDetails);
         }
     }, [onValueChange]);
-    return (_jsx(Input.Border, { children: _jsx(Input.Input, Object.assign({ render: _jsx("textarea", { rows: autoSize ? 1 : rows }), ref: finalRef, className: classNames(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 (_jsx(Input.Input, Object.assign({ render: _jsx("textarea", { rows: autoSize ? 1 : rows }), ref: finalRef, className: classNames('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 = withClassName(Input.Border, clsx('layer-composed:rounded-lg'));
+const TextAreaDefault = function TextArea(_a) {
+    var { className } = _a, rest = __rest(_a, ["className"]);
+    return (_jsx(TextAreaBorder, { className: className, children: _jsx(TextAreaInput, Object.assign({}, rest)) }));
 };
+export const TextArea = Object.assign(TextAreaDefault, {
+    Border: TextAreaBorder,
+    Input: TextAreaInput,
+});
 //# sourceMappingURL=TextArea.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"TextArea.js","sourceRoot":"","sources":["../../../../src/components/textArea/TextArea.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,UAAU,MAAM,MAAM,CAAC;AAC9B,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACvE,OAAO,YAAY,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAAE,KAAK,EAAc,MAAM,mBAAmB,CAAC;AAetD,MAAM,CAAC,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,MAAM,CAAM,IAAI,CAAC,CAAC;IACnC,MAAM,QAAQ,GAAG,YAAY,CAAC,QAAQ,EAAE,GAAG,CAAC,CAAC;IAE7C,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IACjD,MAAM,UAAU,GAAG,MAAA,IAAI,CAAC,KAAK,mCAAI,UAAU,CAAC;IAE5C,gFAAgF;IAChF,eAAe,CAAC,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,WAAW,CACpC,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,KAAC,KAAK,CAAC,MAAM,cACZ,KAAC,KAAK,CAAC,KAAK,kBACX,MAAM,EAAE,mBAAU,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,GAAI,EAC/C,GAAG,EAAE,QAAQ,EACb,SAAS,EAAE,UAAU,CACpB,cAAc,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"}
+{"version":3,"file":"TextArea.js","sourceRoot":"","sources":["../../../../src/components/textArea/TextArea.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,UAAU,EAAE,EAAE,IAAI,EAAE,MAAM,MAAM,CAAC;AACxC,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACvE,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAC/C,OAAO,YAAY,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,KAAK,EAAc,MAAM,mBAAmB,CAAC;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,MAAM,CAAM,IAAI,CAAC,CAAC;IACnC,MAAM,QAAQ,GAAG,YAAY,CAAC,QAAQ,EAAE,GAAG,CAAC,CAAC;IAE7C,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IACjD,MAAM,UAAU,GAAG,MAAA,IAAI,CAAC,KAAK,mCAAI,UAAU,CAAC;IAE5C,gFAAgF;IAChF,eAAe,CAAC,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,WAAW,CACpC,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,KAAC,KAAK,CAAC,KAAK,kBACX,MAAM,EAAE,mBAAU,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,GAAI,EAC/C,GAAG,EAAE,QAAQ,EACb,SAAS,EAAE,UAAU,CACpB,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,aAAa,CACnC,KAAK,CAAC,MAAM,EACZ,IAAI,CAAC,2BAA2B,CAAC,CACjC,CAAC;AAEF,MAAM,eAAe,GAAG,SAAS,QAAQ,CAAC,EAKzC;QALyC,EACzC,SAAS,OAIT,EAHG,IAAI,cAFkC,aAGzC,CADO;IAIP,OAAO,CACN,KAAC,cAAc,IAAC,SAAS,EAAE,SAAS,YACnC,KAAC,aAAa,oBAAK,IAAI,EAAI,GACX,CACjB,CAAC;AACH,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG,MAAM,CAAC,MAAM,CAAC,eAAe,EAAE;IACtD,MAAM,EAAE,cAAc;IACtB,KAAK,EAAE,aAAa;CACpB,CAAC,CAAC"}

package/dist/esm/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").JSX.Element;
+    }) => import("react/jsx-runtime").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").JSX.Element;
+    };
     argTypes: {};
     parameters: {
         controls: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a-type/ui",
-  "version": "4.1.0-beta.4",
+  "version": "4.1.0-beta.6",
   "type": "module",
   "repository": {
     "url": "https://github.com/a-type/ui"

package/src/components/input/Input.tsx

@@ -6,6 +6,7 @@ import clsx from 'clsx';
 import { Ref } from 'react';
 import { withClassName } from '../../hooks.js';
 import { useRotatingShuffledValue } from '../../hooks/useRotatingShuffledValue.js';
+import { GroupScaleReset } from '../../systems/GroupScale.js';
 import { inputInfo } from '../../systems/inputs.js';
 
 export const inputClassName = clsx(
@@ -21,14 +22,25 @@ export const inputClassName = clsx(
 const inputBorderClassName = clsx(
 	'layer-components:(flex flex-row items-center gap-xs border-1 rounded-lg border-solid text-md shadow-sm shadow-inset transition-shadow color-black bg-white border-gray-dark)',
 	'layer-components:(w-max-content overflow-clip)',
-	'layer-components:[&:has(input:disabled)]:(shadow-none bg-transparent border-gray placeholder-gray-dark)',
-	'layer-components:[&:has(input:focus-visible)]:(outline-none ring ring-4 ring-accent)',
-	'layer-variants:[&:has(input:focus[data-focus-clicked])]:(outline-none ring ring-4 bg-lighten-3 ring-main-light)',
-	'layer-components:[&:has(input:hover)]:(border-black)',
+	'layer-components:[&:has(input:disabled),&:has(textarea:disabled)]:(shadow-none bg-transparent border-gray placeholder-gray-dark)',
+	'layer-components:[&:has(input:focus-visible),&:has(textarea:focus-visible)]:(outline-none ring ring-4 ring-accent)',
+	'layer-variants:[&:has(input:focus[data-focus-clicked]),&:has(textarea:focus[data-focus-clicked])]:(outline-none ring ring-4 bg-lighten-3 ring-main-light)',
+	'layer-components:[&:has(input:hover),&:has(textarea:hover)]:(border-black)',
 	'layer-components:[&>.icon]:(mx-sm)',
 );
 
-const InputBorder = withClassName('div', inputBorderClassName);
+function InputBorderImpl(
+	props: React.HTMLAttributes<HTMLDivElement> & {
+		ref?: Ref<HTMLDivElement>;
+	},
+) {
+	return (
+		<GroupScaleReset>
+			<div {...props} />
+		</GroupScaleReset>
+	);
+}
+const InputBorder = withClassName(InputBorderImpl, inputBorderClassName);
 
 const InnerInput = function InnerInput({
 	autoSelect,

package/src/components/note/Note.stories.tsx

@@ -18,3 +18,13 @@ export default meta;
 type Story = StoryObj<typeof Note>;
 
 export const Default: Story = {};
+
+export const Editable: Story = {
+	render(args) {
+		return (
+			<Note {...args}>
+				<Note.Input />
+			</Note>
+		);
+	},
+};

package/src/components/note/Note.tsx

@@ -1,23 +1,30 @@
 import classNames, { clsx } from 'clsx';
 import { HTMLAttributes, ReactNode } from 'react';
+import { withClassName } from '../../hooks.js';
 import { PaletteName } from '../../uno/index.js';
+import { TextArea } from '../textArea/TextArea.js';
 
 export interface NoteProps extends HTMLAttributes<HTMLDivElement> {
 	children?: ReactNode;
 	color?: PaletteName;
 }
 
-export function Note({ className, color, children, ...rest }: NoteProps) {
+function NoteRoot({ className, color, children, ...rest }: NoteProps) {
 	return (
 		<div
-			className={classNames(color && `palette-${color}`, className)}
+			className={classNames(
+				color && `palette-${color}`,
+				'layer-components:[&:has(input:focus-visible),&:has(textarea:focus-visible)]:(ring ring-4 ring-accent)',
+				'layer-variants:[&:has(input:focus[data-focus-clicked]),&:has(textarea:focus[data-focus-clicked])]:(ring ring-4 bg-lighten-3 ring-main-light)',
+				className,
+			)}
 			{...rest}
 		>
 			<div className="layer-components:(flex flex-row)">
 				<div
 					className={clsx(
 						'layer-components:(relative flex-1 border border-solid p-2 text-sm italic color-black bg-main-wash bg-darken-1 border-main-dark) layer-variants:border-r-0',
-						'layer-variants:[&_input,&_textarea]:shadow-none',
+						'layer-variants:[&_input,&_textarea]:(border-none p-0 shadow-none bg-transparent ring-none)',
 					)}
 				>
 					{children}
@@ -42,3 +49,12 @@ export function Note({ className, color, children, ...rest }: NoteProps) {
 		</div>
 	);
 }
+
+export const NoteInput = withClassName(
+	TextArea.Input,
+	'layer-composed2:(w-full p-0)',
+);
+
+export const Note = Object.assign(NoteRoot, {
+	Input: NoteInput,
+});

package/src/components/textArea/TextArea.tsx

@@ -1,7 +1,7 @@
-import classNames from 'clsx';
+import classNames, { clsx } from 'clsx';
 import { useCallback, useLayoutEffect, useRef, useState } from 'react';
+import { withClassName } from '../../hooks.js';
 import useMergedRef from '../../hooks/useMergedRef.js';
-import { inputClassName } from '../input/index.js';
 import { Input, InputProps } from '../input/Input.js';
 
 export interface TextAreaProps extends InputProps {
@@ -17,17 +17,15 @@ export interface TextAreaProps extends InputProps {
 
 type HandleChange = Exclude<InputProps['onValueChange'], undefined>;
 
-export const TextArea = function TextArea({
+function TextAreaInput({
 	ref,
-	autoSize,
-	className,
-	rows,
+	autoSize = true,
 	padBottomPixels = 0,
 	onValueChange,
+	className,
+	rows,
 	...rest
-}: TextAreaProps & {
-	ref?: React.Ref<any>;
-}) {
+}: TextAreaProps) {
 	const innerRef = useRef<any>(null);
 	const finalRef = useMergedRef(innerRef, ref);
 
@@ -58,23 +56,43 @@ export const TextArea = function TextArea({
 	);
 
 	return (
-		<Input.Border>
-			<Input.Input
-				render={<textarea rows={autoSize ? 1 : rows} />}
-				ref={finalRef}
-				className={classNames(
-					inputClassName,
-					'layer-components:([font-family:inherit] resize-none overflow-hidden color-inherit)',
-					'layer-variants:(rounded-lg px-4 py-4)',
-					{
-						'layer-components:[resize:vertical]': !autoSize,
-						'layer-components:[resize:none]': autoSize,
-					},
-					className,
-				)}
-				onValueChange={handleValueChange}
-				{...rest}
-			/>
-		</Input.Border>
+		<Input.Input
+			render={<textarea rows={autoSize ? 1 : rows} />}
+			ref={finalRef}
+			className={classNames(
+				'layer-composed:([font-family:inherit] overflow-hidden color-inherit)',
+				'layer-composed:py-md',
+				{
+					'layer-variants:[resize:vertical]': !autoSize,
+					'layer-variants:resize-none': autoSize,
+				},
+				className,
+			)}
+			onValueChange={handleValueChange}
+			{...rest}
+		/>
+	);
+}
+
+const TextAreaBorder = withClassName(
+	Input.Border,
+	clsx('layer-composed:rounded-lg'),
+);
+
+const TextAreaDefault = function TextArea({
+	className,
+	...rest
+}: TextAreaProps & {
+	ref?: React.Ref<any>;
+}) {
+	return (
+		<TextAreaBorder className={className}>
+			<TextAreaInput {...rest} />
+		</TextAreaBorder>
 	);
 };
+
+export const TextArea = Object.assign(TextAreaDefault, {
+	Border: TextAreaBorder,
+	Input: TextAreaInput,
+});