@astryxdesign/core 0.4.4-canary.39d8a5a → 0.4.4-canary.eb069fd

package/dist/Field/InputClearButton.d.ts

@@ -7,8 +7,7 @@
  *   TextInput, NumberInput, TimeInput, DateInput, DateTimeInput,
  *   DateRangeInput, Selector, MultiSelector, Typeahead, Tokenizer, FileInput —
  *   routes it through here, so the glyph is themed in one place via the
- *   `astryx-input-clear-icon` target and the button wrapper is themed via the
- *   `astryx-input-clear-button` target.
+ *   `astryx-input-clear-icon` target.
  */
 import type { ReactNode } from 'react';
 import * as stylex from '@stylexjs/stylex';

package/dist/Field/InputClearButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InputClearButton.d.ts","sourceRoot":"","sources":["../../src/Field/InputClearButton.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AACrC,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAY3C,MAAM,WAAW,qBAAqB;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAC1D,MAAM,CAAC,EAAE,MAAM,CAAC,YAAY,CAAC;IAC7B;;;;;;OAMG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,KAAK,EACL,OAAO,EACP,MAAM,EACN,aAAa,GACd,EAAE,qBAAqB,GAAG,SAAS,CA0BnC;yBA/Be,gBAAgB"}
+{"version":3,"file":"InputClearButton.d.ts","sourceRoot":"","sources":["../../src/Field/InputClearButton.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;GAUG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AACrC,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAY3C,MAAM,WAAW,qBAAqB;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAC1D,MAAM,CAAC,EAAE,MAAM,CAAC,YAAY,CAAC;IAC7B;;;;;;OAMG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,KAAK,EACL,OAAO,EACP,MAAM,EACN,aAAa,GACd,EAAE,qBAAqB,GAAG,SAAS,CAwBnC;yBA7Be,gBAAgB"}

package/dist/Field/InputClearButton.js

@@ -11,8 +11,7 @@
  *   TextInput, NumberInput, TimeInput, DateInput, DateTimeInput,
  *   DateRangeInput, Selector, MultiSelector, Typeahead, Tokenizer, FileInput —
  *   routes it through here, so the glyph is themed in one place via the
- *   `astryx-input-clear-icon` target and the button wrapper is themed via the
- *   `astryx-input-clear-button` target.
+ *   `astryx-input-clear-icon` target.
  */
 import * as stylex from '@stylexjs/stylex';
 import { Button } from "../Button/index.js";
@@ -35,14 +34,10 @@ export function InputClearButton({
   const {
     className: iconTargetClassName
   } = themeProps('input-clear-icon');
-  const {
-    className: buttonTargetClassName
-  } = themeProps('input-clear-button');
   return /*#__PURE__*/_jsx(Button, {
     variant: "ghost",
     size: "sm",
     label: label,
-    className: buttonTargetClassName,
     icon: /*#__PURE__*/_jsx(Icon, {
       icon: "close",
       size: "sm",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astryxdesign/core",
-  "version": "0.4.4-canary.39d8a5a",
+  "version": "0.4.4-canary.eb069fd",
   "displayName": "Astryx Core",
   "description": "The component library. Accessible, themeable React components with built-in spacing, dark mode, and StyleX styling.",
   "author": "Meta Open Source",
@@ -656,7 +656,7 @@
     "react-dom": ">=19.0.0"
   },
   "devDependencies": {
-    "@astryxdesign/cli": "0.4.4-canary.39d8a5a",
+    "@astryxdesign/cli": "0.4.4-canary.eb069fd",
     "@babel/cli": "^8.0.4",
     "@babel/core": "^7.29.7",
     "@babel/preset-react": "^8.0.1",

package/src/Field/Field.doc.mjs

@@ -34,7 +34,6 @@ export const docs = {
         className: 'astryx-input-status-icon',
         visualProps: ['size', 'status'],
       },
-      {className: 'astryx-input-clear-button'},
       {className: 'astryx-input-clear-icon'},
     ],
     vars: [

package/src/Field/InputClearButton.test.tsx

@@ -114,29 +114,4 @@ describe('InputClearButton', () => {
     expect(css).toContain('.astryx-input-clear-icon:hover {');
     expect(css).toContain('color: var(--color-icon-primary)');
   });
-
-  it('renders the astryx-input-clear-button target on the button wrapper', () => {
-    render(<InputClearButton label="Clear" onClick={() => {}} />);
-    const button = screen.getByRole('button', {name: 'Clear'});
-    expect(button).toHaveClass('astryx-input-clear-button');
-  });
-
-  it('exposes input-clear-button so a theme controls the button size and hover', () => {
-    const theme = defineTheme({
-      name: 'input-clear-button-test',
-      components: {
-        'input-clear-button': {
-          base: {
-            height: '28px',
-            ':hover': {backgroundImage: 'none'},
-          },
-        },
-      },
-    });
-    const css = generateThemeTestCSS(theme);
-    expect(css).toContain('.astryx-input-clear-button {');
-    expect(css).toContain('height: 28px');
-    expect(css).toContain('.astryx-input-clear-button:hover {');
-    expect(css).toContain('background-image: none');
-  });
 });

package/src/Field/InputClearButton.tsx

@@ -11,8 +11,7 @@
  *   TextInput, NumberInput, TimeInput, DateInput, DateTimeInput,
  *   DateRangeInput, Selector, MultiSelector, Typeahead, Tokenizer, FileInput —
  *   routes it through here, so the glyph is themed in one place via the
- *   `astryx-input-clear-icon` target and the button wrapper is themed via the
- *   `astryx-input-clear-button` target.
+ *   `astryx-input-clear-icon` target.
  */
 
 import type {ReactNode} from 'react';
@@ -49,13 +48,11 @@ export function InputClearButton({
   iconClassName,
 }: InputClearButtonProps): ReactNode {
   const {className: iconTargetClassName} = themeProps('input-clear-icon');
-  const {className: buttonTargetClassName} = themeProps('input-clear-button');
   return (
     <Button
       variant="ghost"
       size="sm"
       label={label}
-      className={buttonTargetClassName}
       icon={
         <Icon
           icon="close"