@entropix/react 0.3.0 → 1.0.1

package/dist/chunk-YJG5KX6O.cjs

@@ -0,0 +1,81 @@
+'use strict';
+
+var chunk5DKE5YQD_cjs = require('./chunk-5DKE5YQD.cjs');
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+var Stack = react.forwardRef(function Stack2({ gap, align, fullWidth, as: Component = "div", className, children, ...rest }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Component,
+    {
+      ref,
+      className: chunk5DKE5YQD_cjs.cn(
+        "entropix-stack",
+        gap && `entropix-stack--gap-${gap}`,
+        align && `entropix-stack--align-${align}`,
+        fullWidth && "entropix-stack--full-width",
+        className
+      ),
+      ...rest,
+      children
+    }
+  );
+});
+var Inline = react.forwardRef(function Inline2({ gap, align, justify, wrap, as: Component = "div", className, children, ...rest }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Component,
+    {
+      ref,
+      className: chunk5DKE5YQD_cjs.cn(
+        "entropix-inline",
+        gap && `entropix-inline--gap-${gap}`,
+        align && `entropix-inline--align-${align}`,
+        justify && `entropix-inline--justify-${justify}`,
+        wrap && "entropix-inline--wrap",
+        className
+      ),
+      ...rest,
+      children
+    }
+  );
+});
+var Container = react.forwardRef(function Container2({ maxWidth = "lg", center, as: Component = "div", className, children, ...rest }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Component,
+    {
+      ref,
+      className: chunk5DKE5YQD_cjs.cn(
+        "entropix-container",
+        `entropix-container--${maxWidth}`,
+        center && "entropix-container--center",
+        className
+      ),
+      ...rest,
+      children
+    }
+  );
+});
+var Divider = react.forwardRef(function Divider2({ orientation = "horizontal", spacing, className, ...rest }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "hr",
+    {
+      ref,
+      role: orientation === "vertical" ? "separator" : void 0,
+      "aria-orientation": orientation === "vertical" ? "vertical" : void 0,
+      className: chunk5DKE5YQD_cjs.cn(
+        "entropix-divider",
+        orientation === "vertical" && "entropix-divider--vertical",
+        spacing && `entropix-divider--spacing-${spacing}`,
+        className
+      ),
+      ...rest
+    }
+  );
+});
+
+exports.Container = Container;
+exports.Divider = Divider;
+exports.Inline = Inline;
+exports.Stack = Stack;
+//# sourceMappingURL=chunk-YJG5KX6O.cjs.map
+//# sourceMappingURL=chunk-YJG5KX6O.cjs.map

package/dist/chunk-ZG4PZBSL.cjs

@@ -0,0 +1,113 @@
+'use strict';
+
+var chunkLJK6KK2H_cjs = require('./chunk-LJK6KK2H.cjs');
+var chunk5DKE5YQD_cjs = require('./chunk-5DKE5YQD.cjs');
+var react = require('react');
+var core = require('@entropix/core');
+var jsxRuntime = require('react/jsx-runtime');
+
+var Textarea = react.forwardRef(
+  function Textarea2({
+    value,
+    defaultValue,
+    onChange,
+    disabled,
+    readOnly,
+    required,
+    invalid,
+    label,
+    helperText,
+    errorMessage,
+    variant = "default",
+    size = "md",
+    rows,
+    resize = "vertical",
+    className,
+    placeholder,
+    name,
+    style,
+    ...rest
+  }, ref) {
+    const isInvalid = invalid || !!errorMessage;
+    const {
+      value: inputValue,
+      isDisabled,
+      isReadOnly,
+      isRequired,
+      getInputProps,
+      getLabelProps,
+      getHelperTextProps,
+      getErrorMessageProps
+    } = core.useInput({
+      value,
+      defaultValue,
+      onChange,
+      disabled,
+      readOnly,
+      required,
+      invalid: isInvalid,
+      placeholder,
+      name
+    });
+    const propGetterReturn = getInputProps();
+    const ariaProps = chunkLJK6KK2H_cjs.mapAccessibilityToAria(propGetterReturn.accessibility);
+    const labelProps = getLabelProps();
+    const helperProps = getHelperTextProps();
+    const errorProps = getErrorMessageProps();
+    const handleChange = react.useCallback(
+      (event) => {
+        onChange?.(event.target.value);
+      },
+      [onChange]
+    );
+    const dataState = isInvalid ? "invalid" : isDisabled ? "disabled" : void 0;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: chunk5DKE5YQD_cjs.cn("entropix-input-wrapper", className),
+        "data-state": dataState,
+        "data-variant": variant,
+        "data-size": size,
+        children: [
+          label && /* @__PURE__ */ jsxRuntime.jsxs(
+            "label",
+            {
+              className: "entropix-input-label",
+              id: labelProps.id,
+              htmlFor: labelProps.htmlFor,
+              children: [
+                label,
+                isRequired && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "entropix-input-required", children: "*" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "textarea",
+            {
+              ref,
+              className: "entropix-textarea",
+              ...ariaProps,
+              ...rest,
+              name,
+              placeholder,
+              value: inputValue,
+              onChange: handleChange,
+              disabled: isDisabled || void 0,
+              readOnly: isReadOnly || void 0,
+              rows,
+              style: { ...style, resize },
+              "data-state": dataState,
+              "data-variant": variant,
+              "data-size": size
+            }
+          ),
+          isInvalid && errorMessage ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "entropix-input-error", ...errorProps, children: errorMessage }) : helperText ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "entropix-input-helper", ...helperProps, children: helperText }) : null
+        ]
+      }
+    );
+  }
+);
+
+exports.Textarea = Textarea;
+//# sourceMappingURL=chunk-ZG4PZBSL.cjs.map
+//# sourceMappingURL=chunk-ZG4PZBSL.cjs.map

package/dist/dialog.cjs

@@ -0,0 +1,39 @@
+'use strict';
+
+var chunkS6DVQAH4_cjs = require('./chunk-S6DVQAH4.cjs');
+require('./chunk-LDOP6DVX.cjs');
+require('./chunk-LJK6KK2H.cjs');
+require('./chunk-5DKE5YQD.cjs');
+
+
+
+Object.defineProperty(exports, "Dialog", {
+  enumerable: true,
+  get: function () { return chunkS6DVQAH4_cjs.Dialog; }
+});
+Object.defineProperty(exports, "DialogClose", {
+  enumerable: true,
+  get: function () { return chunkS6DVQAH4_cjs.DialogClose; }
+});
+Object.defineProperty(exports, "DialogContent", {
+  enumerable: true,
+  get: function () { return chunkS6DVQAH4_cjs.DialogContent; }
+});
+Object.defineProperty(exports, "DialogDescription", {
+  enumerable: true,
+  get: function () { return chunkS6DVQAH4_cjs.DialogDescription; }
+});
+Object.defineProperty(exports, "DialogOverlay", {
+  enumerable: true,
+  get: function () { return chunkS6DVQAH4_cjs.DialogOverlay; }
+});
+Object.defineProperty(exports, "DialogTitle", {
+  enumerable: true,
+  get: function () { return chunkS6DVQAH4_cjs.DialogTitle; }
+});
+Object.defineProperty(exports, "DialogTrigger", {
+  enumerable: true,
+  get: function () { return chunkS6DVQAH4_cjs.DialogTrigger; }
+});
+//# sourceMappingURL=dialog.cjs.map
+//# sourceMappingURL=dialog.cjs.map

package/dist/dialog.css

@@ -0,0 +1,89 @@
+/* src/styles/dialog.css */
+.entropix-dialog-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 50;
+}
+.entropix-dialog-content {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background: var(--entropix-color-bg-primary);
+  border-radius: var(--entropix-radius-lg);
+  box-shadow: var(--entropix-shadow-xl);
+  padding: var(--entropix-spacing-6);
+  z-index: 51;
+  max-width: 480px;
+  width: 90vw;
+  max-height: 85vh;
+  overflow-y: auto;
+}
+.entropix-dialog-content:focus {
+  outline: none;
+}
+.entropix-dialog-title {
+  margin: 0;
+  margin-bottom: var(--entropix-spacing-2);
+  font-family: var(--entropix-text-heading-md-font-family);
+  font-size: var(--entropix-text-heading-md-font-size);
+  font-weight: var(--entropix-text-heading-md-font-weight);
+  line-height: var(--entropix-text-heading-md-line-height);
+  color: var(--entropix-color-text-primary);
+}
+.entropix-dialog-description {
+  margin: 0;
+  margin-bottom: var(--entropix-spacing-4);
+  font-family: var(--entropix-text-body-md-font-family);
+  font-size: var(--entropix-text-body-md-font-size);
+  font-weight: var(--entropix-text-body-md-font-weight);
+  line-height: var(--entropix-text-body-md-line-height);
+  color: var(--entropix-color-text-secondary);
+}
+.entropix-dialog-close {
+  position: absolute;
+  top: var(--entropix-spacing-3);
+  right: var(--entropix-spacing-3);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border: none;
+  border-radius: var(--entropix-radius-sm);
+  background: transparent;
+  color: var(--entropix-color-text-secondary);
+  cursor: pointer;
+  transition: background var(--entropix-duration-fast) var(--entropix-easing-default);
+}
+.entropix-dialog-close:hover {
+  background: var(--entropix-color-action-secondary-default);
+}
+.entropix-dialog-close:focus-visible {
+  outline: 2px solid var(--entropix-color-border-focus);
+  outline-offset: 2px;
+}
+.entropix-dialog-trigger {
+}
+@media (max-width: 767px) {
+  .entropix-dialog-content {
+    top: auto;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    transform: none;
+    width: 100%;
+    max-width: 100%;
+    border-radius: var(--entropix-radius-lg) var(--entropix-radius-lg) 0 0;
+    max-height: 90vh;
+    padding: var(--entropix-spacing-5);
+  }
+}
+@media (min-width: 768px) {
+  .entropix-dialog-content {
+    max-width: 560px;
+  }
+}
+/*# sourceMappingURL=dialog.css.map */

package/dist/dialog.d.cts

@@ -0,0 +1,62 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { UseDialogOptions } from '@entropix/core';
+import * as react from 'react';
+
+interface DialogProps extends UseDialogOptions {
+    children: React.ReactNode;
+}
+/**
+ * Dialog root — provides dialog state to compound sub-components.
+ * Renders no DOM of its own.
+ */
+declare function Dialog({ children, isOpen, defaultOpen, onOpenChange, closeOnOverlayPress, closeOnEscape, modal, role, }: DialogProps): react_jsx_runtime.JSX.Element;
+
+interface DialogTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+}
+/**
+ * DialogTrigger — button that opens/closes the dialog.
+ * Maps core's getTriggerProps() to DOM attributes.
+ */
+declare const DialogTrigger: react.ForwardRefExoticComponent<DialogTriggerProps & react.RefAttributes<HTMLButtonElement>>;
+
+interface DialogContentProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+/**
+ * DialogContent — the dialog panel rendered in a portal.
+ *
+ * Implements focus trap, focus restore, Escape-to-close keyboard handling,
+ * and portal rendering. SSR-safe via useEffect mount gating.
+ */
+declare const DialogContent: react.ForwardRefExoticComponent<DialogContentProps & react.RefAttributes<HTMLDivElement>>;
+
+interface DialogTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {
+}
+/**
+ * DialogTitle — heading element with auto-linked ID for aria-labelledby.
+ */
+declare const DialogTitle: react.ForwardRefExoticComponent<DialogTitleProps & react.RefAttributes<HTMLHeadingElement>>;
+
+interface DialogDescriptionProps extends React.HTMLAttributes<HTMLParagraphElement> {
+}
+/**
+ * DialogDescription — paragraph element with auto-linked ID for aria-describedby.
+ */
+declare const DialogDescription: react.ForwardRefExoticComponent<DialogDescriptionProps & react.RefAttributes<HTMLParagraphElement>>;
+
+interface DialogCloseProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+}
+/**
+ * DialogClose — button that closes the dialog.
+ * Maps core's getCloseProps() to DOM attributes.
+ */
+declare const DialogClose: react.ForwardRefExoticComponent<DialogCloseProps & react.RefAttributes<HTMLButtonElement>>;
+
+interface DialogOverlayProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+/**
+ * DialogOverlay — backdrop element behind the dialog.
+ * Hidden from the accessibility tree. Optionally closes the dialog on click.
+ */
+declare const DialogOverlay: react.ForwardRefExoticComponent<DialogOverlayProps & react.RefAttributes<HTMLDivElement>>;
+
+export { Dialog, DialogClose, type DialogCloseProps, DialogContent, type DialogContentProps, DialogDescription, type DialogDescriptionProps, DialogOverlay, type DialogOverlayProps, type DialogProps, DialogTitle, type DialogTitleProps, DialogTrigger, type DialogTriggerProps };

package/dist/dialog.d.ts

@@ -0,0 +1,62 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { UseDialogOptions } from '@entropix/core';
+import * as react from 'react';
+
+interface DialogProps extends UseDialogOptions {
+    children: React.ReactNode;
+}
+/**
+ * Dialog root — provides dialog state to compound sub-components.
+ * Renders no DOM of its own.
+ */
+declare function Dialog({ children, isOpen, defaultOpen, onOpenChange, closeOnOverlayPress, closeOnEscape, modal, role, }: DialogProps): react_jsx_runtime.JSX.Element;
+
+interface DialogTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+}
+/**
+ * DialogTrigger — button that opens/closes the dialog.
+ * Maps core's getTriggerProps() to DOM attributes.
+ */
+declare const DialogTrigger: react.ForwardRefExoticComponent<DialogTriggerProps & react.RefAttributes<HTMLButtonElement>>;
+
+interface DialogContentProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+/**
+ * DialogContent — the dialog panel rendered in a portal.
+ *
+ * Implements focus trap, focus restore, Escape-to-close keyboard handling,
+ * and portal rendering. SSR-safe via useEffect mount gating.
+ */
+declare const DialogContent: react.ForwardRefExoticComponent<DialogContentProps & react.RefAttributes<HTMLDivElement>>;
+
+interface DialogTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {
+}
+/**
+ * DialogTitle — heading element with auto-linked ID for aria-labelledby.
+ */
+declare const DialogTitle: react.ForwardRefExoticComponent<DialogTitleProps & react.RefAttributes<HTMLHeadingElement>>;
+
+interface DialogDescriptionProps extends React.HTMLAttributes<HTMLParagraphElement> {
+}
+/**
+ * DialogDescription — paragraph element with auto-linked ID for aria-describedby.
+ */
+declare const DialogDescription: react.ForwardRefExoticComponent<DialogDescriptionProps & react.RefAttributes<HTMLParagraphElement>>;
+
+interface DialogCloseProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+}
+/**
+ * DialogClose — button that closes the dialog.
+ * Maps core's getCloseProps() to DOM attributes.
+ */
+declare const DialogClose: react.ForwardRefExoticComponent<DialogCloseProps & react.RefAttributes<HTMLButtonElement>>;
+
+interface DialogOverlayProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+/**
+ * DialogOverlay — backdrop element behind the dialog.
+ * Hidden from the accessibility tree. Optionally closes the dialog on click.
+ */
+declare const DialogOverlay: react.ForwardRefExoticComponent<DialogOverlayProps & react.RefAttributes<HTMLDivElement>>;
+
+export { Dialog, DialogClose, type DialogCloseProps, DialogContent, type DialogContentProps, DialogDescription, type DialogDescriptionProps, DialogOverlay, type DialogOverlayProps, type DialogProps, DialogTitle, type DialogTitleProps, DialogTrigger, type DialogTriggerProps };

package/dist/dialog.js

@@ -0,0 +1,6 @@
+export { Dialog, DialogClose, DialogContent, DialogDescription, DialogOverlay, DialogTitle, DialogTrigger } from './chunk-W6N4D4N4.js';
+import './chunk-BN57JPKV.js';
+import './chunk-Y2M2LJGJ.js';
+import './chunk-6UAQCHIW.js';
+//# sourceMappingURL=dialog.js.map
+//# sourceMappingURL=dialog.js.map