@quen-ui/components 0.0.13

package/dist/Select/useSelect.d.ts

@@ -0,0 +1,150 @@
+import { TSelectProps, TSelectGetItemValue, TSelectSingleValue, TMultiSelectItemOnChange, TSingleSelectItemOnChange, TSingleSelectValueOnChange } from './types';
+export declare function useSelect<ITEM>(props: TSelectProps<ITEM> & Required<Pick<TSelectProps<ITEM>, "getItemValue">>): {
+    items: ITEM[];
+    handleChange: (value: TSelectSingleValue | TSelectSingleValue[] | null) => void;
+    searchValue: string;
+    currentValue: string | string[] | null;
+    size: "l" | "m" | "s" | "xs";
+    onChange?: TSingleSelectValueOnChange;
+    onChangeReturnValue?: "value";
+    value?: TSelectSingleValue | null;
+    multi?: undefined | false;
+    disabled?: boolean;
+    label?: string;
+    required?: boolean;
+    error?: string | boolean;
+    placeholder?: string;
+    leftContent?: React.ReactNode;
+    rightContent?: React.ReactNode;
+    name?: string;
+    className?: string;
+    onBlur?: React.FocusEventHandler;
+    onFocus?: React.FocusEventHandler;
+    onClear?: () => void;
+    clearable?: boolean;
+    getItemDisabled?: import('./types').TSelectGetItemDisabled<ITEM> | undefined;
+    getItemValue: TSelectGetItemValue<ITEM>;
+    getItemLabel?: import('./types').TSelectGetItemLabel<ITEM> | undefined;
+    getItemIcon?: import('./types').TSelectGetItemIcon<ITEM> | undefined;
+    style?: import('react').CSSProperties;
+    messageNoData?: string;
+    notFoundContent?: React.ReactNode;
+    defaultOpen?: boolean;
+    open?: boolean;
+    loading?: boolean;
+    autoFocus?: boolean;
+    id?: string;
+    showSearch?: boolean;
+    zIndex?: number;
+} | {
+    items: ITEM[];
+    handleChange: (value: TSelectSingleValue | TSelectSingleValue[] | null) => void;
+    searchValue: string;
+    currentValue: string | string[] | null;
+    size: "l" | "m" | "s" | "xs";
+    onChange?: import('./types').TMultiSelectValueOnChange;
+    onChangeReturnValue?: "value";
+    value?: TSelectSingleValue[];
+    multi: true;
+    disabled?: boolean;
+    label?: string;
+    required?: boolean;
+    error?: string | boolean;
+    placeholder?: string;
+    leftContent?: React.ReactNode;
+    rightContent?: React.ReactNode;
+    name?: string;
+    className?: string;
+    onBlur?: React.FocusEventHandler;
+    onFocus?: React.FocusEventHandler;
+    onClear?: () => void;
+    clearable?: boolean;
+    getItemDisabled?: import('./types').TSelectGetItemDisabled<ITEM> | undefined;
+    getItemValue: TSelectGetItemValue<ITEM>;
+    getItemLabel?: import('./types').TSelectGetItemLabel<ITEM> | undefined;
+    getItemIcon?: import('./types').TSelectGetItemIcon<ITEM> | undefined;
+    style?: import('react').CSSProperties;
+    messageNoData?: string;
+    notFoundContent?: React.ReactNode;
+    defaultOpen?: boolean;
+    open?: boolean;
+    loading?: boolean;
+    autoFocus?: boolean;
+    id?: string;
+    showSearch?: boolean;
+    zIndex?: number;
+} | {
+    items: ITEM[];
+    handleChange: (value: TSelectSingleValue | TSelectSingleValue[] | null) => void;
+    searchValue: string;
+    currentValue: string | string[] | null;
+    size: "l" | "m" | "s" | "xs";
+    onChange?: TSingleSelectItemOnChange<ITEM> | undefined;
+    onChangeReturnValue: "item";
+    value?: ITEM | null | undefined;
+    multi?: undefined | false;
+    disabled?: boolean;
+    label?: string;
+    required?: boolean;
+    error?: string | boolean;
+    placeholder?: string;
+    leftContent?: React.ReactNode;
+    rightContent?: React.ReactNode;
+    name?: string;
+    className?: string;
+    onBlur?: React.FocusEventHandler;
+    onFocus?: React.FocusEventHandler;
+    onClear?: () => void;
+    clearable?: boolean;
+    getItemDisabled?: import('./types').TSelectGetItemDisabled<ITEM> | undefined;
+    getItemValue: TSelectGetItemValue<ITEM>;
+    getItemLabel?: import('./types').TSelectGetItemLabel<ITEM> | undefined;
+    getItemIcon?: import('./types').TSelectGetItemIcon<ITEM> | undefined;
+    style?: import('react').CSSProperties;
+    messageNoData?: string;
+    notFoundContent?: React.ReactNode;
+    defaultOpen?: boolean;
+    open?: boolean;
+    loading?: boolean;
+    autoFocus?: boolean;
+    id?: string;
+    showSearch?: boolean;
+    zIndex?: number;
+} | {
+    items: ITEM[];
+    handleChange: (value: TSelectSingleValue | TSelectSingleValue[] | null) => void;
+    searchValue: string;
+    currentValue: string | string[] | null;
+    size: "l" | "m" | "s" | "xs";
+    onChange?: TMultiSelectItemOnChange<ITEM> | undefined;
+    onChangeReturnValue?: "item";
+    value?: ITEM[] | undefined;
+    multi: true;
+    disabled?: boolean;
+    label?: string;
+    required?: boolean;
+    error?: string | boolean;
+    placeholder?: string;
+    leftContent?: React.ReactNode;
+    rightContent?: React.ReactNode;
+    name?: string;
+    className?: string;
+    onBlur?: React.FocusEventHandler;
+    onFocus?: React.FocusEventHandler;
+    onClear?: () => void;
+    clearable?: boolean;
+    getItemDisabled?: import('./types').TSelectGetItemDisabled<ITEM> | undefined;
+    getItemValue: TSelectGetItemValue<ITEM>;
+    getItemLabel?: import('./types').TSelectGetItemLabel<ITEM> | undefined;
+    getItemIcon?: import('./types').TSelectGetItemIcon<ITEM> | undefined;
+    style?: import('react').CSSProperties;
+    messageNoData?: string;
+    notFoundContent?: React.ReactNode;
+    defaultOpen?: boolean;
+    open?: boolean;
+    loading?: boolean;
+    autoFocus?: boolean;
+    id?: string;
+    showSearch?: boolean;
+    zIndex?: number;
+};

package/dist/Select/useSelect.es.js

@@ -0,0 +1,72 @@
+import { useState, useMemo } from "react";
+function getDefaultCurrentValue(getItemValue, value) {
+  if (typeof value === "undefined") {
+    return null;
+  }
+  if (typeof value === "string") {
+    return value || null;
+  }
+  if (value === null) {
+    return null;
+  }
+  if (Array.isArray(value)) {
+    return value.map((v) => {
+      if (typeof v === "string" || typeof value === "number") {
+        return v;
+      }
+      return getItemValue(v);
+    });
+  }
+  return getItemValue(value);
+}
+function useSelect(props) {
+  const [searchValue, setSearchValue] = useState("");
+  const [currentValue, setCurrentValue] = useState(getDefaultCurrentValue(props.getItemValue, props.value));
+  const items = useMemo(() => {
+    var _a;
+    return ((_a = props.items) == null ? void 0 : _a.filter((item) => {
+      var _a2;
+      return (_a2 = props.getItemLabel) == null ? void 0 : _a2.call(props, item).toLowerCase().includes(searchValue.toLowerCase());
+    })) ?? [];
+  }, [props.items, searchValue]);
+  function handleChange(value) {
+    var _a, _b, _c, _d;
+    if (props.multi && Array.isArray(value)) {
+      const multiProps = props;
+      if (props.onChangeReturnValue === "value") {
+        (_a = props.onChange) == null ? void 0 : _a.call(props, value);
+      }
+      if (props.onChangeReturnValue === "item") {
+        const items2 = value.map(
+          (v) => props.items.find((i) => props.getItemValue(i) === v)
+        );
+        (_b = multiProps.onChange) == null ? void 0 : _b.call(multiProps, items2);
+      }
+      setCurrentValue(value || null);
+    } else {
+      const singleProps = props;
+      const item = props.items.find((i) => {
+        var _a2;
+        return ((_a2 = props.getItemValue) == null ? void 0 : _a2.call(props, i)) === value;
+      }) ?? null;
+      if (props.onChangeReturnValue === "item") {
+        (_c = singleProps.onChange) == null ? void 0 : _c.call(singleProps, item || null);
+      } else {
+        (_d = singleProps.onChange) == null ? void 0 : _d.call(singleProps, value);
+      }
+      setCurrentValue(value || null);
+    }
+    setSearchValue("");
+  }
+  return {
+    ...props,
+    items,
+    handleChange,
+    searchValue,
+    currentValue,
+    size: props.size || "m"
+  };
+}
+export {
+  useSelect
+};

package/dist/Switch/Switch.cjs.js

@@ -0,0 +1,53 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const styles = require("./styles.cjs.js");
+const Text = require("../typography/Text/Text.cjs.js");
+const Switch = ({
+  className,
+  size = "m",
+  defaultChecked,
+  label,
+  labelPosition = "before",
+  onChange,
+  value,
+  onClick,
+  disabled,
+  style,
+  ...props
+}) => {
+  const handleChange = (e) => {
+    onChange == null ? void 0 : onChange(e.target.checked, e);
+  };
+  const handleClick = (e) => {
+    onClick == null ? void 0 : onClick(e.target.checked, e);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    styles.SwitchWrapperStyled,
+    {
+      disabled,
+      className,
+      style,
+      ...props,
+      children: [
+        label && labelPosition === "after" && /* @__PURE__ */ jsxRuntime.jsx(Text, { size, as: "label", children: label }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          styles.SwitchStyled,
+          {
+            "aria-checked": value,
+            "aria-disabled": disabled,
+            role: "switch",
+            type: "checkbox",
+            size,
+            disabled,
+            onClick: handleClick,
+            onChange: handleChange,
+            defaultChecked,
+            checked: value
+          }
+        ),
+        label && labelPosition === "before" && /* @__PURE__ */ jsxRuntime.jsx(Text, { size, as: "label", children: label })
+      ]
+    }
+  );
+};
+module.exports = Switch;

package/dist/Switch/Switch.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { ISwitchProps } from './types';
+declare const Switch: ({ className, size, defaultChecked, label, labelPosition, onChange, value, onClick, disabled, style, ...props }: ISwitchProps) => React.ReactNode;
+export default Switch;

package/dist/Switch/Switch.es.js

@@ -0,0 +1,54 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { SwitchWrapperStyled, SwitchStyled } from "./styles.es.js";
+import Text from "../typography/Text/Text.es.js";
+const Switch = ({
+  className,
+  size = "m",
+  defaultChecked,
+  label,
+  labelPosition = "before",
+  onChange,
+  value,
+  onClick,
+  disabled,
+  style,
+  ...props
+}) => {
+  const handleChange = (e) => {
+    onChange == null ? void 0 : onChange(e.target.checked, e);
+  };
+  const handleClick = (e) => {
+    onClick == null ? void 0 : onClick(e.target.checked, e);
+  };
+  return /* @__PURE__ */ jsxs(
+    SwitchWrapperStyled,
+    {
+      disabled,
+      className,
+      style,
+      ...props,
+      children: [
+        label && labelPosition === "after" && /* @__PURE__ */ jsx(Text, { size, as: "label", children: label }),
+        /* @__PURE__ */ jsx(
+          SwitchStyled,
+          {
+            "aria-checked": value,
+            "aria-disabled": disabled,
+            role: "switch",
+            type: "checkbox",
+            size,
+            disabled,
+            onClick: handleClick,
+            onChange: handleChange,
+            defaultChecked,
+            checked: value
+          }
+        ),
+        label && labelPosition === "before" && /* @__PURE__ */ jsx(Text, { size, as: "label", children: label })
+      ]
+    }
+  );
+};
+export {
+  Switch as default
+};

package/dist/Switch/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Switch } from './Switch';
+export type { ISwitchProps } from './types';

package/dist/Switch/styles.cjs.js

@@ -0,0 +1,78 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const styled = require("styled-components");
+const polished = require("polished");
+const getSizing = (theme, size) => {
+  const borderGap = polished.math(`${theme.control.borderWidth} * 4`);
+  return {
+    height: theme.control.height[size],
+    borderGap,
+    circleSize: polished.math(`${theme.control.height[size]} - ${borderGap}`)
+  };
+};
+const SwitchWrapperStyled = styled.div`
+  display: flex;
+  gap: 0.75rem;
+  align-items: center;
+  ${({ disabled }) => disabled && styled.css`
+      pointer-events: none;
+    `};
+`;
+const SwitchStyled = styled.input`
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  box-sizing: border-box;
+  width: calc(${({ theme, size }) => getSizing(theme, size).height}* 2);
+  height: ${({ theme, size }) => getSizing(theme, size).height};
+  margin: 0;
+  background-color: ${({ theme }) => theme.colors.gray[4]};
+  border: ${({ theme }) => styled.css`
+    ${theme.control.borderWidth} solid ${theme.colors.grayViolet[9]}
+  `};
+  cursor: pointer;
+  transition:
+    background-color 0.15s,
+    border-color 0.15s;
+  -webkit-appearance: none;
+  border-radius: ${({ theme }) => theme.control.radius};
+
+  &::before {
+    content: "";
+    position: absolute;
+    right: 3px;
+    box-sizing: border-box;
+    width: ${({ theme, size }) => getSizing(theme, size).circleSize};
+    height: ${({ theme, size }) => getSizing(theme, size).circleSize};
+    background-color: ${({ theme }) => theme.colors.grayViolet[9]};
+    border-radius: 1rem;
+    transition:
+      transform 0.15s,
+      background-color 0.15s;
+    ${({ theme, size }) => {
+  const sizing = getSizing(theme, size);
+  return styled.css`
+        transform: translateX(
+          ${polished.math(`(${sizing.height} - ${sizing.borderGap}) * -1`)}
+        );
+      `;
+}};
+  }
+
+  &:checked {
+    background-color: ${({ theme }) => theme.colors.violet[9]};
+
+    &::before {
+      transform: translateX(0);
+    }
+  }
+
+  &:disabled {
+    background-color: ${({ theme }) => theme.colors.gray[2]};
+    &::before {
+      background-color: ${({ theme }) => theme.colors.gray[4]};
+    }
+  }
+`;
+exports.SwitchStyled = SwitchStyled;
+exports.SwitchWrapperStyled = SwitchWrapperStyled;

package/dist/Switch/styles.d.ts

@@ -0,0 +1,7 @@
+import { TQuenSize } from '../types/size';
+export declare const SwitchWrapperStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    disabled?: boolean;
+}>> & string;
+export declare const SwitchStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, {
+    size: TQuenSize;
+}>> & string;

package/dist/Switch/styles.es.js

@@ -0,0 +1,78 @@
+import styled, { css } from "styled-components";
+import { math } from "polished";
+const getSizing = (theme, size) => {
+  const borderGap = math(`${theme.control.borderWidth} * 4`);
+  return {
+    height: theme.control.height[size],
+    borderGap,
+    circleSize: math(`${theme.control.height[size]} - ${borderGap}`)
+  };
+};
+const SwitchWrapperStyled = styled.div`
+  display: flex;
+  gap: 0.75rem;
+  align-items: center;
+  ${({ disabled }) => disabled && css`
+      pointer-events: none;
+    `};
+`;
+const SwitchStyled = styled.input`
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  box-sizing: border-box;
+  width: calc(${({ theme, size }) => getSizing(theme, size).height}* 2);
+  height: ${({ theme, size }) => getSizing(theme, size).height};
+  margin: 0;
+  background-color: ${({ theme }) => theme.colors.gray[4]};
+  border: ${({ theme }) => css`
+    ${theme.control.borderWidth} solid ${theme.colors.grayViolet[9]}
+  `};
+  cursor: pointer;
+  transition:
+    background-color 0.15s,
+    border-color 0.15s;
+  -webkit-appearance: none;
+  border-radius: ${({ theme }) => theme.control.radius};
+
+  &::before {
+    content: "";
+    position: absolute;
+    right: 3px;
+    box-sizing: border-box;
+    width: ${({ theme, size }) => getSizing(theme, size).circleSize};
+    height: ${({ theme, size }) => getSizing(theme, size).circleSize};
+    background-color: ${({ theme }) => theme.colors.grayViolet[9]};
+    border-radius: 1rem;
+    transition:
+      transform 0.15s,
+      background-color 0.15s;
+    ${({ theme, size }) => {
+  const sizing = getSizing(theme, size);
+  return css`
+        transform: translateX(
+          ${math(`(${sizing.height} - ${sizing.borderGap}) * -1`)}
+        );
+      `;
+}};
+  }
+
+  &:checked {
+    background-color: ${({ theme }) => theme.colors.violet[9]};
+
+    &::before {
+      transform: translateX(0);
+    }
+  }
+
+  &:disabled {
+    background-color: ${({ theme }) => theme.colors.gray[2]};
+    &::before {
+      background-color: ${({ theme }) => theme.colors.gray[4]};
+    }
+  }
+`;
+export {
+  SwitchStyled,
+  SwitchWrapperStyled
+};

package/dist/Switch/types.d.ts

@@ -0,0 +1,25 @@
+import { default as React, CSSProperties } from 'react';
+import { TQuenSize } from '../types/size';
+export interface ISwitchProps {
+    /** Controlled state (on/off) */
+    value?: boolean;
+    /** Container class */
+    className?: string;
+    /** Initial state (uncontrolled) */
+    defaultChecked?: boolean;
+    /** State change handler */
+    onChange?: (value: boolean, event: React.ChangeEvent) => void;
+    /** Click event handler */
+    onClick?: (value: boolean, event: React.MouseEvent) => void;
+    /** Visual size */
+    size?: TQuenSize;
+    /** Descriptive text */
+    label?: string;
+    /** Disables interaction */
+    disabled?: boolean;
+    /** Label placement relative to switch */
+    labelPosition?: "after" | "before";
+    /** Inline styles */
+    style?: CSSProperties;
+    [key: string]: any;
+}

package/dist/Tabs/Tab.cjs.js

@@ -0,0 +1,42 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const styles = require("./styles.cjs.js");
+const Tabs = require("./Tabs.cjs.js");
+const Tab = ({
+  children,
+  value,
+  onClick,
+  leftContent,
+  rightContent,
+  disabled,
+  className
+}) => {
+  const context = Tabs.useTabsContext();
+  const [selected, setSelected] = React.useState(
+    (context == null ? void 0 : context.value) === value
+  );
+  React.useEffect(() => {
+    setSelected((context == null ? void 0 : context.value) === value);
+  }, [context == null ? void 0 : context.value]);
+  const handleClick = (event) => {
+    onClick == null ? void 0 : onClick(event);
+    context == null ? void 0 : context.onChange(value);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    styles.TabStyled,
+    {
+      className,
+      size: "m",
+      selected,
+      onClick: handleClick,
+      disabled,
+      children: [
+        leftContent,
+        children,
+        rightContent
+      ]
+    }
+  );
+};
+module.exports = Tab;

package/dist/Tabs/Tab.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { ITabProps } from './types';
+declare const Tab: ({ children, value, onClick, leftContent, rightContent, disabled, className }: ITabProps) => React.ReactNode;
+export default Tab;

package/dist/Tabs/Tab.es.js

@@ -0,0 +1,43 @@
+import { jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { TabStyled } from "./styles.es.js";
+import { useTabsContext } from "./Tabs.es.js";
+const Tab = ({
+  children,
+  value,
+  onClick,
+  leftContent,
+  rightContent,
+  disabled,
+  className
+}) => {
+  const context = useTabsContext();
+  const [selected, setSelected] = useState(
+    (context == null ? void 0 : context.value) === value
+  );
+  useEffect(() => {
+    setSelected((context == null ? void 0 : context.value) === value);
+  }, [context == null ? void 0 : context.value]);
+  const handleClick = (event) => {
+    onClick == null ? void 0 : onClick(event);
+    context == null ? void 0 : context.onChange(value);
+  };
+  return /* @__PURE__ */ jsxs(
+    TabStyled,
+    {
+      className,
+      size: "m",
+      selected,
+      onClick: handleClick,
+      disabled,
+      children: [
+        leftContent,
+        children,
+        rightContent
+      ]
+    }
+  );
+};
+export {
+  Tab as default
+};

package/dist/Tabs/TabPanel.cjs.js

@@ -0,0 +1,14 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const Tabs = require("./Tabs.cjs.js");
+const styles = require("./styles.cjs.js");
+const TabPanel = ({ children, value }) => {
+  const context = Tabs.useTabsContext();
+  if ((context == null ? void 0 : context.keepMounted) === false && context.value === value) {
+    return /* @__PURE__ */ jsxRuntime.jsx(styles.TabPanelStyled, { children });
+  } else if ((context == null ? void 0 : context.keepMounted) === false) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(styles.TabPanelStyled, { style: (context == null ? void 0 : context.value) !== value ? { display: "none" } : {}, children });
+};
+module.exports = TabPanel;

package/dist/Tabs/TabPanel.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { ITabPanelProps } from './types';
+declare const TabPanel: ({ children, value }: ITabPanelProps) => React.ReactNode;
+export default TabPanel;

package/dist/Tabs/TabPanel.es.js

@@ -0,0 +1,15 @@
+import { jsx } from "react/jsx-runtime";
+import { useTabsContext } from "./Tabs.es.js";
+import { TabPanelStyled } from "./styles.es.js";
+const TabPanel = ({ children, value }) => {
+  const context = useTabsContext();
+  if ((context == null ? void 0 : context.keepMounted) === false && context.value === value) {
+    return /* @__PURE__ */ jsx(TabPanelStyled, { children });
+  } else if ((context == null ? void 0 : context.keepMounted) === false) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(TabPanelStyled, { style: (context == null ? void 0 : context.value) !== value ? { display: "none" } : {}, children });
+};
+export {
+  TabPanel as default
+};

package/dist/Tabs/Tabs.cjs.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const TabsContext = React.createContext(null);
+const Tabs = ({ children, defaultValue, keepMounted, onChange }) => {
+  const [value, setValue] = React.useState(defaultValue);
+  const handleChange = (currentValue) => {
+    setValue(currentValue);
+    onChange == null ? void 0 : onChange(currentValue);
+  };
+  const context = React.useMemo(() => ({
+    onChange: handleChange,
+    value,
+    keepMounted
+  }), [value]);
+  return /* @__PURE__ */ jsxRuntime.jsx(TabsContext.Provider, { value: context, children });
+};
+const useTabsContext = () => React.useContext(TabsContext);
+exports.default = Tabs;
+exports.useTabsContext = useTabsContext;