@entropix/react 1.0.0 → 1.0.1

package/dist/input.cjs

@@ -0,0 +1,15 @@
+'use strict';
+
+var chunkEASSPJBG_cjs = require('./chunk-EASSPJBG.cjs');
+require('./chunk-2MKJZEUK.cjs');
+require('./chunk-LJK6KK2H.cjs');
+require('./chunk-5DKE5YQD.cjs');
+
+
+
+Object.defineProperty(exports, "Input", {
+  enumerable: true,
+  get: function () { return chunkEASSPJBG_cjs.Input; }
+});
+//# sourceMappingURL=input.cjs.map
+//# sourceMappingURL=input.cjs.map

package/dist/input.css

@@ -0,0 +1,135 @@
+/* src/styles/input.css */
+.entropix-input-wrapper {
+  --input-border-color: var(--entropix-color-border-default);
+  --input-border-radius: var(--entropix-radius-md);
+  --input-bg: var(--entropix-color-bg-primary);
+  --input-font-size: var(--entropix-font-size-sm);
+  --input-padding-y: var(--entropix-spacing-2);
+  --input-padding-x: var(--entropix-spacing-3);
+  --input-focus-color: var(--entropix-color-border-focus);
+  --input-error-color: var(--entropix-color-border-danger);
+  display: flex;
+  flex-direction: column;
+  gap: var(--entropix-spacing-1);
+  width: 100%;
+}
+.entropix-input-label {
+  display: block;
+  font-family: var(--entropix-font-family-sans);
+  font-size: var(--entropix-font-size-sm);
+  font-weight: var(--entropix-font-weight-medium);
+  color: var(--entropix-color-text-primary);
+  line-height: var(--entropix-line-height-normal);
+}
+.entropix-input-required {
+  color: var(--entropix-color-text-danger);
+  margin-left: var(--entropix-spacing-1);
+}
+.entropix-input,
+.entropix-textarea {
+  display: block;
+  width: 100%;
+  border: 1px solid var(--input-border-color);
+  border-radius: var(--input-border-radius);
+  background: var(--input-bg);
+  color: var(--entropix-color-text-primary);
+  font-family: var(--entropix-font-family-sans);
+  font-size: var(--input-font-size);
+  line-height: var(--entropix-line-height-normal);
+  padding: var(--input-padding-y) var(--input-padding-x);
+  transition:
+    border-color var(--entropix-duration-fast) var(--entropix-easing-default),
+    box-shadow var(--entropix-duration-fast) var(--entropix-easing-default),
+    background var(--entropix-duration-fast) var(--entropix-easing-default);
+}
+.entropix-input::placeholder,
+.entropix-textarea::placeholder {
+  color: var(--entropix-color-text-tertiary);
+}
+.entropix-input:focus,
+.entropix-textarea:focus {
+  outline: none;
+  border-color: var(--input-focus-color);
+  box-shadow: 0 0 0 1px var(--input-focus-color);
+}
+.entropix-input:focus-visible,
+.entropix-textarea:focus-visible {
+  outline: 2px solid var(--input-focus-color);
+  outline-offset: 2px;
+}
+.entropix-input:hover:not(:disabled):not(:focus),
+.entropix-textarea:hover:not(:disabled):not(:focus) {
+  border-color: var(--entropix-color-border-hover);
+}
+.entropix-input[data-variant=filled],
+.entropix-textarea[data-variant=filled] {
+  background: var(--entropix-color-bg-secondary);
+  border-color: transparent;
+}
+.entropix-input[data-variant=filled]:focus,
+.entropix-textarea[data-variant=filled]:focus {
+  background: var(--input-bg);
+  border-color: var(--input-focus-color);
+}
+.entropix-input[data-size=sm],
+.entropix-textarea[data-size=sm] {
+  padding: var(--entropix-spacing-1) var(--entropix-spacing-2);
+  font-size: var(--entropix-font-size-xs);
+  border-radius: var(--entropix-radius-sm);
+}
+.entropix-input[data-size=md],
+.entropix-textarea[data-size=md] {
+  padding: var(--input-padding-y) var(--input-padding-x);
+  font-size: var(--input-font-size);
+}
+.entropix-input[data-size=lg],
+.entropix-textarea[data-size=lg] {
+  padding: var(--entropix-spacing-3) var(--entropix-spacing-4);
+  font-size: var(--entropix-font-size-base);
+  border-radius: var(--entropix-radius-lg);
+}
+.entropix-input[data-state=invalid],
+.entropix-textarea[data-state=invalid] {
+  border-color: var(--input-error-color);
+}
+.entropix-input[data-state=invalid]:focus,
+.entropix-textarea[data-state=invalid]:focus {
+  border-color: var(--input-error-color);
+  box-shadow: 0 0 0 1px var(--input-error-color);
+}
+.entropix-input:disabled,
+.entropix-textarea:disabled,
+.entropix-input[data-state=disabled],
+.entropix-textarea[data-state=disabled] {
+  opacity: 0.5;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+.entropix-input-helper {
+  font-family: var(--entropix-font-family-sans);
+  font-size: var(--entropix-font-size-xs);
+  color: var(--entropix-color-text-secondary);
+  line-height: var(--entropix-line-height-normal);
+}
+.entropix-input-error {
+  font-family: var(--entropix-font-family-sans);
+  font-size: var(--entropix-font-size-xs);
+  color: var(--entropix-color-text-danger);
+  line-height: var(--entropix-line-height-normal);
+}
+.entropix-textarea {
+  min-height: 80px;
+}
+@media (max-width: 767px) {
+  .entropix-input,
+  .entropix-textarea {
+    min-height: 44px;
+    font-size: var(--entropix-font-size-base);
+  }
+  .entropix-input[data-size=sm],
+  .entropix-textarea[data-size=sm] {
+    min-height: 36px;
+    font-size: var(--entropix-font-size-sm);
+  }
+}
+/*# sourceMappingURL=input.css.map */

package/dist/input.d.cts

@@ -0,0 +1,37 @@
+import * as react from 'react';
+
+interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange" | "disabled" | "value" | "size"> {
+    /** Controlled value */
+    value?: string;
+    /** Default value for uncontrolled mode */
+    defaultValue?: string;
+    /** Called when the value changes */
+    onChange?: (value: string) => void;
+    /** Whether the input is disabled */
+    disabled?: boolean;
+    /** Whether the input is read-only */
+    readOnly?: boolean;
+    /** Whether the input is required */
+    required?: boolean;
+    /** Whether the input is in an invalid state */
+    invalid?: boolean;
+    /** Label text */
+    label?: string;
+    /** Helper text displayed below the input */
+    helperText?: string;
+    /** Error message displayed below the input (sets invalid=true when present) */
+    errorMessage?: string;
+    /** Visual variant */
+    variant?: "default" | "filled";
+    /** Size */
+    size?: "sm" | "md" | "lg";
+}
+/**
+ * Input component — web adapter for @entropix/core's useInput.
+ *
+ * Renders a wrapper div with label, input, helper text, and error message.
+ * Sets data-state, data-variant, and data-size attributes for CSS targeting.
+ */
+declare const Input: react.ForwardRefExoticComponent<InputProps & react.RefAttributes<HTMLInputElement>>;
+
+export { Input, type InputProps };

package/dist/input.d.ts

@@ -0,0 +1,37 @@
+import * as react from 'react';
+
+interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange" | "disabled" | "value" | "size"> {
+    /** Controlled value */
+    value?: string;
+    /** Default value for uncontrolled mode */
+    defaultValue?: string;
+    /** Called when the value changes */
+    onChange?: (value: string) => void;
+    /** Whether the input is disabled */
+    disabled?: boolean;
+    /** Whether the input is read-only */
+    readOnly?: boolean;
+    /** Whether the input is required */
+    required?: boolean;
+    /** Whether the input is in an invalid state */
+    invalid?: boolean;
+    /** Label text */
+    label?: string;
+    /** Helper text displayed below the input */
+    helperText?: string;
+    /** Error message displayed below the input (sets invalid=true when present) */
+    errorMessage?: string;
+    /** Visual variant */
+    variant?: "default" | "filled";
+    /** Size */
+    size?: "sm" | "md" | "lg";
+}
+/**
+ * Input component — web adapter for @entropix/core's useInput.
+ *
+ * Renders a wrapper div with label, input, helper text, and error message.
+ * Sets data-state, data-variant, and data-size attributes for CSS targeting.
+ */
+declare const Input: react.ForwardRefExoticComponent<InputProps & react.RefAttributes<HTMLInputElement>>;
+
+export { Input, type InputProps };

package/dist/input.js

@@ -0,0 +1,6 @@
+export { Input } from './chunk-664P2RGR.js';
+import './chunk-AVCBDUKH.js';
+import './chunk-Y2M2LJGJ.js';
+import './chunk-6UAQCHIW.js';
+//# sourceMappingURL=input.js.map
+//# sourceMappingURL=input.js.map

package/dist/layout.cjs

@@ -0,0 +1,25 @@
+'use strict';
+
+var chunkYJG5KX6O_cjs = require('./chunk-YJG5KX6O.cjs');
+require('./chunk-5DKE5YQD.cjs');
+
+
+
+Object.defineProperty(exports, "Container", {
+  enumerable: true,
+  get: function () { return chunkYJG5KX6O_cjs.Container; }
+});
+Object.defineProperty(exports, "Divider", {
+  enumerable: true,
+  get: function () { return chunkYJG5KX6O_cjs.Divider; }
+});
+Object.defineProperty(exports, "Inline", {
+  enumerable: true,
+  get: function () { return chunkYJG5KX6O_cjs.Inline; }
+});
+Object.defineProperty(exports, "Stack", {
+  enumerable: true,
+  get: function () { return chunkYJG5KX6O_cjs.Stack; }
+});
+//# sourceMappingURL=layout.cjs.map
+//# sourceMappingURL=layout.cjs.map

package/dist/layout.css

@@ -0,0 +1,176 @@
+/* src/styles/layout.css */
+.entropix-stack {
+  display: flex;
+  flex-direction: column;
+  gap: var(--entropix-space-layout-stack);
+}
+.entropix-stack--gap-none {
+  gap: 0;
+}
+.entropix-stack--gap-xs {
+  gap: var(--entropix-spacing-1);
+}
+.entropix-stack--gap-sm {
+  gap: var(--entropix-spacing-2);
+}
+.entropix-stack--gap-md {
+  gap: var(--entropix-spacing-4);
+}
+.entropix-stack--gap-lg {
+  gap: var(--entropix-spacing-6);
+}
+.entropix-stack--gap-xl {
+  gap: var(--entropix-spacing-8);
+}
+.entropix-stack--gap-2xl {
+  gap: var(--entropix-spacing-12);
+}
+.entropix-stack--align-start {
+  align-items: flex-start;
+}
+.entropix-stack--align-center {
+  align-items: center;
+}
+.entropix-stack--align-end {
+  align-items: flex-end;
+}
+.entropix-stack--align-stretch {
+  align-items: stretch;
+}
+.entropix-stack--full-width {
+  width: 100%;
+}
+.entropix-inline {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--entropix-space-layout-inline);
+}
+.entropix-inline--gap-none {
+  gap: 0;
+}
+.entropix-inline--gap-xs {
+  gap: var(--entropix-spacing-1);
+}
+.entropix-inline--gap-sm {
+  gap: var(--entropix-spacing-2);
+}
+.entropix-inline--gap-md {
+  gap: var(--entropix-spacing-4);
+}
+.entropix-inline--gap-lg {
+  gap: var(--entropix-spacing-6);
+}
+.entropix-inline--gap-xl {
+  gap: var(--entropix-spacing-8);
+}
+.entropix-inline--gap-2xl {
+  gap: var(--entropix-spacing-12);
+}
+.entropix-inline--align-start {
+  align-items: flex-start;
+}
+.entropix-inline--align-center {
+  align-items: center;
+}
+.entropix-inline--align-end {
+  align-items: flex-end;
+}
+.entropix-inline--align-stretch {
+  align-items: stretch;
+}
+.entropix-inline--align-baseline {
+  align-items: baseline;
+}
+.entropix-inline--justify-start {
+  justify-content: flex-start;
+}
+.entropix-inline--justify-center {
+  justify-content: center;
+}
+.entropix-inline--justify-end {
+  justify-content: flex-end;
+}
+.entropix-inline--justify-between {
+  justify-content: space-between;
+}
+.entropix-inline--justify-around {
+  justify-content: space-around;
+}
+.entropix-inline--wrap {
+  flex-wrap: wrap;
+}
+.entropix-container {
+  width: 100%;
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: var(--entropix-space-layout-page-margin);
+  padding-right: var(--entropix-space-layout-page-margin);
+}
+.entropix-container--xs {
+  max-width: 480px;
+}
+.entropix-container--sm {
+  max-width: 640px;
+}
+.entropix-container--md {
+  max-width: 768px;
+}
+.entropix-container--lg {
+  max-width: 1024px;
+}
+.entropix-container--xl {
+  max-width: 1280px;
+}
+.entropix-container--full {
+  max-width: 100%;
+}
+.entropix-container--center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.entropix-divider {
+  border: 0;
+  border-top: 1px solid var(--entropix-color-border-default);
+  margin: 0;
+  width: 100%;
+}
+.entropix-divider--vertical {
+  border-top: 0;
+  border-left: 1px solid var(--entropix-color-border-default);
+  width: auto;
+  height: auto;
+  align-self: stretch;
+}
+.entropix-divider--spacing-sm {
+  margin: var(--entropix-spacing-2) 0;
+}
+.entropix-divider--spacing-md {
+  margin: var(--entropix-spacing-4) 0;
+}
+.entropix-divider--spacing-lg {
+  margin: var(--entropix-spacing-6) 0;
+}
+.entropix-divider--vertical.entropix-divider--spacing-sm {
+  margin: 0 var(--entropix-spacing-2);
+}
+.entropix-divider--vertical.entropix-divider--spacing-md {
+  margin: 0 var(--entropix-spacing-4);
+}
+.entropix-divider--vertical.entropix-divider--spacing-lg {
+  margin: 0 var(--entropix-spacing-6);
+}
+@media (min-width: 768px) {
+  .entropix-container {
+    padding-left: var(--entropix-space-layout-page-margin-md);
+    padding-right: var(--entropix-space-layout-page-margin-md);
+  }
+}
+@media (min-width: 1024px) {
+  .entropix-container {
+    padding-left: var(--entropix-space-layout-page-margin-lg);
+    padding-right: var(--entropix-space-layout-page-margin-lg);
+  }
+}
+/*# sourceMappingURL=layout.css.map */

package/dist/layout.d.cts

@@ -0,0 +1,108 @@
+import * as react from 'react';
+
+type SpacingSize$1 = "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
+interface StackProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Gap between children. Default uses --entropix-space-layout-stack token */
+    gap?: SpacingSize$1;
+    /** Cross-axis alignment */
+    align?: "start" | "center" | "end" | "stretch";
+    /** Whether to take full width */
+    fullWidth?: boolean;
+    /** Render as a different element */
+    as?: React.ElementType;
+}
+/**
+ * Stack — vertical flex layout primitive.
+ *
+ * Uses the `space.layout.stack` token (16px) as default gap.
+ *
+ * ```tsx
+ * <Stack gap="lg" align="center">
+ *   <Button>First</Button>
+ *   <Button>Second</Button>
+ * </Stack>
+ * ```
+ */
+declare const Stack: react.ForwardRefExoticComponent<StackProps & react.RefAttributes<HTMLDivElement>>;
+
+type SpacingSize = "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
+interface InlineProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Gap between children. Default uses --entropix-space-layout-inline token */
+    gap?: SpacingSize;
+    /** Cross-axis alignment */
+    align?: "start" | "center" | "end" | "stretch" | "baseline";
+    /** Main-axis justification */
+    justify?: "start" | "center" | "end" | "between" | "around";
+    /** Whether to wrap children */
+    wrap?: boolean;
+    /** Render as a different element */
+    as?: React.ElementType;
+}
+/**
+ * Inline — horizontal flex layout primitive.
+ *
+ * Uses the `space.layout.inline` token (12px) as default gap.
+ *
+ * ```tsx
+ * <Inline gap="sm" justify="between" wrap>
+ *   <Button variant="primary">Save</Button>
+ *   <Button variant="ghost">Cancel</Button>
+ * </Inline>
+ * ```
+ */
+declare const Inline: react.ForwardRefExoticComponent<InlineProps & react.RefAttributes<HTMLDivElement>>;
+
+type ContainerSize = "xs" | "sm" | "md" | "lg" | "xl" | "full";
+interface ContainerProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Maximum width constraint. Default: "lg" (1024px) */
+    maxWidth?: ContainerSize;
+    /** Whether to center children vertically */
+    center?: boolean;
+    /** Render as a different element */
+    as?: React.ElementType;
+}
+/**
+ * Container — page-level width constraint with horizontal margins.
+ *
+ * Uses the `space.layout.page-margin` token (24px) for horizontal padding.
+ * Centers itself horizontally via auto margins.
+ *
+ * ```tsx
+ * <Container maxWidth="lg">
+ *   <Stack gap="xl">
+ *     <h1>Page Title</h1>
+ *     <p>Content</p>
+ *   </Stack>
+ * </Container>
+ * ```
+ */
+declare const Container: react.ForwardRefExoticComponent<ContainerProps & react.RefAttributes<HTMLDivElement>>;
+
+interface DividerProps extends React.HTMLAttributes<HTMLHRElement> {
+    /** Orientation of the divider */
+    orientation?: "horizontal" | "vertical";
+    /** Spacing above and below (or left and right for vertical) */
+    spacing?: "sm" | "md" | "lg";
+}
+/**
+ * Divider — visual separator line.
+ *
+ * Uses the `color.border.default` token for line color.
+ *
+ * ```tsx
+ * <Stack>
+ *   <p>Section A</p>
+ *   <Divider spacing="md" />
+ *   <p>Section B</p>
+ * </Stack>
+ *
+ * <Inline>
+ *   <span>Left</span>
+ *   <Divider orientation="vertical" spacing="sm" />
+ *   <span>Right</span>
+ * </Inline>
+ * ```
+ */
+declare const Divider: react.ForwardRefExoticComponent<DividerProps & react.RefAttributes<HTMLHRElement>>;
+
+export { Container, type ContainerProps, type ContainerSize, Divider, type DividerProps, Inline, type InlineProps, type SpacingSize$1 as SpacingSize, Stack, type StackProps };

package/dist/layout.d.ts

@@ -0,0 +1,108 @@
+import * as react from 'react';
+
+type SpacingSize$1 = "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
+interface StackProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Gap between children. Default uses --entropix-space-layout-stack token */
+    gap?: SpacingSize$1;
+    /** Cross-axis alignment */
+    align?: "start" | "center" | "end" | "stretch";
+    /** Whether to take full width */
+    fullWidth?: boolean;
+    /** Render as a different element */
+    as?: React.ElementType;
+}
+/**
+ * Stack — vertical flex layout primitive.
+ *
+ * Uses the `space.layout.stack` token (16px) as default gap.
+ *
+ * ```tsx
+ * <Stack gap="lg" align="center">
+ *   <Button>First</Button>
+ *   <Button>Second</Button>
+ * </Stack>
+ * ```
+ */
+declare const Stack: react.ForwardRefExoticComponent<StackProps & react.RefAttributes<HTMLDivElement>>;
+
+type SpacingSize = "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
+interface InlineProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Gap between children. Default uses --entropix-space-layout-inline token */
+    gap?: SpacingSize;
+    /** Cross-axis alignment */
+    align?: "start" | "center" | "end" | "stretch" | "baseline";
+    /** Main-axis justification */
+    justify?: "start" | "center" | "end" | "between" | "around";
+    /** Whether to wrap children */
+    wrap?: boolean;
+    /** Render as a different element */
+    as?: React.ElementType;
+}
+/**
+ * Inline — horizontal flex layout primitive.
+ *
+ * Uses the `space.layout.inline` token (12px) as default gap.
+ *
+ * ```tsx
+ * <Inline gap="sm" justify="between" wrap>
+ *   <Button variant="primary">Save</Button>
+ *   <Button variant="ghost">Cancel</Button>
+ * </Inline>
+ * ```
+ */
+declare const Inline: react.ForwardRefExoticComponent<InlineProps & react.RefAttributes<HTMLDivElement>>;
+
+type ContainerSize = "xs" | "sm" | "md" | "lg" | "xl" | "full";
+interface ContainerProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Maximum width constraint. Default: "lg" (1024px) */
+    maxWidth?: ContainerSize;
+    /** Whether to center children vertically */
+    center?: boolean;
+    /** Render as a different element */
+    as?: React.ElementType;
+}
+/**
+ * Container — page-level width constraint with horizontal margins.
+ *
+ * Uses the `space.layout.page-margin` token (24px) for horizontal padding.
+ * Centers itself horizontally via auto margins.
+ *
+ * ```tsx
+ * <Container maxWidth="lg">
+ *   <Stack gap="xl">
+ *     <h1>Page Title</h1>
+ *     <p>Content</p>
+ *   </Stack>
+ * </Container>
+ * ```
+ */
+declare const Container: react.ForwardRefExoticComponent<ContainerProps & react.RefAttributes<HTMLDivElement>>;
+
+interface DividerProps extends React.HTMLAttributes<HTMLHRElement> {
+    /** Orientation of the divider */
+    orientation?: "horizontal" | "vertical";
+    /** Spacing above and below (or left and right for vertical) */
+    spacing?: "sm" | "md" | "lg";
+}
+/**
+ * Divider — visual separator line.
+ *
+ * Uses the `color.border.default` token for line color.
+ *
+ * ```tsx
+ * <Stack>
+ *   <p>Section A</p>
+ *   <Divider spacing="md" />
+ *   <p>Section B</p>
+ * </Stack>
+ *
+ * <Inline>
+ *   <span>Left</span>
+ *   <Divider orientation="vertical" spacing="sm" />
+ *   <span>Right</span>
+ * </Inline>
+ * ```
+ */
+declare const Divider: react.ForwardRefExoticComponent<DividerProps & react.RefAttributes<HTMLHRElement>>;
+
+export { Container, type ContainerProps, type ContainerSize, Divider, type DividerProps, Inline, type InlineProps, type SpacingSize$1 as SpacingSize, Stack, type StackProps };

package/dist/layout.js

@@ -0,0 +1,4 @@
+export { Container, Divider, Inline, Stack } from './chunk-CTT3LXMZ.js';
+import './chunk-6UAQCHIW.js';
+//# sourceMappingURL=layout.js.map
+//# sourceMappingURL=layout.js.map

package/dist/menu.cjs

@@ -0,0 +1,27 @@
+'use strict';
+
+var chunk6NKHMBF3_cjs = require('./chunk-6NKHMBF3.cjs');
+require('./chunk-LDOP6DVX.cjs');
+require('./chunk-LJK6KK2H.cjs');
+require('./chunk-5DKE5YQD.cjs');
+
+
+
+Object.defineProperty(exports, "Menu", {
+  enumerable: true,
+  get: function () { return chunk6NKHMBF3_cjs.Menu; }
+});
+Object.defineProperty(exports, "MenuContent", {
+  enumerable: true,
+  get: function () { return chunk6NKHMBF3_cjs.MenuContent; }
+});
+Object.defineProperty(exports, "MenuItem", {
+  enumerable: true,
+  get: function () { return chunk6NKHMBF3_cjs.MenuItem; }
+});
+Object.defineProperty(exports, "MenuTrigger", {
+  enumerable: true,
+  get: function () { return chunk6NKHMBF3_cjs.MenuTrigger; }
+});
+//# sourceMappingURL=menu.cjs.map
+//# sourceMappingURL=menu.cjs.map