@dotss/ui 0.0.4 → 0.0.6

package/dist/Select/Select.es.js

@@ -0,0 +1,283 @@
+import { jsxs as k, jsx as u } from "@emotion/react/jsx-runtime";
+import { forwardRef as J, useId as N, useRef as y, useState as I, useEffect as j, Children as $, isValidElement as z, cloneElement as Q } from "react";
+import Y from "../Backdrop/Backdrop.es.js";
+import Z from "../Box/Box.es.js";
+import _ from "../Flexbox/Flexbox.es.js";
+import ee from "../Icon/Icon.es.js";
+import x from "@emotion/styled";
+import D from "../utils/getSibling/getSibling.es.js";
+const te = x.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 10px;
+  color: ${({ theme: e }) => e.palette.grey[100]};
+  width: ${({ fullWidth: e }) => e ? "100%" : "328px"};
+  padding: ${({ theme: e }) => `${e.spacing.content(3)}px ${e.spacing.content(4)}px`};
+  border-radius: 10px;
+  cursor: pointer;
+  & > svg {
+    color: inherit;
+  }
+
+  ${({
+  theme: {
+    palette: { grey: e, background: i }
+  },
+  variant: m
+}) => {
+  let r = {};
+  switch (m) {
+    case "outlined":
+      r = {
+        border: `1px solid ${e[50]}`,
+        "&[disabled]": {
+          backgroundColor: e[10],
+          border: `1px solid ${e[30]}`,
+          color: e[30],
+          pointerEvents: "none"
+        }
+      };
+      break;
+    case "filled":
+      r = {
+        border: "1px solid transparent",
+        backgroundColor: i.primary,
+        "&[disabled]": {
+          backgroundColor: e[10],
+          color: e[30],
+          pointerEvents: "none"
+        }
+      };
+      break;
+  }
+  return r;
+}}
+
+  ${({
+  theme: {
+    palette: { brand: e }
+  },
+  isFocused: i
+}) => i ? {
+  border: `1px solid ${e.primary.line}`
+} : {}}
+  
+  ${({ size: e }) => {
+  let i = {};
+  switch (e) {
+    case "large":
+      i = {
+        height: "48px"
+      };
+      break;
+    case "xLarge":
+      i = {
+        height: "56px"
+      };
+      break;
+  }
+  return i;
+}}
+`, oe = x.div`
+  display: flex;
+  width: calc(100% - 24px - 8px);
+  gap: ${({ theme: e }) => `${e.spacing.content(2)}px`};
+  & svg {
+    color: inherit;
+  }
+
+  ${({
+  theme: {
+    typography: e,
+    palette: { grey: i }
+  },
+  value: m
+}) => {
+  const r = {
+    fontSize: e.b2R.size,
+    fontWeight: e.b2R.size,
+    lineHeight: e.b2R.lineHeight,
+    letterSpacing: e.b2R.letterSpacing,
+    "&[disabled]": {
+      color: i[30]
+    }
+  };
+  return m ? {
+    ...r,
+    color: i[100]
+  } : {
+    ...r,
+    color: i[50]
+  };
+}}
+`, ne = x.div`
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`, ie = x.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transform: ${({ isFocused: e }) => e ? "rotate(180deg)" : "rotate(0deg)"};
+  transition: transform 200ms linear;
+`, re = x.ul`
+  position: fixed;
+  max-height: 476px;
+  overflow-y: auto;
+  z-index: 100003;
+  margin-top: ${({ theme: e }) => `${e.spacing.content(1)}px`};
+  display: flex;
+  flex-direction: column;
+  border-radius: 10px;
+  padding: ${({ theme: e }) => `${e.spacing.content(1)}px 0`};
+  background: ${({ theme: e }) => e.palette.grey.white};
+  box-shadow: ${({ theme: { elevation: e } }) => e[4]};
+  transition: opacity 200ms linear;
+  opacity: ${({ isFocused: e }) => e ? 1 : 0};
+`, me = J(function({
+  value: i,
+  onChange: m,
+  open: r,
+  onOpen: v,
+  onClose: S,
+  variant: H = "outlined",
+  size: B = "large",
+  startAdornment: R,
+  placeholder: L = "TEXT",
+  disabled: C = !1,
+  fullWidth: A,
+  children: b,
+  inlineCSS: F,
+  ...h
+}, V) {
+  const q = N(), p = y(null), K = y(null), f = y(""), [l, a] = I(r || !1), [c, s] = I(""), [w, E] = I({ top: 0, bottom: 0, left: 0, width: 0 }), d = (h == null ? void 0 : h.id) || q, P = () => {
+    r === void 0 ? a((t) => !t) : r === !1 && v && typeof v == "function" && v();
+  }, W = (t) => () => {
+    m(t.toString()), O();
+  }, O = () => {
+    r === void 0 ? (a(!1), s("")) : r === !0 && S && typeof S == "function" && S();
+  }, T = (t) => {
+    if (t.preventDefault(), t.code === "Escape" && a(!1), t.code === "Space" || t.code === "Enter")
+      if (f.current ? s(f.current) : c || s(`${d}-0`), l) {
+        if (c) {
+          const o = document.querySelector(
+            `#${CSS.escape(c)}`
+          );
+          o && o.hasAttribute("value") && (f.current = o == null ? void 0 : o.id, W(o.value)());
+        }
+        a(!1);
+      } else
+        a(!0);
+    if (t.code === "ArrowDown" || t.code === "ArrowUp") {
+      if (l || a(!0), f.current ? s(f.current) : s(`${d}-0`), !c) return;
+      const o = document.querySelector(
+        `#${CSS.escape(c)}`
+      );
+      if (!o) return;
+      if (t.code === "ArrowDown") {
+        const n = D(o, "next", { skipDisabled: !0 });
+        n && n.id ? (s(n.id), n.scrollIntoView({ block: "end" })) : s(c);
+      }
+      if (t.code === "ArrowUp") {
+        const n = D(o, "prev", { skipDisabled: !0 });
+        n && n.id && (s(n.id), n.scrollIntoView({ block: "end" }));
+      }
+    }
+    if (t.code === "Home" && s(`${d}-0`), t.code === "End") {
+      const o = $.count(b);
+      s(`${d}-${o - 1}`);
+    }
+  }, U = (t) => {
+    const o = $.map(t, (n) => z(n) && n && n.props.value === i ? n.props.children : null);
+    return o && o.length ? o[0] : "";
+  };
+  return j(() => {
+    const t = () => {
+      if (p.current) {
+        const o = p.current.getBoundingClientRect(), n = $.count(b), g = 40, M = 24, X = g * n > 476 ? 476 : g * n, G = p.current.getBoundingClientRect().bottom + X + M > window.innerHeight;
+        E(G ? {
+          bottom: 24,
+          left: o.left,
+          width: p.current.offsetWidth
+        } : {
+          top: o.top + o.height,
+          left: o.left,
+          width: p.current.offsetWidth
+        });
+      }
+    };
+    return t(), window.addEventListener("resize", t), () => {
+      window.removeEventListener("resize", t);
+    };
+  }, [b]), j(() => {
+    r !== void 0 && a(r);
+  }, [r]), /* @__PURE__ */ k(Z, { ref: V, inlineCSS: { position: "relative" }, children: [
+    /* @__PURE__ */ k(
+      te,
+      {
+        role: "combobox",
+        ref: p,
+        tabIndex: 0,
+        variant: H,
+        size: B,
+        disabled: C,
+        fullWidth: A,
+        isFocused: l,
+        onClick: P,
+        onKeyDown: T,
+        "aria-controls": d,
+        "aria-expanded": l,
+        "aria-haspopup": "listbox",
+        "aria-activedescendant": c,
+        ...h,
+        css: F,
+        children: [
+          /* @__PURE__ */ k(oe, { value: i === "0" || !!i, disabled: C, children: [
+            R && /* @__PURE__ */ u(_, { justifyContent: "center", alignItems: "center", children: R }),
+            /* @__PURE__ */ u(ne, { children: U(b) || L })
+          ] }),
+          /* @__PURE__ */ u(ie, { isFocused: l, children: /* @__PURE__ */ u(ee, { name: "ChevronDownLine", size: "small", color: C ? "grey.30" : "grey.100" }) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ u(
+      Y,
+      {
+        open: l,
+        onClose: O,
+        inlineCSS: { backgroundColor: "transparent" },
+        children: /* @__PURE__ */ u(
+          re,
+          {
+            id: d,
+            role: "listbox",
+            ref: K,
+            tabIndex: -1,
+            isFocused: l,
+            style: {
+              top: w.top,
+              bottom: w.bottom,
+              left: w.left,
+              width: w.width
+            },
+            children: $.map(b, (t, o) => {
+              if (!z(t) || !t.props.value)
+                return null;
+              const n = `${d}-${o}`, g = i === t.props.value;
+              return g && (f.current = n), Q(t, {
+                id: n,
+                selected: g,
+                focused: n === c,
+                onClick: W(t.props.value)
+              });
+            })
+          }
+        )
+      }
+    )
+  ] });
+});
+export {
+  me as default
+};

package/dist/Select/Select.stories.d.ts

@@ -0,0 +1,29 @@
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: import('react').ForwardRefExoticComponent<import('./Select').SelectProps & import('react').RefAttributes<HTMLDivElement>>;
+    parameters: {
+        layout: string;
+    };
+    argTypes: {
+        startAdornment: {
+            control: {
+                disable: true;
+            };
+        };
+        value: {
+            control: {
+                type: "select";
+            };
+            options: string[];
+        };
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const WithVariousOptions: Story;
+export declare const FullWidth: Story;
+export declare const Controlled: Story;

package/dist/Select/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./Select.cjs"),t=require("./Option/Option.cjs");exports.default=e.default;exports.Option=t.default;

package/dist/Select/index.d.ts

@@ -0,0 +1,4 @@
+import { default as Select } from './Select';
+
+export { default as Option } from './Option';
+export default Select;

package/dist/Select/index.es.js

@@ -0,0 +1,6 @@
+import e from "./Select.es.js";
+import { default as a } from "./Option/Option.es.js";
+export {
+  a as Option,
+  e as default
+};

package/dist/Skeleton/Skeleton.cjs

@@ -0,0 +1,38 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const d=require("@emotion/react/jsx-runtime"),c=require("react"),f=require("@emotion/react"),p=require("@emotion/styled"),a=require("../utils/convertNumberToCSSValue.cjs"),g=e=>e&&e.__esModule?e:{default:e},b=g(p),h=f.keyframes`
+  0% {
+    background-position: 100% 100%;
+  }
+  100% {
+    background-position: 0 0;
+  }
+`,m=b.default.div`
+  position: relative;
+  background-color: ${({theme:{palette:{background:e}}})=>e.primary};
+  border-radius: ${({borderRadius:e=0})=>a.default(e)};
+  cursor: wait;
+
+  &::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: no-repeat
+      linear-gradient(
+        90deg,
+        ${({theme:{palette:{grey:e}}})=>e[10]}
+          30%,
+        transparent 50%,
+        ${({theme:{palette:{grey:e}}})=>e[10]}
+          70%
+      );
+    background-size: 350% 350%;
+    border-radius: ${({borderRadius:e=0})=>a.default(e)};
+    animation: ${h} 1.2s infinite;
+  }
+
+  ${({ratio:e})=>{const[t,r]=String(e||"").split(":");return Number.isNaN(t)||Number.isNaN(r)?null:{width:"inherit",paddingTop:`calc(100% / ${t} * ${r})`}}};
+
+  ${({theme:{typography:e},width:t,height:r,textHeight:i,minWidth:n,minHeight:u,maxWidth:s,maxHeight:l})=>{var o;return{width:t,height:((o=e[i])==null?void 0:o.lineHeight)||r,minWidth:n,minHeight:u,maxWidth:s,maxHeight:l}}};
+`,$=c.forwardRef(function({borderRadius:t=4,inlineCSS:r,...i},n){return d.jsx(m,{ref:n,borderRadius:t,...i,css:r,"aria-hidden":"true"})});exports.default=$;

package/dist/Skeleton/Skeleton.d.ts

@@ -0,0 +1,18 @@
+import { HTMLAttributes } from 'react';
+import { GeneralComponentProps } from '../typings/component';
+import { TypographyBodyKey, TypographyCaptionKey, TypographyHeadlineKey } from '../typings/typography';
+import { CSSValue } from '../typings/utility';
+
+export interface SkeletonProps extends GeneralComponentProps<HTMLAttributes<HTMLDivElement>> {
+    ratio?: `${number}:${number}`;
+    width?: CSSValue;
+    height?: CSSValue;
+    textHeight?: TypographyHeadlineKey | TypographyBodyKey | TypographyCaptionKey;
+    minWidth?: CSSValue;
+    minHeight?: CSSValue;
+    maxWidth?: CSSValue;
+    maxHeight?: CSSValue;
+    borderRadius?: CSSValue;
+}
+declare const Skeleton: import('react').ForwardRefExoticComponent<SkeletonProps & import('react').RefAttributes<HTMLDivElement>>;
+export default Skeleton;

package/dist/Skeleton/Skeleton.es.js

@@ -0,0 +1,94 @@
+import { jsx as m } from "@emotion/react/jsx-runtime";
+import { forwardRef as p } from "react";
+import { keyframes as u } from "@emotion/react";
+import c from "@emotion/styled";
+import a from "../utils/convertNumberToCSSValue.es.js";
+const f = u`
+  0% {
+    background-position: 100% 100%;
+  }
+  100% {
+    background-position: 0 0;
+  }
+`, h = c.div`
+  position: relative;
+  background-color: ${({
+  theme: {
+    palette: { background: e }
+  }
+}) => e.primary};
+  border-radius: ${({ borderRadius: e = 0 }) => a(e)};
+  cursor: wait;
+
+  &::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: no-repeat
+      linear-gradient(
+        90deg,
+        ${({
+  theme: {
+    palette: { grey: e }
+  }
+}) => e[10]}
+          30%,
+        transparent 50%,
+        ${({
+  theme: {
+    palette: { grey: e }
+  }
+}) => e[10]}
+          70%
+      );
+    background-size: 350% 350%;
+    border-radius: ${({ borderRadius: e = 0 }) => a(e)};
+    animation: ${f} 1.2s infinite;
+  }
+
+  ${({ ratio: e }) => {
+  const [t, r] = String(e || "").split(":");
+  return Number.isNaN(t) || Number.isNaN(r) ? null : {
+    width: "inherit",
+    paddingTop: `calc(100% / ${t} * ${r})`
+  };
+}};
+
+  ${({
+  theme: { typography: e },
+  width: t,
+  height: r,
+  textHeight: o,
+  minWidth: i,
+  minHeight: s,
+  maxWidth: d,
+  maxHeight: l
+}) => {
+  var n;
+  return {
+    width: t,
+    height: ((n = e[o]) == null ? void 0 : n.lineHeight) || r,
+    minWidth: i,
+    minHeight: s,
+    maxWidth: d,
+    maxHeight: l
+  };
+}};
+`, S = p(function({ borderRadius: t = 4, inlineCSS: r, ...o }, i) {
+  return /* @__PURE__ */ m(
+    h,
+    {
+      ref: i,
+      borderRadius: t,
+      ...o,
+      css: r,
+      "aria-hidden": "true"
+    }
+  );
+});
+export {
+  S as default
+};

package/dist/Skeleton/Skeleton.stories.d.ts

@@ -0,0 +1,15 @@
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: import('react').ForwardRefExoticComponent<import('./Skeleton').SkeletonProps & import('react').RefAttributes<HTMLDivElement>>;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const TextHeight: Story;
+export declare const Ratio: Story;

package/dist/Skeleton/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./Skeleton.cjs");exports.default=e.default;

package/dist/Skeleton/index.d.ts

@@ -0,0 +1,3 @@
+import { default as Skeleton } from './Skeleton';
+
+export default Skeleton;

package/dist/Skeleton/index.es.js

@@ -0,0 +1,4 @@
+import o from "./Skeleton.es.js";
+export {
+  o as default
+};

package/dist/Slider/Slider.cjs

@@ -0,0 +1,40 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("@emotion/react/jsx-runtime"),i=require("react"),E=require("../Flexbox/Flexbox.cjs"),I=require("@emotion/styled"),O=e=>e&&e.__esModule?e:{default:e},u=O(I),B=u.default.div`
+  display: flex;
+  align-items: center;
+  position: relative;
+  width: 100%;
+  height: 12px;
+  margin: ${({theme:{spacing:e}})=>`${e.content(2)}px 0px`};
+  cursor: pointer;
+  border-radius: 20px;
+`,F=u.default.div`
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background: ${({theme:{palette:e}})=>e.grey[10]};
+  border-radius: inherit;
+`,G=u.default.div`
+  position: absolute;
+  height: 100%;
+  background: ${({theme:{palette:e}})=>e.brand.primary.main};
+  border-radius: inherit;
+`,U=u.default.div`
+  position: absolute;
+  display: flex;
+  width: 24px;
+  height: 24px;
+  justify-content: space-between;
+  align-items: center;
+  padding: ${({theme:{spacing:e}})=>`${e.content(2)}px ${e.content(3)}px`};
+  background: ${({theme:{palette:e}})=>e.grey[90]};
+  transform: translateX(-50%);
+  border-radius: 50%;
+`,W=u.default.div`
+  position: absolute;
+  width: 4px;
+  height: 4px;
+  transform: translateX(-50%);
+  border-radius: 50%;
+
+  ${({theme:{palette:e},marked:l,disabled:d,hasMarks:r})=>d||!r?{background:"transparent",opacity:0}:l?{background:e.grey.white}:{background:e.grey[30]}}
+`,j=10,z=i.forwardRef(function({value:l,onChange:d,step:r=1,min:s=0,max:c=100,hasMarks:T=!0,disabledValues:N=[],railProps:f,trackProps:h,thumbProps:g,inlineCSS:_,...D},p){const o=i.useRef(null),b=i.useRef(null),q=i.useRef(null),[C,M]=i.useState(!1),m=100/((c-s)/r),k=t=>{if(o.current){const n=t-o.current.getBoundingClientRect().left,S=Array.from(o.current.querySelectorAll('[class^="slider-mark-"]:not([disabled])')),x=S.reduce((v,R)=>Math.abs(R.offsetLeft-n)<Math.abs(v.offsetLeft-n)?R:v,S[0]).getAttribute("data-value");return x!==null?Number(x):null}return null},$=t=>{M(!0);const n=k(t);n!==null&&d(n)},w=t=>{if(!C)return;const n=k(t);n!==null&&d(n)},y=()=>M(!1),X=t=>$(t.clientX),A=t=>$(t.touches[0].clientX),L=t=>w(t.clientX),V=t=>w(t.touches[0].clientX);return i.useEffect(()=>{if(o.current){const t=o.current.querySelector(`[data-value="${l}"]`);if(b.current&&t){const{offsetLeft:n,offsetWidth:S}=t;b.current.style.width=`${n+S+j*2}px`}}},[l,s,c,r]),a.jsxs(B,{ref:p,...D,className:"slider",onMouseDown:X,onMouseMove:L,onMouseUp:y,onMouseLeave:y,onTouchStart:A,onTouchMove:V,onTouchEnd:y,onTouchCancel:y,css:_,children:[a.jsx(F,{ref:q,...f,css:f==null?void 0:f.inlineCSS,className:"slider-rail"}),a.jsx(G,{ref:b,...h,css:h==null?void 0:h.inlineCSS,className:"slider-track"}),a.jsxs(E.default,{className:"slider-mark-wrapper",alignItems:"center",ref:o,inlineCSS:{margin:`0 ${j+2}px`,width:"100%",height:"24px",position:"relative"},children:[c>0&&s<c&&r>0&&Array.from({length:(c-s)/r+1},(t,n)=>a.jsx(W,{className:`slider-mark-${n} slider-mark`,marked:n<=(l-s)/r,hasMarks:T,disabled:N.includes(s+r*n),"data-value":s+r*n,style:{left:`${m*n}%`}},`slider-mark-${l}:${s+r*n}`)),a.jsx(U,{...g,className:"slider-thumb",css:g==null?void 0:g.inlineCSS,style:{left:`${m*(l-s)/r}%`}})]})]})});exports.default=z;

package/dist/Slider/Slider.d.ts

@@ -0,0 +1,18 @@
+import { HTMLAttributes } from 'react';
+import { GeneralComponentProps } from '../typings/component';
+
+export interface SliderProps extends GeneralComponentProps<Omit<HTMLAttributes<HTMLDivElement>, 'onChange'>> {
+    value: number;
+    onChange: (value: number) => void;
+    step?: number;
+    min?: number;
+    max?: number;
+    hasMarks?: boolean;
+    defaultValue?: number;
+    disabledValues?: number[];
+    railProps?: GeneralComponentProps<HTMLAttributes<HTMLDivElement>>;
+    trackProps?: GeneralComponentProps<HTMLAttributes<HTMLDivElement>>;
+    thumbProps?: GeneralComponentProps<HTMLAttributes<HTMLDivElement>>;
+}
+declare const Slider: import('react').ForwardRefExoticComponent<SliderProps & import('react').RefAttributes<HTMLDivElement>>;
+export default Slider;