@accelint/design-system 0.3.2 → 0.4.0

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

@@ -0,0 +1,6 @@
+export { TextArea, TextAreaContext } from './textarea.js';
+export { textAreaClassNames, textAreaColorVars, textAreaContainer, textAreaSpaceVars, textAreaStateVars } from './textarea.css.js';
+export { TextAreaClassNames, TextAreaProps, TextAreaRenderProps, TextAreaState } from './types.js';
+import 'react';
+import 'react-aria-components';
+import '../../types/generic.js';

package/dist/components/textarea/index.js

@@ -0,0 +1,6 @@
+import '../../chunk-PZ5AY32C.js';
+export { TextArea, TextAreaContext } from './textarea.js';
+export { textAreaClassNames, textAreaColorVars, textAreaContainer, textAreaSpaceVars, textAreaStateVars } from './textarea.css.js';
+import './types.js';
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

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

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

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

@@ -0,0 +1,37 @@
+import { TextAreaClassNames } from './types.js';
+import '../../types/generic.js';
+import 'react';
+import 'react-aria-components';
+
+declare const textAreaContainer: string;
+declare const textAreaColorVars: {
+    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 textAreaSpaceVars: {
+    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})`;
+    minHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    height: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    maxHeight: `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 textAreaStateVars: {
+    resize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    size: `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 textAreaClassNames: TextAreaClassNames;
+
+export { textAreaClassNames, textAreaColorVars, textAreaContainer, textAreaSpaceVars, textAreaStateVars };

package/dist/components/textarea/textarea.css.js

@@ -0,0 +1,12 @@
+import '../../chunk-PZ5AY32C.js';
+
+// src/components/textarea/textarea.css.ts
+var textAreaClassNames = { container: "textarea_textAreaClassNames_container__13oc1ofn", textarea: "textarea_textAreaClassNames_textarea__13oc1ofo" };
+var textAreaColorVars = { background: "var(--background__13oc1of1)", border: "var(--border__13oc1of2)", color: "var(--color__13oc1of3)" };
+var textAreaContainer = "textarea_textAreaContainer__13oc1of0";
+var textAreaSpaceVars = { minWidth: "var(--minWidth__13oc1of4)", width: "var(--width__13oc1of5)", maxWidth: "var(--maxWidth__13oc1of6)", minHeight: "var(--minHeight__13oc1of7)", height: "var(--height__13oc1of8)", maxHeight: "var(--maxHeight__13oc1of9)", x: "var(--x__13oc1ofa)", y: "var(--y__13oc1ofb)" };
+var textAreaStateVars = { resize: "var(--resize__13oc1ofc)", size: "var(--size__13oc1ofd)", isDisabled: "var(--isDisabled__13oc1ofe)", isEmpty: "var(--isEmpty__13oc1off)", isFocused: "var(--isFocused__13oc1ofg)", isFocusVisible: "var(--isFocusVisible__13oc1ofh)", isHovered: "var(--isHovered__13oc1ofi)", isInvalid: "var(--isInvalid__13oc1ofj)", isPlaceholder: "var(--isPlaceholder__13oc1ofk)", isReadOnly: "var(--isReadOnly__13oc1ofl)", isRequired: "var(--isRequired__13oc1ofm)" };
+
+export { textAreaClassNames, textAreaColorVars, textAreaContainer, textAreaSpaceVars, textAreaStateVars };
+//# sourceMappingURL=textarea.css.js.map
+//# sourceMappingURL=textarea.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/textarea/textarea.css.ts"],"names":[],"mappings":";;;AAAO,IAAI,kBAAqB,GAAA,EAAC,SAAU,EAAA,iDAAA,EAAkD,UAAS,gDAAgD;AAC/I,IAAI,oBAAoB,EAAC,UAAA,EAAW,+BAA8B,MAAO,EAAA,yBAAA,EAA0B,OAAM,wBAAwB;AACjI,IAAI,iBAAoB,GAAA;AACxB,IAAI,oBAAoB,EAAC,QAAA,EAAS,2BAA4B,EAAA,KAAA,EAAM,0BAAyB,QAAS,EAAA,2BAAA,EAA4B,SAAU,EAAA,4BAAA,EAA6B,QAAO,yBAA0B,EAAA,SAAA,EAAU,8BAA6B,CAAE,EAAA,oBAAA,EAAqB,GAAE,oBAAoB;AAC1R,IAAA,iBAAA,GAAoB,EAAC,MAAO,EAAA,yBAAA,EAA0B,MAAK,uBAAwB,EAAA,UAAA,EAAW,6BAA8B,EAAA,OAAA,EAAQ,0BAA2B,EAAA,SAAA,EAAU,8BAA6B,cAAe,EAAA,iCAAA,EAAkC,SAAU,EAAA,4BAAA,EAA6B,SAAU,EAAA,4BAAA,EAA6B,eAAc,gCAAiC,EAAA,UAAA,EAAW,6BAA8B,EAAA,UAAA,EAAW,6BAA6B","file":"textarea.css.js","sourcesContent":["export var textAreaClassNames = {container:'textarea_textAreaClassNames_container__13oc1ofn',textarea:'textarea_textAreaClassNames_textarea__13oc1ofo'};\nexport var textAreaColorVars = {background:'var(--background__13oc1of1)',border:'var(--border__13oc1of2)',color:'var(--color__13oc1of3)'};\nexport var textAreaContainer = 'textarea_textAreaContainer__13oc1of0';\nexport var textAreaSpaceVars = {minWidth:'var(--minWidth__13oc1of4)',width:'var(--width__13oc1of5)',maxWidth:'var(--maxWidth__13oc1of6)',minHeight:'var(--minHeight__13oc1of7)',height:'var(--height__13oc1of8)',maxHeight:'var(--maxHeight__13oc1of9)',x:'var(--x__13oc1ofa)',y:'var(--y__13oc1ofb)'};\nexport var textAreaStateVars = {resize:'var(--resize__13oc1ofc)',size:'var(--size__13oc1ofd)',isDisabled:'var(--isDisabled__13oc1ofe)',isEmpty:'var(--isEmpty__13oc1off)',isFocused:'var(--isFocused__13oc1ofg)',isFocusVisible:'var(--isFocusVisible__13oc1ofh)',isHovered:'var(--isHovered__13oc1ofi)',isInvalid:'var(--isInvalid__13oc1ofj)',isPlaceholder:'var(--isPlaceholder__13oc1ofk)',isReadOnly:'var(--isReadOnly__13oc1ofl)',isRequired:'var(--isRequired__13oc1ofm)'};"]}

package/dist/components/textarea/textarea.d.ts

@@ -0,0 +1,19 @@
+import { TextAreaProps, BaseTextAreaProps } from './types.js';
+import * as react from 'react';
+import { ContextValue, TextAreaProps as TextAreaProps$1 } from 'react-aria-components';
+import '../../types/generic.js';
+
+declare const TextAreaContext: react.Context<ContextValue<TextAreaProps, HTMLTextAreaElement>>;
+/**
+ * We implement a textarea as a content editable span to provide
+ * improved UX, where the input area automatically grows with input
+ * content length. This can be overriden by applying max-height
+ * and overflow CSS, if desired.
+ *
+ * This also has the side effect of changing the target element in
+ * the ref and event handlers. The normal `event.target.value` is not
+ * available, and must be substituted with `event.currentTarget.textContent`
+ */
+declare const TextArea: (props: Omit<TextAreaProps$1, "children" | "className" | "style" | "onChange" | "cols" | "rows"> & BaseTextAreaProps & react.RefAttributes<HTMLTextAreaElement>) => react.ReactElement | null;
+
+export { TextArea, TextAreaContext };

package/dist/components/textarea/textarea.js

@@ -0,0 +1,134 @@
+import '../../chunk-PZ5AY32C.js';
+import { useFocusRing } from '@react-aria/focus';
+import { useHover } from '@react-aria/interactions';
+import { useControlledState } from '@react-stately/utils';
+import { createContext, forwardRef, useMemo, useCallback, useEffect } from 'react';
+import { useContextProps, TextAreaContext as TextAreaContext$1 } from 'react-aria-components';
+import { useDefaultProps, useTheme } from '../../hooks/index.js';
+import { inputs } from '../../styles/index.js';
+import { mergeClassNames, mergeProps, inlineVars } from '../../utils/index.js';
+import { textAreaClassNames, textAreaStateVars } from './textarea.css.js';
+import { jsx } from 'react/jsx-runtime';
+
+var defaultMapping = {
+  font: inputs
+};
+var TextAreaContext = createContext(null);
+var TextArea = forwardRef(function TextArea2(props, ref) {
+  [props, ref] = useContextProps(props, ref, TextAreaContext$1);
+  delete props.className;
+  delete props.style;
+  [props, ref] = useContextProps(props, ref, TextAreaContext);
+  props = useDefaultProps(props, "TextArea");
+  const {
+    classNames: classNamesProp,
+    defaultValue = "",
+    disabled: isDisabled = false,
+    mapping: mappingProp,
+    placeholder,
+    readOnly: isReadOnly = false,
+    required: isRequired = false,
+    resize = "none",
+    size = "lg",
+    value: valueProp,
+    onChange,
+    onHoverStart,
+    onHoverChange,
+    onHoverEnd,
+    "aria-invalid": ariaInvalid,
+    ...rest
+  } = props;
+  const [value, setValue] = useControlledState(valueProp, defaultValue);
+  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(textAreaClassNames, theme.TextArea, classNamesProp, {
+      textarea: mapping.font[size]
+    }),
+    [theme.TextArea, classNamesProp, mapping.font, size]
+  );
+  const mergedProps = useMemo(
+    () => mergeProps(rest, focusProps, hoverProps),
+    [focusProps, hoverProps, rest]
+  );
+  const style = useMemo(
+    () => inlineVars(textAreaStateVars, {
+      resize,
+      size,
+      isDisabled,
+      isEmpty,
+      isFocused,
+      isFocusVisible,
+      isHovered,
+      isInvalid,
+      isPlaceholder,
+      isReadOnly,
+      isRequired
+    }),
+    [
+      resize,
+      size,
+      isDisabled,
+      isEmpty,
+      isFocused,
+      isFocusVisible,
+      isHovered,
+      isInvalid,
+      isPlaceholder,
+      isReadOnly,
+      isRequired
+    ]
+  );
+  const handleChange = useCallback(
+    (event) => {
+      onChange?.(event);
+      if (!event.defaultPrevented) {
+        setValue(event.currentTarget.textContent ?? "");
+      }
+    },
+    [onChange, setValue]
+  );
+  useEffect(() => {
+    if (typeof ref !== "function" && ref?.current) {
+      ref.current.textContent = `${value ?? ""}`;
+    }
+  }, [ref, value]);
+  return /* @__PURE__ */ jsx("div", { className: classNames?.container, style, children: /* @__PURE__ */ jsx(
+    "span",
+    {
+      ...mergedProps,
+      ...hoverProps,
+      ref,
+      className: classNames?.textarea,
+      contentEditable: !isDisabled && !isReadOnly,
+      role: "textbox",
+      suppressContentEditableWarning: true,
+      onInput: handleChange,
+      "aria-invalid": ariaInvalid,
+      "data-placeholder": placeholder
+    }
+  ) });
+});
+
+export { TextArea, TextAreaContext };
+//# sourceMappingURL=textarea.js.map
+//# sourceMappingURL=textarea.js.map

package/dist/components/textarea/textarea.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/textarea/textarea.tsx"],"names":["TextArea","RACTextAreaContext"],"mappings":"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","file":"textarea.js","sourcesContent":["import { useFocusRing } from '@react-aria/focus';\nimport { useHover } from '@react-aria/interactions';\nimport { useControlledState } from '@react-stately/utils';\nimport {\n  type FormEvent,\n  type ForwardedRef,\n  createContext,\n  forwardRef,\n  useMemo,\n  useCallback,\n  useEffect,\n} from 'react';\nimport {\n  type ContextValue,\n  TextAreaContext as RACTextAreaContext,\n  type TextAreaProps as RACTextAreaProps,\n  useContextProps,\n} from 'react-aria-components';\nimport { useDefaultProps, useTheme } from '../../hooks';\nimport { inputs } from '../../styles';\nimport { inlineVars, mergeClassNames, mergeProps } from '../../utils';\nimport { textAreaClassNames, textAreaStateVars } from './textarea.css';\nimport type { TextAreaMapping, TextAreaProps } from './types';\n\nconst defaultMapping: TextAreaMapping = {\n  font: inputs,\n};\n\nexport const TextAreaContext =\n  createContext<ContextValue<TextAreaProps, HTMLTextAreaElement>>(null);\n\n/**\n * We implement a textarea as a content editable span to provide\n * improved UX, where the input area automatically grows with input\n * content length. This can be overriden by applying max-height\n * and overflow CSS, if desired.\n *\n * This also has the side effect of changing the target element in\n * the ref and event handlers. The normal `event.target.value` is not\n * available, and must be substituted with `event.currentTarget.textContent`\n */\nexport const TextArea = forwardRef(function TextArea(\n  props: TextAreaProps,\n  ref: ForwardedRef<HTMLTextAreaElement>,\n) {\n  [props, ref] = useContextProps(props, ref, RACTextAreaContext);\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 RACTextAreaProps).className;\n  delete (props as RACTextAreaProps).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, TextAreaContext);\n  props = useDefaultProps(props, 'TextArea');\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    resize = 'none',\n    size = 'lg',\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 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(textAreaClassNames, theme.TextArea, classNamesProp, {\n        textarea: mapping.font[size],\n      }),\n    [theme.TextArea, classNamesProp, mapping.font, 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(textAreaStateVars, {\n        resize,\n        size,\n        isDisabled,\n        isEmpty,\n        isFocused,\n        isFocusVisible,\n        isHovered,\n        isInvalid,\n        isPlaceholder,\n        isReadOnly,\n        isRequired,\n      }),\n    [\n      resize,\n      size,\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: FormEvent<HTMLSpanElement>) => {\n      onChange?.(event);\n\n      if (!event.defaultPrevented) {\n        setValue(event.currentTarget.textContent ?? '');\n      }\n    },\n    [onChange, setValue],\n  );\n\n  /**\n   * In order to provide the UX of an \"input\" that auto grows in height\n   * thats driven by content, we implement a content-editable span instead\n   * of a textarea. However, this has the side effect that it must be\n   * updated as an \"uncontrolled\" element, otherwise the cursor resets\n   * to the beginning of the input area after every keystroke if the value\n   * is passed in as \"children\"\n   */\n  useEffect(() => {\n    if (typeof ref !== 'function' && ref?.current) {\n      ref.current.textContent = `${value ?? ''}`;\n    }\n  }, [ref, value]);\n\n  return (\n    <div className={classNames?.container} style={style}>\n      <span\n        {...mergedProps}\n        {...hoverProps}\n        ref={ref}\n        className={classNames?.textarea}\n        contentEditable={!isDisabled && !isReadOnly}\n        role='textbox'\n        suppressContentEditableWarning\n        onInput={handleChange}\n        aria-invalid={ariaInvalid}\n        data-placeholder={placeholder}\n      />\n    </div>\n  );\n});\n"]}

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

@@ -0,0 +1,42 @@
+import { AsType } from '../../types/generic.js';
+import { FormEventHandler } from 'react';
+import { InputRenderProps, TextAreaProps as TextAreaProps$1 } from 'react-aria-components';
+
+type TextAreaClassNames = Partial<{
+    container: string;
+    textarea: string;
+}>;
+type TextAreaSize = 'sm' | 'lg';
+type TextAreaMapping = {
+    font: Partial<Record<TextAreaSize, string>>;
+};
+type TextAreaRenderProps = AsType<InputRenderProps> & {
+    /**
+     * 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 TextAreaResize = 'both' | 'horizontal' | 'vertical' | 'none';
+type BaseTextAreaProps = {
+    classNames?: TextAreaClassNames;
+    mapping?: Partial<TextAreaMapping>;
+    resize?: TextAreaResize;
+    size?: TextAreaSize;
+    onChange?: FormEventHandler<HTMLSpanElement>;
+};
+type TextAreaState = TextAreaRenderProps & Required<Pick<BaseTextAreaProps, 'resize' | 'size'>>;
+type TextAreaProps = Omit<TextAreaProps$1, 'children' | 'className' | 'cols' | 'rows' | 'style' | 'onChange'> & BaseTextAreaProps;
+
+export type { BaseTextAreaProps, TextAreaClassNames, TextAreaMapping, TextAreaProps, TextAreaRenderProps, TextAreaResize, TextAreaSize, TextAreaState };

package/dist/components/textarea/types.js

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

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

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

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

@@ -0,0 +1,7 @@
+export { Tooltip, TooltipContext, TooltipTarget, TooltipTargetContext } from './tooltip.js';
+export { tooltipClassNames, tooltipContainers, tooltipSpaceVars, tooltipStateVars, tooltipTargetStateVars } from './tooltip.css.js';
+export { TooltipClassNames, TooltipMapping, TooltipProps, TooltipRenderProps, TooltipState, TooltipTargetProps, TooltipTargetState } from './types.js';
+import 'react';
+import 'react-aria-components';
+import '../../types/react-aria.js';
+import 'type-fest';

package/dist/components/tooltip/index.js

@@ -0,0 +1,6 @@
+import '../../chunk-PZ5AY32C.js';
+export { Tooltip, TooltipContext, TooltipTarget, TooltipTargetContext } from './tooltip.js';
+export { tooltipClassNames, tooltipContainers, tooltipSpaceVars, tooltipStateVars, tooltipTargetStateVars } from './tooltip.css.js';
+import './types.js';
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

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

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

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

@@ -0,0 +1,30 @@
+import { TooltipClassNames } from './types.js';
+import 'react';
+import 'react-aria-components';
+import 'type-fest';
+import '../../types/react-aria.js';
+
+declare const tooltipContainers: {
+    tooltip: string;
+    target: string;
+};
+declare const tooltipSpaceVars: {
+    x: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    y: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+};
+declare const tooltipStateVars: {
+    containerPadding: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    crossOffset: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    offset: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    placement: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isEntering: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isExiting: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    isOpen: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+};
+declare const tooltipTargetStateVars: {
+    focusable: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    relative: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+};
+declare const tooltipClassNames: TooltipClassNames;
+
+export { tooltipClassNames, tooltipContainers, tooltipSpaceVars, tooltipStateVars, tooltipTargetStateVars };

package/dist/components/tooltip/tooltip.css.js

@@ -0,0 +1,12 @@
+import '../../chunk-PZ5AY32C.js';
+
+// src/components/tooltip/tooltip.css.ts
+var tooltipClassNames = { tooltip: { container: "tooltip_tooltipClassNames_tooltip_container__sg5iyrd", tooltip: "tooltip_tooltipClassNames_tooltip_tooltip__sg5iyre surfaces_proud__15mw6jf5 surfaces_flush__15mw6jf4" }, target: { container: "tooltip_tooltipClassNames_target_container__sg5iyrf", target: "tooltip_tooltipClassNames_target_target__sg5iyrg" } };
+var tooltipContainers = { tooltip: "tooltip_tooltipContainers_tooltip__sg5iyr0", target: "tooltip_tooltipContainers_target__sg5iyr1" };
+var tooltipSpaceVars = { x: "var(--x__sg5iyr2)", y: "var(--y__sg5iyr3)" };
+var tooltipStateVars = { containerPadding: "var(--containerPadding__sg5iyr4)", crossOffset: "var(--crossOffset__sg5iyr5)", offset: "var(--offset__sg5iyr6)", placement: "var(--placement__sg5iyr7)", isEntering: "var(--isEntering__sg5iyr8)", isExiting: "var(--isExiting__sg5iyr9)", isOpen: "var(--isOpen__sg5iyra)" };
+var tooltipTargetStateVars = { focusable: "var(--focusable__sg5iyrb)", relative: "var(--relative__sg5iyrc)" };
+
+export { tooltipClassNames, tooltipContainers, tooltipSpaceVars, tooltipStateVars, tooltipTargetStateVars };
+//# sourceMappingURL=tooltip.css.js.map
+//# sourceMappingURL=tooltip.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/tooltip/tooltip.css.ts"],"names":[],"mappings":";;;AAAO,IAAI,iBAAoB,GAAA,EAAC,OAAQ,EAAA,EAAC,WAAU,sDAAuD,EAAA,OAAA,EAAQ,sGAAsG,EAAA,EAAE,QAAO,EAAC,SAAA,EAAU,qDAAsD,EAAA,MAAA,EAAO,oDAAmD;AACrV,IAAI,iBAAoB,GAAA,EAAC,OAAQ,EAAA,4CAAA,EAA6C,QAAO,2CAA2C;AAChI,IAAI,gBAAmB,GAAA,EAAC,CAAE,EAAA,mBAAA,EAAoB,GAAE,mBAAmB;AACnE,IAAI,gBAAmB,GAAA,EAAC,gBAAiB,EAAA,kCAAA,EAAmC,aAAY,6BAA8B,EAAA,MAAA,EAAO,wBAAyB,EAAA,SAAA,EAAU,6BAA4B,UAAW,EAAA,4BAAA,EAA6B,SAAU,EAAA,2BAAA,EAA4B,QAAO,wBAAwB;AACzS,IAAI,sBAAyB,GAAA,EAAC,SAAU,EAAA,2BAAA,EAA4B,UAAS,0BAA0B","file":"tooltip.css.js","sourcesContent":["export var tooltipClassNames = {tooltip:{container:'tooltip_tooltipClassNames_tooltip_container__sg5iyrd',tooltip:'tooltip_tooltipClassNames_tooltip_tooltip__sg5iyre surfaces_proud__15mw6jf5 surfaces_flush__15mw6jf4'},target:{container:'tooltip_tooltipClassNames_target_container__sg5iyrf',target:'tooltip_tooltipClassNames_target_target__sg5iyrg'}};\nexport var tooltipContainers = {tooltip:'tooltip_tooltipContainers_tooltip__sg5iyr0',target:'tooltip_tooltipContainers_target__sg5iyr1'};\nexport var tooltipSpaceVars = {x:'var(--x__sg5iyr2)',y:'var(--y__sg5iyr3)'};\nexport var tooltipStateVars = {containerPadding:'var(--containerPadding__sg5iyr4)',crossOffset:'var(--crossOffset__sg5iyr5)',offset:'var(--offset__sg5iyr6)',placement:'var(--placement__sg5iyr7)',isEntering:'var(--isEntering__sg5iyr8)',isExiting:'var(--isExiting__sg5iyr9)',isOpen:'var(--isOpen__sg5iyra)'};\nexport var tooltipTargetStateVars = {focusable:'var(--focusable__sg5iyrb)',relative:'var(--relative__sg5iyrc)'};"]}

package/dist/components/tooltip/tooltip.d.ts

@@ -0,0 +1,30 @@
+import * as react from 'react';
+import * as react_aria_components from 'react-aria-components';
+import { ContextValue } from 'react-aria-components';
+import { RenderPropsChildren } from '../../types/react-aria.js';
+import { TooltipProps, TooltipClassNames, TooltipMapping, TooltipRenderProps, TooltipTargetProps } from './types.js';
+import 'type-fest';
+
+declare const TooltipContext: react.Context<ContextValue<TooltipProps, HTMLDivElement>>;
+declare const Tooltip: (props: Omit<react_aria_components.TooltipProps, "className" | "style" | "UNSTABLE_portalContainer"> & {
+    classNames?: TooltipClassNames;
+    mapping?: Partial<TooltipMapping>;
+} & {
+    children?: RenderPropsChildren<TooltipRenderProps>;
+} & react.RefAttributes<HTMLDivElement>) => react.ReactElement | null;
+declare const TooltipTargetContext: react.Context<ContextValue<TooltipTargetProps, HTMLDivElement>>;
+/**
+ * This target component is only needed if attempting to add a Tooltip
+ * to a non-focusable element/component
+ */
+declare const TooltipTarget: (props: {
+    classNames?: TooltipClassNames;
+    mapping?: Partial<TooltipMapping>;
+} & {
+    focusable?: boolean;
+    relative?: "parent" | "self";
+} & {
+    children?: react.ReactNode | undefined;
+} & react.RefAttributes<HTMLDivElement>) => react.ReactElement | null;
+
+export { Tooltip, TooltipContext, TooltipTarget, TooltipTargetContext };

package/dist/components/tooltip/tooltip.js

@@ -0,0 +1,112 @@
+import '../../chunk-PZ5AY32C.js';
+import { createContext, forwardRef, useMemo, useCallback } from 'react';
+import { useFocusable } from '@react-aria/focus';
+import { useContextProps, Tooltip as Tooltip$1 } from 'react-aria-components';
+import { useDefaultProps, useTheme } from '../../hooks/index.js';
+import { bodies } from '../../styles/index.js';
+import { mergeClassNames, inlineVars, callRenderProps } from '../../utils/index.js';
+import { tooltipClassNames, tooltipStateVars, tooltipTargetStateVars } from './tooltip.css.js';
+import { jsx } from 'react/jsx-runtime';
+
+var defaultMapping = {
+  font: bodies.xs
+};
+var TooltipContext = createContext(null);
+var Tooltip = forwardRef(function Tooltip2(props, ref) {
+  [props, ref] = useContextProps(props, ref, TooltipContext);
+  props = useDefaultProps(props, "Tooltip");
+  const {
+    children: childrenProp,
+    classNames: classNamesProp,
+    containerPadding,
+    crossOffset,
+    mapping: mappingProp,
+    offset,
+    ...rest
+  } = props;
+  const theme = useTheme();
+  const mapping = useMemo(
+    () => ({
+      ...defaultMapping,
+      ...mappingProp
+    }),
+    [mappingProp]
+  );
+  const classNames = useMemo(
+    () => mergeClassNames(tooltipClassNames, theme.Tooltip, classNamesProp, {
+      tooltip: {
+        container: theme.className,
+        tooltip: mapping.font
+      }
+    }),
+    [theme.Tooltip, classNamesProp, theme.className, mapping]
+  );
+  const style = useCallback(
+    ({ state, ...renderProps }) => ({
+      ...theme.style,
+      ...inlineVars(tooltipStateVars, {
+        containerPadding,
+        crossOffset,
+        offset,
+        ...renderProps,
+        isOpen: state.isOpen
+      })
+    }),
+    [theme.style, containerPadding, crossOffset, offset]
+  );
+  const children = useCallback(
+    (renderProps) => /* @__PURE__ */ jsx("div", { className: classNames?.tooltip?.tooltip, children: callRenderProps(childrenProp, {
+      ...renderProps,
+      isOpen: renderProps.state.isOpen
+    }) }),
+    [classNames?.tooltip?.tooltip, childrenProp]
+  );
+  return /* @__PURE__ */ jsx(
+    Tooltip$1,
+    {
+      ...rest,
+      ref,
+      className: classNames?.tooltip?.container,
+      style,
+      children
+    }
+  );
+});
+var TooltipTargetContext = createContext(null);
+var TooltipTarget = forwardRef(function TooltipTarget2(props, ref) {
+  [props, ref] = useContextProps(props, ref, TooltipTargetContext);
+  props = useDefaultProps(props, "TooltipTarget");
+  const {
+    children,
+    classNames: classNamesProp,
+    focusable = true,
+    relative = "self"
+  } = props;
+  const { focusableProps } = useFocusable({}, ref);
+  const theme = useTheme();
+  const classNames = useMemo(
+    () => mergeClassNames(tooltipClassNames, theme.Tooltip, classNamesProp),
+    [theme.Tooltip, classNamesProp]
+  );
+  const style = useMemo(
+    () => inlineVars(tooltipTargetStateVars, {
+      focusable,
+      relative
+    }),
+    [focusable, relative]
+  );
+  return /* @__PURE__ */ jsx("div", { className: classNames?.target?.container, style, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...focusableProps,
+      ref,
+      className: classNames?.target?.target,
+      tabIndex: focusable ? 0 : void 0,
+      children
+    }
+  ) });
+});
+
+export { Tooltip, TooltipContext, TooltipTarget, TooltipTargetContext };
+//# sourceMappingURL=tooltip.js.map
+//# sourceMappingURL=tooltip.js.map

package/dist/components/tooltip/tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/tooltip/tooltip.tsx"],"names":["Tooltip","RACTooltip","TooltipTarget"],"mappings":"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","file":"tooltip.js","sourcesContent":["import {\n  type ForwardedRef,\n  createContext,\n  forwardRef,\n  useCallback,\n  useMemo,\n} from 'react';\nimport { useFocusable } from '@react-aria/focus';\nimport {\n  type ContextValue,\n  Tooltip as RACTooltip,\n  type TooltipRenderProps,\n  useContextProps,\n} from 'react-aria-components';\nimport { useDefaultProps, useTheme } from '../../hooks';\nimport { bodies } from '../../styles';\nimport { callRenderProps, inlineVars, mergeClassNames } from '../../utils';\nimport {\n  tooltipClassNames,\n  tooltipStateVars,\n  tooltipTargetStateVars,\n} from './tooltip.css';\nimport type { TooltipMapping, TooltipProps, TooltipTargetProps } from './types';\n\nconst defaultMapping: TooltipMapping = {\n  font: bodies.xs,\n};\n\nexport const TooltipContext =\n  createContext<ContextValue<TooltipProps, HTMLDivElement>>(null);\n\nexport const Tooltip = forwardRef(function Tooltip(\n  props: TooltipProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  [props, ref] = useContextProps(props, ref, TooltipContext);\n\n  props = useDefaultProps(props, 'Tooltip');\n\n  const {\n    children: childrenProp,\n    classNames: classNamesProp,\n    containerPadding,\n    crossOffset,\n    mapping: mappingProp,\n    offset,\n    ...rest\n  } = props;\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(tooltipClassNames, theme.Tooltip, classNamesProp, {\n        tooltip: {\n          container: theme.className,\n          tooltip: mapping.font,\n        },\n      }),\n    [theme.Tooltip, classNamesProp, theme.className, mapping],\n  );\n\n  const style = useCallback(\n    ({ state, ...renderProps }: TooltipRenderProps) => ({\n      ...theme.style,\n      ...inlineVars(tooltipStateVars, {\n        containerPadding,\n        crossOffset,\n        offset,\n        ...renderProps,\n        isOpen: state.isOpen,\n      }),\n    }),\n    [theme.style, containerPadding, crossOffset, offset],\n  );\n\n  const children = useCallback(\n    (renderProps: TooltipRenderProps) => (\n      <div className={classNames?.tooltip?.tooltip}>\n        {callRenderProps(childrenProp, {\n          ...renderProps,\n          isOpen: renderProps.state.isOpen,\n        })}\n      </div>\n    ),\n    [classNames?.tooltip?.tooltip, childrenProp],\n  );\n\n  return (\n    <RACTooltip\n      {...rest}\n      ref={ref}\n      className={classNames?.tooltip?.container}\n      style={style}\n    >\n      {children}\n    </RACTooltip>\n  );\n});\n\nexport const TooltipTargetContext =\n  createContext<ContextValue<TooltipTargetProps, HTMLDivElement>>(null);\n\n/**\n * This target component is only needed if attempting to add a Tooltip\n * to a non-focusable element/component\n */\nexport const TooltipTarget = forwardRef(function TooltipTarget(\n  props: TooltipTargetProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  [props, ref] = useContextProps(props, ref, TooltipTargetContext);\n\n  props = useDefaultProps(props, 'TooltipTarget');\n\n  const {\n    children,\n    classNames: classNamesProp,\n    focusable = true,\n    relative = 'self',\n  } = props;\n\n  const { focusableProps } = useFocusable({}, ref);\n  const theme = useTheme();\n\n  const classNames = useMemo(\n    () => mergeClassNames(tooltipClassNames, theme.Tooltip, classNamesProp),\n    [theme.Tooltip, classNamesProp],\n  );\n\n  const style = useMemo(\n    () =>\n      inlineVars(tooltipTargetStateVars, {\n        focusable,\n        relative,\n      }),\n    [focusable, relative],\n  );\n\n  return (\n    <div className={classNames?.target?.container} style={style}>\n      <div\n        {...focusableProps}\n        ref={ref}\n        className={classNames?.target?.target}\n        // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex\n        tabIndex={focusable ? 0 : undefined}\n      >\n        {children}\n      </div>\n    </div>\n  );\n});\n"]}

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

@@ -0,0 +1,41 @@
+import { PropsWithChildren } from 'react';
+import { TooltipRenderProps as TooltipRenderProps$1, TooltipProps as TooltipProps$1 } from 'react-aria-components';
+import { PartialDeep } from 'type-fest';
+import { RenderPropsChildren } from '../../types/react-aria.js';
+
+type TooltipClassNames = PartialDeep<{
+    tooltip: {
+        container: string;
+        tooltip: string;
+    };
+    target: {
+        container: string;
+        target: string;
+    };
+}>;
+type TooltipMapping = {
+    font: string;
+};
+type TooltipRenderProps = TooltipRenderProps$1 & {
+    /**
+     * If the tooltip is visible
+     */
+    isOpen: boolean;
+};
+type BaseProps = {
+    classNames?: TooltipClassNames;
+    mapping?: Partial<TooltipMapping>;
+};
+type BaseTooltipProps = BaseProps & {
+    children?: RenderPropsChildren<TooltipRenderProps>;
+};
+type BaseTooltipTargetProps = BaseProps & {
+    focusable?: boolean;
+    relative?: 'parent' | 'self';
+};
+type TooltipState = Omit<TooltipRenderProps, 'state'> & Required<Pick<TooltipProps$1, 'containerPadding' | 'crossOffset' | 'offset'>>;
+type TooltipTargetState = Required<Pick<BaseTooltipTargetProps, 'focusable' | 'relative'>>;
+type TooltipProps = Omit<TooltipProps$1, 'className' | 'style' | 'UNSTABLE_portalContainer'> & BaseTooltipProps;
+type TooltipTargetProps = PropsWithChildren<BaseTooltipTargetProps>;
+
+export type { TooltipClassNames, TooltipMapping, TooltipProps, TooltipRenderProps, TooltipState, TooltipTargetProps, TooltipTargetState };

package/dist/components/tooltip/types.js

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

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

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

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

@@ -0,0 +1,17 @@
+export { Tree, TreeGroup, TreeItem, TreeStateContext } from './tree.js';
+export { treeClassNames, treeColorVars, treeContainers, treeGroupStateVars, treeIndicatorStateVars, treeItemStateVars, treeSpaceVars, treeStateVars } from './tree.css.js';
+export { TreeClassNames, TreeGroupProps, TreeGroupRenderProps, TreeGroupState, TreeIndicatorRenderProps, TreeIndicatorState, TreeItemProps, TreeItemRenderProps, TreeItemState, TreeMapping, TreeProps, TreeRenderProps, TreeSizes, TreeState, TreeStateContextValue } from './types.js';
+import 'react/jsx-runtime';
+import 'react';
+import '@react-types/shared';
+import 'react-aria-components';
+import 'type-fest';
+import '../../types/generic.js';
+import '../../types/props.js';
+import '../../types/react-aria.js';
+import '../../types/use-tree.js';
+import '@react-stately/data';
+import '../button/types.js';
+import '../icon/types.js';
+import '../checkbox/types.js';
+import '../group/types.js';

package/dist/components/tree/index.js

@@ -0,0 +1,6 @@
+import '../../chunk-PZ5AY32C.js';
+export { Tree, TreeGroup, TreeItem, TreeStateContext } from './tree.js';
+export { treeClassNames, treeColorVars, treeContainers, treeGroupStateVars, treeIndicatorStateVars, treeItemStateVars, treeSpaceVars, treeStateVars } from './tree.css.js';
+import './types.js';
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

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

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