@accelint/design-system 0.3.2 → 0.4.0

package/dist/components/input/input.css.d.ts

@@ -0,0 +1,34 @@
+import { InputClassNames } from './types.js';
+import '../../types/generic.js';
+import 'react-aria-components';
+
+declare const inputContainer: string;
+declare const inputColorVars: {
+    background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    border: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+};
+declare const inputSpaceVars: {
+    minWidth: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    width: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    maxWidth: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    x: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    y: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+};
+declare const inputStateVars: {
+    length: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    size: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    type: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isDisabled: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isEmpty: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isFocused: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isFocusVisible: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isHovered: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isInvalid: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isPlaceholder: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isReadOnly: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isRequired: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+};
+declare const inputClassNames: InputClassNames;
+
+export { inputClassNames, inputColorVars, inputContainer, inputSpaceVars, inputStateVars };

package/dist/components/input/input.css.js

@@ -0,0 +1,12 @@
+import '../../chunk-PZ5AY32C.js';
+
+// src/components/input/input.css.ts
+var inputClassNames = { container: "input_inputClassNames_container__6yc0ril", sizer: "input_inputClassNames_sizer__6yc0rim", input: "input_inputClassNames_input__6yc0rin" };
+var inputColorVars = { background: "var(--background__6yc0ri1)", border: "var(--border__6yc0ri2)", color: "var(--color__6yc0ri3)" };
+var inputContainer = "input_inputContainer__6yc0ri0";
+var inputSpaceVars = { minWidth: "var(--minWidth__6yc0ri4)", width: "var(--width__6yc0ri5)", maxWidth: "var(--maxWidth__6yc0ri6)", x: "var(--x__6yc0ri7)", y: "var(--y__6yc0ri8)" };
+var inputStateVars = { length: "var(--length__6yc0ri9)", size: "var(--size__6yc0ria)", type: "var(--type__6yc0rib)", isDisabled: "var(--isDisabled__6yc0ric)", isEmpty: "var(--isEmpty__6yc0rid)", isFocused: "var(--isFocused__6yc0rie)", isFocusVisible: "var(--isFocusVisible__6yc0rif)", isHovered: "var(--isHovered__6yc0rig)", isInvalid: "var(--isInvalid__6yc0rih)", isPlaceholder: "var(--isPlaceholder__6yc0rii)", isReadOnly: "var(--isReadOnly__6yc0rij)", isRequired: "var(--isRequired__6yc0rik)" };
+
+export { inputClassNames, inputColorVars, inputContainer, inputSpaceVars, inputStateVars };
+//# sourceMappingURL=input.css.js.map
+//# sourceMappingURL=input.css.js.map

package/dist/components/input/input.css.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/input/input.css.ts"],"names":[],"mappings":";;;AAAO,IAAI,kBAAkB,EAAC,SAAA,EAAU,4CAA2C,KAAM,EAAA,sCAAA,EAAuC,OAAM,sCAAsC;AACrK,IAAI,iBAAiB,EAAC,UAAA,EAAW,8BAA6B,MAAO,EAAA,wBAAA,EAAyB,OAAM,uBAAuB;AAC3H,IAAI,cAAiB,GAAA;AACjB,IAAA,cAAA,GAAiB,EAAC,QAAA,EAAS,0BAA2B,EAAA,KAAA,EAAM,uBAAwB,EAAA,QAAA,EAAS,0BAA2B,EAAA,CAAA,EAAE,mBAAoB,EAAA,CAAA,EAAE,mBAAmB;AACnK,IAAA,cAAA,GAAiB,EAAC,MAAA,EAAO,wBAAyB,EAAA,IAAA,EAAK,wBAAuB,IAAK,EAAA,sBAAA,EAAuB,UAAW,EAAA,4BAAA,EAA6B,OAAQ,EAAA,yBAAA,EAA0B,WAAU,2BAA4B,EAAA,cAAA,EAAe,gCAAiC,EAAA,SAAA,EAAU,2BAA4B,EAAA,SAAA,EAAU,2BAA4B,EAAA,aAAA,EAAc,+BAAgC,EAAA,UAAA,EAAW,4BAA6B,EAAA,UAAA,EAAW,4BAA4B","file":"input.css.js","sourcesContent":["export var inputClassNames = {container:'input_inputClassNames_container__6yc0ril',sizer:'input_inputClassNames_sizer__6yc0rim',input:'input_inputClassNames_input__6yc0rin'};\nexport var inputColorVars = {background:'var(--background__6yc0ri1)',border:'var(--border__6yc0ri2)',color:'var(--color__6yc0ri3)'};\nexport var inputContainer = 'input_inputContainer__6yc0ri0';\nexport var inputSpaceVars = {minWidth:'var(--minWidth__6yc0ri4)',width:'var(--width__6yc0ri5)',maxWidth:'var(--maxWidth__6yc0ri6)',x:'var(--x__6yc0ri7)',y:'var(--y__6yc0ri8)'};\nexport var inputStateVars = {length:'var(--length__6yc0ri9)',size:'var(--size__6yc0ria)',type:'var(--type__6yc0rib)',isDisabled:'var(--isDisabled__6yc0ric)',isEmpty:'var(--isEmpty__6yc0rid)',isFocused:'var(--isFocused__6yc0rie)',isFocusVisible:'var(--isFocusVisible__6yc0rif)',isHovered:'var(--isHovered__6yc0rig)',isInvalid:'var(--isInvalid__6yc0rih)',isPlaceholder:'var(--isPlaceholder__6yc0rii)',isReadOnly:'var(--isReadOnly__6yc0rij)',isRequired:'var(--isRequired__6yc0rik)'};"]}

package/dist/components/input/input.d.ts

@@ -0,0 +1,13 @@
+import { InputProps, BaseInputProps } from './types.js';
+import * as react from 'react';
+import { ContextValue, InputProps as InputProps$1 } from 'react-aria-components';
+import '../../types/generic.js';
+
+declare const InputContext: react.Context<ContextValue<InputProps, HTMLInputElement>>;
+/**
+ * Only intended for generic text-like inputs, see types in props for list
+ * Other more specific inputs should be handled by other components
+ */
+declare const Input: (props: Omit<InputProps$1, "children" | "className" | "style" | "size" | "type"> & BaseInputProps & react.RefAttributes<HTMLInputElement>) => react.ReactElement | null;
+
+export { Input, InputContext };

package/dist/components/input/input.js

@@ -0,0 +1,141 @@
+import '../../chunk-PZ5AY32C.js';
+import { useControlledState } from '@react-stately/utils';
+import { useFocusRing } from '@react-aria/focus';
+import { useHover } from '@react-aria/interactions';
+import { createContext, forwardRef, useMemo, useCallback } from 'react';
+import { InputContext as InputContext$1 } from 'react-aria-components';
+import { useContextProps, useDefaultProps, useTheme } from '../../hooks/index.js';
+import { inputs } from '../../styles/index.js';
+import { mergeClassNames, mergeProps, inlineVars } from '../../utils/index.js';
+import { inputClassNames, inputStateVars } from './input.css.js';
+import { jsx } from 'react/jsx-runtime';
+
+var defaultMapping = {
+  sizer: {
+    sm: inputs.sm,
+    lg: inputs.lg
+  },
+  input: {
+    sm: inputs.sm,
+    lg: inputs.lg
+  }
+};
+var InputContext = createContext(null);
+var Input = forwardRef(function Input2(props, ref) {
+  [props, ref] = useContextProps(props, ref, InputContext$1);
+  delete props.className;
+  delete props.style;
+  [props, ref] = useContextProps(props, ref, InputContext);
+  props = useDefaultProps(props, "Input");
+  const {
+    classNames: classNamesProp,
+    defaultValue = "",
+    disabled: isDisabled = false,
+    mapping: mappingProp,
+    placeholder,
+    readOnly: isReadOnly = false,
+    required: isRequired = false,
+    size = "lg",
+    type = "text",
+    value: valueProp,
+    onChange,
+    onHoverStart,
+    onHoverChange,
+    onHoverEnd,
+    "aria-invalid": ariaInvalid,
+    ...rest
+  } = props;
+  const [value, setValue] = useControlledState(valueProp, defaultValue);
+  const length = (`${value ?? ""}`.length || placeholder?.length) ?? 0;
+  const isInvalid = !!ariaInvalid && ariaInvalid !== "false";
+  const isPlaceholder = !!placeholder && !value;
+  const isEmpty = !value;
+  const { isFocused, isFocusVisible, focusProps } = useFocusRing({
+    autoFocus: props.autoFocus,
+    isTextInput: true
+  });
+  const { hoverProps, isHovered } = useHover({
+    isDisabled,
+    onHoverStart,
+    onHoverChange,
+    onHoverEnd
+  });
+  const theme = useTheme();
+  const mapping = useMemo(
+    () => ({
+      ...defaultMapping,
+      ...mappingProp
+    }),
+    [mappingProp]
+  );
+  const classNames = useMemo(
+    () => mergeClassNames(inputClassNames, theme.Input, classNamesProp, {
+      sizer: mapping.sizer[size],
+      input: mapping.input[size]
+    }),
+    [theme.Input, classNamesProp, mapping, size]
+  );
+  const mergedProps = useMemo(
+    () => mergeProps(rest, focusProps, hoverProps),
+    [focusProps, hoverProps, rest]
+  );
+  const style = useMemo(
+    () => inlineVars(inputStateVars, {
+      length,
+      size,
+      type,
+      isDisabled,
+      isEmpty,
+      isFocused,
+      isFocusVisible,
+      isHovered,
+      isInvalid,
+      isPlaceholder,
+      isReadOnly,
+      isRequired
+    }),
+    [
+      length,
+      size,
+      type,
+      isDisabled,
+      isEmpty,
+      isFocused,
+      isFocusVisible,
+      isHovered,
+      isInvalid,
+      isPlaceholder,
+      isReadOnly,
+      isRequired
+    ]
+  );
+  const handleChange = useCallback(
+    (event) => {
+      onChange?.(event);
+      if (!event.defaultPrevented) {
+        setValue(event.target.value);
+      }
+    },
+    [onChange, setValue]
+  );
+  return /* @__PURE__ */ jsx("div", { className: classNames?.container, style, children: /* @__PURE__ */ jsx("div", { className: classNames?.sizer, children: /* @__PURE__ */ jsx(
+    "input",
+    {
+      ...mergedProps,
+      ref,
+      className: classNames?.input,
+      disabled: isDisabled,
+      placeholder,
+      readOnly: isReadOnly,
+      required: isRequired,
+      type,
+      value,
+      onChange: handleChange,
+      "aria-invalid": ariaInvalid
+    }
+  ) }) });
+});
+
+export { Input, InputContext };
+//# sourceMappingURL=input.js.map
+//# sourceMappingURL=input.js.map

package/dist/components/input/input.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/input/input.tsx"],"names":["Input","RACInputContext"],"mappings":"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","file":"input.js","sourcesContent":["import { useControlledState } from '@react-stately/utils';\nimport { useFocusRing } from '@react-aria/focus';\nimport { useHover } from '@react-aria/interactions';\nimport {\n  type ChangeEvent,\n  type ForwardedRef,\n  createContext,\n  forwardRef,\n  useCallback,\n  useMemo,\n} from 'react';\nimport {\n  type ContextValue,\n  InputContext as RACInputContext,\n  type InputProps as RACInputProps,\n} from 'react-aria-components';\nimport { useContextProps, useDefaultProps, useTheme } from '../../hooks';\nimport { inputs } from '../../styles';\nimport { inlineVars, mergeClassNames, mergeProps } from '../../utils';\nimport { inputClassNames, inputStateVars } from './input.css';\nimport type { InputMapping, InputProps } from './types';\n\nconst defaultMapping: InputMapping = {\n  sizer: {\n    sm: inputs.sm,\n    lg: inputs.lg,\n  },\n  input: {\n    sm: inputs.sm,\n    lg: inputs.lg,\n  },\n};\n\nexport const InputContext =\n  createContext<ContextValue<InputProps, HTMLInputElement>>(null);\n\n/**\n * Only intended for generic text-like inputs, see types in props for list\n * Other more specific inputs should be handled by other components\n */\nexport const Input = forwardRef(function Input(\n  props: InputProps,\n  ref: ForwardedRef<HTMLInputElement>,\n) {\n  [props, ref] = useContextProps(props, ref, RACInputContext);\n\n  // Disallow props possibly provided by React Aria context\n  // could be render props functions we don't want to support\n  delete (props as RACInputProps).className;\n  delete (props as RACInputProps).style;\n\n  // Duplicate context prop merging to support React Aria's context\n  // and our own which establishes a superset type for the props\n  [props, ref] = useContextProps(props, ref, InputContext);\n\n  props = useDefaultProps(props, 'Input');\n\n  const {\n    classNames: classNamesProp,\n    defaultValue = '',\n    disabled: isDisabled = false,\n    mapping: mappingProp,\n    placeholder,\n    readOnly: isReadOnly = false,\n    required: isRequired = false,\n    size = 'lg',\n    type = 'text',\n    value: valueProp,\n    onChange,\n    onHoverStart,\n    onHoverChange,\n    onHoverEnd,\n    'aria-invalid': ariaInvalid,\n    ...rest\n  } = props;\n\n  const [value, setValue] = useControlledState(valueProp, defaultValue);\n  const length = (`${value ?? ''}`.length || placeholder?.length) ?? 0;\n  const isInvalid = !!ariaInvalid && ariaInvalid !== 'false';\n  const isPlaceholder = !!placeholder && !value;\n  const isEmpty = !value;\n\n  const { isFocused, isFocusVisible, focusProps } = useFocusRing({\n    autoFocus: props.autoFocus,\n    isTextInput: true,\n  });\n\n  const { hoverProps, isHovered } = useHover({\n    isDisabled,\n    onHoverStart,\n    onHoverChange,\n    onHoverEnd,\n  });\n\n  const theme = useTheme();\n\n  const mapping = useMemo(\n    () => ({\n      ...defaultMapping,\n      ...mappingProp,\n    }),\n    [mappingProp],\n  );\n\n  const classNames = useMemo(\n    () =>\n      mergeClassNames(inputClassNames, theme.Input, classNamesProp, {\n        sizer: mapping.sizer[size],\n        input: mapping.input[size],\n      }),\n    [theme.Input, classNamesProp, mapping, size],\n  );\n\n  const mergedProps = useMemo(\n    () => mergeProps(rest, focusProps, hoverProps),\n    [focusProps, hoverProps, rest],\n  );\n\n  const style = useMemo(\n    () =>\n      inlineVars(inputStateVars, {\n        length,\n        size,\n        type,\n        isDisabled,\n        isEmpty,\n        isFocused,\n        isFocusVisible,\n        isHovered,\n        isInvalid,\n        isPlaceholder,\n        isReadOnly,\n        isRequired,\n      }),\n    [\n      length,\n      size,\n      type,\n      isDisabled,\n      isEmpty,\n      isFocused,\n      isFocusVisible,\n      isHovered,\n      isInvalid,\n      isPlaceholder,\n      isReadOnly,\n      isRequired,\n    ],\n  );\n\n  const handleChange = useCallback(\n    (event: ChangeEvent<HTMLInputElement>) => {\n      onChange?.(event);\n\n      if (!event.defaultPrevented) {\n        setValue(event.target.value);\n      }\n    },\n    [onChange, setValue],\n  );\n\n  return (\n    <div className={classNames?.container} style={style}>\n      <div className={classNames?.sizer}>\n        <input\n          {...mergedProps}\n          ref={ref}\n          className={classNames?.input}\n          disabled={isDisabled}\n          placeholder={placeholder}\n          readOnly={isReadOnly}\n          required={isRequired}\n          type={type}\n          value={value}\n          onChange={handleChange}\n          aria-invalid={ariaInvalid}\n        />\n      </div>\n    </div>\n  );\n});\n"]}

package/dist/components/input/types.d.ts

@@ -0,0 +1,47 @@
+import { AsType } from '../../types/generic.js';
+import { InputRenderProps as InputRenderProps$1, InputProps as InputProps$1 } from 'react-aria-components';
+
+type InputClassNames = Partial<{
+    container: string;
+    sizer: string;
+    input: string;
+}>;
+type InputRenderProps = AsType<InputRenderProps$1> & {
+    /**
+     * If value is undefined or empty
+     */
+    isEmpty: boolean;
+    /**
+     * If placeholder is provided and value is undefined or empty
+     */
+    isPlaceholder: boolean;
+    /**
+     * If read only
+     */
+    isReadOnly: boolean;
+    /**
+     * If required
+     */
+    isRequired: boolean;
+};
+type InputSize = 'sm' | 'lg';
+type InputMapping = {
+    sizer: Partial<Record<InputSize, string>>;
+    input: Partial<Record<InputSize, string>>;
+};
+type InputType = 'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'url';
+type BaseInputProps = {
+    classNames?: InputClassNames;
+    mapping?: Partial<InputMapping>;
+    size?: InputSize;
+    type?: InputType;
+};
+type InputState = InputRenderProps & Required<Pick<BaseInputProps, 'size' | 'type'>> & {
+    /**
+     * The length of the input value or placeholder (whichever is currently rendered)
+     */
+    length: string;
+};
+type InputProps = Omit<InputProps$1, 'children' | 'className' | 'size' | 'style' | 'type'> & BaseInputProps;
+
+export type { BaseInputProps, InputClassNames, InputMapping, InputProps, InputRenderProps, InputSize, InputState, InputType };

package/dist/components/input/types.js

@@ -0,0 +1,3 @@
+
+//# sourceMappingURL=types.js.map
+//# sourceMappingURL=types.js.map

package/dist/components/input/types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"types.js"}

package/dist/components/menu/index.d.ts

@@ -0,0 +1,8 @@
+export { Menu, MenuContext, MenuItem, MenuItemContext, MenuList, MenuListContext } from './menu.js';
+export { MenuClassNames, MenuItemProps, MenuItemRenderProps, MenuItemState, MenuListProps, MenuMapping, MenuProps, MenuRenderProps, MenuSizes, MenuState } from './types.js';
+export { menuColorVars, menuItemStateVars, menuSpaceVars, menuStateVars } from './menu.css.js';
+import 'react-aria-components';
+import 'react';
+import '../../types/generic.js';
+import 'type-fest';
+import '../icon/types.js';

package/dist/components/menu/index.js

@@ -0,0 +1,6 @@
+import '../../chunk-PZ5AY32C.js';
+export { Menu, MenuContext, MenuItem, MenuItemContext, MenuList, MenuListContext } from './menu.js';
+import './types.js';
+export { menuColorVars, menuItemStateVars, menuSpaceVars, menuStateVars } from './menu.css.js';
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/components/menu/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js","sourcesContent":[]}

package/dist/components/menu/menu.css.d.ts

@@ -0,0 +1,83 @@
+import { MenuClassNames } from './types.js';
+import '../../types/generic.js';
+import 'react-aria-components';
+import 'type-fest';
+import '../icon/types.js';
+import 'react';
+
+declare const menuContainers: {
+    menu: string;
+    list: string;
+    item: string;
+};
+declare const menuStateVars: {
+    placement: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    size: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isExiting: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isEntering: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+};
+declare const menuItemStateVars: {
+    selectionMode: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    selectionBehavior: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    size: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    hasDescription: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    hasSubmenu: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isOpen: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isDisabled: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isHovered: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isPressed: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isSelected: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isFocused: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isFocusVisible: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+};
+declare const menuColorVars: {
+    list: {
+        background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        border: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    header: {
+        background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        border: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    separator: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    item: {
+        background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        border: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    label: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    description: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+};
+declare const menuSpaceVars: {
+    menu: {
+        minWidth: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        x: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        y: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    list: {
+        x: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        y: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    section: {
+        x: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        y: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    header: {
+        x: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        y: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    separator: {
+        x: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        y: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    item: {
+        x: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        y: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        gap: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+};
+declare const menuClassNames: MenuClassNames;
+
+export { menuClassNames, menuColorVars, menuContainers, menuItemStateVars, menuSpaceVars, menuStateVars };

package/dist/components/menu/menu.css.js

@@ -0,0 +1,13 @@
+import '../../chunk-PZ5AY32C.js';
+
+// src/components/menu/menu.css.ts
+var menuClassNames = { menu: { container: "menu_menuClassNames_menu_container__dpszds19", menu: "menu_menuClassNames_menu_menu__dpszds1a surfaces_proud__15mw6jf5 surfaces_flush__15mw6jf4" }, list: { container: "menu_menuClassNames_list_container__dpszds1b", list: "menu_menuClassNames_list_list__dpszds1c", section: "menu_menuClassNames_list_section__dpszds1d", header: "menu_menuClassNames_list_header__dpszds1e", separator: "menu_menuClassNames_list_separator__dpszds1f" }, item: { container: "menu_menuClassNames_item_container__dpszds1g", item: "menu_menuClassNames_item_item__dpszds1h", icon: { icon: "menu_menuClassNames_item_icon_icon__dpszds1i" }, label: "menu_menuClassNames_item_label__dpszds1j", description: "menu_menuClassNames_item_description__dpszds1k", more: { icon: "menu_menuClassNames_item_more_icon__dpszds1l" }, shortcut: "menu_menuClassNames_item_shortcut__dpszds1m" } };
+var menuColorVars = { list: { background: "var(--list-background__dpszdsj)", border: "var(--list-border__dpszdsk)", color: "var(--list-color__dpszdsl)" }, header: { background: "var(--header-background__dpszdsm)", border: "var(--header-border__dpszdsn)", color: "var(--header-color__dpszdso)" }, separator: "var(--separator__dpszdsp)", item: { background: "var(--item-background__dpszdsq)", border: "var(--item-border__dpszdsr)", color: "var(--item-color__dpszdss)" }, label: "var(--label__dpszdst)", description: "var(--description__dpszdsu)" };
+var menuContainers = { menu: "menu_menuContainers_menu__dpszds0", list: "menu_menuContainers_list__dpszds1", item: "menu_menuContainers_item__dpszds2" };
+var menuItemStateVars = { selectionMode: "var(--selectionMode__dpszds7)", selectionBehavior: "var(--selectionBehavior__dpszds8)", size: "var(--size__dpszds9)", hasDescription: "var(--hasDescription__dpszdsa)", hasSubmenu: "var(--hasSubmenu__dpszdsb)", isOpen: "var(--isOpen__dpszdsc)", isDisabled: "var(--isDisabled__dpszdsd)", isHovered: "var(--isHovered__dpszdse)", isPressed: "var(--isPressed__dpszdsf)", isSelected: "var(--isSelected__dpszdsg)", isFocused: "var(--isFocused__dpszdsh)", isFocusVisible: "var(--isFocusVisible__dpszdsi)" };
+var menuSpaceVars = { menu: { minWidth: "var(--menu-minWidth__dpszdsv)", x: "var(--menu-x__dpszdsw)", y: "var(--menu-y__dpszdsx)" }, list: { x: "var(--list-x__dpszdsy)", y: "var(--list-y__dpszdsz)" }, section: { x: "var(--section-x__dpszds10)", y: "var(--section-y__dpszds11)" }, header: { x: "var(--header-x__dpszds12)", y: "var(--header-y__dpszds13)" }, separator: { x: "var(--separator-x__dpszds14)", y: "var(--separator-y__dpszds15)" }, item: { x: "var(--item-x__dpszds16)", y: "var(--item-y__dpszds17)", gap: "var(--item-gap__dpszds18)" } };
+var menuStateVars = { placement: "var(--placement__dpszds3)", size: "var(--size__dpszds4)", isExiting: "var(--isExiting__dpszds5)", isEntering: "var(--isEntering__dpszds6)" };
+
+export { menuClassNames, menuColorVars, menuContainers, menuItemStateVars, menuSpaceVars, menuStateVars };
+//# sourceMappingURL=menu.css.js.map
+//# sourceMappingURL=menu.css.js.map

package/dist/components/menu/menu.css.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/menu/menu.css.ts"],"names":[],"mappings":";;;AAAW,IAAA,cAAA,GAAiB,EAAC,IAAK,EAAA,EAAC,WAAU,8CAA+C,EAAA,IAAA,EAAK,6FAA6F,EAAA,IAAA,EAAK,EAAC,SAAU,EAAA,8CAAA,EAA+C,MAAK,yCAA0C,EAAA,OAAA,EAAQ,8CAA6C,MAAO,EAAA,2CAAA,EAA4C,WAAU,8CAA8C,EAAA,EAAE,MAAK,EAAC,SAAA,EAAU,gDAA+C,IAAK,EAAA,yCAAA,EAA0C,MAAK,EAAC,IAAA,EAAK,gDAAgD,EAAA,KAAA,EAAM,4CAA2C,WAAY,EAAA,gDAAA,EAAiD,MAAK,EAAC,IAAA,EAAK,gDAAgD,EAAA,QAAA,EAAS,+CAA8C;AACh1B,IAAI,aAAgB,GAAA,EAAC,IAAK,EAAA,EAAC,YAAW,iCAAkC,EAAA,MAAA,EAAO,6BAA8B,EAAA,KAAA,EAAM,8BAA8B,EAAA,MAAA,EAAO,EAAC,UAAA,EAAW,qCAAoC,MAAO,EAAA,+BAAA,EAAgC,KAAM,EAAA,8BAAA,EAAgC,EAAA,SAAA,EAAU,2BAA4B,EAAA,IAAA,EAAK,EAAC,UAAW,EAAA,iCAAA,EAAkC,MAAO,EAAA,6BAAA,EAA8B,OAAM,4BAA4B,EAAA,EAAE,KAAM,EAAA,uBAAA,EAAwB,aAAY,6BAA6B;AAC9f,IAAI,iBAAiB,EAAC,IAAA,EAAK,qCAAoC,IAAK,EAAA,mCAAA,EAAoC,MAAK,mCAAmC;AAC5I,IAAA,iBAAA,GAAoB,EAAC,aAAA,EAAc,+BAAgC,EAAA,iBAAA,EAAkB,qCAAoC,IAAK,EAAA,sBAAA,EAAuB,cAAe,EAAA,gCAAA,EAAiC,UAAW,EAAA,4BAAA,EAA6B,QAAO,wBAAyB,EAAA,UAAA,EAAW,4BAA6B,EAAA,SAAA,EAAU,2BAA4B,EAAA,SAAA,EAAU,2BAA4B,EAAA,UAAA,EAAW,4BAA6B,EAAA,SAAA,EAAU,2BAA4B,EAAA,cAAA,EAAe,gCAAgC;AAC9f,IAAA,aAAA,GAAgB,EAAC,IAAK,EAAA,EAAC,UAAS,+BAAgC,EAAA,CAAA,EAAE,0BAAyB,CAAE,EAAA,wBAAA,IAA0B,IAAK,EAAA,EAAC,GAAE,wBAAyB,EAAA,CAAA,EAAE,0BAA0B,EAAA,OAAA,EAAQ,EAAC,CAAA,EAAE,4BAA6B,EAAA,CAAA,EAAE,8BAA8B,EAAA,MAAA,EAAO,EAAC,CAAE,EAAA,2BAAA,EAA4B,GAAE,2BAA2B,EAAA,EAAE,SAAU,EAAA,EAAC,CAAE,EAAA,8BAAA,EAA+B,GAAE,8BAA8B,EAAA,EAAE,MAAK,EAAC,CAAA,EAAE,2BAA0B,CAAE,EAAA,yBAAA,EAA0B,GAAI,EAAA,2BAAA,EAA4B;AAC7e,IAAA,aAAA,GAAgB,EAAC,SAAU,EAAA,2BAAA,EAA4B,MAAK,sBAAuB,EAAA,SAAA,EAAU,2BAA4B,EAAA,UAAA,EAAW,4BAA4B","file":"menu.css.js","sourcesContent":["export var menuClassNames = {menu:{container:'menu_menuClassNames_menu_container__dpszds19',menu:'menu_menuClassNames_menu_menu__dpszds1a surfaces_proud__15mw6jf5 surfaces_flush__15mw6jf4'},list:{container:'menu_menuClassNames_list_container__dpszds1b',list:'menu_menuClassNames_list_list__dpszds1c',section:'menu_menuClassNames_list_section__dpszds1d',header:'menu_menuClassNames_list_header__dpszds1e',separator:'menu_menuClassNames_list_separator__dpszds1f'},item:{container:'menu_menuClassNames_item_container__dpszds1g',item:'menu_menuClassNames_item_item__dpszds1h',icon:{icon:'menu_menuClassNames_item_icon_icon__dpszds1i'},label:'menu_menuClassNames_item_label__dpszds1j',description:'menu_menuClassNames_item_description__dpszds1k',more:{icon:'menu_menuClassNames_item_more_icon__dpszds1l'},shortcut:'menu_menuClassNames_item_shortcut__dpszds1m'}};\nexport var menuColorVars = {list:{background:'var(--list-background__dpszdsj)',border:'var(--list-border__dpszdsk)',color:'var(--list-color__dpszdsl)'},header:{background:'var(--header-background__dpszdsm)',border:'var(--header-border__dpszdsn)',color:'var(--header-color__dpszdso)'},separator:'var(--separator__dpszdsp)',item:{background:'var(--item-background__dpszdsq)',border:'var(--item-border__dpszdsr)',color:'var(--item-color__dpszdss)'},label:'var(--label__dpszdst)',description:'var(--description__dpszdsu)'};\nexport var menuContainers = {menu:'menu_menuContainers_menu__dpszds0',list:'menu_menuContainers_list__dpszds1',item:'menu_menuContainers_item__dpszds2'};\nexport var menuItemStateVars = {selectionMode:'var(--selectionMode__dpszds7)',selectionBehavior:'var(--selectionBehavior__dpszds8)',size:'var(--size__dpszds9)',hasDescription:'var(--hasDescription__dpszdsa)',hasSubmenu:'var(--hasSubmenu__dpszdsb)',isOpen:'var(--isOpen__dpszdsc)',isDisabled:'var(--isDisabled__dpszdsd)',isHovered:'var(--isHovered__dpszdse)',isPressed:'var(--isPressed__dpszdsf)',isSelected:'var(--isSelected__dpszdsg)',isFocused:'var(--isFocused__dpszdsh)',isFocusVisible:'var(--isFocusVisible__dpszdsi)'};\nexport var menuSpaceVars = {menu:{minWidth:'var(--menu-minWidth__dpszdsv)',x:'var(--menu-x__dpszdsw)',y:'var(--menu-y__dpszdsx)'},list:{x:'var(--list-x__dpszdsy)',y:'var(--list-y__dpszdsz)'},section:{x:'var(--section-x__dpszds10)',y:'var(--section-y__dpszds11)'},header:{x:'var(--header-x__dpszds12)',y:'var(--header-y__dpszds13)'},separator:{x:'var(--separator-x__dpszds14)',y:'var(--separator-y__dpszds15)'},item:{x:'var(--item-x__dpszds16)',y:'var(--item-y__dpszds17)',gap:'var(--item-gap__dpszds18)'}};\nexport var menuStateVars = {placement:'var(--placement__dpszds3)',size:'var(--size__dpszds4)',isExiting:'var(--isExiting__dpszds5)',isEntering:'var(--isEntering__dpszds6)'};"]}

package/dist/components/menu/menu.d.ts

@@ -0,0 +1,32 @@
+import { MenuProps, MenuClassNames, MenuMapping, MenuSizes, MenuListProps, MenuItemProps } from './types.js';
+import * as react_aria_components from 'react-aria-components';
+import { ContextValue } from 'react-aria-components';
+import * as react from 'react';
+import '../../types/generic.js';
+import 'type-fest';
+import '../icon/types.js';
+
+declare const MenuContext: react.Context<ContextValue<MenuProps, HTMLElement>>;
+/**
+ * Menu component that supports display and selection of menu items via a trigger (right-click or click)
+ * Customization of React Aria's Menu and Menu Item components https://react-spectrum.adobe.com/react-aria/Menu.html
+ */
+declare const Menu: (props: Omit<react_aria_components.PopoverProps, "className" | "style"> & {
+    classNames?: MenuClassNames;
+    mapping?: Partial<MenuMapping>;
+    size?: MenuSizes;
+} & react.RefAttributes<HTMLElement>) => react.ReactElement | null;
+declare const MenuListContext: react.Context<ContextValue<MenuListProps<unknown>, HTMLDivElement>>;
+declare const MenuList: <T extends object>(props: Omit<react_aria_components.MenuProps<T>, "className" | "style"> & {
+    classNames?: MenuClassNames;
+    mapping?: Partial<MenuMapping>;
+    size?: MenuSizes;
+} & react.RefAttributes<HTMLDivElement>) => react.ReactElement | null;
+declare const MenuItemContext: react.Context<ContextValue<MenuItemProps<unknown>, HTMLDivElement>>;
+declare const MenuItem: <T extends object>(props: Omit<react_aria_components.MenuItemProps<T>, "className" | "style"> & {
+    classNames?: MenuClassNames;
+    mapping?: Partial<MenuMapping>;
+    size?: MenuSizes;
+} & react.RefAttributes<HTMLDivElement>) => react.ReactElement | null;
+
+export { Menu, MenuContext, MenuItem, MenuItemContext, MenuList, MenuListContext };