@tale-ui/react 0.1.1 → 0.2.0

package/package.json

@@ -1,13 +1,12 @@
 {
   "name": "@tale-ui/react",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "Opinionated React component library built on tale-ui primitives, styled with @tale-ui/core design tokens.",
   "keywords": [
     "react",
     "react-component",
     "design-system",
     "tale-ui",
-    "unstyled",
     "a11y"
   ],
   "repository": {
@@ -23,16 +22,20 @@
     "@floating-ui/utils": "^0.2.10",
     "tabbable": "^6.4.0",
     "use-sync-external-store": "^1.6.0",
-    "@tale-ui/utils": "0.1.1"
+    "@tale-ui/utils": "0.2.0"
   },
   "peerDependencies": {
     "@types/react": "^17 || ^18 || ^19",
     "react": "^17 || ^18 || ^19",
-    "react-dom": "^17 || ^18 || ^19"
+    "react-dom": "^17 || ^18 || ^19",
+    "@tale-ui/react-styles": "0.2.0"
   },
   "peerDependenciesMeta": {
     "@types/react": {
       "optional": true
+    },
+    "@tale-ui/react-styles": {
+      "optional": true
     }
   },
   "sideEffects": false,
@@ -297,378 +300,378 @@
       }
     },
     "./form": {
-      "require": {
-        "types": "./form/index.d.ts",
-        "default": "./form/index.js"
-      },
       "import": {
         "types": "./esm/form/index.d.ts",
         "default": "./esm/form/index.js"
       },
+      "require": {
+        "types": "./form/index.d.ts",
+        "default": "./form/index.js"
+      },
       "default": {
         "types": "./esm/form/index.d.ts",
         "default": "./esm/form/index.js"
       }
     },
     "./input": {
-      "require": {
-        "types": "./input/index.d.ts",
-        "default": "./input/index.js"
-      },
       "import": {
         "types": "./esm/input/index.d.ts",
         "default": "./esm/input/index.js"
       },
+      "require": {
+        "types": "./input/index.d.ts",
+        "default": "./input/index.js"
+      },
       "default": {
         "types": "./esm/input/index.d.ts",
         "default": "./esm/input/index.js"
       }
     },
     "./menu": {
-      "require": {
-        "types": "./menu/index.d.ts",
-        "default": "./menu/index.js"
-      },
       "import": {
         "types": "./esm/menu/index.d.ts",
         "default": "./esm/menu/index.js"
       },
+      "require": {
+        "types": "./menu/index.d.ts",
+        "default": "./menu/index.js"
+      },
       "default": {
         "types": "./esm/menu/index.d.ts",
         "default": "./esm/menu/index.js"
       }
     },
     "./menubar": {
-      "require": {
-        "types": "./menubar/index.d.ts",
-        "default": "./menubar/index.js"
-      },
       "import": {
         "types": "./esm/menubar/index.d.ts",
         "default": "./esm/menubar/index.js"
       },
+      "require": {
+        "types": "./menubar/index.d.ts",
+        "default": "./menubar/index.js"
+      },
       "default": {
         "types": "./esm/menubar/index.d.ts",
         "default": "./esm/menubar/index.js"
       }
     },
     "./merge-props": {
-      "require": {
-        "types": "./merge-props/index.d.ts",
-        "default": "./merge-props/index.js"
-      },
       "import": {
         "types": "./esm/merge-props/index.d.ts",
         "default": "./esm/merge-props/index.js"
       },
+      "require": {
+        "types": "./merge-props/index.d.ts",
+        "default": "./merge-props/index.js"
+      },
       "default": {
         "types": "./esm/merge-props/index.d.ts",
         "default": "./esm/merge-props/index.js"
       }
     },
     "./meter": {
-      "require": {
-        "types": "./meter/index.d.ts",
-        "default": "./meter/index.js"
-      },
       "import": {
         "types": "./esm/meter/index.d.ts",
         "default": "./esm/meter/index.js"
       },
+      "require": {
+        "types": "./meter/index.d.ts",
+        "default": "./meter/index.js"
+      },
       "default": {
         "types": "./esm/meter/index.d.ts",
         "default": "./esm/meter/index.js"
       }
     },
     "./navigation-menu": {
-      "require": {
-        "types": "./navigation-menu/index.d.ts",
-        "default": "./navigation-menu/index.js"
-      },
       "import": {
         "types": "./esm/navigation-menu/index.d.ts",
         "default": "./esm/navigation-menu/index.js"
       },
+      "require": {
+        "types": "./navigation-menu/index.d.ts",
+        "default": "./navigation-menu/index.js"
+      },
       "default": {
         "types": "./esm/navigation-menu/index.d.ts",
         "default": "./esm/navigation-menu/index.js"
       }
     },
     "./number-field": {
-      "require": {
-        "types": "./number-field/index.d.ts",
-        "default": "./number-field/index.js"
-      },
       "import": {
         "types": "./esm/number-field/index.d.ts",
         "default": "./esm/number-field/index.js"
       },
+      "require": {
+        "types": "./number-field/index.d.ts",
+        "default": "./number-field/index.js"
+      },
       "default": {
         "types": "./esm/number-field/index.d.ts",
         "default": "./esm/number-field/index.js"
       }
     },
     "./popover": {
-      "require": {
-        "types": "./popover/index.d.ts",
-        "default": "./popover/index.js"
-      },
       "import": {
         "types": "./esm/popover/index.d.ts",
         "default": "./esm/popover/index.js"
       },
+      "require": {
+        "types": "./popover/index.d.ts",
+        "default": "./popover/index.js"
+      },
       "default": {
         "types": "./esm/popover/index.d.ts",
         "default": "./esm/popover/index.js"
       }
     },
     "./preview-card": {
-      "require": {
-        "types": "./preview-card/index.d.ts",
-        "default": "./preview-card/index.js"
-      },
       "import": {
         "types": "./esm/preview-card/index.d.ts",
         "default": "./esm/preview-card/index.js"
       },
+      "require": {
+        "types": "./preview-card/index.d.ts",
+        "default": "./preview-card/index.js"
+      },
       "default": {
         "types": "./esm/preview-card/index.d.ts",
         "default": "./esm/preview-card/index.js"
       }
     },
     "./progress": {
-      "require": {
-        "types": "./progress/index.d.ts",
-        "default": "./progress/index.js"
-      },
       "import": {
         "types": "./esm/progress/index.d.ts",
         "default": "./esm/progress/index.js"
       },
+      "require": {
+        "types": "./progress/index.d.ts",
+        "default": "./progress/index.js"
+      },
       "default": {
         "types": "./esm/progress/index.d.ts",
         "default": "./esm/progress/index.js"
       }
     },
     "./radio": {
-      "require": {
-        "types": "./radio/index.d.ts",
-        "default": "./radio/index.js"
-      },
       "import": {
         "types": "./esm/radio/index.d.ts",
         "default": "./esm/radio/index.js"
       },
+      "require": {
+        "types": "./radio/index.d.ts",
+        "default": "./radio/index.js"
+      },
       "default": {
         "types": "./esm/radio/index.d.ts",
         "default": "./esm/radio/index.js"
       }
     },
     "./radio-group": {
-      "require": {
-        "types": "./radio-group/index.d.ts",
-        "default": "./radio-group/index.js"
-      },
       "import": {
         "types": "./esm/radio-group/index.d.ts",
         "default": "./esm/radio-group/index.js"
       },
+      "require": {
+        "types": "./radio-group/index.d.ts",
+        "default": "./radio-group/index.js"
+      },
       "default": {
         "types": "./esm/radio-group/index.d.ts",
         "default": "./esm/radio-group/index.js"
       }
     },
     "./scroll-area": {
-      "require": {
-        "types": "./scroll-area/index.d.ts",
-        "default": "./scroll-area/index.js"
-      },
       "import": {
         "types": "./esm/scroll-area/index.d.ts",
         "default": "./esm/scroll-area/index.js"
       },
+      "require": {
+        "types": "./scroll-area/index.d.ts",
+        "default": "./scroll-area/index.js"
+      },
       "default": {
         "types": "./esm/scroll-area/index.d.ts",
         "default": "./esm/scroll-area/index.js"
       }
     },
     "./select": {
-      "require": {
-        "types": "./select/index.d.ts",
-        "default": "./select/index.js"
-      },
       "import": {
         "types": "./esm/select/index.d.ts",
         "default": "./esm/select/index.js"
       },
+      "require": {
+        "types": "./select/index.d.ts",
+        "default": "./select/index.js"
+      },
       "default": {
         "types": "./esm/select/index.d.ts",
         "default": "./esm/select/index.js"
       }
     },
     "./separator": {
-      "require": {
-        "types": "./separator/index.d.ts",
-        "default": "./separator/index.js"
-      },
       "import": {
         "types": "./esm/separator/index.d.ts",
         "default": "./esm/separator/index.js"
       },
+      "require": {
+        "types": "./separator/index.d.ts",
+        "default": "./separator/index.js"
+      },
       "default": {
         "types": "./esm/separator/index.d.ts",
         "default": "./esm/separator/index.js"
       }
     },
     "./slider": {
-      "require": {
-        "types": "./slider/index.d.ts",
-        "default": "./slider/index.js"
-      },
       "import": {
         "types": "./esm/slider/index.d.ts",
         "default": "./esm/slider/index.js"
       },
+      "require": {
+        "types": "./slider/index.d.ts",
+        "default": "./slider/index.js"
+      },
       "default": {
         "types": "./esm/slider/index.d.ts",
         "default": "./esm/slider/index.js"
       }
     },
     "./switch": {
-      "require": {
-        "types": "./switch/index.d.ts",
-        "default": "./switch/index.js"
-      },
       "import": {
         "types": "./esm/switch/index.d.ts",
         "default": "./esm/switch/index.js"
       },
+      "require": {
+        "types": "./switch/index.d.ts",
+        "default": "./switch/index.js"
+      },
       "default": {
         "types": "./esm/switch/index.d.ts",
         "default": "./esm/switch/index.js"
       }
     },
     "./tabs": {
-      "require": {
-        "types": "./tabs/index.d.ts",
-        "default": "./tabs/index.js"
-      },
       "import": {
         "types": "./esm/tabs/index.d.ts",
         "default": "./esm/tabs/index.js"
       },
+      "require": {
+        "types": "./tabs/index.d.ts",
+        "default": "./tabs/index.js"
+      },
       "default": {
         "types": "./esm/tabs/index.d.ts",
         "default": "./esm/tabs/index.js"
       }
     },
     "./toast": {
-      "require": {
-        "types": "./toast/index.d.ts",
-        "default": "./toast/index.js"
-      },
       "import": {
         "types": "./esm/toast/index.d.ts",
         "default": "./esm/toast/index.js"
       },
+      "require": {
+        "types": "./toast/index.d.ts",
+        "default": "./toast/index.js"
+      },
       "default": {
         "types": "./esm/toast/index.d.ts",
         "default": "./esm/toast/index.js"
       }
     },
     "./toggle": {
-      "require": {
-        "types": "./toggle/index.d.ts",
-        "default": "./toggle/index.js"
-      },
       "import": {
         "types": "./esm/toggle/index.d.ts",
         "default": "./esm/toggle/index.js"
       },
+      "require": {
+        "types": "./toggle/index.d.ts",
+        "default": "./toggle/index.js"
+      },
       "default": {
         "types": "./esm/toggle/index.d.ts",
         "default": "./esm/toggle/index.js"
       }
     },
     "./toggle-group": {
-      "require": {
-        "types": "./toggle-group/index.d.ts",
-        "default": "./toggle-group/index.js"
-      },
       "import": {
         "types": "./esm/toggle-group/index.d.ts",
         "default": "./esm/toggle-group/index.js"
       },
+      "require": {
+        "types": "./toggle-group/index.d.ts",
+        "default": "./toggle-group/index.js"
+      },
       "default": {
         "types": "./esm/toggle-group/index.d.ts",
         "default": "./esm/toggle-group/index.js"
       }
     },
     "./toolbar": {
-      "require": {
-        "types": "./toolbar/index.d.ts",
-        "default": "./toolbar/index.js"
-      },
       "import": {
         "types": "./esm/toolbar/index.d.ts",
         "default": "./esm/toolbar/index.js"
       },
+      "require": {
+        "types": "./toolbar/index.d.ts",
+        "default": "./toolbar/index.js"
+      },
       "default": {
         "types": "./esm/toolbar/index.d.ts",
         "default": "./esm/toolbar/index.js"
       }
     },
     "./tooltip": {
-      "require": {
-        "types": "./tooltip/index.d.ts",
-        "default": "./tooltip/index.js"
-      },
       "import": {
         "types": "./esm/tooltip/index.d.ts",
         "default": "./esm/tooltip/index.js"
       },
+      "require": {
+        "types": "./tooltip/index.d.ts",
+        "default": "./tooltip/index.js"
+      },
       "default": {
         "types": "./esm/tooltip/index.d.ts",
         "default": "./esm/tooltip/index.js"
       }
     },
     "./types": {
-      "require": {
-        "types": "./types/index.d.ts",
-        "default": "./types/index.js"
-      },
       "import": {
         "types": "./esm/types/index.d.ts",
         "default": "./esm/types/index.js"
       },
+      "require": {
+        "types": "./types/index.d.ts",
+        "default": "./types/index.js"
+      },
       "default": {
         "types": "./esm/types/index.d.ts",
         "default": "./esm/types/index.js"
       }
     },
     "./unstable-use-media-query": {
-      "require": {
-        "types": "./unstable-use-media-query/index.d.ts",
-        "default": "./unstable-use-media-query/index.js"
-      },
       "import": {
         "types": "./esm/unstable-use-media-query/index.d.ts",
         "default": "./esm/unstable-use-media-query/index.js"
       },
+      "require": {
+        "types": "./unstable-use-media-query/index.d.ts",
+        "default": "./unstable-use-media-query/index.js"
+      },
       "default": {
         "types": "./esm/unstable-use-media-query/index.d.ts",
         "default": "./esm/unstable-use-media-query/index.js"
       }
     },
     "./use-render": {
-      "require": {
-        "types": "./use-render/index.d.ts",
-        "default": "./use-render/index.js"
-      },
       "import": {
         "types": "./esm/use-render/index.d.ts",
         "default": "./esm/use-render/index.js"
       },
+      "require": {
+        "types": "./use-render/index.d.ts",
+        "default": "./use-render/index.js"
+      },
       "default": {
         "types": "./esm/use-render/index.d.ts",
         "default": "./esm/use-render/index.js"

package/popover/Popover.styled.d.ts

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import * as H from "./index.parts.js";
+import type { PopoverRootState, PopoverRootProps, PopoverRootActions, PopoverRootChangeEventReason, PopoverRootChangeEventDetails } from "./root/PopoverRoot.js";
+import type { PopoverTriggerState, PopoverTriggerProps } from "./trigger/PopoverTrigger.js";
+import type { PopoverPortalProps } from "./portal/PopoverPortal.js";
+import type { PopoverPositionerState, PopoverPositionerProps } from "./positioner/PopoverPositioner.js";
+import type { PopoverPopupState, PopoverPopupProps } from "./popup/PopoverPopup.js";
+export declare const Root: typeof H.Root;
+export declare namespace Root {
+  type State = PopoverRootState;
+  type Props<Payload = unknown> = PopoverRootProps<Payload>;
+  type Actions = PopoverRootActions;
+  type ChangeEventReason = PopoverRootChangeEventReason;
+  type ChangeEventDetails = PopoverRootChangeEventDetails;
+}
+export declare const Trigger: H.Trigger;
+export declare namespace Trigger {
+  type State = PopoverTriggerState;
+  type Props<Payload = unknown> = PopoverTriggerProps<Payload>;
+}
+export declare const Portal: React.ForwardRefExoticComponent<Omit<PopoverPortalProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare namespace Portal {
+  type Props = PopoverPortalProps;
+}
+export declare const Positioner: React.ForwardRefExoticComponent<Omit<PopoverPositionerProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare namespace Positioner {
+  type State = PopoverPositionerState;
+  type Props = PopoverPositionerProps;
+}
+export declare const Backdrop: React.ForwardRefExoticComponent<Omit<import("./index.js").PopoverBackdropProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const Viewport: React.ForwardRefExoticComponent<Omit<H.Viewport.Props, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const createHandle: typeof H.createHandle;
+export declare const Handle: typeof H.Handle;
+export declare const Arrow: typeof H.Arrow;
+export declare const Popup: typeof H.Popup;
+export declare namespace Popup {
+  type State = PopoverPopupState;
+  type Props = PopoverPopupProps;
+}
+export declare const Title: typeof H.Title;
+export declare const Description: typeof H.Description;
+export declare const Close: typeof H.Close;

package/popover/Popover.styled.js

@@ -0,0 +1,69 @@
+"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.Positioner = exports.Portal = exports.Popup = exports.Handle = exports.Description = exports.Close = exports.Backdrop = exports.Arrow = 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 Trigger = exports.Trigger = H.Trigger;
+const Portal = exports.Portal = H.Portal;
+const Positioner = exports.Positioner = H.Positioner;
+const Backdrop = exports.Backdrop = H.Backdrop;
+const Viewport = exports.Viewport = H.Viewport;
+const createHandle = exports.createHandle = H.createHandle;
+const Handle = exports.Handle = H.Handle;
+const StyledArrow = /*#__PURE__*/React.forwardRef(({
+  className,
+  ...props
+}, ref) => /*#__PURE__*/(0, _jsxRuntime.jsx)(H.Arrow, {
+  className: (0, _cx.cx)('tale-popover__arrow', className),
+  ref: ref,
+  ...props
+}));
+StyledArrow.displayName = 'Popover.Arrow';
+const Arrow = exports.Arrow = StyledArrow;
+const StyledPopup = /*#__PURE__*/React.forwardRef(({
+  className,
+  ...props
+}, ref) => /*#__PURE__*/(0, _jsxRuntime.jsx)(H.Popup, {
+  className: (0, _cx.cx)('tale-popover__popup', className),
+  ref: ref,
+  ...props
+}));
+StyledPopup.displayName = 'Popover.Popup';
+const Popup = exports.Popup = StyledPopup;
+const StyledTitle = /*#__PURE__*/React.forwardRef(({
+  className,
+  ...props
+}, ref) => /*#__PURE__*/(0, _jsxRuntime.jsx)(H.Title, {
+  className: (0, _cx.cx)('tale-popover__title', className),
+  ref: ref,
+  ...props
+}));
+StyledTitle.displayName = 'Popover.Title';
+const Title = exports.Title = StyledTitle;
+const StyledDescription = /*#__PURE__*/React.forwardRef(({
+  className,
+  ...props
+}, ref) => /*#__PURE__*/(0, _jsxRuntime.jsx)(H.Description, {
+  className: (0, _cx.cx)('tale-popover__description', className),
+  ref: ref,
+  ...props
+}));
+StyledDescription.displayName = 'Popover.Description';
+const Description = exports.Description = StyledDescription;
+const StyledClose = /*#__PURE__*/React.forwardRef(({
+  className,
+  ...props
+}, ref) => /*#__PURE__*/(0, _jsxRuntime.jsx)(H.Close, {
+  className: (0, _cx.cx)('tale-popover__close', className),
+  ref: ref,
+  ...props
+}));
+StyledClose.displayName = 'Popover.Close';
+const Close = exports.Close = StyledClose;

package/popover/index.d.ts

@@ -1,4 +1,4 @@
-export * as Popover from "./index.parts.js";
+export * as Popover from "./Popover.styled.js";
 export type * from "./root/PopoverRoot.js";
 export type * from "./trigger/PopoverTrigger.js";
 export type * from "./portal/PopoverPortal.js";

package/popover/index.js

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