@a-type/ui 6.1.46 → 6.1.48

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 (8) hide show
  1. package/dist/components/card/Card.module.css +0 -3
  2. package/dist/components/input/Input.js +4 -1
  3. package/dist/components/input/Input.js.map +1 -1
  4. package/dist/components/input/Input.module.css +4 -4
  5. package/package.json +1 -1
  6. package/src/components/card/Card.module.css +0 -3
  7. package/src/components/input/Input.module.css +4 -4
  8. package/src/components/input/Input.tsx +4 -1
package/dist/components/card/Card.module.css CHANGED
@@ -19,17 +19,14 @@
19
19
  @apply --mx-surface-ambient;
20
20
  padding: 0;
21
21
  @apply --mx-bg(--fn-color-saturated(var(--m-surface-ambient-bg), 9));
22
- @apply --mx-borderColor-faded(50%);
23
22
  }
24
23
  &[data-emphasis='secondary'] {
25
24
  @apply --mx-surface-secondary;
26
25
  padding: 0;
27
- @apply --mx-borderColor-faded(50%);
28
26
  }
29
27
  &[data-emphasis='primary'] {
30
28
  @apply --mx-surface-primary;
31
29
  padding: 0;
32
- @apply --mx-borderColor-faded(50%);
33
30
  }
34
31
  }
35
32
 
package/dist/components/input/Input.js CHANGED
@@ -12,6 +12,7 @@ var __rest = (this && this.__rest) || function (s, e) {
12
12
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
13
13
  import { Input as BaseInput, } from '@base-ui/react/input';
14
14
  import clsx from 'clsx';
15
+ import { useState } from 'react';
15
16
  import { useRotatingShuffledValue } from '../../hooks/useRotatingShuffledValue.js';
16
17
  import { withClassName } from '../../hooks/withClassName.js';
17
18
  import { inputInfo } from '../../systems/inputs.js';
@@ -19,6 +20,7 @@ import cls from './Input.module.css';
19
20
  const InputBorder = withClassName('div', cls.inputBorder);
20
21
  const InnerInput = function InnerInput(_a) {
21
22
  var { autoSelect, onFocus, onBlur, className, placeholders, placeholder, placeholdersIntervalMs = 5000, onValueChange } = _a, props = __rest(_a, ["autoSelect", "onFocus", "onBlur", "className", "placeholders", "placeholder", "placeholdersIntervalMs", "onValueChange"]);
23
+ const [touched, setTouched] = useState(false);
22
24
  const handleFocus = (ev) => {
23
25
  if (autoSelect) {
24
26
  ev.target.select();
@@ -35,9 +37,10 @@ const InnerInput = function InnerInput(_a) {
35
37
  const handleBlur = (ev) => {
36
38
  onBlur === null || onBlur === void 0 ? void 0 : onBlur(ev);
37
39
  ev.currentTarget.removeAttribute('data-focus-clicked');
40
+ setTouched(true);
38
41
  };
39
42
  const randomPlaceholder = useRotatingShuffledValue(placeholders !== null && placeholders !== void 0 ? placeholders : [], placeholdersIntervalMs);
40
- return (_jsx(BaseInput, Object.assign({ placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : randomPlaceholder, onFocus: handleFocus, onValueChange: onValueChange, onBlur: handleBlur, className: clsx(cls.input, className) }, props)));
43
+ return (_jsx(BaseInput, Object.assign({ placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : randomPlaceholder, onFocus: handleFocus, onValueChange: onValueChange, onBlur: handleBlur, className: clsx(cls.input, className), "data-touched": touched || undefined }, props)));
41
44
  };
42
45
  const InputDefault = function InputDefault(_a) {
43
46
  var { className, borderRef, startAccessory, endAccessory, style } = _a, props = __rest(_a, ["className", "borderRef", "startAccessory", "endAccessory", "style"]);
package/dist/components/input/Input.js.map CHANGED
@@ -1 +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,wBAAwB,EAAE,MAAM,yCAAyC,CAAC;AACnF,OAAO,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAC7D,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AACpD,OAAO,GAAG,MAAM,oBAAoB,CAAC;AAErC,MAAM,WAAW,GAAG,aAAa,CAAC,KAAK,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;AAE1D,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;aAAM,CAAC;YACP,EAAE,CAAC,aAAa,CAAC,YAAY,CAAC,oBAAoB,EAAE,OAAO,CAAC,CAAC;QAC9D,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,GAAG,CAAC,KAAK,EAAE,SAAS,CAAC,IACjC,KAAK,EACR,CACF,CAAC;AACH,CAAC,CAAC;AAgBF,MAAM,YAAY,GAAG,SAAS,YAAY,CAAC,EAO9B;QAP8B,EAC1C,SAAS,EACT,SAAS,EACT,cAAc,EACd,YAAY,EACZ,KAAK,OAEO,EADT,KAAK,cANkC,qEAO1C,CADQ;IAER,OAAO,CACN,MAAC,WAAW,IAAC,GAAG,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,aAC7D,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"}
1
+ {"version":3,"file":"Input.js","sourceRoot":"","sources":["../../../src/components/input/Input.tsx"],"names":[],"mappings":"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"}
package/dist/components/input/Input.module.css CHANGED
@@ -57,11 +57,11 @@
57
57
  line-height: var(--m-prose-secondary-lineHeight);
58
58
  font-weight: var(--m-prose-secondary-weight);
59
59
 
60
- &:has(input:invalid:not(:focus)),
61
- &:has(textarea:invalid:not(:focus)),
60
+ &:has(input[data-touched]:invalid:not(:focus)),
61
+ &:has(textarea[data-touched]:invalid:not(:focus)),
62
62
  &:has([contenteditable]:invalid:not(:focus)),
63
- &:has(input[aria-invalid='true']:not(:focus)),
64
- &:has(textarea[aria-invalid='true']:not(:focus)),
63
+ &:has(input[data-touched][aria-invalid='true']:not(:focus)),
64
+ &:has(textarea[data-touched][aria-invalid='true']:not(:focus)),
65
65
  &:has([contenteditable][aria-invalid='true']:not(:focus)) {
66
66
  @apply --mx-borderColor(var(--m-color-attention-heavy));
67
67
  @apply --mx-bg(var(--m-color-attention-wash));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@a-type/ui",
3
- "version": "6.1.46",
3
+ "version": "6.1.48",
4
4
  "type": "module",
5
5
  "repository": {
6
6
  "url": "https://github.com/a-type/ui"
package/src/components/card/Card.module.css CHANGED
@@ -19,17 +19,14 @@
19
19
  @apply --mx-surface-ambient;
20
20
  padding: 0;
21
21
  @apply --mx-bg(--fn-color-saturated(var(--m-surface-ambient-bg), 9));
22
- @apply --mx-borderColor-faded(50%);
23
22
  }
24
23
  &[data-emphasis='secondary'] {
25
24
  @apply --mx-surface-secondary;
26
25
  padding: 0;
27
- @apply --mx-borderColor-faded(50%);
28
26
  }
29
27
  &[data-emphasis='primary'] {
30
28
  @apply --mx-surface-primary;
31
29
  padding: 0;
32
- @apply --mx-borderColor-faded(50%);
33
30
  }
34
31
  }
35
32
 
package/src/components/input/Input.module.css CHANGED
@@ -57,11 +57,11 @@
57
57
  line-height: var(--m-prose-secondary-lineHeight);
58
58
  font-weight: var(--m-prose-secondary-weight);
59
59
 
60
- &:has(input:invalid:not(:focus)),
61
- &:has(textarea:invalid:not(:focus)),
60
+ &:has(input[data-touched]:invalid:not(:focus)),
61
+ &:has(textarea[data-touched]:invalid:not(:focus)),
62
62
  &:has([contenteditable]:invalid:not(:focus)),
63
- &:has(input[aria-invalid='true']:not(:focus)),
64
- &:has(textarea[aria-invalid='true']:not(:focus)),
63
+ &:has(input[data-touched][aria-invalid='true']:not(:focus)),
64
+ &:has(textarea[data-touched][aria-invalid='true']:not(:focus)),
65
65
  &:has([contenteditable][aria-invalid='true']:not(:focus)) {
66
66
  @apply --mx-borderColor(var(--m-color-attention-heavy));
67
67
  @apply --mx-bg(var(--m-color-attention-wash));
package/src/components/input/Input.tsx CHANGED
@@ -3,7 +3,7 @@ import {
3
3
  InputProps as BaseInputProps,
4
4
  } from '@base-ui/react/input';
5
5
  import clsx from 'clsx';
6
- import { CSSProperties, Ref } from 'react';
6
+ import { CSSProperties, Ref, useState } from 'react';
7
7
  import { useRotatingShuffledValue } from '../../hooks/useRotatingShuffledValue.js';
8
8
  import { withClassName } from '../../hooks/withClassName.js';
9
9
  import { inputInfo } from '../../systems/inputs.js';
@@ -23,6 +23,7 @@ const InnerInput = function InnerInput({
23
23
 
24
24
  ...props
25
25
  }: InputProps) {
26
+ const [touched, setTouched] = useState(false);
26
27
  const handleFocus: BaseInputProps['onFocus'] = (ev) => {
27
28
  if (autoSelect) {
28
29
  ev.target.select();
@@ -40,6 +41,7 @@ const InnerInput = function InnerInput({
40
41
  const handleBlur: BaseInputProps['onBlur'] = (ev) => {
41
42
  onBlur?.(ev);
42
43
  ev.currentTarget.removeAttribute('data-focus-clicked');
44
+ setTouched(true);
43
45
  };
44
46
  const randomPlaceholder = useRotatingShuffledValue(
45
47
  placeholders ?? [],
@@ -53,6 +55,7 @@ const InnerInput = function InnerInput({
53
55
  onValueChange={onValueChange}
54
56
  onBlur={handleBlur}
55
57
  className={clsx(cls.input, className)}
58
+ data-touched={touched || undefined}
56
59
  {...props}
57
60
  />
58
61
  );