@orfium/ictinus 5.43.0 → 5.43.2

package/dist/vanilla/src/components/ButtonBase/constants.js

@@ -0,0 +1,40 @@
+import { vars } from '@orfium/tokens';
+
+const BUTTON_COLOR = {
+  primary: {
+    defaultFill: vars.color.palette.primary.base,
+    hoverFill: vars.color.palette.primary.muted,
+    activeFill: vars.color.palette.primary.contrast,
+    text: vars.color.text.inverted.primary
+  },
+  secondary: {
+    defaultFill: vars.color.palette.secondary.base,
+    hoverFill: vars.color.palette.secondary.muted,
+    activeFill: vars.color.palette.secondary.contrast,
+    text: vars.color.text.default.active
+  },
+  tertiary: {
+    defaultFill: vars.color.palette.tertiary.base,
+    hoverFill: vars.color.palette.tertiary.muted,
+    activeFill: vars.color.palette.tertiary.contrast,
+    text: vars.color.text.default.active
+  },
+  danger: {
+    defaultFill: vars.color.palette.error.base,
+    hoverFill: vars.color.palette.error.muted,
+    activeFill: vars.color.palette.error.contrast,
+    text: vars.color.text.default.error
+  }
+};
+const BUTTON_ICON_COLOR = {
+  primary: "inverted.primary",
+  secondary: "active",
+  tertiary: "active",
+  danger: "error"
+};
+const typographySizes = {
+  normal: "normal.label02",
+  compact: "normal.label03"
+};
+
+export { BUTTON_COLOR, BUTTON_ICON_COLOR, typographySizes };

package/dist/vanilla/src/components/Controls/CheckBox/CheckBox.js

@@ -0,0 +1,79 @@
+import { jsxs, jsx } from '@emotion/react/jsx-runtime';
+import React__default from 'react';
+import { Checkbox } from 'react-aria-components';
+import Box from '../../Box/Box.js';
+import { Icon } from '../../../icon/Icon.js';
+import ControlHelpText from '../ControlLabel/ControlHelpText.js';
+import ControlLabelText from '../ControlLabel/ControlLabelText.js';
+import { checkboxWrapperStyles, checkboxStyles } from './CheckBox.style.js';
+
+const CheckBox = React__default.forwardRef((props, ref) => {
+  const {
+    id,
+    value,
+    isSelected,
+    onChange,
+    isIndeterminate,
+    isDisabled,
+    labelConfig = {},
+    dataTestPrefixId = "ictinus",
+    children
+  } = props;
+  const { placement = "right", size = "normal", helpText, sx } = labelConfig;
+  return /* @__PURE__ */ jsxs("div", { css: checkboxWrapperStyles({ sx }), children: [
+    /* @__PURE__ */ jsx(
+      Checkbox,
+      {
+        id,
+        css: checkboxStyles(),
+        isSelected,
+        onChange,
+        isIndeterminate,
+        isDisabled,
+        value,
+        ref,
+        "data-testid": `${dataTestPrefixId}${value ? `_${value}` : ""}_checkbox`,
+        children: /* @__PURE__ */ jsxs(
+          Box,
+          {
+            display: "flex",
+            alignItems: "center",
+            gap: "5",
+            flexDirection: placement === "left" ? "row-reverse" : "row",
+            justifyContent: placement === "left" ? "space-between" : "unset",
+            children: [
+              /* @__PURE__ */ jsx(Box, { "data-role": "checkbox-icon", children: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+                Icon,
+                {
+                  name: isIndeterminate ? "minus" : "check",
+                  size: "md",
+                  color: "inverted.primary",
+                  "data-testid": `${dataTestPrefixId}${value ? `_${value}` : ""}_${isIndeterminate ? "minus" : isSelected ? "checkmark" : "unselected"}`
+                }
+              ) }) }),
+              children && /* @__PURE__ */ jsx(
+                ControlLabelText,
+                {
+                  size,
+                  dataTestPrefixId: `${dataTestPrefixId}_checkbox_${value?.split(" ").join("_")}`,
+                  children
+                }
+              )
+            ]
+          }
+        )
+      }
+    ),
+    helpText && /* @__PURE__ */ jsx(Box, { ...placement === "left" ? { pr: "9" } : { pl: "9" }, "data-disabled": isDisabled, children: /* @__PURE__ */ jsx(
+      ControlHelpText,
+      {
+        helpText,
+        dataTestPrefixId: `${dataTestPrefixId}_checkbox_${value?.split(" ").join("_")}`,
+        children: helpText
+      }
+    ) })
+  ] });
+});
+CheckBox.displayName = "CheckBox";
+
+export { CheckBox as default };

package/dist/vanilla/src/components/Controls/CheckBox/CheckBox.style.js

@@ -0,0 +1,77 @@
+import { css } from '@emotion/react';
+import { vars } from '@orfium/tokens';
+
+const checkboxWrapperStyles = ({ sx }) => (theme) => {
+  return css`
+      width: fit-content;
+
+      [data-disabled] {
+        opacity: ${theme.tokens.disabledState.get("default")};
+        cursor: not-allowed;
+      }
+
+      ${sx};
+    `;
+};
+const checkboxStyles = () => (theme) => {
+  return css`
+      display: block;
+      cursor: pointer;
+      position: relative;
+
+      [data-role='checkbox-icon'] > div {
+        transition: all 0.2s;
+        width: ${vars.sizing["5"]};
+        height: ${vars.sizing["5"]};
+        align-items: center;
+        box-sizing: border-box;
+        display: flex;
+
+        border: ${vars["border-width"]["2"]} solid ${vars.color["border-color"].interactive.default};
+        border-radius: ${vars["border-radius"]["2"]};
+      }
+
+      svg {
+        visibility: hidden;
+        opacity: 0;
+      }
+
+      &[data-hovered='true'],
+      &[data-focus-visible='true'] {
+        [data-role='checkbox-icon'] {
+          transition: all 0.2s;
+          background: ${theme.tokens.state.get("backgroundColor.hover")};
+          box-shadow: 0px 0px 0px 8px ${theme.tokens.state.get("backgroundColor.hover")};
+          border-radius: 100%;
+        }
+      }
+
+      &[data-selected='true'],
+      &[data-indeterminate='true'] {
+        [data-role='checkbox-icon'] > div {
+          transition: all 0.2s;
+
+          border-color: ${vars.color["border-color"].decorative.transparent};
+          background: ${vars.color.palette.primary.base};
+        }
+
+        svg {
+          visibility: visible;
+          opacity: 1;
+          transition: all 0.2s;
+        }
+      }
+
+      &[data-disabled='true'] {
+        &:hover {
+          background: none;
+          box-shadow: none;
+        }
+
+        opacity: ${theme.tokens.disabledState.get("default")};
+        cursor: not-allowed;
+      }
+    `;
+};
+
+export { checkboxStyles, checkboxWrapperStyles };

package/dist/vanilla/src/components/Controls/ControlLabel/ControlHelpText.js

@@ -0,0 +1,8 @@
+import { jsx } from '@emotion/react/jsx-runtime';
+import { helpTextStyles } from './ControlLabel.style.js';
+
+const ControlHelpText = ({ helpText, dataTestPrefixId }) => {
+  return helpText ? /* @__PURE__ */ jsx("div", { css: helpTextStyles(), "data-testid": `${dataTestPrefixId}_helpText`, children: helpText }) : null;
+};
+
+export { ControlHelpText as default };

package/dist/vanilla/src/components/Controls/ControlLabel/ControlLabel.style.js

@@ -0,0 +1,23 @@
+import { css } from '@emotion/react';
+import { vars } from '@orfium/tokens';
+import { generateStylesFromTokens } from '../../Typography/utils.js';
+
+const labelSize = {
+  normal: "normal.body02",
+  large: "normal.title01"
+};
+const labelStyles = ({ size = "normal" }) => (theme) => {
+  return css`
+      ${generateStylesFromTokens(theme.tokens.typography.get(labelSize[size]))};
+      color: ${vars.color.text.default.primary};
+    `;
+};
+const helpTextStyles = () => (theme) => {
+  return css`
+      ${generateStylesFromTokens(theme.tokens.typography.get("normal.body03"))};
+      color: ${vars.color.text.default.secondary};
+      padding-top: ${vars.spacing["2"]};
+    `;
+};
+
+export { helpTextStyles, labelStyles };

package/dist/vanilla/src/components/Controls/ControlLabel/ControlLabelText.js

@@ -0,0 +1,8 @@
+import { jsx, Fragment } from '@emotion/react/jsx-runtime';
+import { labelStyles } from './ControlLabel.style.js';
+
+const ControlLabelText = ({ size, dataTestPrefixId, children }) => {
+  return typeof children === "string" ? /* @__PURE__ */ jsx("div", { css: labelStyles({ size }), "data-testid": `${dataTestPrefixId}_label`, children }) : /* @__PURE__ */ jsx(Fragment, { children });
+};
+
+export { ControlLabelText as default };

package/dist/vanilla/src/components/Controls/Radio/Radio.js

@@ -0,0 +1,52 @@
+import { jsxs, jsx } from '@emotion/react/jsx-runtime';
+import useCombinedRefs from '../../../hooks/useCombinedRefs.js';
+import * as React from 'react';
+import { useRadio, useFocusRing, VisuallyHidden, mergeProps } from 'react-aria';
+import Box from '../../Box/Box.js';
+import ControlHelpText from '../ControlLabel/ControlHelpText.js';
+import ControlLabelText from '../ControlLabel/ControlLabelText.js';
+import './components/RadioGroup/RadioGroup.js';
+import { useRadioGroupContent } from './components/RadioGroup/RadioGroupContext.js';
+import { radioContainerStyles } from './Radio.style.js';
+
+const Radio = React.forwardRef((props, ref) => {
+  const { id, value, labelConfig = {}, dataTestPrefixId, children } = props;
+  const { placement = "right", size = "normal", helpText, sx } = labelConfig;
+  const inputRef = React.useRef(null);
+  const combinedRefs = useCombinedRefs(inputRef, ref);
+  const state = useRadioGroupContent();
+  const radioProps = useRadio(props, state ?? {}, inputRef);
+  const { inputProps, isSelected, isDisabled } = state ? radioProps : props;
+  const { isFocusVisible, focusProps } = useFocusRing();
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-testid": `${dataTestPrefixId}_radio_${value.split(" ").join("_")}_container`,
+      css: radioContainerStyles({ placement, sx, isFocusVisible }),
+      children: [
+        /* @__PURE__ */ jsxs("label", { "data-selected": isSelected, "data-disabled": isDisabled, children: [
+          /* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsx("input", { id, ...mergeProps(inputProps, focusProps), ref: combinedRefs, tabIndex: 0 }) }),
+          children && /* @__PURE__ */ jsx(
+            ControlLabelText,
+            {
+              size,
+              dataTestPrefixId: `${dataTestPrefixId}_radio_${value?.split(" ").join("_")}`,
+              children
+            }
+          )
+        ] }),
+        helpText && /* @__PURE__ */ jsx(Box, { ...placement === "left" ? { pr: "9" } : { pl: "9" }, "data-disabled": isDisabled, children: /* @__PURE__ */ jsx(
+          ControlHelpText,
+          {
+            helpText,
+            dataTestPrefixId: `${dataTestPrefixId}_radio_${value?.split(" ").join("_")}`,
+            children: helpText
+          }
+        ) })
+      ]
+    }
+  );
+});
+Radio.displayName = "Radio";
+
+export { Radio as default };

package/dist/vanilla/src/components/Controls/Radio/Radio.style.js

@@ -0,0 +1,91 @@
+import { css } from '@emotion/react';
+import { vars } from '@orfium/tokens';
+
+const radioContainerStyles = ({
+  placement = "right",
+  sx,
+  isFocusVisible
+}) => (theme) => {
+  return css`
+      label {
+        display: flex;
+        flex-direction: ${placement === "right" ? "row" : "row-reverse"};
+        align-items: center;
+        justify-content: ${placement === "left" ? "space-between" : "unset"};
+        gap: ${vars.spacing["5"]};
+
+        position: relative;
+        cursor: pointer;
+
+        &:before {
+          content: '';
+          display: inline-block;
+          width: ${vars.sizing["5"]};
+          height: ${vars.sizing["5"]};
+          box-sizing: border-box;
+          border: ${vars["border-width"]["2"]} solid
+            ${vars.color["border-color"].interactive.default};
+          border-radius: ${vars["border-radius"]["7"]};
+          transition: all 200ms;
+          background: ${vars.color.transparent["1"]};
+
+          ${isFocusVisible && `
+            background: ${theme.tokens.state.get("backgroundColor.hover")};
+            box-shadow: 0px 0px 0px 8px ${theme.tokens.state.get("backgroundColor.hover")};
+          `}
+        }
+
+        &:hover::before {
+          background: ${theme.tokens.state.get("backgroundColor.hover")};
+          box-shadow: 0px 0px 0px 8px ${theme.tokens.state.get("backgroundColor.hover")};
+        }
+
+        &[data-selected='true'] {
+          &:before {
+            border-color: ${vars.color.palette.primary.base};
+            border-radius: 50%;
+          }
+
+          &:hover::before {
+            background: none;
+            box-shadow: none;
+          }
+
+          &:after {
+            content: '';
+            display: block;
+            position: absolute;
+            border-radius: 50%;
+            width: ${vars.sizing["3"]};
+            height: ${vars.sizing["3"]};
+            background: ${vars.color.palette.primary.base};
+            ${placement === "right" ? "left" : "right"}: 4px;
+            animation: circle 0.15s ease-in-out;
+          }
+        }
+
+        @keyframes circle {
+          0% {
+            transform: scale(0);
+          }
+          100% {
+            transform: scale(1);
+          }
+        }
+      }
+
+      [data-disabled='true'] {
+        opacity: ${theme.tokens.disabledState.get("default")};
+        cursor: not-allowed;
+
+        &:hover::before {
+          background: none;
+          box-shadow: none;
+        }
+      }
+
+      ${sx};
+    `;
+};
+
+export { radioContainerStyles };

package/dist/vanilla/src/components/Controls/Radio/components/RadioGroup/RadioGroup.js

@@ -0,0 +1,25 @@
+import { jsx } from '@emotion/react/jsx-runtime';
+import * as React from 'react';
+import { useRadioGroup } from 'react-aria';
+import { useRadioGroupState } from 'react-stately';
+import { RadioContext } from './RadioGroupContext.js';
+
+const RadioGroup = React.forwardRef((props, ref) => {
+  const { dataTestPrefixId, sx, children } = props;
+  const state = useRadioGroupState(props);
+  const { radioGroupProps } = useRadioGroup(props, state);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "aria-label": "RadioGroup",
+      ref,
+      ...radioGroupProps,
+      css: sx,
+      "data-testid": `${dataTestPrefixId}_radio_group_container`,
+      children: /* @__PURE__ */ jsx(RadioContext.Provider, { value: state, children })
+    }
+  );
+});
+RadioGroup.displayName = "RadioGroup";
+
+export { RadioGroup as default };

package/dist/vanilla/src/components/Controls/Radio/components/RadioGroup/RadioGroupContext.js

@@ -0,0 +1,6 @@
+import React__default from 'react';
+
+const RadioContext = React__default.createContext(null);
+const useRadioGroupContent = () => React__default.useContext(RadioContext);
+
+export { RadioContext, useRadioGroupContent };

package/dist/vanilla/src/components/Controls/Switch/Switch.js

@@ -0,0 +1,71 @@
+import { jsxs, jsx } from '@emotion/react/jsx-runtime';
+import * as React from 'react';
+import { Switch as Switch$1 } from 'react-aria-components';
+import ControlHelpText from '../ControlLabel/ControlHelpText.js';
+import ControlLabelText from '../ControlLabel/ControlLabelText.js';
+import { rem } from 'polished';
+import Box from '../../Box/Box.js';
+import { switchWrapperStyles, switchStyles } from './Switch.style.js';
+
+const Switch = React.forwardRef((props, ref) => {
+  const {
+    id,
+    value,
+    isSelected,
+    isDisabled,
+    onChange,
+    labelConfig = {},
+    dataTestPrefixId = "ictinus",
+    children
+  } = props;
+  const { placement = "right", size = "normal", helpText, sx } = labelConfig;
+  return /* @__PURE__ */ jsxs("div", { css: switchWrapperStyles({ sx }), children: [
+    /* @__PURE__ */ jsx(
+      Switch$1,
+      {
+        id,
+        value,
+        isSelected,
+        isDisabled,
+        onChange,
+        css: switchStyles({ placement }),
+        "data-testid": `${dataTestPrefixId}${value ? `_${value}` : ""}_switch`,
+        ref,
+        children: /* @__PURE__ */ jsxs(
+          Box,
+          {
+            display: "flex",
+            gap: "5",
+            flexDirection: placement === "left" ? "row-reverse" : "row",
+            justifyContent: placement === "left" ? "space-between" : "unset",
+            children: [
+              /* @__PURE__ */ jsxs(Box, { children: [
+                /* @__PURE__ */ jsx("div", { className: "bar" }),
+                /* @__PURE__ */ jsx("div", { className: "indicator" })
+              ] }),
+              children && /* @__PURE__ */ jsx(
+                ControlLabelText,
+                {
+                  size,
+                  dataTestPrefixId: `${dataTestPrefixId}_switch_${value?.split(" ").join("_")}`,
+                  children
+                }
+              )
+            ]
+          }
+        )
+      }
+    ),
+    helpText && /* @__PURE__ */ jsx(
+      Box,
+      {
+        css: { ...placement === "left" ? { paddingRight: rem(48) } : { paddingLeft: rem(48) } },
+        "data-disabled": isDisabled,
+        children: /* @__PURE__ */ jsx(ControlHelpText, { helpText, children: helpText })
+      }
+    )
+  ] });
+});
+Switch.displayName = "Switch";
+
+export { Switch as default };

package/dist/vanilla/src/components/Controls/Switch/Switch.style.js

@@ -0,0 +1,82 @@
+import { css } from '@emotion/react';
+import { vars } from '@orfium/tokens';
+
+const CONTROLS_HEIGHTS = {
+  height: {
+    track: vars.sizing["2"]
+  },
+  width: {
+    track: vars.sizing["9"]
+  }
+};
+const switchWrapperStyles = ({ sx }) => (theme) => css`
+    [data-disabled] {
+      opacity: ${theme.tokens.disabledState.get("default")};
+      cursor: not-allowed;
+    }
+
+    ${sx};
+  `;
+const switchStyles = ({ placement = "right" }) => (theme) => {
+  return css`
+      & > div > div:first-of-type {
+        display: flex;
+        flex-direction: ${placement === "right" ? "row" : "row-reverse"};
+        align-items: center;
+        gap: ${vars.spacing["5"]};
+        position: relative;
+      }
+      cursor: pointer;
+
+      .bar {
+        width: ${CONTROLS_HEIGHTS.width.track};
+        height: ${CONTROLS_HEIGHTS.height.track};
+        background: ${vars.color.palette["primary-alt"].contrast};
+        position: absolute;
+        border-radius: ${vars["border-radius"]["7"]};
+      }
+
+      .indicator {
+        width: ${CONTROLS_HEIGHTS.width.track};
+        height: ${vars.sizing["5"]};
+        box-sizing: border-box;
+        position: relative;
+
+        &:before {
+          content: '';
+          box-sizing: border-box;
+          display: block;
+          width: ${vars.sizing["5"]};
+          height: ${vars.sizing["5"]};
+          background: ${vars.color.background.default};
+          border: ${vars["border-width"]["2"]} solid
+            ${vars.color["border-color"].interactive.default};
+          border-radius: 100%;
+          transition: all 200ms;
+        }
+      }
+
+      &[data-hovered],
+      &[data-focus-visible='true'] {
+        .indicator {
+          &:before {
+            transition: all 0.2s;
+            box-shadow: 0px 0px 0px 8px ${theme.tokens.state.get("backgroundColor.hover")};
+            border-radius: 100%;
+          }
+        }
+      }
+
+      &[data-selected] {
+        .indicator {
+          &:before {
+            transform: translateX(80%);
+            background: ${vars.color.palette.primary.base};
+            border-color: ${vars.color["border-color"].interactive.active};
+          }
+        }
+      }
+    `;
+};
+
+export { switchStyles, switchWrapperStyles };

package/dist/vanilla/src/components/IconButton/IconButton.js

@@ -0,0 +1,30 @@
+import { jsx } from '@emotion/react/jsx-runtime';
+import React__default from 'react';
+import ButtonBase from '../ButtonBase/ButtonBase.js';
+import { BUTTON_ICON_COLOR } from '../ButtonBase/constants.js';
+import { Icon } from '../../icon/Icon.js';
+
+const IconButton = React__default.forwardRef((props, ref) => {
+  const { iconName, size = "normal", type = "primary", shape = "circle", dataTestPrefixId } = props;
+  return /* @__PURE__ */ jsx(
+    ButtonBase,
+    {
+      ...props,
+      ref,
+      isIconButton: true,
+      shape,
+      dataTestPrefixId: dataTestPrefixId ? `${dataTestPrefixId}-icon-` : "icon-",
+      children: /* @__PURE__ */ jsx(
+        Icon,
+        {
+          size: size === "compact" ? "sm" : "md",
+          name: iconName,
+          color: BUTTON_ICON_COLOR[type]
+        }
+      )
+    }
+  );
+});
+IconButton.displayName = "IconButton";
+
+export { IconButton as default };

package/dist/vanilla/src/components/Typography/utils.js

@@ -0,0 +1,13 @@
+import { css } from '@emotion/react';
+
+const generateStylesFromTokens = (value) => css`
+  font-family: ${value.fontFamily};
+  font-weight: ${value.fontWeight};
+  line-height: ${value.lineHeight};
+  font-size: ${value.fontSize};
+  letter-spacing: ${value.letterSpacing};
+  text-transform: ${value?.textCase};
+  text-decoration: ${value?.textDecoration};
+`;
+
+export { generateStylesFromTokens };

package/dist/vanilla/src/components/utils/Slots.js

@@ -0,0 +1,12 @@
+import '@emotion/react/jsx-runtime';
+import { createContext, useContext } from 'react';
+import { mergeProps } from 'react-aria';
+
+const SlotContext = createContext(null);
+function useSlotProps(props, defaultSlot) {
+  const slot = props["data-slot"] || defaultSlot;
+  const { [slot]: slotProps = {} } = useContext(SlotContext) || {};
+  return mergeProps(props, mergeProps(slotProps, { "data-slot": slot }));
+}
+
+export { useSlotProps };

package/dist/vanilla/src/components/utils/useDOMRef.js

@@ -0,0 +1,12 @@
+import { useRef, useImperativeHandle } from 'react';
+
+function createDOMRef(ref) {
+  return ref.current;
+}
+function useDOMRef(ref) {
+  const domRef = useRef(null);
+  useImperativeHandle(ref, () => createDOMRef(domRef));
+  return domRef;
+}
+
+export { createDOMRef, useDOMRef };

package/dist/vanilla/src/data-table/DataTable.js

@@ -0,0 +1,23 @@
+import { jsx } from '@emotion/react/jsx-runtime';
+import { forwardRef, useState } from 'react';
+import { Box } from '../../Box/Box.js';
+import '../sprinkles/sprinkles.js';
+import { DataTableProvider } from './DataTableContext.js';
+
+const DataTable = forwardRef(
+  ({ children, table, ...props }, ref) => {
+    const [highlightedIndex, setHighlightedIndex] = useState(-1);
+    return /* @__PURE__ */ jsx(Box, { display: "flex", flexDirection: "column", maxH: "full", maxW: "full", ref, ...props, children: /* @__PURE__ */ jsx(
+      DataTableProvider,
+      {
+        highlightedIndex,
+        setHighlightedIndex,
+        table,
+        children
+      }
+    ) });
+  }
+);
+DataTable.displayName = "DataTable";
+
+export { DataTable };