@tale-ui/react 0.1.0 → 0.2.0

package/esm/combobox/Combobox.styled.js

@@ -0,0 +1,102 @@
+import * as React from 'react';
+import * as H from "./index.parts.js";
+import { cx } from "../_cx.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export const Root = H.Root;
+export const Portal = H.Portal;
+export const Backdrop = H.Backdrop;
+export const Positioner = H.Positioner;
+export const Arrow = H.Arrow;
+export const Icon = H.Icon;
+export const Value = H.Value;
+export const Status = H.Status;
+export const Trigger = H.Trigger;
+export const List = H.List;
+export const Row = H.Row;
+export const Collection = H.Collection;
+export const Clear = H.Clear;
+export const ItemIndicator = H.ItemIndicator;
+export const Group = H.Group;
+export const useFilter = H.useFilter;
+export const useFilteredItems = H.useFilteredItems;
+const StyledInput = /*#__PURE__*/React.forwardRef(({
+  className,
+  ...props
+}, ref) => /*#__PURE__*/_jsx(H.Input, {
+  className: cx('tale-combobox__input', className),
+  ref: ref,
+  ...props
+}));
+StyledInput.displayName = 'Combobox.Input';
+export const Input = StyledInput;
+const StyledPopup = /*#__PURE__*/React.forwardRef(({
+  className,
+  ...props
+}, ref) => /*#__PURE__*/_jsx(H.Popup, {
+  className: cx('tale-combobox__popup', className),
+  ref: ref,
+  ...props
+}));
+StyledPopup.displayName = 'Combobox.Popup';
+export const Popup = StyledPopup;
+const StyledItem = /*#__PURE__*/React.forwardRef(({
+  className,
+  ...props
+}, ref) => /*#__PURE__*/_jsx(H.Item, {
+  className: cx('tale-combobox__item', className),
+  ref: ref,
+  ...props
+}));
+StyledItem.displayName = 'Combobox.Item';
+export const Item = StyledItem;
+const StyledGroupLabel = /*#__PURE__*/React.forwardRef(({
+  className,
+  ...props
+}, ref) => /*#__PURE__*/_jsx(H.GroupLabel, {
+  className: cx('tale-combobox__group-label', className),
+  ref: ref,
+  ...props
+}));
+StyledGroupLabel.displayName = 'Combobox.GroupLabel';
+export const GroupLabel = StyledGroupLabel;
+const StyledEmpty = /*#__PURE__*/React.forwardRef(({
+  className,
+  ...props
+}, ref) => /*#__PURE__*/_jsx(H.Empty, {
+  className: cx('tale-combobox__empty', className),
+  ref: ref,
+  ...props
+}));
+StyledEmpty.displayName = 'Combobox.Empty';
+export const Empty = StyledEmpty;
+const StyledChips = /*#__PURE__*/React.forwardRef(({
+  className,
+  ...props
+}, ref) => /*#__PURE__*/_jsx(H.Chips, {
+  className: cx('tale-combobox__chips', className),
+  ref: ref,
+  ...props
+}));
+StyledChips.displayName = 'Combobox.Chips';
+export const Chips = StyledChips;
+const StyledChip = /*#__PURE__*/React.forwardRef(({
+  className,
+  ...props
+}, ref) => /*#__PURE__*/_jsx(H.Chip, {
+  className: cx('tale-combobox__chip', className),
+  ref: ref,
+  ...props
+}));
+StyledChip.displayName = 'Combobox.Chip';
+export const Chip = StyledChip;
+const StyledChipRemove = /*#__PURE__*/React.forwardRef(({
+  className,
+  ...props
+}, ref) => /*#__PURE__*/_jsx(H.ChipRemove, {
+  className: cx('tale-combobox__chip-remove', className),
+  ref: ref,
+  ...props
+}));
+StyledChipRemove.displayName = 'Combobox.ChipRemove';
+export const ChipRemove = StyledChipRemove;
+export { Separator } from "./index.parts.js";

package/esm/combobox/index.d.ts

@@ -1,4 +1,4 @@
-export * as Combobox from "./index.parts.js";
+export * as Combobox from "./Combobox.styled.js";
 export type * from "./root/ComboboxRoot.js";
 export type * from "./trigger/ComboboxTrigger.js";
 export type * from "./input/ComboboxInput.js";

package/esm/combobox/index.js

@@ -1 +1 @@
-export * as Combobox from "./index.parts.js";
+export * as Combobox from "./Combobox.styled.js";

package/esm/container/Container.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+export declare const CONTAINER_COLORS: readonly ["brand", "random", "red", "orange", "amber", "yellow", "lime", "green", "emerald", "teal", "cyan", "sky", "indigo", "violet", "purple", "fuchsia", "pink", "rose"];
+export type ContainerColor = typeof CONTAINER_COLORS[number];
+export type ContainerProps = React.HTMLAttributes<HTMLDivElement> & {
+  color?: ContainerColor;
+};
+export declare function Container({
+  color,
+  children,
+  style,
+  ...props
+}: ContainerProps): import("react/jsx-runtime").JSX.Element;

package/esm/container/Container.js

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { randomBaseColor, generatePalette, NAMED_SHADES } from '@tale-ui/utils/color';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const CONTAINER_COLORS = ['brand', 'random', 'red', 'orange', 'amber', 'yellow', 'lime', 'green', 'emerald', 'teal', 'cyan', 'sky', 'indigo', 'violet', 'purple', 'fuchsia', 'pink', 'rose'];
+// Computed once per page load — changes on hard refresh
+const randomBase = randomBaseColor('named');
+const randomPalette = generatePalette(randomBase, 'named');
+const randomColorVars = Object.fromEntries(randomPalette.map(({
+  shade,
+  hex
+}) => [`--color-${shade}`, hex]));
+function getColorVars(color) {
+  if (color === 'brand') return undefined;
+  if (color === 'random') return randomColorVars;
+  return Object.fromEntries(NAMED_SHADES.map(shade => [`--color-${shade}`, `var(--${color}-${shade})`]));
+}
+export function Container({
+  color = 'brand',
+  children,
+  style,
+  ...props
+}) {
+  const colorVars = getColorVars(color);
+  return /*#__PURE__*/_jsx("div", {
+    style: {
+      ...colorVars,
+      ...style
+    },
+    ...props,
+    children: children
+  });
+}

package/esm/container/index.d.ts

@@ -0,0 +1,2 @@
+export { Container, CONTAINER_COLORS } from "./Container.js";
+export type { ContainerColor, ContainerProps } from "./Container.js";

package/esm/container/index.js

@@ -0,0 +1 @@
+export { Container, CONTAINER_COLORS } from "./Container.js";

package/esm/context-menu/ContextMenu.styled.d.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import * as H from "./index.parts.js";
+export declare const Root: typeof H.Root;
+export declare const Trigger: React.ForwardRefExoticComponent<Omit<import("./index.js").ContextMenuTriggerProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const Portal: React.ForwardRefExoticComponent<Omit<import("./index.js").ContextMenuPortalProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const Backdrop: React.ForwardRefExoticComponent<Omit<import("./index.js").ContextMenuBackdropProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const Positioner: React.ForwardRefExoticComponent<Omit<import("./index.js").ContextMenuPositionerProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const Arrow: React.ForwardRefExoticComponent<Omit<import("./index.js").ContextMenuArrowProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const Group: React.ForwardRefExoticComponent<Omit<import("./index.js").ContextMenuGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const RadioGroup: React.NamedExoticComponent<Omit<import("./index.js").ContextMenuRadioGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const SubmenuRoot: typeof H.SubmenuRoot;
+export declare const Separator: React.ForwardRefExoticComponent<Omit<import("../index.js").SeparatorProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const Popup: React.ForwardRefExoticComponent<Omit<Omit<import("./index.js").ContextMenuPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const Item: React.ForwardRefExoticComponent<Omit<Omit<import("./index.js").ContextMenuItemProps, "ref"> & React.RefAttributes<HTMLElement>, "ref"> & React.RefAttributes<HTMLElement>>;
+export declare const CheckboxItem: React.ForwardRefExoticComponent<Omit<Omit<import("./index.js").ContextMenuCheckboxItemProps, "ref"> & React.RefAttributes<HTMLElement>, "ref"> & React.RefAttributes<HTMLElement>>;
+export declare const CheckboxItemIndicator: React.ForwardRefExoticComponent<Omit<Omit<import("./index.js").ContextMenuCheckboxItemIndicatorProps, "ref"> & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+export declare const RadioItem: React.ForwardRefExoticComponent<Omit<Omit<import("./index.js").ContextMenuRadioItemProps, "ref"> & React.RefAttributes<HTMLElement>, "ref"> & React.RefAttributes<HTMLElement>>;
+export declare const RadioItemIndicator: React.ForwardRefExoticComponent<Omit<Omit<import("./index.js").ContextMenuRadioItemIndicatorProps, "ref"> & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+export declare const LinkItem: React.ForwardRefExoticComponent<Omit<Omit<import("./index.js").ContextMenuLinkItemProps, "ref"> & React.RefAttributes<Element>, "ref"> & React.RefAttributes<Element>>;
+export declare const SubmenuTrigger: React.ForwardRefExoticComponent<Omit<Omit<import("./index.js").ContextMenuSubmenuTriggerProps, "ref"> & React.RefAttributes<HTMLElement>, "ref"> & React.RefAttributes<HTMLElement>>;
+export declare const GroupLabel: React.ForwardRefExoticComponent<Omit<Omit<import("./index.js").ContextMenuGroupLabelProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/esm/context-menu/ContextMenu.styled.js

@@ -0,0 +1,104 @@
+import * as React from 'react';
+import * as H from "./index.parts.js";
+import { cx } from "../_cx.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export const Root = H.Root;
+export const Trigger = H.Trigger;
+export const Portal = H.Portal;
+export const Backdrop = H.Backdrop;
+export const Positioner = H.Positioner;
+export const Arrow = H.Arrow;
+export const Group = H.Group;
+export const RadioGroup = H.RadioGroup;
+export const SubmenuRoot = H.SubmenuRoot;
+export const Separator = H.Separator;
+export const Popup = /*#__PURE__*/React.forwardRef(({
+  className,
+  ...props
+}, ref) => /*#__PURE__*/_jsx(H.Popup, {
+  className: cx('tale-menu__popup', className),
+  ref: ref,
+  ...props
+}));
+if (process.env.NODE_ENV !== "production") Popup.displayName = "Popup";
+Popup.displayName = 'ContextMenu.Popup';
+export const Item = /*#__PURE__*/React.forwardRef(({
+  className,
+  ...props
+}, ref) => /*#__PURE__*/_jsx(H.Item, {
+  className: cx('tale-menu__item', className),
+  ref: ref,
+  ...props
+}));
+if (process.env.NODE_ENV !== "production") Item.displayName = "Item";
+Item.displayName = 'ContextMenu.Item';
+export const CheckboxItem = /*#__PURE__*/React.forwardRef(({
+  className,
+  ...props
+}, ref) => /*#__PURE__*/_jsx(H.CheckboxItem, {
+  className: cx('tale-menu__checkbox-item', className),
+  ref: ref,
+  ...props
+}));
+if (process.env.NODE_ENV !== "production") CheckboxItem.displayName = "CheckboxItem";
+CheckboxItem.displayName = 'ContextMenu.CheckboxItem';
+export const CheckboxItemIndicator = /*#__PURE__*/React.forwardRef(({
+  className,
+  ...props
+}, ref) => /*#__PURE__*/_jsx(H.CheckboxItemIndicator, {
+  className: cx('tale-menu__item-indicator', className),
+  ref: ref,
+  ...props
+}));
+if (process.env.NODE_ENV !== "production") CheckboxItemIndicator.displayName = "CheckboxItemIndicator";
+CheckboxItemIndicator.displayName = 'ContextMenu.CheckboxItemIndicator';
+export const RadioItem = /*#__PURE__*/React.forwardRef(({
+  className,
+  ...props
+}, ref) => /*#__PURE__*/_jsx(H.RadioItem, {
+  className: cx('tale-menu__radio-item', className),
+  ref: ref,
+  ...props
+}));
+if (process.env.NODE_ENV !== "production") RadioItem.displayName = "RadioItem";
+RadioItem.displayName = 'ContextMenu.RadioItem';
+export const RadioItemIndicator = /*#__PURE__*/React.forwardRef(({
+  className,
+  ...props
+}, ref) => /*#__PURE__*/_jsx(H.RadioItemIndicator, {
+  className: cx('tale-menu__item-indicator', className),
+  ref: ref,
+  ...props
+}));
+if (process.env.NODE_ENV !== "production") RadioItemIndicator.displayName = "RadioItemIndicator";
+RadioItemIndicator.displayName = 'ContextMenu.RadioItemIndicator';
+export const LinkItem = /*#__PURE__*/React.forwardRef(({
+  className,
+  ...props
+}, ref) => /*#__PURE__*/_jsx(H.LinkItem, {
+  className: cx('tale-menu__link-item', className),
+  ref: ref,
+  ...props
+}));
+if (process.env.NODE_ENV !== "production") LinkItem.displayName = "LinkItem";
+LinkItem.displayName = 'ContextMenu.LinkItem';
+export const SubmenuTrigger = /*#__PURE__*/React.forwardRef(({
+  className,
+  ...props
+}, ref) => /*#__PURE__*/_jsx(H.SubmenuTrigger, {
+  className: cx('tale-menu__submenu-trigger', className),
+  ref: ref,
+  ...props
+}));
+if (process.env.NODE_ENV !== "production") SubmenuTrigger.displayName = "SubmenuTrigger";
+SubmenuTrigger.displayName = 'ContextMenu.SubmenuTrigger';
+export const GroupLabel = /*#__PURE__*/React.forwardRef(({
+  className,
+  ...props
+}, ref) => /*#__PURE__*/_jsx(H.GroupLabel, {
+  className: cx('tale-menu__group-label', className),
+  ref: ref,
+  ...props
+}));
+if (process.env.NODE_ENV !== "production") GroupLabel.displayName = "GroupLabel";
+GroupLabel.displayName = 'ContextMenu.GroupLabel';

package/esm/context-menu/index.d.ts

@@ -1,4 +1,4 @@
-export * as ContextMenu from "./index.parts.js";
+export * as ContextMenu from "./ContextMenu.styled.js";
 export type * from "./root/ContextMenuRoot.js";
 export type * from "./trigger/ContextMenuTrigger.js";
 export type { MenuBackdropProps as ContextMenuBackdropProps, MenuBackdropState as ContextMenuBackdropState } from "../menu/backdrop/MenuBackdrop.js";

package/esm/context-menu/index.js

@@ -1 +1 @@
-export * as ContextMenu from "./index.parts.js";
+export * as ContextMenu from "./ContextMenu.styled.js";

package/esm/context-menu/root/ContextMenuRoot.d.ts

@@ -1,4 +1,3 @@
-import { Menu } from "../../menu/index.js";
 import type { TaleUIChangeEventDetails } from "../../types/index.js";
 import type { MenuRoot } from "../../menu/root/MenuRoot.js";
 /**
@@ -9,7 +8,7 @@ import type { MenuRoot } from "../../menu/root/MenuRoot.js";
  */
 export declare function ContextMenuRoot(props: ContextMenuRoot.Props): import("react/jsx-runtime").JSX.Element;
 export interface ContextMenuRootState {}
-export interface ContextMenuRootProps extends Omit<Menu.Root.Props, 'modal' | 'openOnHover' | 'delay' | 'closeDelay' | 'onOpenChange'> {
+export interface ContextMenuRootProps extends Omit<MenuRoot.Props, 'modal' | 'openOnHover' | 'delay' | 'closeDelay' | 'onOpenChange'> {
   /**
    * Event handler called when the menu is opened or closed.
    */

package/esm/dialog/Dialog.styled.d.ts

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import * as H from "./index.parts.js";
+import type { DialogRootProps, DialogRootActions, DialogRootChangeEventReason, DialogRootChangeEventDetails } from "./root/DialogRoot.js";
+import type { DialogPopupProps, DialogPopupState } from "./popup/DialogPopup.js";
+import type { DialogPortalProps } from "./portal/DialogPortal.js";
+import type { DialogTriggerProps, DialogTriggerState } from "./trigger/DialogTrigger.js";
+export declare const Root: typeof H.Root;
+export declare namespace Root {
+  type Props<Payload = unknown> = DialogRootProps<Payload>;
+  type Actions = DialogRootActions;
+  type ChangeEventReason = DialogRootChangeEventReason;
+  type ChangeEventDetails = DialogRootChangeEventDetails;
+}
+export declare const Portal: React.ForwardRefExoticComponent<Omit<DialogPortalProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare namespace Portal {
+  type Props = DialogPortalProps;
+}
+export declare const Viewport: React.ForwardRefExoticComponent<Omit<import("./index.js").DialogViewportProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const Trigger: H.Trigger;
+export declare namespace Trigger {
+  type Props<Payload = unknown> = DialogTriggerProps<Payload>;
+  type State = DialogTriggerState;
+}
+export declare const createHandle: typeof H.createHandle;
+export declare const Handle: typeof H.Handle;
+export declare const Backdrop: typeof H.Backdrop;
+export declare const Popup: typeof H.Popup;
+export declare namespace Popup {
+  type Props = DialogPopupProps;
+  type State = DialogPopupState;
+}
+export declare const Title: typeof H.Title;
+export declare const Description: typeof H.Description;
+export declare const Close: React.ForwardRefExoticComponent<Omit<import("./index.js").DialogCloseProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

package/esm/dialog/Dialog.styled.js

@@ -0,0 +1,51 @@
+import * as React from 'react';
+import * as H from "./index.parts.js";
+import { cx } from "../_cx.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export const Root = H.Root;
+export const Portal = H.Portal;
+export const Viewport = H.Viewport;
+export const Trigger = H.Trigger;
+export const createHandle = H.createHandle;
+export const Handle = H.Handle;
+const StyledBackdrop = /*#__PURE__*/React.forwardRef(({
+  className,
+  ...props
+}, ref) => /*#__PURE__*/_jsx(H.Backdrop, {
+  className: cx('tale-dialog__backdrop', className),
+  ref: ref,
+  ...props
+}));
+StyledBackdrop.displayName = 'Dialog.Backdrop';
+export const Backdrop = StyledBackdrop;
+const StyledPopup = /*#__PURE__*/React.forwardRef(({
+  className,
+  ...props
+}, ref) => /*#__PURE__*/_jsx(H.Popup, {
+  className: cx('tale-dialog__popup', className),
+  ref: ref,
+  ...props
+}));
+StyledPopup.displayName = 'Dialog.Popup';
+export const Popup = StyledPopup;
+const StyledTitle = /*#__PURE__*/React.forwardRef(({
+  className,
+  ...props
+}, ref) => /*#__PURE__*/_jsx(H.Title, {
+  className: cx('tale-dialog__title', className),
+  ref: ref,
+  ...props
+}));
+StyledTitle.displayName = 'Dialog.Title';
+export const Title = StyledTitle;
+const StyledDescription = /*#__PURE__*/React.forwardRef(({
+  className,
+  ...props
+}, ref) => /*#__PURE__*/_jsx(H.Description, {
+  className: cx('tale-dialog__description', className),
+  ref: ref,
+  ...props
+}));
+StyledDescription.displayName = 'Dialog.Description';
+export const Description = StyledDescription;
+export const Close = H.Close;

package/esm/dialog/index.d.ts

@@ -1,4 +1,4 @@
-export * as Dialog from "./index.parts.js";
+export * as Dialog from "./Dialog.styled.js";
 export type * from "./root/DialogRoot.js";
 export type * from "./trigger/DialogTrigger.js";
 export type * from "./portal/DialogPortal.js";

package/esm/dialog/index.js

@@ -1 +1 @@
-export * as Dialog from "./index.parts.js";
+export * as Dialog from "./Dialog.styled.js";

package/esm/drawer/Drawer.styled.d.ts

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import * as H from "./index.parts.js";
+import type { DrawerRootProps, DrawerRootActions, DrawerRootChangeEventReason, DrawerRootChangeEventDetails, DrawerRootSnapPointChangeEventReason, DrawerRootSnapPointChangeEventDetails } from "./root/DrawerRoot.js";
+import type { DrawerSnapPoint } from "./root/DrawerRootContext.js";
+export declare const Root: typeof H.Root;
+export declare namespace Root {
+  type Props<Payload = unknown> = DrawerRootProps<Payload>;
+  type Actions = DrawerRootActions;
+  type ChangeEventReason = DrawerRootChangeEventReason;
+  type ChangeEventDetails = DrawerRootChangeEventDetails;
+  type SnapPointChangeEventReason = DrawerRootSnapPointChangeEventReason;
+  type SnapPointChangeEventDetails = DrawerRootSnapPointChangeEventDetails;
+  type SnapPoint = DrawerSnapPoint;
+}
+export declare const Portal: H.Portal;
+export declare const Viewport: React.ForwardRefExoticComponent<Omit<import("./index.js").DrawerViewportProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const Trigger: H.Trigger;
+export declare const Provider: typeof H.Provider;
+export declare const Indent: React.ForwardRefExoticComponent<Omit<import("./index.js").DrawerIndentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const IndentBackground: React.ForwardRefExoticComponent<Omit<import("./index.js").DrawerIndentBackgroundProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const createHandle: typeof H.createHandle;
+export declare const Handle: typeof H.Handle;
+export declare const Backdrop: typeof H.Backdrop;
+export declare const Popup: typeof H.Popup;
+export declare const Content: typeof H.Content;
+export declare const Title: typeof H.Title;
+export declare const Description: typeof H.Description;
+export declare const Close: H.Close;

package/esm/drawer/Drawer.styled.js

@@ -0,0 +1,64 @@
+import * as React from 'react';
+import * as H from "./index.parts.js";
+import { cx } from "../_cx.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export const Root = H.Root;
+export const Portal = H.Portal;
+export const Viewport = H.Viewport;
+export const Trigger = H.Trigger;
+export const Provider = H.Provider;
+export const Indent = H.Indent;
+export const IndentBackground = H.IndentBackground;
+export const createHandle = H.createHandle;
+export const Handle = H.Handle;
+const StyledBackdrop = /*#__PURE__*/React.forwardRef(({
+  className,
+  ...props
+}, ref) => /*#__PURE__*/_jsx(H.Backdrop, {
+  className: cx('tale-drawer__backdrop', className),
+  ref: ref,
+  ...props
+}));
+StyledBackdrop.displayName = 'Drawer.Backdrop';
+export const Backdrop = StyledBackdrop;
+const StyledPopup = /*#__PURE__*/React.forwardRef(({
+  className,
+  ...props
+}, ref) => /*#__PURE__*/_jsx(H.Popup, {
+  className: cx('tale-drawer__popup', className),
+  ref: ref,
+  ...props
+}));
+StyledPopup.displayName = 'Drawer.Popup';
+export const Popup = StyledPopup;
+const StyledContent = /*#__PURE__*/React.forwardRef(({
+  className,
+  ...props
+}, ref) => /*#__PURE__*/_jsx(H.Content, {
+  className: cx('tale-drawer__content', className),
+  ref: ref,
+  ...props
+}));
+StyledContent.displayName = 'Drawer.Content';
+export const Content = StyledContent;
+const StyledTitle = /*#__PURE__*/React.forwardRef(({
+  className,
+  ...props
+}, ref) => /*#__PURE__*/_jsx(H.Title, {
+  className: cx('tale-drawer__title', className),
+  ref: ref,
+  ...props
+}));
+StyledTitle.displayName = 'Drawer.Title';
+export const Title = StyledTitle;
+const StyledDescription = /*#__PURE__*/React.forwardRef(({
+  className,
+  ...props
+}, ref) => /*#__PURE__*/_jsx(H.Description, {
+  className: cx('tale-drawer__description', className),
+  ref: ref,
+  ...props
+}));
+StyledDescription.displayName = 'Drawer.Description';
+export const Description = StyledDescription;
+export const Close = H.Close;

package/esm/drawer/index.d.ts

@@ -1,4 +1,4 @@
-export * as DrawerPreview from "./index.parts.js";
+export * as DrawerPreview from "./Drawer.styled.js";
 export type * from "./root/DrawerRoot.js";
 export type * from "./provider/DrawerProvider.js";
 export type * from "./indent/DrawerIndent.js";

package/esm/drawer/index.js

@@ -1 +1 @@
-export * as DrawerPreview from "./index.parts.js";
+export * as DrawerPreview from "./Drawer.styled.js";

package/esm/field/Field.styled.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import * as H from "./index.parts.js";
+import type { FieldRootState, FieldRootProps, FieldRootActions } from "./root/FieldRoot.js";
+export declare const Root: typeof H.Root;
+export declare namespace Root {
+  type State = FieldRootState;
+  type Props = FieldRootProps;
+  type Actions = FieldRootActions;
+}
+export declare const Label: React.ForwardRefExoticComponent<Omit<Omit<import("./index.js").FieldLabelProps, "ref"> & React.RefAttributes<HTMLElement>, "ref"> & React.RefAttributes<HTMLElement>>;
+export declare const Description: React.ForwardRefExoticComponent<Omit<Omit<import("./index.js").FieldDescriptionProps, "ref"> & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+export declare const Error: React.ForwardRefExoticComponent<Omit<Omit<import("./index.js").FieldErrorProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { Control, Validity, Item } from "./index.parts.js";
+export type { ValidityData } from "./index.parts.js";

package/esm/field/Field.styled.js

@@ -0,0 +1,45 @@
+import * as React from 'react';
+import * as H from "./index.parts.js";
+import { cx } from "../_cx.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const StyledRoot = /*#__PURE__*/React.forwardRef(({
+  className,
+  ...props
+}, ref) => /*#__PURE__*/_jsx(H.Root, {
+  className: cx('tale-field', className),
+  ref: ref,
+  ...props
+}));
+StyledRoot.displayName = 'Field.Root';
+export const Root = StyledRoot;
+export const Label = /*#__PURE__*/React.forwardRef(({
+  className,
+  ...props
+}, ref) => /*#__PURE__*/_jsx(H.Label, {
+  className: cx('tale-field__label', className),
+  ref: ref,
+  ...props
+}));
+if (process.env.NODE_ENV !== "production") Label.displayName = "Label";
+Label.displayName = 'Field.Label';
+export const Description = /*#__PURE__*/React.forwardRef(({
+  className,
+  ...props
+}, ref) => /*#__PURE__*/_jsx(H.Description, {
+  className: cx('tale-field__description', className),
+  ref: ref,
+  ...props
+}));
+if (process.env.NODE_ENV !== "production") Description.displayName = "Description";
+Description.displayName = 'Field.Description';
+export const Error = /*#__PURE__*/React.forwardRef(({
+  className,
+  ...props
+}, ref) => /*#__PURE__*/_jsx(H.Error, {
+  className: cx('tale-field__error', className),
+  ref: ref,
+  ...props
+}));
+if (process.env.NODE_ENV !== "production") Error.displayName = "Error";
+Error.displayName = 'Field.Error';
+export { Control, Validity, Item } from "./index.parts.js";

package/esm/field/index.d.ts

@@ -1,4 +1,4 @@
-export * as Field from "./index.parts.js";
+export * as Field from "./Field.styled.js";
 export type * from "./root/FieldRoot.js";
 export type * from "./label/FieldLabel.js";
 export type * from "./description/FieldDescription.js";

package/esm/field/index.js

@@ -1 +1 @@
-export * as Field from "./index.parts.js";
+export * as Field from "./Field.styled.js";

package/esm/fieldset/Fieldset.styled.d.ts

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

package/esm/fieldset/Fieldset.styled.js

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import * as H from "./index.parts.js";
+import { cx } from "../_cx.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export const Root = /*#__PURE__*/React.forwardRef(({
+  className,
+  ...props
+}, ref) => /*#__PURE__*/_jsx(H.Root, {
+  className: cx('tale-fieldset', className),
+  ref: ref,
+  ...props
+}));
+if (process.env.NODE_ENV !== "production") Root.displayName = "Root";
+Root.displayName = 'Fieldset.Root';
+export const Legend = /*#__PURE__*/React.forwardRef(({
+  className,
+  ...props
+}, ref) => /*#__PURE__*/_jsx(H.Legend, {
+  className: cx('tale-fieldset__legend', className),
+  ref: ref,
+  ...props
+}));
+if (process.env.NODE_ENV !== "production") Legend.displayName = "Legend";
+Legend.displayName = 'Fieldset.Legend';

package/esm/fieldset/index.d.ts

@@ -1,3 +1,3 @@
-export * as Fieldset from "./index.parts.js";
+export * as Fieldset from "./Fieldset.styled.js";
 export type * from "./root/FieldsetRoot.js";
 export type * from "./legend/FieldsetLegend.js";

package/esm/fieldset/index.js

@@ -1 +1 @@
-export * as Fieldset from "./index.parts.js";
+export * as Fieldset from "./Fieldset.styled.js";