@a-type/ui 6.1.37 → 6.1.38

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/components/input/Input.module.css +13 -4
  2. package/dist/components/richEditor/richEditor.stories.js +2 -1
  3. package/dist/components/richEditor/richEditor.stories.js.map +1 -1
  4. package/package.json +1 -1
  5. package/src/components/input/Input.module.css +13 -4
  6. package/src/components/richEditor/richEditor.stories.tsx +45 -41
package/dist/components/input/Input.module.css CHANGED
@@ -58,7 +58,8 @@
58
58
  font-weight: var(--m-prose-secondary-weight);
59
59
 
60
60
  &:has(input:disabled),
61
- &:has(textarea:disabled) {
61
+ &:has(textarea:disabled),
62
+ &:has([contenteditable]:disabled) {
62
63
  --mx-shadow-value: 0 0 0 0 transparent;
63
64
  @apply --mx-bg(transparent);
64
65
  @apply --mx-borderColor-lighter(2);
@@ -70,18 +71,26 @@
70
71
  }
71
72
 
72
73
  &:has(input:focus-visible[data-focus-clicked='false']),
73
- &:has(textarea:focus-visible[data-focus-clicked='false']) {
74
+ &:has(textarea:focus-visible[data-focus-clicked='false']),
75
+ &:has([contenteditable]:focus-visible[data-focus-clicked='false']) {
74
76
  @apply --mx-bg-lighter(3);
75
77
  --mx-ring-value: --fn-focus-ring();
76
78
  }
77
79
  &:has(input:focus),
78
- &:has(textarea:focus) {
80
+ &:has(textarea:focus),
81
+ &:has([contenteditable]:focus) {
79
82
  @apply --mx-bg-lighter(3);
80
83
  --mx-ring-value: --fn-ring(var(--m-tint-light), 4px);
81
84
  }
85
+ & input:focus,
86
+ & textarea:focus,
87
+ & [contenteditable]:focus {
88
+ outline: none;
89
+ }
82
90
 
83
91
  &:has(input:hover:not(:disabled):not(:focus)),
84
- &:has(textarea:hover:not(:disabled):not(:focus)) {
92
+ &:has(textarea:hover:not(:disabled):not(:focus)),
93
+ &:has([contenteditable]:hover:not(:disabled):not(:focus)) {
85
94
  @apply --mx-bg-lighter(2);
86
95
  @apply --mx-borderColor-heavier(2);
87
96
  }
package/dist/components/richEditor/richEditor.stories.js CHANGED
@@ -1,5 +1,6 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import clsx from 'clsx';
3
+ import { Input } from '../input/Input.js';
3
4
  import { tipTapClassName, tipTapReadonlyClassName } from './index.js';
4
5
  const meta = {
5
6
  title: 'Components/RichEditor',
@@ -13,7 +14,7 @@ const meta = {
13
14
  export default meta;
14
15
  export const Default = {
15
16
  render(args) {
16
- return (_jsx("div", { className: clsx(tipTapClassName, args.readonly && tipTapReadonlyClassName), children: _jsxs("div", { className: "ProseMirror", children: [_jsx("p", { children: paragraphText }), _jsx("h1", { children: "Heading 1" }), _jsx("p", { children: paragraphText }), _jsx("h2", { children: "Heading 2" }), _jsx("p", { children: paragraphText }), _jsx("p", { children: paragraphText }), _jsx("hr", {}), _jsx("p", { children: paragraphText }), _jsx("blockquote", { children: paragraphText }), _jsx("h3", { children: "Heading 3" }), _jsxs("ul", { children: [_jsx("li", { children: paragraphText }), _jsx("li", { children: paragraphText })] }), _jsx("p", { children: paragraphText }), _jsxs("ol", { children: [_jsx("li", { children: paragraphText }), _jsx("li", { children: paragraphText })] }), _jsx("h4", { children: "Heading 4" }), _jsx("p", { children: paragraphText }), _jsxs("p", { children: [_jsx("mark", { children: "Highlighted" }), " text"] }), _jsx("p", { children: _jsx("a", { href: "#", children: "Link" }) }), _jsxs("p", { children: [_jsx("strong", { children: "Bold" }), " text"] }), _jsxs("p", { children: [_jsx("em", { children: "Italic" }), " text"] })] }) }));
17
+ return (_jsx(Input.Border, { children: _jsx("div", { contentEditable: true, className: clsx(tipTapClassName, args.readonly && tipTapReadonlyClassName), children: _jsxs("div", { className: "ProseMirror", children: [_jsx("p", { children: paragraphText }), _jsx("h1", { children: "Heading 1" }), _jsx("p", { children: paragraphText }), _jsx("h2", { children: "Heading 2" }), _jsx("p", { children: paragraphText }), _jsx("p", { children: paragraphText }), _jsx("hr", {}), _jsx("p", { children: paragraphText }), _jsx("blockquote", { children: paragraphText }), _jsx("h3", { children: "Heading 3" }), _jsxs("ul", { children: [_jsx("li", { children: paragraphText }), _jsx("li", { children: paragraphText })] }), _jsx("p", { children: paragraphText }), _jsxs("ol", { children: [_jsx("li", { children: paragraphText }), _jsx("li", { children: paragraphText })] }), _jsx("h4", { children: "Heading 4" }), _jsx("p", { children: paragraphText }), _jsxs("p", { children: [_jsx("mark", { children: "Highlighted" }), " text"] }), _jsx("p", { children: _jsx("a", { href: "#", children: "Link" }) }), _jsxs("p", { children: [_jsx("strong", { children: "Bold" }), " text"] }), _jsxs("p", { children: [_jsx("em", { children: "Italic" }), " text"] })] }) }) }));
17
18
  },
18
19
  };
19
20
  const paragraphText = `Lorem ipsum dolor sit amet, consectetur adipiscing elit
package/dist/components/richEditor/richEditor.stories.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"richEditor.stories.js","sourceRoot":"","sources":["../../../src/components/richEditor/richEditor.stories.tsx"],"names":[],"mappings":";AACA,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,eAAe,EAAE,uBAAuB,EAAE,MAAM,YAAY,CAAC;AAEtE,MAAM,IAAI,GAAG;IACZ,KAAK,EAAE,uBAAuB;IAC9B,QAAQ,EAAE;QACT,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;KAChC;IACD,UAAU,EAAE;QACX,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;KAC5B;CACqC,CAAC;AAExC,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,OAAO,GAAU;IAC7B,MAAM,CAAC,IAAI;QACV,OAAO,CACN,cACC,SAAS,EAAE,IAAI,CACd,eAAe,EACf,IAAI,CAAC,QAAQ,IAAI,uBAAuB,CACxC,YAED,eAAK,SAAS,EAAC,aAAa,aAC3B,sBAAI,aAAa,GAAK,EACtB,qCAAkB,EAClB,sBAAI,aAAa,GAAK,EACtB,qCAAkB,EAClB,sBAAI,aAAa,GAAK,EACtB,sBAAI,aAAa,GAAK,EACtB,cAAM,EACN,sBAAI,aAAa,GAAK,EAEtB,+BAAa,aAAa,GAAc,EACxC,qCAAkB,EAClB,yBACC,uBAAK,aAAa,GAAM,EACxB,uBAAK,aAAa,GAAM,IACpB,EACL,sBAAI,aAAa,GAAK,EACtB,yBACC,uBAAK,aAAa,GAAM,EACxB,uBAAK,aAAa,GAAM,IACpB,EACL,qCAAkB,EAClB,sBAAI,aAAa,GAAK,EACtB,wBACC,yCAAwB,aACrB,EACJ,sBACC,YAAG,IAAI,EAAC,GAAG,qBAAS,GACjB,EACJ,wBACC,oCAAqB,aAClB,EACJ,wBACC,kCAAe,aACZ,IACC,GACD,CACN,CAAC;IACH,CAAC;CACD,CAAC;AAEF,MAAM,aAAa,GAAG;;;;8GAIwF,CAAC"}
1
+ {"version":3,"file":"richEditor.stories.js","sourceRoot":"","sources":["../../../src/components/richEditor/richEditor.stories.tsx"],"names":[],"mappings":";AACA,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC1C,OAAO,EAAE,eAAe,EAAE,uBAAuB,EAAE,MAAM,YAAY,CAAC;AAEtE,MAAM,IAAI,GAAG;IACZ,KAAK,EAAE,uBAAuB;IAC9B,QAAQ,EAAE;QACT,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;KAChC;IACD,UAAU,EAAE;QACX,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;KAC5B;CACqC,CAAC;AAExC,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,OAAO,GAAU;IAC7B,MAAM,CAAC,IAAI;QACV,OAAO,CACN,KAAC,KAAK,CAAC,MAAM,cACZ,cACC,eAAe,EAAE,IAAI,EACrB,SAAS,EAAE,IAAI,CACd,eAAe,EACf,IAAI,CAAC,QAAQ,IAAI,uBAAuB,CACxC,YAED,eAAK,SAAS,EAAC,aAAa,aAC3B,sBAAI,aAAa,GAAK,EACtB,qCAAkB,EAClB,sBAAI,aAAa,GAAK,EACtB,qCAAkB,EAClB,sBAAI,aAAa,GAAK,EACtB,sBAAI,aAAa,GAAK,EACtB,cAAM,EACN,sBAAI,aAAa,GAAK,EAEtB,+BAAa,aAAa,GAAc,EACxC,qCAAkB,EAClB,yBACC,uBAAK,aAAa,GAAM,EACxB,uBAAK,aAAa,GAAM,IACpB,EACL,sBAAI,aAAa,GAAK,EACtB,yBACC,uBAAK,aAAa,GAAM,EACxB,uBAAK,aAAa,GAAM,IACpB,EACL,qCAAkB,EAClB,sBAAI,aAAa,GAAK,EACtB,wBACC,yCAAwB,aACrB,EACJ,sBACC,YAAG,IAAI,EAAC,GAAG,qBAAS,GACjB,EACJ,wBACC,oCAAqB,aAClB,EACJ,wBACC,kCAAe,aACZ,IACC,GACD,GACQ,CACf,CAAC;IACH,CAAC;CACD,CAAC;AAEF,MAAM,aAAa,GAAG;;;;8GAIwF,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@a-type/ui",
3
- "version": "6.1.37",
3
+ "version": "6.1.38",
4
4
  "type": "module",
5
5
  "repository": {
6
6
  "url": "https://github.com/a-type/ui"
package/src/components/input/Input.module.css CHANGED
@@ -58,7 +58,8 @@
58
58
  font-weight: var(--m-prose-secondary-weight);
59
59
 
60
60
  &:has(input:disabled),
61
- &:has(textarea:disabled) {
61
+ &:has(textarea:disabled),
62
+ &:has([contenteditable]:disabled) {
62
63
  --mx-shadow-value: 0 0 0 0 transparent;
63
64
  @apply --mx-bg(transparent);
64
65
  @apply --mx-borderColor-lighter(2);
@@ -70,18 +71,26 @@
70
71
  }
71
72
 
72
73
  &:has(input:focus-visible[data-focus-clicked='false']),
73
- &:has(textarea:focus-visible[data-focus-clicked='false']) {
74
+ &:has(textarea:focus-visible[data-focus-clicked='false']),
75
+ &:has([contenteditable]:focus-visible[data-focus-clicked='false']) {
74
76
  @apply --mx-bg-lighter(3);
75
77
  --mx-ring-value: --fn-focus-ring();
76
78
  }
77
79
  &:has(input:focus),
78
- &:has(textarea:focus) {
80
+ &:has(textarea:focus),
81
+ &:has([contenteditable]:focus) {
79
82
  @apply --mx-bg-lighter(3);
80
83
  --mx-ring-value: --fn-ring(var(--m-tint-light), 4px);
81
84
  }
85
+ & input:focus,
86
+ & textarea:focus,
87
+ & [contenteditable]:focus {
88
+ outline: none;
89
+ }
82
90
 
83
91
  &:has(input:hover:not(:disabled):not(:focus)),
84
- &:has(textarea:hover:not(:disabled):not(:focus)) {
92
+ &:has(textarea:hover:not(:disabled):not(:focus)),
93
+ &:has([contenteditable]:hover:not(:disabled):not(:focus)) {
85
94
  @apply --mx-bg-lighter(2);
86
95
  @apply --mx-borderColor-heavier(2);
87
96
  }
package/src/components/richEditor/richEditor.stories.tsx CHANGED
@@ -1,5 +1,6 @@
1
1
  import type { Meta, StoryObj } from '@storybook/react-vite';
2
2
  import clsx from 'clsx';
3
+ import { Input } from '../input/Input.js';
3
4
  import { tipTapClassName, tipTapReadonlyClassName } from './index.js';
4
5
 
5
6
  const meta = {
@@ -19,49 +20,52 @@ type Story = StoryObj<{ readonly: boolean }>;
19
20
  export const Default: Story = {
20
21
  render(args) {
21
22
  return (
22
- <div
23
- className={clsx(
24
- tipTapClassName,
25
- args.readonly && tipTapReadonlyClassName,
26
- )}
27
- >
28
- <div className="ProseMirror">
29
- <p>{paragraphText}</p>
30
- <h1>Heading 1</h1>
31
- <p>{paragraphText}</p>
32
- <h2>Heading 2</h2>
33
- <p>{paragraphText}</p>
34
- <p>{paragraphText}</p>
35
- <hr />
36
- <p>{paragraphText}</p>
23
+ <Input.Border>
24
+ <div
25
+ contentEditable={true}
26
+ className={clsx(
27
+ tipTapClassName,
28
+ args.readonly && tipTapReadonlyClassName,
29
+ )}
30
+ >
31
+ <div className="ProseMirror">
32
+ <p>{paragraphText}</p>
33
+ <h1>Heading 1</h1>
34
+ <p>{paragraphText}</p>
35
+ <h2>Heading 2</h2>
36
+ <p>{paragraphText}</p>
37
+ <p>{paragraphText}</p>
38
+ <hr />
39
+ <p>{paragraphText}</p>
37
40
 
38
- <blockquote>{paragraphText}</blockquote>
39
- <h3>Heading 3</h3>
40
- <ul>
41
- <li>{paragraphText}</li>
42
- <li>{paragraphText}</li>
43
- </ul>
44
- <p>{paragraphText}</p>
45
- <ol>
46
- <li>{paragraphText}</li>
47
- <li>{paragraphText}</li>
48
- </ol>
49
- <h4>Heading 4</h4>
50
- <p>{paragraphText}</p>
51
- <p>
52
- <mark>Highlighted</mark> text
53
- </p>
54
- <p>
55
- <a href="#">Link</a>
56
- </p>
57
- <p>
58
- <strong>Bold</strong> text
59
- </p>
60
- <p>
61
- <em>Italic</em> text
62
- </p>
41
+ <blockquote>{paragraphText}</blockquote>
42
+ <h3>Heading 3</h3>
43
+ <ul>
44
+ <li>{paragraphText}</li>
45
+ <li>{paragraphText}</li>
46
+ </ul>
47
+ <p>{paragraphText}</p>
48
+ <ol>
49
+ <li>{paragraphText}</li>
50
+ <li>{paragraphText}</li>
51
+ </ol>
52
+ <h4>Heading 4</h4>
53
+ <p>{paragraphText}</p>
54
+ <p>
55
+ <mark>Highlighted</mark> text
56
+ </p>
57
+ <p>
58
+ <a href="#">Link</a>
59
+ </p>
60
+ <p>
61
+ <strong>Bold</strong> text
62
+ </p>
63
+ <p>
64
+ <em>Italic</em> text
65
+ </p>
66
+ </div>
63
67
  </div>
64
- </div>
68
+ </Input.Border>
65
69
  );
66
70
  },
67
71
  };