@tale-ui/react 0.0.3 → 0.1.1

package/README.md

@@ -1,47 +1,78 @@
-<!-- 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.
+A library of headless, accessible React components. You gain complete control over your app's CSS and accessibility features.
 
 ## 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 default look 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 className="tale-button tale-button--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 are **headless** — they render accessible HTML with state exposed via data attributes (`data-disabled`, `data-open`, `data-checked`, etc.) but include no styles of their own.
+
+Default styles 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/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/container/Container.js

@@ -0,0 +1,40 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CONTAINER_COLORS = void 0;
+exports.Container = Container;
+var React = _interopRequireWildcard(require("react"));
+var _color = require("@tale-ui/utils/color");
+var _jsxRuntime = require("react/jsx-runtime");
+const CONTAINER_COLORS = exports.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 = (0, _color.randomBaseColor)('named');
+const randomPalette = (0, _color.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(_color.NAMED_SHADES.map(shade => [`--color-${shade}`, `var(--${color}-${shade})`]));
+}
+function Container({
+  color = 'brand',
+  children,
+  style,
+  ...props
+}) {
+  const colorVars = getColorVars(color);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    style: {
+      ...colorVars,
+      ...style
+    },
+    ...props,
+    children: children
+  });
+}

package/container/index.d.ts

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

package/container/index.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "CONTAINER_COLORS", {
+  enumerable: true,
+  get: function () {
+    return _Container.CONTAINER_COLORS;
+  }
+});
+Object.defineProperty(exports, "Container", {
+  enumerable: true,
+  get: function () {
+    return _Container.Container;
+  }
+});
+var _Container = require("./Container");

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/index.d.ts

@@ -7,6 +7,7 @@ export * from "./checkbox/index.js";
 export * from "./checkbox-group/index.js";
 export * from "./collapsible/index.js";
 export * from "./combobox/index.js";
+export * from "./container/index.js";
 export * from "./context-menu/index.js";
 export * from "./csp-provider/index.js";
 export * from "./dialog/index.js";

package/esm/index.js

@@ -1,5 +1,5 @@
 /**
- * @tale-ui/react v0.0.3
+ * @tale-ui/react v0.1.1
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -14,6 +14,7 @@ export * from "./checkbox/index.js";
 export * from "./checkbox-group/index.js";
 export * from "./collapsible/index.js";
 export * from "./combobox/index.js";
+export * from "./container/index.js";
 export * from "./context-menu/index.js";
 export * from "./csp-provider/index.js";
 export * from "./dialog/index.js";

package/index.d.ts

@@ -7,6 +7,7 @@ export * from "./checkbox/index.js";
 export * from "./checkbox-group/index.js";
 export * from "./collapsible/index.js";
 export * from "./combobox/index.js";
+export * from "./container/index.js";
 export * from "./context-menu/index.js";
 export * from "./csp-provider/index.js";
 export * from "./dialog/index.js";

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @tale-ui/react v0.0.3
+ * @tale-ui/react v0.1.1
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -109,6 +109,17 @@ Object.keys(_combobox).forEach(function (key) {
     }
   });
 });
+var _container = require("./container");
+Object.keys(_container).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _container[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _container[key];
+    }
+  });
+});
 var _contextMenu = require("./context-menu");
 Object.keys(_contextMenu).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;