@dotss/ui 0.0.4 → 0.0.7

package/dist/Slider/Slider.es.js

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

package/dist/Slider/Slider.stories.d.ts

@@ -0,0 +1,15 @@
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: import('react').ForwardRefExoticComponent<import('./Slider').SliderProps & 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 Custom: Story;
+export declare const DisableCertainValues: Story;

package/dist/Slider/index.cjs

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

package/dist/Slider/index.d.ts

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

package/dist/Slider/index.es.js

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

package/dist/Snackbar/Snackbar.cjs

@@ -0,0 +1,40 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("@emotion/react/jsx-runtime"),r=require("react"),J=require("react-dom"),L=require("../Icon/Icon.cjs"),K=require("../IconButton/IconButton.cjs"),Q=require("@emotion/styled"),U=e=>e&&e.__esModule?e:{default:e},w=U(Q),V=w.default.div`
+  position: fixed;
+  bottom: ${"var(--system-navigation-bar-height, 0px)"};
+
+  ${({theme:{spacing:e},hasContainer:c,containerTop:s,containerLeft:n,containerWidth:y})=>c?{left:n,bottom:s,width:y-e.layout(4)}:{left:0,width:"calc(100% - 32px)"}};
+
+  margin: 0 ${({theme:{spacing:e}})=>e.content(4)}px;
+  padding: ${({theme:{spacing:e}})=>e.content(4)}px;
+  display: flex;
+  align-items: center;
+  gap: ${({theme:{spacing:e}})=>e.content(2)}px;
+  border-radius: 100px;
+  box-shadow: ${({theme:{elevation:e}})=>e[4]};
+  transition:
+    transform ${({transitionDuration:e})=>e}ms,
+    opacity ${({transitionDuration:e=0})=>e/2}ms;
+  transform: scale(${({open:e})=>e?1:.97})
+    translate3d(0, -${({bottom:e=0})=>e}px, 0);
+  opacity: ${({open:e})=>e?1:0};
+  z-index: 100004;
+
+  ${({theme:{palette:{grey:e,background:c}},variant:s})=>{const n={backgroundColor:e[90]};return s==="secondary"&&(n.backgroundColor=c.primary),n}}
+`,X=w.default.div`
+  flex-grow: 1;
+
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+
+  ${({hasIcon:e})=>e?null:{marginLeft:4}};
+
+  ${({theme:{palette:{grey:e},typography:{b2M:c}},variant:s})=>{const n={fontSize:c.size,fontWeight:c.weight,letterSpacing:c.letterSpacing,lineHeight:c.lineHeight,color:e.white};return s==="secondary"&&(n.color=e[100]),n}}
+`,Y=w.default.div`
+  white-space: nowrap;
+`,Z=w.default.div`
+  margin: -8px -8px -8px 0;
+
+  ${({theme:{palette:{grey:e}},variant:c})=>{let s={"& svg":{color:e.white}};return c==="secondary"&&(s={"& svg":{color:"inherit"}}),s}}
+`,D=r.forwardRef(function({children:c,open:s,onClose:n,hideClose:y,bottom:q=96,icon:h,action:$,severity:v,variant:x="primary",transitionDuration:T=200,autoHideDuration:b=3e3,containerRef:u,inlineCSS:I,role:_="alert",ariaLive:z="assertive",focusable:a=!1,...O},W){const f=r.useRef(null),g=r.useRef(null),[S,j]=r.useState(!1),[R,k]=r.useState(!0),[F,P]=r.useState(0),[B,A]=r.useState(0),[H,M]=r.useState(0),d=r.useRef(),m=r.useRef(),o=r.useRef(),C=!!h||["success","error"].includes(v),N=!!(u!=null&&u.current),G=t=>t.stopPropagation();return r.useEffect(()=>{s&&(a&&(g.current=document.activeElement),o.current&&clearTimeout(o.current),m.current&&clearTimeout(m.current),k(!1),d.current=setTimeout(()=>{var t;if(j(!0),a&&f.current){const i=(t=f.current.parentElement)==null?void 0:t.querySelector('button, [tabindex]:not([tabindex="-1"])');i==null||i.focus()}},100))},[s,a]),r.useEffect(()=>{s||(o.current&&clearTimeout(o.current),d.current&&clearTimeout(d.current),j(!1),m.current=setTimeout(()=>{k(!0),a&&g.current&&(g.current.focus(),g.current=null)},T))},[s,T,a]),r.useEffect(()=>{S&&b&&(o.current&&clearTimeout(o.current),o.current=setTimeout(()=>{typeof n=="function"&&n()},b))},[S,n,b]),r.useEffect(()=>{const t=i=>{var p,E;f.current&&((E=(p=f.current)==null?void 0:p.parentNode)!=null&&E.contains(i.target)||typeof n=="function"&&n())};return window.addEventListener("mousedown",t),()=>{window.removeEventListener("mousedown",t)}},[n]),r.useEffect(()=>{const t=u==null?void 0:u.current,i=()=>{var p;t&&(P((t==null?void 0:t.offsetTop)||0),A(((p=t.getBoundingClientRect())==null?void 0:p.left)||0),M((t==null?void 0:t.offsetWidth)||0))};return t&&(i(),window.addEventListener("resize",i)),()=>{t&&window.removeEventListener("resize",i)}},[u]),r.useEffect(()=>()=>{d.current&&clearTimeout(d.current),m.current&&clearTimeout(m.current),o.current&&clearTimeout(o.current)},[]),R?null:J.createPortal(l.jsxs(V,{ref:W,open:S,variant:x,bottom:q,transitionDuration:T,onClick:G,hasContainer:N,containerTop:F,containerLeft:B,containerWidth:H,role:_,"aria-live":z,...O,css:I,children:[C&&l.jsxs(Y,{children:[!h&&v==="success"&&l.jsx(L.default,{name:"CompleteFill",color:"green.70"}),!h&&v==="error"&&l.jsx(L.default,{name:"AlertFill",color:"etc.red"}),h]}),l.jsx(X,{ref:f,variant:x,hasIcon:C,tabIndex:a?-1:void 0,children:c}),!y&&!$&&l.jsx(Z,{variant:x,children:l.jsx(K.default,{name:"CloseLine",color:x==="primary"?"tertiary":"primary",onClick:n,"aria-label":"닫기"})}),$]}),document.body)});exports.default=D;

package/dist/Snackbar/Snackbar.d.ts

@@ -0,0 +1,22 @@
+import { HTMLAttributes, ReactNode, RefObject } from 'react';
+import { BrandColorKey } from '../typings/color';
+import { GeneralComponentProps } from '../typings/component';
+
+export interface SnackbarProps extends GeneralComponentProps<HTMLAttributes<HTMLDivElement>> {
+    open?: boolean;
+    onClose?: () => void;
+    hideClose?: boolean;
+    bottom?: number;
+    variant?: BrandColorKey;
+    icon?: ReactNode;
+    action?: ReactNode;
+    severity?: 'success' | 'error';
+    transitionDuration?: number;
+    autoHideDuration?: number;
+    containerRef?: RefObject<HTMLElement>;
+    role?: 'alert' | 'status';
+    ariaLive?: 'polite' | 'assertive' | 'off';
+    focusable?: boolean;
+}
+declare const Snackbar: import('react').ForwardRefExoticComponent<SnackbarProps & import('react').RefAttributes<HTMLDivElement>>;
+export default Snackbar;

package/dist/Snackbar/Snackbar.es.js

@@ -0,0 +1,209 @@
+import { jsxs as O, jsx as p } from "@emotion/react/jsx-runtime";
+import { forwardRef as Y, useRef as h, useState as w, useEffect as l } from "react";
+import { createPortal as Z } from "react-dom";
+import W from "../Icon/Icon.es.js";
+import _ from "../IconButton/IconButton.es.js";
+import T from "@emotion/styled";
+const M = T.div`
+  position: fixed;
+  bottom: ${"var(--system-navigation-bar-height, 0px)"};
+
+  ${({
+  theme: { spacing: e },
+  hasContainer: o,
+  containerTop: n,
+  containerLeft: r,
+  containerWidth: v
+}) => o ? {
+  left: r,
+  bottom: n,
+  // 32: 좌우 너비
+  width: v - e.layout(4)
+} : {
+  left: 0,
+  width: "calc(100% - 32px)"
+}};
+
+  margin: 0 ${({ theme: { spacing: e } }) => e.content(4)}px;
+  padding: ${({ theme: { spacing: e } }) => e.content(4)}px;
+  display: flex;
+  align-items: center;
+  gap: ${({ theme: { spacing: e } }) => e.content(2)}px;
+  border-radius: 100px;
+  box-shadow: ${({ theme: { elevation: e } }) => e[4]};
+  transition:
+    transform ${({ transitionDuration: e }) => e}ms,
+    opacity ${({ transitionDuration: e = 0 }) => e / 2}ms;
+  transform: scale(${({ open: e }) => e ? 1 : 0.97})
+    translate3d(0, -${({ bottom: e = 0 }) => e}px, 0);
+  opacity: ${({ open: e }) => e ? 1 : 0};
+  z-index: 100004;
+
+  ${({
+  theme: {
+    palette: { grey: e, background: o }
+  },
+  variant: n
+}) => {
+  const r = {
+    backgroundColor: e[90]
+  };
+  return n === "secondary" && (r.backgroundColor = o.primary), r;
+}}
+`, R = T.div`
+  flex-grow: 1;
+
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+
+  ${({ hasIcon: e }) => e ? null : { marginLeft: 4 }};
+
+  ${({
+  theme: {
+    palette: { grey: e },
+    typography: { b2M: o }
+  },
+  variant: n
+}) => {
+  const r = {
+    fontSize: o.size,
+    fontWeight: o.weight,
+    letterSpacing: o.letterSpacing,
+    lineHeight: o.lineHeight,
+    color: e.white
+  };
+  return n === "secondary" && (r.color = e[100]), r;
+}}
+`, D = T.div`
+  white-space: nowrap;
+`, ee = T.div`
+  margin: -8px -8px -8px 0;
+
+  ${({
+  theme: {
+    palette: { grey: e }
+  },
+  variant: o
+}) => {
+  let n = {
+    "& svg": {
+      color: e.white
+    }
+  };
+  return o === "secondary" && (n = {
+    "& svg": {
+      color: "inherit"
+    }
+  }), n;
+}}
+`, se = Y(function({
+  children: o,
+  open: n,
+  onClose: r,
+  hideClose: v,
+  bottom: E = 96,
+  icon: g,
+  action: S,
+  severity: b,
+  variant: x = "primary",
+  transitionDuration: $ = 200,
+  autoHideDuration: k = 3e3,
+  containerRef: s,
+  inlineCSS: F,
+  role: B = "alert",
+  ariaLive: P = "assertive",
+  focusable: u = !1,
+  ...q
+}, A) {
+  const a = h(null), y = h(null), [C, L] = w(!1), [H, I] = w(!0), [N, G] = w(0), [J, K] = w(0), [Q, U] = w(0), d = h(), m = h(), i = h(), z = !!g || ["success", "error"].includes(b), V = !!(s != null && s.current), X = (t) => t.stopPropagation();
+  return l(() => {
+    n && (u && (y.current = document.activeElement), i.current && clearTimeout(i.current), m.current && clearTimeout(m.current), I(!1), d.current = setTimeout(() => {
+      var t;
+      if (L(!0), u && a.current) {
+        const c = (t = a.current.parentElement) == null ? void 0 : t.querySelector(
+          'button, [tabindex]:not([tabindex="-1"])'
+        );
+        c == null || c.focus();
+      }
+    }, 100));
+  }, [n, u]), l(() => {
+    n || (i.current && clearTimeout(i.current), d.current && clearTimeout(d.current), L(!1), m.current = setTimeout(() => {
+      I(!0), u && y.current && (y.current.focus(), y.current = null);
+    }, $));
+  }, [n, $, u]), l(() => {
+    C && k && (i.current && clearTimeout(i.current), i.current = setTimeout(() => {
+      typeof r == "function" && r();
+    }, k));
+  }, [C, r, k]), l(() => {
+    const t = (c) => {
+      var f, j;
+      a.current && ((j = (f = a.current) == null ? void 0 : f.parentNode) != null && j.contains(c.target) || typeof r == "function" && r());
+    };
+    return window.addEventListener("mousedown", t), () => {
+      window.removeEventListener("mousedown", t);
+    };
+  }, [r]), l(() => {
+    const t = s == null ? void 0 : s.current, c = () => {
+      var f;
+      t && (G((t == null ? void 0 : t.offsetTop) || 0), K(((f = t.getBoundingClientRect()) == null ? void 0 : f.left) || 0), U((t == null ? void 0 : t.offsetWidth) || 0));
+    };
+    return t && (c(), window.addEventListener("resize", c)), () => {
+      t && window.removeEventListener("resize", c);
+    };
+  }, [s]), l(() => () => {
+    d.current && clearTimeout(d.current), m.current && clearTimeout(m.current), i.current && clearTimeout(i.current);
+  }, []), H ? null : Z(
+    /* @__PURE__ */ O(
+      M,
+      {
+        ref: A,
+        open: C,
+        variant: x,
+        bottom: E,
+        transitionDuration: $,
+        onClick: X,
+        hasContainer: V,
+        containerTop: N,
+        containerLeft: J,
+        containerWidth: Q,
+        role: B,
+        "aria-live": P,
+        ...q,
+        css: F,
+        children: [
+          z && /* @__PURE__ */ O(D, { children: [
+            !g && b === "success" && /* @__PURE__ */ p(W, { name: "CompleteFill", color: "green.70" }),
+            !g && b === "error" && /* @__PURE__ */ p(W, { name: "AlertFill", color: "etc.red" }),
+            g
+          ] }),
+          /* @__PURE__ */ p(
+            R,
+            {
+              ref: a,
+              variant: x,
+              hasIcon: z,
+              tabIndex: u ? -1 : void 0,
+              children: o
+            }
+          ),
+          !v && !S && /* @__PURE__ */ p(ee, { variant: x, children: /* @__PURE__ */ p(
+            _,
+            {
+              name: "CloseLine",
+              color: x === "primary" ? "tertiary" : "primary",
+              onClick: r,
+              "aria-label": "닫기"
+            }
+          ) }),
+          S
+        ]
+      }
+    ),
+    document.body
+  );
+});
+export {
+  se as default
+};

package/dist/Snackbar/Snackbar.stories.d.ts

@@ -0,0 +1,36 @@
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: import('react').ForwardRefExoticComponent<import('./Snackbar').SnackbarProps & import('react').RefAttributes<HTMLDivElement>>;
+    parameters: {
+        layout: string;
+    };
+    argTypes: {
+        icon: {
+            control: {
+                disable: true;
+            };
+        };
+        action: {
+            control: {
+                disable: true;
+            };
+        };
+        containerRef: {
+            control: {
+                disable: true;
+            };
+        };
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Primary: Story;
+export declare const Secondary: Story;
+export declare const Severity: Story;
+export declare const Icon: Story;
+export declare const Action: Story;
+export declare const LineClamp: Story;
+export declare const InContainer: Story;

package/dist/Snackbar/index.cjs

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

package/dist/Snackbar/index.d.ts

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

package/dist/Snackbar/index.es.js

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

package/dist/Switch/Switch.cjs

@@ -0,0 +1,30 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("@emotion/react/jsx-runtime"),f=require("react"),h=require("@emotion/styled"),d=r=>r&&r.__esModule?r:{default:r},i=d(h),x=i.default.div`
+  position: relative;
+  display: flex;
+  width: 56px;
+  height: 32px;
+  padding: ${({theme:{spacing:r}})=>`${r.content(1)}px`};
+  align-items: center;
+  border-radius: 20px;
+  transition: ${({transitionDuration:r})=>`background-color ${r}ms ease-in-out`};
+  pointer-events: ${({disabled:r})=>r?"none":"auto"};
+
+  ${({theme:{palette:{brand:r,grey:n}},selected:t,disabled:o})=>t&&o?{backgroundColor:r.primary.bg}:t&&!o?{backgroundColor:r.primary.main}:!t&&o?{backgroundColor:n[20]}:!t&&!o?{backgroundColor:n[40]}:{}}
+`,g=i.default.div`
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  transition: ${({transitionDuration:r})=>`all ${r}ms ease-in-out`};
+  transition-property: background-color, transform, filter;
+
+  ${({theme:{palette:{grey:r,background:n}},selected:t,disabled:o})=>t&&o?{backgroundColor:r.white,transform:"translateX(100%)"}:t&&!o?{backgroundColor:r.white,filter:"drop-shadow(0px 0px 16px rgba(0, 0, 0, 0.20))",transform:"translateX(100%)"}:!t&&o?{backgroundColor:n.primary}:!t&&!o?{backgroundColor:r.white,filter:"drop-shadow(0px 0px 16px rgba(0, 0, 0, 0.20))"}:{}}
+`,m=i.default.input`
+  position: absolute;
+  appearance: none;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  border-radius: 20px;
+  cursor: pointer;
+`,w=f.forwardRef(function({selected:n,disabled:t,onChange:o,transitionDuration:u=150,inputProps:a,thumbProps:p,inlineCSS:c,...s},l){return e.jsxs(x,{ref:l,selected:n,disabled:t,transitionDuration:u,css:c,...s,children:[e.jsx(g,{selected:n,disabled:t,transitionDuration:u,...p}),e.jsx(m,{type:"checkbox",role:"switch",checked:n,disabled:t,onChange:o,...a})]})});exports.default=w;

package/dist/Switch/Switch.d.ts

@@ -0,0 +1,13 @@
+import { ChangeEventHandler, HTMLAttributes } from 'react';
+import { GeneralComponentProps } from '../typings/component';
+
+export interface SwitchProps extends GeneralComponentProps<HTMLAttributes<HTMLDivElement>> {
+    selected: boolean;
+    disabled?: boolean;
+    onChange: ChangeEventHandler<HTMLInputElement>;
+    transitionDuration?: number;
+    inputProps?: HTMLAttributes<HTMLInputElement>;
+    thumbProps?: HTMLAttributes<HTMLDivElement>;
+}
+declare const Switch: import('react').ForwardRefExoticComponent<SwitchProps & import('react').RefAttributes<HTMLDivElement>>;
+export default Switch;

package/dist/Switch/Switch.es.js

@@ -0,0 +1,111 @@
+import { jsxs as m, jsx as p } from "@emotion/react/jsx-runtime";
+import { forwardRef as s } from "react";
+import i from "@emotion/styled";
+const x = i.div`
+  position: relative;
+  display: flex;
+  width: 56px;
+  height: 32px;
+  padding: ${({ theme: { spacing: r } }) => `${r.content(1)}px`};
+  align-items: center;
+  border-radius: 20px;
+  transition: ${({ transitionDuration: r }) => `background-color ${r}ms ease-in-out`};
+  pointer-events: ${({ disabled: r }) => r ? "none" : "auto"};
+
+  ${({
+  theme: {
+    palette: { brand: r, grey: n }
+  },
+  selected: o,
+  disabled: t
+}) => o && t ? {
+  backgroundColor: r.primary.bg
+} : o && !t ? {
+  backgroundColor: r.primary.main
+} : !o && t ? {
+  backgroundColor: n[20]
+} : !o && !t ? {
+  backgroundColor: n[40]
+} : {}}
+`, g = i.div`
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  transition: ${({ transitionDuration: r }) => `all ${r}ms ease-in-out`};
+  transition-property: background-color, transform, filter;
+
+  ${({
+  theme: {
+    palette: { grey: r, background: n }
+  },
+  selected: o,
+  disabled: t
+}) => o && t ? {
+  backgroundColor: r.white,
+  transform: "translateX(100%)"
+} : o && !t ? {
+  backgroundColor: r.white,
+  filter: "drop-shadow(0px 0px 16px rgba(0, 0, 0, 0.20))",
+  transform: "translateX(100%)"
+} : !o && t ? {
+  backgroundColor: n.primary
+} : !o && !t ? {
+  backgroundColor: r.white,
+  filter: "drop-shadow(0px 0px 16px rgba(0, 0, 0, 0.20))"
+} : {}}
+`, l = i.input`
+  position: absolute;
+  appearance: none;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  border-radius: 20px;
+  cursor: pointer;
+`, d = s(function({
+  selected: n,
+  disabled: o,
+  onChange: t,
+  transitionDuration: a = 150,
+  inputProps: e,
+  thumbProps: u,
+  inlineCSS: h,
+  ...c
+}, f) {
+  return /* @__PURE__ */ m(
+    x,
+    {
+      ref: f,
+      selected: n,
+      disabled: o,
+      transitionDuration: a,
+      css: h,
+      ...c,
+      children: [
+        /* @__PURE__ */ p(
+          g,
+          {
+            selected: n,
+            disabled: o,
+            transitionDuration: a,
+            ...u
+          }
+        ),
+        /* @__PURE__ */ p(
+          l,
+          {
+            type: "checkbox",
+            role: "switch",
+            checked: n,
+            disabled: o,
+            onChange: t,
+            ...e
+          }
+        )
+      ]
+    }
+  );
+});
+export {
+  d as default
+};