@a-type/ui 6.0.25 → 6.0.27

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 +1 -0
  2. package/dist/components/input/Input.d.ts +4 -3
  3. package/dist/components/input/Input.js +2 -2
  4. package/dist/components/input/Input.js.map +1 -1
  5. package/dist/components/input/Input.stories.d.ts +1 -1
  6. package/package.json +1 -1
  7. package/src/components/card/Card.module.css +1 -0
  8. package/src/components/input/Input.tsx +6 -3
package/dist/components/card/Card.module.css CHANGED
@@ -7,6 +7,7 @@
7
7
 
8
8
  @apply --mx-shadow(var(--m-shadow-sm));
9
9
  @apply --mx-surface-ambient;
10
+ @apply --mx-bg-heavier(0.1);
10
11
  @apply --mx-borderColor-faded(50%);
11
12
  border-width: var(--m-lineWidth-sm);
12
13
  border-radius: var(--m-surface-radius);
package/dist/components/input/Input.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import { InputProps as BaseInputProps } from '@base-ui/react/input';
2
- import { Ref } from 'react';
3
- export interface InputProps extends Omit<BaseInputProps, 'className'> {
2
+ import { CSSProperties, Ref } from 'react';
3
+ export interface InputProps extends Omit<BaseInputProps, 'className' | 'style'> {
4
4
  autoSelect?: boolean;
5
5
  /** Shuffle between random placeholders */
6
6
  placeholders?: string[];
@@ -10,8 +10,9 @@ export interface InputProps extends Omit<BaseInputProps, 'className'> {
10
10
  endAccessory?: React.ReactNode;
11
11
  className?: string;
12
12
  ref?: Ref<HTMLInputElement>;
13
+ style?: CSSProperties;
13
14
  }
14
- export declare const Input: (({ className, borderRef, startAccessory, endAccessory, ...props }: InputProps) => import("react/jsx-runtime").JSX.Element) & {
15
+ export declare const Input: (({ className, borderRef, startAccessory, endAccessory, style, ...props }: InputProps) => import("react/jsx-runtime").JSX.Element) & {
15
16
  Border: import("react").FunctionComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
16
17
  Input: ({ autoSelect, onFocus, onBlur, className, placeholders, placeholder, placeholdersIntervalMs, onValueChange, ...props }: InputProps) => import("react/jsx-runtime").JSX.Element;
17
18
  };
package/dist/components/input/Input.js CHANGED
@@ -40,8 +40,8 @@ const InnerInput = function InnerInput(_a) {
40
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)));
41
41
  };
42
42
  const InputDefault = function InputDefault(_a) {
43
- var { className, borderRef, startAccessory, endAccessory } = _a, props = __rest(_a, ["className", "borderRef", "startAccessory", "endAccessory"]);
44
- return (_jsxs(InputBorder, { ref: borderRef, className: className, children: [startAccessory, _jsx(InnerInput, Object.assign({}, props)), endAccessory] }));
43
+ var { className, borderRef, startAccessory, endAccessory, style } = _a, props = __rest(_a, ["className", "borderRef", "startAccessory", "endAccessory", "style"]);
44
+ return (_jsxs(InputBorder, { ref: borderRef, className: className, style: style, children: [startAccessory, _jsx(InnerInput, Object.assign({}, props)), endAccessory] }));
45
45
  };
46
46
  export const Input = Object.assign(InputDefault, {
47
47
  Border: InputBorder,
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,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAC/C,OAAO,EAAE,wBAAwB,EAAE,MAAM,yCAAyC,CAAC;AACnF,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;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"}
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;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"}
package/dist/components/input/Input.stories.d.ts CHANGED
@@ -2,7 +2,7 @@ import type { StoryObj } from '@storybook/react-vite';
2
2
  import { Input } from './Input.js';
3
3
  declare const meta: {
4
4
  title: string;
5
- component: (({ className, borderRef, startAccessory, endAccessory, ...props }: import("./Input.js").InputProps) => import("react/jsx-runtime").JSX.Element) & {
5
+ component: (({ className, borderRef, startAccessory, endAccessory, style, ...props }: import("./Input.js").InputProps) => import("react/jsx-runtime").JSX.Element) & {
6
6
  Border: import("react").FunctionComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
7
7
  Input: ({ autoSelect, onFocus, onBlur, className, placeholders, placeholder, placeholdersIntervalMs, onValueChange, ...props }: import("./Input.js").InputProps) => import("react/jsx-runtime").JSX.Element;
8
8
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@a-type/ui",
3
- "version": "6.0.25",
3
+ "version": "6.0.27",
4
4
  "type": "module",
5
5
  "repository": {
6
6
  "url": "https://github.com/a-type/ui"
package/src/components/card/Card.module.css CHANGED
@@ -7,6 +7,7 @@
7
7
 
8
8
  @apply --mx-shadow(var(--m-shadow-sm));
9
9
  @apply --mx-surface-ambient;
10
+ @apply --mx-bg-heavier(0.1);
10
11
  @apply --mx-borderColor-faded(50%);
11
12
  border-width: var(--m-lineWidth-sm);
12
13
  border-radius: var(--m-surface-radius);
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 { Ref } from 'react';
6
+ import { CSSProperties, Ref } from 'react';
7
7
  import { withClassName } from '../../hooks.js';
8
8
  import { useRotatingShuffledValue } from '../../hooks/useRotatingShuffledValue.js';
9
9
  import { inputInfo } from '../../systems/inputs.js';
@@ -58,7 +58,8 @@ const InnerInput = function InnerInput({
58
58
  );
59
59
  };
60
60
 
61
- export interface InputProps extends Omit<BaseInputProps, 'className'> {
61
+ export interface InputProps
62
+ extends Omit<BaseInputProps, 'className' | 'style'> {
62
63
  autoSelect?: boolean;
63
64
  /** Shuffle between random placeholders */
64
65
  placeholders?: string[];
@@ -68,6 +69,7 @@ export interface InputProps extends Omit<BaseInputProps, 'className'> {
68
69
  endAccessory?: React.ReactNode;
69
70
  className?: string;
70
71
  ref?: Ref<HTMLInputElement>;
72
+ style?: CSSProperties;
71
73
  }
72
74
 
73
75
  const InputDefault = function InputDefault({
@@ -75,10 +77,11 @@ const InputDefault = function InputDefault({
75
77
  borderRef,
76
78
  startAccessory,
77
79
  endAccessory,
80
+ style,
78
81
  ...props
79
82
  }: InputProps) {
80
83
  return (
81
- <InputBorder ref={borderRef} className={className}>
84
+ <InputBorder ref={borderRef} className={className} style={style}>
82
85
  {startAccessory}
83
86
  <InnerInput {...props} />
84
87
  {endAccessory}