@tale-ui/react 0.1.0 → 0.2.0

package/README.md

@@ -1,47 +1,80 @@
-<!-- markdownlint-disable MD041 -->
+# @tale-ui/react
 
-<a href="https://base-ui.com" rel="noopener" target="_blank"><img width="150" height="133" src="https://base-ui.com/static/logo.svg" alt="Tale UI logo"></a>
-
-Tale UI is a library of unstyled React components. You gain complete control over your app's CSS and accessibility features.
+An accessible React component library with BEM class names applied automatically. Style via `@tale-ui/react-styles` (built on `@tale-ui/core` design tokens) and override using `className`.
 
 ## Installation
 
-Install the package in your project directory with:
-
 ```bash
-npm install @tale-ui/react
+pnpm add @tale-ui/react @tale-ui/react-styles
 ```
 
-## Documentation
+`@tale-ui/react-styles` provides the CSS for every component — built on `@tale-ui/core` design tokens.
 
-<!-- #default-branch-switch -->
+## Quick Start
 
-Visit [tale-ui.com](https://base-ui.com) to view the full documentation.
+```tsx
+import '@tale-ui/react-styles';
+import { Button } from '@tale-ui/react/button';
 
-## Questions
+export default function App() {
+  return <Button variant="primary">Click me</Button>;
+}
+```
 
-For how-to questions that don't involve making changes to the code base, please use [Stack Overflow](https://stackoverflow.com/questions/tagged/base-ui) instead of GitHub issues.
-Use the "tale-ui" tag on Stack Overflow to make it easier for the community to find your question.
+For the full setup guide (colours, typography, dark mode): [docs/react-setup.md](../../docs/react-setup.md)
 
-## Contributing
+## Components
 
-Read the [contributing guide](../../CONTRIBUTING.md) to learn about our development process, how to propose bug fixes and improvements, and how to build and test your changes.
+### Form Controls
 
-Contributing to Tale UI is about more than just issues and pull requests!
-There are many other ways to [support Tale UI](https://mui.com/material-ui/getting-started/faq/#mui-is-awesome-how-can-i-support-the-project) beyond contributing to the code base.
+Button · Checkbox · Checkbox Group · Combobox · Input · Number Field · Radio · Radio Group · Select · Slider · Switch · Toggle · Toggle Group
 
-## Changelog
+### Layout
 
-The [changelog](https://github.com/mui/base-ui/releases) is regularly updated to reflect what's changed in each new release.
+Accordion · Collapsible · Scroll Area · Separator · Tabs
 
-## Roadmap
+### Overlay
 
-Future plans and high-priority features and enhancements can be found in the [roadmap](https://github.com/orgs/mui/projects/1).
+Alert Dialog · Dialog · Drawer · Popover · Preview Card · Tooltip
 
-## License
+### Navigation
+
+Context Menu · Menu · Menubar · Navigation Menu · Toolbar
+
+### Feedback & Display
+
+Avatar · Meter · Progress · Toast
+
+### Form Structure
+
+Autocomplete · Field · Fieldset · Form
+
+### Utilities
 
-This project is licensed under the terms of the [MIT license](../../LICENSE).
+Container · CSP Provider · Direction Provider · `mergeProps` · `useRender`
 
-## Security
+All components are imported from `@tale-ui/react/{name}`:
+
+```ts
+import { Dialog } from '@tale-ui/react/dialog';
+import { Select } from '@tale-ui/react/select';
+import { Container } from '@tale-ui/react/container';
+```
+
+## Styling
+
+Components apply BEM base class names automatically (e.g. `tale-button`, `tale-select__popup`). State is exposed via data attributes (`data-disabled`, `data-open`, `data-checked`, etc.) for CSS selectors.
+
+Components that support visual variants accept `variant` and/or `size` props — these apply the corresponding BEM modifier class automatically. Pass an extra `className` to add any modifier not exposed as a prop.
+
+CSS rules live in `@tale-ui/react-styles`. See the [styles README](../styles/README.md) for architecture details and CSS class naming conventions.
+
+## Documentation
+
+- [React setup guide](../../docs/react-setup.md) — full consumer walkthrough
+- [CSS design tokens](../css/docs/design-tokens.md) — all token values
+- [Contributing](../../CONTRIBUTING.md)
+
+## License
 
-For details of supported versions and contact details for reporting security issues, please refer to the [security policy](https://github.com/mui/base-ui/security/policy).
+MIT — see [LICENSE](../../LICENSE).

package/_cx.d.ts

@@ -0,0 +1,4 @@
+type ClassNameFn = (state: any) => string | undefined;
+type ClassName = string | ClassNameFn | undefined;
+export declare function cx(base: string, extra?: ClassName): ClassName;
+export {};

package/_cx.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.cx = cx;
+function cx(base, extra) {
+  if (typeof extra === 'function') {
+    return state => {
+      const result = extra(state);
+      return result ? `${base} ${result}` : base;
+    };
+  }
+  return extra ? `${base} ${extra}` : base;
+}

package/accordion/Accordion.styled.d.ts

@@ -0,0 +1,14 @@
+import * as H from "./index.parts.js";
+import type { AccordionValue, AccordionRootState, AccordionRootProps, AccordionRootChangeEventReason, AccordionRootChangeEventDetails } from "./root/AccordionRoot.js";
+export declare const Root: typeof H.Root;
+export declare namespace Root {
+  type Value<TValue = any> = AccordionValue<TValue>;
+  type State<TValue = any> = AccordionRootState<TValue>;
+  type Props<TValue = any> = AccordionRootProps<TValue>;
+  type ChangeEventReason = AccordionRootChangeEventReason;
+  type ChangeEventDetails = AccordionRootChangeEventDetails;
+}
+export declare const Item: typeof H.Item;
+export declare const Header: typeof H.Header;
+export declare const Trigger: typeof H.Trigger;
+export declare const Panel: typeof H.Panel;

package/accordion/Accordion.styled.js

@@ -0,0 +1,79 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Trigger = exports.Root = exports.Panel = exports.Item = exports.Header = void 0;
+var React = _interopRequireWildcard(require("react"));
+var H = _interopRequireWildcard(require("./index.parts"));
+var _cx = require("../_cx");
+var _jsxRuntime = require("react/jsx-runtime");
+var _svg, _ChevronIcon;
+function ChevronIcon() {
+  return _svg || (_svg = /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", {
+    className: "tale-accordion__trigger-icon",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    "aria-hidden": true,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("polyline", {
+      points: "4,6 8,10 12,6"
+    })
+  }));
+}
+const StyledRoot = /*#__PURE__*/React.forwardRef(({
+  className,
+  ...props
+}, ref) => /*#__PURE__*/(0, _jsxRuntime.jsx)(H.Root, {
+  className: (0, _cx.cx)('tale-accordion', className),
+  ref: ref,
+  ...props
+}));
+StyledRoot.displayName = 'Accordion.Root';
+const Root = exports.Root = StyledRoot;
+const StyledItem = /*#__PURE__*/React.forwardRef(({
+  className,
+  ...props
+}, ref) => /*#__PURE__*/(0, _jsxRuntime.jsx)(H.Item, {
+  className: (0, _cx.cx)('tale-accordion__item', className),
+  ref: ref,
+  ...props
+}));
+StyledItem.displayName = 'Accordion.Item';
+const Item = exports.Item = StyledItem;
+const StyledHeader = /*#__PURE__*/React.forwardRef(({
+  className,
+  ...props
+}, ref) => /*#__PURE__*/(0, _jsxRuntime.jsx)(H.Header, {
+  className: (0, _cx.cx)('tale-accordion__header', className),
+  ref: ref,
+  ...props
+}));
+StyledHeader.displayName = 'Accordion.Header';
+const Header = exports.Header = StyledHeader;
+const StyledTrigger = /*#__PURE__*/React.forwardRef(({
+  className,
+  children,
+  ...props
+}, ref) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(H.Trigger, {
+  className: (0, _cx.cx)('tale-accordion__trigger', className),
+  ref: ref,
+  ...props,
+  children: [children, _ChevronIcon || (_ChevronIcon = /*#__PURE__*/(0, _jsxRuntime.jsx)(ChevronIcon, {}))]
+}));
+StyledTrigger.displayName = 'Accordion.Trigger';
+const Trigger = exports.Trigger = StyledTrigger;
+const StyledPanel = /*#__PURE__*/React.forwardRef(({
+  className,
+  ...props
+}, ref) => /*#__PURE__*/(0, _jsxRuntime.jsx)(H.Panel, {
+  className: (0, _cx.cx)('tale-accordion__panel', className),
+  ref: ref,
+  ...props
+}));
+StyledPanel.displayName = 'Accordion.Panel';
+const Panel = exports.Panel = StyledPanel;

package/accordion/index.d.ts

@@ -1,4 +1,4 @@
-export * as Accordion from "./index.parts.js";
+export * as Accordion from "./Accordion.styled.js";
 export type * from "./root/AccordionRoot.js";
 export type * from "./item/AccordionItem.js";
 export type * from "./header/AccordionHeader.js";

package/accordion/index.js

@@ -5,5 +5,5 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Accordion = void 0;
-var _Accordion = _interopRequireWildcard(require("./index.parts"));
+var _Accordion = _interopRequireWildcard(require("./Accordion.styled"));
 exports.Accordion = _Accordion;

package/alert-dialog/AlertDialog.styled.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import * as H from "./index.parts.js";
+export declare const Root: typeof H.Root;
+export declare const Portal: React.ForwardRefExoticComponent<Omit<import("../index.js").DialogPortalProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const Viewport: React.ForwardRefExoticComponent<Omit<import("../index.js").DialogViewportProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const Trigger: H.Trigger;
+export declare const createHandle: typeof H.createHandle;
+export declare const Handle: typeof H.Handle;
+export declare const Backdrop: React.ForwardRefExoticComponent<Omit<Omit<import("../index.js").DialogBackdropProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const Popup: React.ForwardRefExoticComponent<Omit<Omit<import("../index.js").DialogPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const Title: React.ForwardRefExoticComponent<Omit<Omit<import("../index.js").DialogTitleProps, "ref"> & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+export declare const Description: React.ForwardRefExoticComponent<Omit<Omit<import("../index.js").DialogDescriptionProps, "ref"> & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+export declare const Close: React.ForwardRefExoticComponent<Omit<import("../index.js").DialogCloseProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

package/alert-dialog/AlertDialog.styled.js

@@ -0,0 +1,58 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createHandle = exports.Viewport = exports.Trigger = exports.Title = exports.Root = exports.Portal = exports.Popup = exports.Handle = exports.Description = exports.Close = exports.Backdrop = void 0;
+var React = _interopRequireWildcard(require("react"));
+var H = _interopRequireWildcard(require("./index.parts"));
+var _cx = require("../_cx");
+var _jsxRuntime = require("react/jsx-runtime");
+const Root = exports.Root = H.Root;
+const Portal = exports.Portal = H.Portal;
+const Viewport = exports.Viewport = H.Viewport;
+const Trigger = exports.Trigger = H.Trigger;
+const createHandle = exports.createHandle = H.createHandle;
+const Handle = exports.Handle = H.Handle;
+const Backdrop = exports.Backdrop = /*#__PURE__*/React.forwardRef(({
+  className,
+  ...props
+}, ref) => /*#__PURE__*/(0, _jsxRuntime.jsx)(H.Backdrop, {
+  className: (0, _cx.cx)('tale-alert-dialog__backdrop', className),
+  ref: ref,
+  ...props
+}));
+if (process.env.NODE_ENV !== "production") Backdrop.displayName = "Backdrop";
+Backdrop.displayName = 'AlertDialog.Backdrop';
+const Popup = exports.Popup = /*#__PURE__*/React.forwardRef(({
+  className,
+  ...props
+}, ref) => /*#__PURE__*/(0, _jsxRuntime.jsx)(H.Popup, {
+  className: (0, _cx.cx)('tale-alert-dialog__popup', className),
+  ref: ref,
+  ...props
+}));
+if (process.env.NODE_ENV !== "production") Popup.displayName = "Popup";
+Popup.displayName = 'AlertDialog.Popup';
+const Title = exports.Title = /*#__PURE__*/React.forwardRef(({
+  className,
+  ...props
+}, ref) => /*#__PURE__*/(0, _jsxRuntime.jsx)(H.Title, {
+  className: (0, _cx.cx)('tale-alert-dialog__title', className),
+  ref: ref,
+  ...props
+}));
+if (process.env.NODE_ENV !== "production") Title.displayName = "Title";
+Title.displayName = 'AlertDialog.Title';
+const Description = exports.Description = /*#__PURE__*/React.forwardRef(({
+  className,
+  ...props
+}, ref) => /*#__PURE__*/(0, _jsxRuntime.jsx)(H.Description, {
+  className: (0, _cx.cx)('tale-alert-dialog__description', className),
+  ref: ref,
+  ...props
+}));
+if (process.env.NODE_ENV !== "production") Description.displayName = "Description";
+Description.displayName = 'AlertDialog.Description';
+const Close = exports.Close = H.Close;

package/alert-dialog/index.d.ts

@@ -1,2 +1,2 @@
-export * as AlertDialog from "./index.parts.js";
+export * as AlertDialog from "./AlertDialog.styled.js";
 export type * from "./root/AlertDialogRoot.js";

package/alert-dialog/index.js

@@ -5,5 +5,5 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.AlertDialog = void 0;
-var _AlertDialog = _interopRequireWildcard(require("./index.parts"));
+var _AlertDialog = _interopRequireWildcard(require("./AlertDialog.styled"));
 exports.AlertDialog = _AlertDialog;

package/autocomplete/Autocomplete.styled.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import * as H from "./index.parts.js";
+export declare const Root: typeof H.Root;
+export declare const Portal: React.ForwardRefExoticComponent<Omit<import("./index.js").AutocompletePortalProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const Positioner: React.ForwardRefExoticComponent<Omit<import("./index.js").AutocompletePositionerProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const List: React.ForwardRefExoticComponent<Omit<import("./index.js").AutocompleteListProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const Input: typeof H.Input;
+export declare const Popup: typeof H.Popup;
+export declare const Empty: typeof H.Empty;
+export declare const Item: typeof H.Item;
+export { Value, Trigger, Icon, Clear, Backdrop, Arrow, Group, GroupLabel, Row, Collection, Separator, useFilter, useFilteredItems } from "./index.parts.js";

package/autocomplete/Autocomplete.styled.js

@@ -0,0 +1,134 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Arrow", {
+  enumerable: true,
+  get: function () {
+    return H.Arrow;
+  }
+});
+Object.defineProperty(exports, "Backdrop", {
+  enumerable: true,
+  get: function () {
+    return H.Backdrop;
+  }
+});
+Object.defineProperty(exports, "Clear", {
+  enumerable: true,
+  get: function () {
+    return H.Clear;
+  }
+});
+Object.defineProperty(exports, "Collection", {
+  enumerable: true,
+  get: function () {
+    return H.Collection;
+  }
+});
+exports.Empty = void 0;
+Object.defineProperty(exports, "Group", {
+  enumerable: true,
+  get: function () {
+    return H.Group;
+  }
+});
+Object.defineProperty(exports, "GroupLabel", {
+  enumerable: true,
+  get: function () {
+    return H.GroupLabel;
+  }
+});
+Object.defineProperty(exports, "Icon", {
+  enumerable: true,
+  get: function () {
+    return H.Icon;
+  }
+});
+exports.Root = exports.Positioner = exports.Portal = exports.Popup = exports.List = exports.Item = exports.Input = void 0;
+Object.defineProperty(exports, "Row", {
+  enumerable: true,
+  get: function () {
+    return H.Row;
+  }
+});
+Object.defineProperty(exports, "Separator", {
+  enumerable: true,
+  get: function () {
+    return H.Separator;
+  }
+});
+Object.defineProperty(exports, "Trigger", {
+  enumerable: true,
+  get: function () {
+    return H.Trigger;
+  }
+});
+Object.defineProperty(exports, "Value", {
+  enumerable: true,
+  get: function () {
+    return H.Value;
+  }
+});
+Object.defineProperty(exports, "useFilter", {
+  enumerable: true,
+  get: function () {
+    return H.useFilter;
+  }
+});
+Object.defineProperty(exports, "useFilteredItems", {
+  enumerable: true,
+  get: function () {
+    return H.useFilteredItems;
+  }
+});
+var React = _interopRequireWildcard(require("react"));
+var H = _interopRequireWildcard(require("./index.parts"));
+var _cx = require("../_cx");
+var _jsxRuntime = require("react/jsx-runtime");
+const Root = exports.Root = H.Root;
+const Portal = exports.Portal = H.Portal;
+const Positioner = exports.Positioner = H.Positioner;
+const List = exports.List = H.List;
+const StyledInput = /*#__PURE__*/React.forwardRef(({
+  className,
+  ...props
+}, ref) => /*#__PURE__*/(0, _jsxRuntime.jsx)(H.Input, {
+  className: (0, _cx.cx)('tale-autocomplete__input', className),
+  ref: ref,
+  ...props
+}));
+StyledInput.displayName = 'Autocomplete.Input';
+const Input = exports.Input = StyledInput;
+const StyledPopup = /*#__PURE__*/React.forwardRef(({
+  className,
+  ...props
+}, ref) => /*#__PURE__*/(0, _jsxRuntime.jsx)(H.Popup, {
+  className: (0, _cx.cx)('tale-autocomplete__popup', className),
+  ref: ref,
+  ...props
+}));
+StyledPopup.displayName = 'Autocomplete.Popup';
+const Popup = exports.Popup = StyledPopup;
+const StyledEmpty = /*#__PURE__*/React.forwardRef(({
+  className,
+  ...props
+}, ref) => /*#__PURE__*/(0, _jsxRuntime.jsx)(H.Empty, {
+  className: (0, _cx.cx)('tale-autocomplete__empty', className),
+  ref: ref,
+  ...props
+}));
+StyledEmpty.displayName = 'Autocomplete.Empty';
+const Empty = exports.Empty = StyledEmpty;
+const StyledItem = /*#__PURE__*/React.forwardRef(({
+  className,
+  ...props
+}, ref) => /*#__PURE__*/(0, _jsxRuntime.jsx)(H.Item, {
+  className: (0, _cx.cx)('tale-autocomplete__item', className),
+  ref: ref,
+  ...props
+}));
+StyledItem.displayName = 'Autocomplete.Item';
+const Item = exports.Item = StyledItem;

package/autocomplete/index.d.ts

@@ -1,4 +1,4 @@
-export * as Autocomplete from "./index.parts.js";
+export * as Autocomplete from "./Autocomplete.styled.js";
 export type * from "./root/AutocompleteRoot.js";
 export type * from "./value/AutocompleteValue.js";
 export type { ComboboxTriggerProps as AutocompleteTriggerProps, ComboboxTriggerState as AutocompleteTriggerState } from "../combobox/trigger/ComboboxTrigger.js";

package/autocomplete/index.js

@@ -5,5 +5,5 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Autocomplete = void 0;
-var _Autocomplete = _interopRequireWildcard(require("./index.parts"));
+var _Autocomplete = _interopRequireWildcard(require("./Autocomplete.styled"));
 exports.Autocomplete = _Autocomplete;

package/avatar/Avatar.styled.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import * as H from "./index.parts.js";
+type Size = 'sm' | 'md' | 'lg' | 'xl';
+export interface RootProps extends React.ComponentPropsWithoutRef<typeof H.Root> {
+  size?: Size | undefined;
+}
+export declare const Root: React.ForwardRefExoticComponent<RootProps & React.RefAttributes<HTMLSpanElement>>;
+export declare const Image: React.ForwardRefExoticComponent<Omit<Omit<import("./index.js").AvatarImageProps, "ref"> & React.RefAttributes<HTMLImageElement>, "ref"> & React.RefAttributes<HTMLImageElement>>;
+export declare const Fallback: React.ForwardRefExoticComponent<Omit<Omit<import("./index.js").AvatarFallbackProps, "ref"> & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+export {};

package/avatar/Avatar.styled.js

@@ -0,0 +1,42 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Root = exports.Image = exports.Fallback = void 0;
+var React = _interopRequireWildcard(require("react"));
+var H = _interopRequireWildcard(require("./index.parts"));
+var _cx = require("../_cx");
+var _jsxRuntime = require("react/jsx-runtime");
+const Root = exports.Root = /*#__PURE__*/React.forwardRef(({
+  size = 'md',
+  className,
+  ...props
+}, ref) => /*#__PURE__*/(0, _jsxRuntime.jsx)(H.Root, {
+  className: (0, _cx.cx)(`tale-avatar tale-avatar--${size}`, className),
+  ref: ref,
+  ...props
+}));
+if (process.env.NODE_ENV !== "production") Root.displayName = "Root";
+Root.displayName = 'Avatar.Root';
+const Image = exports.Image = /*#__PURE__*/React.forwardRef(({
+  className,
+  ...props
+}, ref) => /*#__PURE__*/(0, _jsxRuntime.jsx)(H.Image, {
+  className: (0, _cx.cx)('tale-avatar__image', className),
+  ref: ref,
+  ...props
+}));
+if (process.env.NODE_ENV !== "production") Image.displayName = "Image";
+Image.displayName = 'Avatar.Image';
+const Fallback = exports.Fallback = /*#__PURE__*/React.forwardRef(({
+  className,
+  ...props
+}, ref) => /*#__PURE__*/(0, _jsxRuntime.jsx)(H.Fallback, {
+  className: (0, _cx.cx)('tale-avatar__fallback', className),
+  ref: ref,
+  ...props
+}));
+if (process.env.NODE_ENV !== "production") Fallback.displayName = "Fallback";
+Fallback.displayName = 'Avatar.Fallback';

package/avatar/index.d.ts

@@ -1,4 +1,4 @@
-export * as Avatar from "./index.parts.js";
+export * as Avatar from "./Avatar.styled.js";
 export type * from "./root/AvatarRoot.js";
 export type * from "./image/AvatarImage.js";
 export type * from "./fallback/AvatarFallback.js";

package/avatar/index.js

@@ -5,5 +5,5 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Avatar = void 0;
-var _Avatar = _interopRequireWildcard(require("./index.parts"));
+var _Avatar = _interopRequireWildcard(require("./Avatar.styled"));
 exports.Avatar = _Avatar;

package/button/Button.styled.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import type { ButtonProps as HProps } from "./Button.js";
+type Variant = 'primary' | 'neutral' | 'ghost' | 'danger';
+type Size = 'sm' | 'md' | 'lg';
+export interface ButtonProps extends HProps {
+  variant?: Variant | undefined;
+  size?: Size | undefined;
+}
+export declare const Button: React.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & React.RefAttributes<HTMLElement>>;
+export {};

package/button/Button.styled.js

@@ -0,0 +1,23 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Button = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _Button2 = require("./Button");
+var _cx = require("../_cx");
+var _jsxRuntime = require("react/jsx-runtime");
+const Button = exports.Button = /*#__PURE__*/React.forwardRef(({
+  variant = 'primary',
+  size = 'md',
+  className,
+  ...props
+}, ref) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button2.Button, {
+  className: (0, _cx.cx)(`tale-button tale-button--${variant} tale-button--${size}`, className),
+  ref: ref,
+  ...props
+}));
+if (process.env.NODE_ENV !== "production") Button.displayName = "Button";
+Button.displayName = 'Button';

package/button/index.d.ts

@@ -1,2 +1,2 @@
-export { Button } from "./Button.js";
-export type * from "./Button.js";
+export { Button } from "./Button.styled.js";
+export type { ButtonProps } from "./Button.styled.js";

package/button/index.js

@@ -9,4 +9,4 @@ Object.defineProperty(exports, "Button", {
     return _Button.Button;
   }
 });
-var _Button = require("./Button");
+var _Button = require("./Button.styled");

package/checkbox/Checkbox.styled.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+export declare const Root: React.ForwardRefExoticComponent<Omit<Omit<import("./index.js").CheckboxRootProps, "ref"> & React.RefAttributes<HTMLElement>, "ref"> & React.RefAttributes<HTMLElement>>;
+export declare const Indicator: React.ForwardRefExoticComponent<Omit<Omit<import("./index.js").CheckboxIndicatorProps, "ref"> & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;

package/checkbox/Checkbox.styled.js

@@ -0,0 +1,31 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Root = exports.Indicator = void 0;
+var React = _interopRequireWildcard(require("react"));
+var H = _interopRequireWildcard(require("./index.parts"));
+var _cx = require("../_cx");
+var _jsxRuntime = require("react/jsx-runtime");
+const Root = exports.Root = /*#__PURE__*/React.forwardRef(({
+  className,
+  ...props
+}, ref) => /*#__PURE__*/(0, _jsxRuntime.jsx)(H.Root, {
+  className: (0, _cx.cx)('tale-checkbox', className),
+  ref: ref,
+  ...props
+}));
+if (process.env.NODE_ENV !== "production") Root.displayName = "Root";
+Root.displayName = 'Checkbox.Root';
+const Indicator = exports.Indicator = /*#__PURE__*/React.forwardRef(({
+  className,
+  ...props
+}, ref) => /*#__PURE__*/(0, _jsxRuntime.jsx)(H.Indicator, {
+  className: (0, _cx.cx)('tale-checkbox__indicator', className),
+  ref: ref,
+  ...props
+}));
+if (process.env.NODE_ENV !== "production") Indicator.displayName = "Indicator";
+Indicator.displayName = 'Checkbox.Indicator';

package/checkbox/index.d.ts

@@ -1,3 +1,3 @@
-export * as Checkbox from "./index.parts.js";
+export * as Checkbox from "./Checkbox.styled.js";
 export type * from "./root/CheckboxRoot.js";
 export type * from "./indicator/CheckboxIndicator.js";