@quen-ui/components 0.0.14 → 1.0.1

package/dist/Select/useSelect.es.js

@@ -23,36 +23,30 @@ 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());
-    })) ?? [];
+    return props.items?.filter((item) => {
+      return props.getItemLabel?.(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);
+        props.onChange?.(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);
+        multiProps.onChange?.(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;
+      const item = props.items.find((i) => props.getItemValue?.(i) === value) ?? null;
       if (props.onChangeReturnValue === "item") {
-        (_c = singleProps.onChange) == null ? void 0 : _c.call(singleProps, item || null);
+        singleProps.onChange?.(item || null);
       } else {
-        (_d = singleProps.onChange) == null ? void 0 : _d.call(singleProps, value);
+        singleProps.onChange?.(value);
       }
       setCurrentValue(value || null);
     }

package/dist/Skeleton/Skeleton.cjs.js

@@ -0,0 +1,35 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const styles = require("./styles.cjs.js");
+const Flex = require("../Flex/Flex.cjs.js");
+const Skeleton = ({
+  width = "100%",
+  animation,
+  children,
+  variant = "rect",
+  style,
+  className,
+  lines = 1,
+  loading = true,
+  height = "100%"
+}) => {
+  if (!loading) {
+    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
+  }
+  if (variant === "text" && lines > 1) {
+    return /* @__PURE__ */ jsxRuntime.jsx(Flex, { direction: "column", gap: "m", style, className, children: Array.from({ length: lines }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(styles.SkeletonLineStyled, { width: width || "100%", variant: "text", animation, "data-testid": "skeleton-line" }, i)) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    styles.SkeletonStyled,
+    {
+      "data-testid": "skeleton",
+      width,
+      height,
+      variant,
+      animation,
+      style,
+      className
+    }
+  );
+};
+module.exports = Skeleton;

package/dist/Skeleton/Skeleton.d.ts

@@ -0,0 +1,3 @@
+import { ISkeletonProps } from './types';
+declare const Skeleton: ({ width, animation, children, variant, style, className, lines, loading, height }: ISkeletonProps) => import("react/jsx-runtime").JSX.Element;
+export default Skeleton;

package/dist/Skeleton/Skeleton.es.js

@@ -0,0 +1,36 @@
+import { jsx, Fragment } from "react/jsx-runtime";
+import { SkeletonLineStyled, SkeletonStyled } from "./styles.es.js";
+import Flex from "../Flex/Flex.es.js";
+const Skeleton = ({
+  width = "100%",
+  animation,
+  children,
+  variant = "rect",
+  style,
+  className,
+  lines = 1,
+  loading = true,
+  height = "100%"
+}) => {
+  if (!loading) {
+    return /* @__PURE__ */ jsx(Fragment, { children });
+  }
+  if (variant === "text" && lines > 1) {
+    return /* @__PURE__ */ jsx(Flex, { direction: "column", gap: "m", style, className, children: Array.from({ length: lines }).map((_, i) => /* @__PURE__ */ jsx(SkeletonLineStyled, { width: width || "100%", variant: "text", animation, "data-testid": "skeleton-line" }, i)) });
+  }
+  return /* @__PURE__ */ jsx(
+    SkeletonStyled,
+    {
+      "data-testid": "skeleton",
+      width,
+      height,
+      variant,
+      animation,
+      style,
+      className
+    }
+  );
+};
+export {
+  Skeleton as default
+};

package/dist/Skeleton/SkeletonAvatar.cjs.js

@@ -0,0 +1,17 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const theme = require("@quen-ui/theme");
+const Skeleton = require("./Skeleton.cjs.js");
+const SkeletonAvatar = ({ size = "m", ...props }) => {
+  const theme$1 = theme.useTheme();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Skeleton,
+    {
+      width: theme$1.control.height[size],
+      height: theme$1.control.height[size],
+      variant: "rounded",
+      ...props
+    }
+  );
+};
+module.exports = SkeletonAvatar;

package/dist/Skeleton/SkeletonAvatar.d.ts

@@ -0,0 +1,3 @@
+import { ISkeletonAvatarProps } from './types';
+declare const SkeletonAvatar: ({ size, ...props }: ISkeletonAvatarProps) => import("react/jsx-runtime").JSX.Element;
+export default SkeletonAvatar;

package/dist/Skeleton/SkeletonAvatar.es.js

@@ -0,0 +1,18 @@
+import { jsx } from "react/jsx-runtime";
+import { useTheme } from "@quen-ui/theme";
+import Skeleton from "./Skeleton.es.js";
+const SkeletonAvatar = ({ size = "m", ...props }) => {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsx(
+    Skeleton,
+    {
+      width: theme.control.height[size],
+      height: theme.control.height[size],
+      variant: "rounded",
+      ...props
+    }
+  );
+};
+export {
+  SkeletonAvatar as default
+};

package/dist/Skeleton/SkeletonButton.cjs.js

@@ -0,0 +1,21 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const theme = require("@quen-ui/theme");
+const Skeleton = require("./Skeleton.cjs.js");
+const SkeletonButton = ({
+  width = "100%",
+  size = "m",
+  ...props
+}) => {
+  const theme$1 = theme.useTheme();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Skeleton,
+    {
+      width,
+      height: theme$1.control.height[size],
+      variant: "rounded",
+      ...props
+    }
+  );
+};
+module.exports = SkeletonButton;

package/dist/Skeleton/SkeletonButton.d.ts

@@ -0,0 +1,3 @@
+import { ISkeletonButtonProps } from './types';
+declare const SkeletonButton: ({ width, size, ...props }: ISkeletonButtonProps) => import("react/jsx-runtime").JSX.Element;
+export default SkeletonButton;

package/dist/Skeleton/SkeletonButton.es.js

@@ -0,0 +1,22 @@
+import { jsx } from "react/jsx-runtime";
+import { useTheme } from "@quen-ui/theme";
+import Skeleton from "./Skeleton.es.js";
+const SkeletonButton = ({
+  width = "100%",
+  size = "m",
+  ...props
+}) => {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsx(
+    Skeleton,
+    {
+      width,
+      height: theme.control.height[size],
+      variant: "rounded",
+      ...props
+    }
+  );
+};
+export {
+  SkeletonButton as default
+};

package/dist/Skeleton/SkeletonCard.cjs.js

@@ -0,0 +1,15 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const Skeleton = require("./Skeleton.cjs.js");
+const SkeletonTextBlock = require("./SkeletonTextBlock.cjs.js");
+const Flex = require("../Flex/Flex.cjs.js");
+const SkeletonCard = ({ loading, children, ...props }) => {
+  if (!loading) {
+    return children;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(Flex, { direction: "column", gap: "m", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { width: "100%", height: 160, variant: "rounded", ...props, loading }),
+    /* @__PURE__ */ jsxRuntime.jsx(SkeletonTextBlock, { lines: 3, ...props, loading })
+  ] });
+};
+module.exports = SkeletonCard;

package/dist/Skeleton/SkeletonCard.d.ts

@@ -0,0 +1,3 @@
+import { ISkeletonProps } from './types';
+declare const SkeletonCard: ({ loading, children, ...props }: Partial<ISkeletonProps>) => string | number | bigint | boolean | Iterable<import('react').ReactNode> | Promise<string | number | bigint | boolean | import('react').ReactPortal | import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>> | Iterable<import('react').ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | null | undefined;
+export default SkeletonCard;

package/dist/Skeleton/SkeletonCard.es.js

@@ -0,0 +1,16 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import Skeleton from "./Skeleton.es.js";
+import SkeletonTextBlock from "./SkeletonTextBlock.es.js";
+import Flex from "../Flex/Flex.es.js";
+const SkeletonCard = ({ loading, children, ...props }) => {
+  if (!loading) {
+    return children;
+  }
+  return /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: "m", children: [
+    /* @__PURE__ */ jsx(Skeleton, { width: "100%", height: 160, variant: "rounded", ...props, loading }),
+    /* @__PURE__ */ jsx(SkeletonTextBlock, { lines: 3, ...props, loading })
+  ] });
+};
+export {
+  SkeletonCard as default
+};

package/dist/Skeleton/SkeletonLayout.cjs.js

@@ -0,0 +1,60 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const SkeletonAvatar = require("./SkeletonAvatar.cjs.js");
+const SkeletonTextBlock = require("./SkeletonTextBlock.cjs.js");
+const SkeletonButton = require("./SkeletonButton.cjs.js");
+const Flex = require("../Flex/Flex.cjs.js");
+const SkeletonLayout = ({
+  loading,
+  children,
+  schema,
+  direction,
+  gap = "m",
+  style,
+  className,
+  animation
+}) => {
+  if (!loading) {
+    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
+  }
+  if (!schema) {
+    return null;
+  }
+  const layout = [];
+  if (schema.avatar) {
+    const size = typeof schema.avatar === "object" ? schema.avatar.size : "m";
+    layout.push(
+      /* @__PURE__ */ jsxRuntime.jsx(SkeletonAvatar, { size, animation }, "avatar")
+    );
+  }
+  if (schema.title) {
+    const lines = typeof schema.title === "number" ? schema.title : 1;
+    layout.push(
+      /* @__PURE__ */ jsxRuntime.jsx(SkeletonTextBlock, { lines, animation }, "title")
+    );
+  }
+  if (schema.text) {
+    layout.push(
+      /* @__PURE__ */ jsxRuntime.jsx(SkeletonTextBlock, { lines: schema.text, animation }, "text")
+    );
+  }
+  if (schema.button) {
+    const option = typeof schema.button === "object" ? schema.button : { width: "100%", size: "m" };
+    layout.push(
+      /* @__PURE__ */ jsxRuntime.jsx(
+        SkeletonButton,
+        {
+          width: option.width,
+          size: option.size,
+          animation
+        },
+        "button"
+      )
+    );
+  }
+  if (schema.custom) {
+    layout.push(schema.custom);
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(Flex, { direction, gap, style, className, children: layout });
+};
+module.exports = SkeletonLayout;

package/dist/Skeleton/SkeletonLayout.d.ts

@@ -0,0 +1,3 @@
+import { ISkeletonLayoutProps } from './types';
+declare const SkeletonLayout: ({ loading, children, schema, direction, gap, style, className, animation }: ISkeletonLayoutProps) => import("react/jsx-runtime").JSX.Element | null;
+export default SkeletonLayout;

package/dist/Skeleton/SkeletonLayout.es.js

@@ -0,0 +1,61 @@
+import { jsx, Fragment } from "react/jsx-runtime";
+import SkeletonAvatar from "./SkeletonAvatar.es.js";
+import SkeletonTextBlock from "./SkeletonTextBlock.es.js";
+import SkeletonButton from "./SkeletonButton.es.js";
+import Flex from "../Flex/Flex.es.js";
+const SkeletonLayout = ({
+  loading,
+  children,
+  schema,
+  direction,
+  gap = "m",
+  style,
+  className,
+  animation
+}) => {
+  if (!loading) {
+    return /* @__PURE__ */ jsx(Fragment, { children });
+  }
+  if (!schema) {
+    return null;
+  }
+  const layout = [];
+  if (schema.avatar) {
+    const size = typeof schema.avatar === "object" ? schema.avatar.size : "m";
+    layout.push(
+      /* @__PURE__ */ jsx(SkeletonAvatar, { size, animation }, "avatar")
+    );
+  }
+  if (schema.title) {
+    const lines = typeof schema.title === "number" ? schema.title : 1;
+    layout.push(
+      /* @__PURE__ */ jsx(SkeletonTextBlock, { lines, animation }, "title")
+    );
+  }
+  if (schema.text) {
+    layout.push(
+      /* @__PURE__ */ jsx(SkeletonTextBlock, { lines: schema.text, animation }, "text")
+    );
+  }
+  if (schema.button) {
+    const option = typeof schema.button === "object" ? schema.button : { width: "100%", size: "m" };
+    layout.push(
+      /* @__PURE__ */ jsx(
+        SkeletonButton,
+        {
+          width: option.width,
+          size: option.size,
+          animation
+        },
+        "button"
+      )
+    );
+  }
+  if (schema.custom) {
+    layout.push(schema.custom);
+  }
+  return /* @__PURE__ */ jsx(Flex, { direction, gap, style, className, children: layout });
+};
+export {
+  SkeletonLayout as default
+};

package/dist/Skeleton/SkeletonList.cjs.js

@@ -0,0 +1,39 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const Flex = require("../Flex/Flex.cjs.js");
+const SkeletonList = ({
+  gap = "m",
+  rowGap,
+  columnGap,
+  direction = "column",
+  count,
+  align,
+  justify,
+  wrap,
+  style,
+  className,
+  children,
+  loading,
+  skeleton
+}) => {
+  if (!loading) {
+    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Flex,
+    {
+      direction,
+      gap,
+      rowGap,
+      columnGap,
+      align,
+      justify,
+      wrap,
+      style,
+      className,
+      children: Array.from({ length: count }).map((_, i) => React.cloneElement(skeleton, { key: i }))
+    }
+  );
+};
+module.exports = SkeletonList;

package/dist/Skeleton/SkeletonList.d.ts

@@ -0,0 +1,3 @@
+import { TSkeletonListProps } from './types';
+declare const SkeletonList: ({ gap, rowGap, columnGap, direction, count, align, justify, wrap, style, className, children, loading, skeleton, }: TSkeletonListProps) => import("react/jsx-runtime").JSX.Element;
+export default SkeletonList;

package/dist/Skeleton/SkeletonList.es.js

@@ -0,0 +1,40 @@
+import { jsx, Fragment } from "react/jsx-runtime";
+import { cloneElement } from "react";
+import Flex from "../Flex/Flex.es.js";
+const SkeletonList = ({
+  gap = "m",
+  rowGap,
+  columnGap,
+  direction = "column",
+  count,
+  align,
+  justify,
+  wrap,
+  style,
+  className,
+  children,
+  loading,
+  skeleton
+}) => {
+  if (!loading) {
+    return /* @__PURE__ */ jsx(Fragment, { children });
+  }
+  return /* @__PURE__ */ jsx(
+    Flex,
+    {
+      direction,
+      gap,
+      rowGap,
+      columnGap,
+      align,
+      justify,
+      wrap,
+      style,
+      className,
+      children: Array.from({ length: count }).map((_, i) => cloneElement(skeleton, { key: i }))
+    }
+  );
+};
+export {
+  SkeletonList as default
+};

package/dist/Skeleton/SkeletonTextBlock.cjs.js

@@ -0,0 +1,7 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const Skeleton = require("./Skeleton.cjs.js");
+const SkeletonTextBlock = ({ lines = 3, ...rest }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { variant: "text", lines, ...rest });
+};
+module.exports = SkeletonTextBlock;

package/dist/Skeleton/SkeletonTextBlock.d.ts

@@ -0,0 +1,5 @@
+import { ISkeletonProps } from './types';
+declare const SkeletonTextBlock: ({ lines, ...rest }: {
+    lines?: number;
+} & Partial<ISkeletonProps>) => import("react/jsx-runtime").JSX.Element;
+export default SkeletonTextBlock;

package/dist/Skeleton/SkeletonTextBlock.es.js

@@ -0,0 +1,8 @@
+import { jsx } from "react/jsx-runtime";
+import Skeleton from "./Skeleton.es.js";
+const SkeletonTextBlock = ({ lines = 3, ...rest }) => {
+  return /* @__PURE__ */ jsx(Skeleton, { variant: "text", lines, ...rest });
+};
+export {
+  SkeletonTextBlock as default
+};

package/dist/Skeleton/index.cjs.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const Skeleton$1 = require("./Skeleton.cjs.js");
+const SkeletonAvatar = require("./SkeletonAvatar.cjs.js");
+const SkeletonButton = require("./SkeletonButton.cjs.js");
+const SkeletonCard = require("./SkeletonCard.cjs.js");
+const SkeletonLayout = require("./SkeletonLayout.cjs.js");
+const SkeletonList = require("./SkeletonList.cjs.js");
+const SkeletonTextBlock = require("./SkeletonTextBlock.cjs.js");
+const Skeleton = Skeleton$1;
+Skeleton.Avatar = SkeletonAvatar;
+Skeleton.Button = SkeletonButton;
+Skeleton.Card = SkeletonCard;
+Skeleton.List = SkeletonList;
+Skeleton.TextBlock = SkeletonTextBlock;
+Skeleton.Layout = SkeletonLayout;
+exports.Skeleton = Skeleton;

package/dist/Skeleton/index.d.ts

@@ -0,0 +1,18 @@
+import { default as SkeletonComponent } from './Skeleton';
+import { default as SkeletonAvatar } from './SkeletonAvatar';
+import { default as SkeletonButton } from './SkeletonButton';
+import { default as SkeletonCard } from './SkeletonCard';
+import { default as SkeletonLayout } from './SkeletonLayout';
+import { default as SkeletonList } from './SkeletonList';
+import { default as SkeletonTextBlock } from './SkeletonTextBlock';
+type TSkeleton = typeof SkeletonComponent & {
+    Avatar: typeof SkeletonAvatar;
+    Button: typeof SkeletonButton;
+    Card: typeof SkeletonCard;
+    List: typeof SkeletonList;
+    Layout: typeof SkeletonLayout;
+    TextBlock: typeof SkeletonTextBlock;
+};
+declare const Skeleton: TSkeleton;
+export { Skeleton };
+export type { ISkeletonProps, ISkeletonAvatarProps, ISkeletonLayoutProps, ISkeletonLayoutSchema, TSkeletonListProps, ISkeletonButtonProps } from './types';

package/dist/Skeleton/index.es.js

@@ -0,0 +1,17 @@
+import Skeleton$1 from "./Skeleton.es.js";
+import SkeletonAvatar from "./SkeletonAvatar.es.js";
+import SkeletonButton from "./SkeletonButton.es.js";
+import SkeletonCard from "./SkeletonCard.es.js";
+import SkeletonLayout from "./SkeletonLayout.es.js";
+import SkeletonList from "./SkeletonList.es.js";
+import SkeletonTextBlock from "./SkeletonTextBlock.es.js";
+const Skeleton = Skeleton$1;
+Skeleton.Avatar = SkeletonAvatar;
+Skeleton.Button = SkeletonButton;
+Skeleton.Card = SkeletonCard;
+Skeleton.List = SkeletonList;
+Skeleton.TextBlock = SkeletonTextBlock;
+Skeleton.Layout = SkeletonLayout;
+export {
+  Skeleton
+};

package/dist/Skeleton/styles.cjs.js

@@ -0,0 +1,59 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const styled = require("styled-components");
+const polished = require("polished");
+const pulse = styled.keyframes`
+  0% { opacity: 1; }
+  50% { opacity: 0.4; }
+  100% { opacity: 1; }
+`;
+const shimmer = styled.keyframes`
+  0% { background-position: 200% 0; }
+  100% { background-position: -200% 0; }
+`;
+const SkeletonStyled = styled.div.withConfig({
+  shouldForwardProp: (prop) => !["animation", "variant", "width", "height"].includes(prop)
+})`
+  position: relative;
+  overflow: hidden;
+  background: ${({ theme }) => theme.components.Skeleton.background};
+  border-radius: 4px;
+  ${({ width }) => width && styled.css`
+      width: ${typeof width === "number" ? `${width}px` : width};
+    `}
+  ${({ height }) => height && styled.css`
+      height: ${typeof height === "number" ? `${height}px` : height};
+    `}
+
+  ${({ variant }) => variant === "circle" && styled.css`
+      border-radius: 50%;
+    `};
+
+  ${({ variant }) => variant === "text" && styled.css`
+      height: 1em;
+      border-radius: 4px;
+    `};
+
+  ${({ variant }) => variant === "rounded" && styled.css`
+      border-radius: 12px;
+    `};
+  ${({ animation }) => animation === "pulse" && styled.css`
+      animation: ${pulse} 1.5s ease-in-out infinite;
+    `};
+
+  ${({ animation }) => animation === "shimmer" && styled.css`
+      background: ${({ theme }) => styled.css`linear-gradient(
+        90deg,
+       ${theme.components.Skeleton.background} 0%,
+       ${polished.rgba(theme.components.Skeleton.background, 0.3)} 50%,
+      ${theme.components.Skeleton.background} 100%
+      )`};
+      background-size: 200% 100%;
+      animation: ${shimmer} 1.6s linear infinite;
+    `}
+`;
+const SkeletonLineStyled = styled(SkeletonStyled)`
+  height: 1em;
+`;
+exports.SkeletonLineStyled = SkeletonLineStyled;
+exports.SkeletonStyled = SkeletonStyled;

package/dist/Skeleton/styles.d.ts

@@ -0,0 +1,3 @@
+import { ISkeletonProps } from './types';
+export declare const SkeletonStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Required<Pick<ISkeletonProps, "variant">> & ISkeletonProps>> & string;
+export declare const SkeletonLineStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof ISkeletonProps> & Required<Pick<ISkeletonProps, "variant">> & ISkeletonProps, never>> & string;