@dotss/ui 1.2.2 → 1.3.0

package/Accordion/Accordion.cjs

@@ -37,4 +37,4 @@
   overflow: hidden;
 `,J=s.default.div`
   padding: ${({theme:{spacing:e}})=>`0 ${e.content(4)}px ${e.content(4)}px ${e.content(4)}px`};
-`,K=l.forwardRef(function({children:n,expand:t=!1,title:I,endAdornment:E,onChange:g,disabled:u=!1,inlineCSS:b,fullWidth:p=!1,headerProps:d,headerButtonProps:f,panelProps:m,...H},R){const _=l.useId(),q=l.useId(),y=(f==null?void 0:f.id)||_,$=(m==null?void 0:m.id)||q,[c,j]=l.useState(t),[h,x]=l.useState(t?"auto":"0px"),i=l.useRef(null),C=r=>{u||(typeof g=="function"?g(r):j(a=>!a))};return l.useEffect(()=>{j(t)},[t]),l.useEffect(()=>{var S,v;let r;const a=A.default(((S=i.current)==null?void 0:S.scrollHeight)||0),T=!c&&h==="auto",k=!c&&h!=="auto";return(v=i.current)!=null&&v.parentElement&&(c?(i.current.parentElement.style.height=a,r=setTimeout(()=>{var w;x("auto"),(w=i.current)!=null&&w.parentElement&&(i.current.parentElement.style.height="auto")},200)):T?(i.current.parentElement.style.height=a,x(a)):k&&(i.current.parentElement.style.height="0px",x("0px"))),()=>{r&&clearTimeout(r)}},[c,h]),o.jsxs(N,{ref:R,disabled:u,fullWidth:p,...H,css:b,children:[o.jsx(O,{as:(d==null?void 0:d.tag)||"h3",onClick:C,disabled:u,...d,children:o.jsxs(V,{id:y,"aria-disabled":u,"aria-expanded":c,"aria-controls":$,fullWidth:p,...f,children:[I,o.jsx(F,{expand:c,children:E||o.jsx(z.default,{name:"ChevronDownLine",size:"xSmall"})})]})}),o.jsx(G,{children:o.jsx(J,{role:"region",id:$,"aria-labelledby":y,ref:i,...m,children:n})})]})});exports.default=K;
+`,K=l.forwardRef(function({children:n,expand:t=!1,title:I,endAdornment:E,onChange:g,disabled:u=!1,inlineCSS:b,fullWidth:y=!1,headerProps:d,headerButtonProps:f,panelProps:m,...H},R){const _=l.useId(),q=l.useId(),p=(f==null?void 0:f.id)||_,$=(m==null?void 0:m.id)||q,[c,j]=l.useState(t),[h,x]=l.useState(t?"auto":"0px"),i=l.useRef(null),C=r=>{u||(typeof g=="function"?g(r):j(a=>!a))};return l.useEffect(()=>{j(t)},[t]),l.useEffect(()=>{var S,v;let r;const a=A.default(((S=i.current)==null?void 0:S.scrollHeight)||0),T=!c&&h==="auto",k=!c&&h!=="auto";return(v=i.current)!=null&&v.parentElement&&(c?(i.current.parentElement.style.height=a,r=setTimeout(()=>{var w;x("auto"),(w=i.current)!=null&&w.parentElement&&(i.current.parentElement.style.height="auto")},200)):T?(i.current.parentElement.style.height=a,x(a)):k&&(i.current.parentElement.style.height="0px",x("0px"))),()=>{r&&clearTimeout(r)}},[c,h]),o.jsxs(N,{ref:R,disabled:u,fullWidth:y,...H,css:b,children:[o.jsx(O,{as:(d==null?void 0:d.tag)||"h3",onClick:C,disabled:u,...d,children:o.jsxs(V,{id:p,"aria-disabled":u,"aria-expanded":c,"aria-controls":$,fullWidth:y,...f,children:[I,o.jsx(F,{expand:c,children:E||o.jsx(z.default,{name:"ChevronDownLine",size:"xSmall"})})]})}),o.jsx(G,{style:{height:h},children:o.jsx(J,{role:"region",id:$,"aria-labelledby":p,ref:i,...m,children:n})})]})});exports.default=K;

package/Accordion/Accordion.es.js

@@ -118,7 +118,7 @@ const J = c.div`
         )
       }
     ),
-    /* @__PURE__ */ a(U, { children: /* @__PURE__ */ a(
+    /* @__PURE__ */ a(U, { style: { height: m }, children: /* @__PURE__ */ a(
       W,
       {
         role: "region",

package/CircularProgressIndicator/CircularProgressIndicator.cjs

@@ -1,18 +1,19 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("@emotion/react/jsx-runtime"),h=require("react"),g=require("@emotion/react"),m=require("@emotion/styled"),y=e=>e&&e.__esModule?e:{default:e},i=y(m),k=g.keyframes`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("@emotion/react/jsx-runtime"),m=require("react"),g=require("@emotion/react"),k=require("@emotion/styled"),y=e=>e&&e.__esModule?e:{default:e},i=y(k),x=g.keyframes`
     100% {
         transform: rotate(270deg);
     }
-`,x=i.default.svg`
+`,$=i.default.svg`
   ${({size:e})=>e==="large"?{width:120,height:120}:{width:40,height:40}};
 
   transform: rotate(-90deg);
 
-  ${({loop:e})=>e?{animation:`${k} 1s infinite`}:{}};
-`,$=i.default.circle`
+  ${({loop:e})=>e?{animation:`${x} 1s infinite`}:{}};
+`,_=i.default.circle`
   ${({size:e})=>e==="large"?{cx:60,cy:60,strokeWidth:16}:{cx:20,cy:20,strokeWidth:4}};
   stroke: ${({theme:{palette:{grey:e}}})=>e[10]};
-`,_=i.default.circle`
+`,b=i.default.circle`
   transition: stroke-dashoffset ${({transitionDuration:e})=>e}ms linear 0s;
   ${({size:e})=>e==="large"?{cx:60,cy:60,strokeWidth:16}:{cx:20,cy:20,strokeWidth:4}};
   stroke: ${({theme:{palette:{brand:e}}})=>e.primary.main};
-`,b=h.forwardRef(function({size:r="small",value:c=0,transitionDuration:n=500,inlineCSS:d,loop:t,...a},u){const s=r==="large"?52:18,l=2*Math.PI*s,f=l*(1-(t?20:c)/100);return o.jsxs(x,{ref:u,viewBox:r==="large"?"0 0 120 120":"0 0 40 40",fill:"none",size:r,loop:t,role:"progressbar","aria-valuenow":t?void 0:c,"aria-label":a["aria-label"]?a["aria-label"]:"로딩 중",...a,css:d,children:[o.jsx($,{size:r,r:s}),o.jsx(_,{size:r,transitionDuration:n,r:s,strokeLinecap:"round",strokeDashoffset:f,strokeDasharray:l})]})});exports.default=b;
+  will-change: stroke-dashoffset;
+`,w=m.forwardRef(function({size:r="small",value:c=0,transitionDuration:n=500,inlineCSS:d,loop:t,...a},u){const s=r==="large"?52:18,l=2*Math.PI*s,f=Math.min(100,Math.max(0,t?20:c)),h=l*(1-f/100);return o.jsxs($,{ref:u,viewBox:r==="large"?"0 0 120 120":"0 0 40 40",fill:"none",size:r,loop:t,role:"progressbar","aria-valuenow":t?void 0:c,"aria-label":a["aria-label"]?a["aria-label"]:"로딩 중",...a,css:d,children:[o.jsx(_,{size:r,r:s}),o.jsx(b,{className:"progress-indicator",size:r,transitionDuration:n,r:s,strokeLinecap:"round",strokeDashoffset:h,strokeDasharray:l})]})});exports.default=w;

package/CircularProgressIndicator/CircularProgressIndicator.es.js

@@ -1,12 +1,12 @@
-import { jsxs as h, jsx as n } from "@emotion/react/jsx-runtime";
-import { forwardRef as g } from "react";
-import { keyframes as k } from "@emotion/react";
+import { jsxs as g, jsx as n } from "@emotion/react/jsx-runtime";
+import { forwardRef as k } from "react";
+import { keyframes as u } from "@emotion/react";
 import s from "@emotion/styled";
-const y = k`
+const y = u`
     100% {
         transform: rotate(270deg);
     }
-`, u = s.svg`
+`, x = s.svg`
   ${({ size: r }) => r === "large" ? {
   width: 120,
   height: 120
@@ -20,7 +20,7 @@ const y = k`
   ${({ loop: r }) => r ? {
   animation: `${y} 1s infinite`
 } : {}};
-`, x = s.circle`
+`, $ = s.circle`
   ${({ size: r }) => r === "large" ? {
   cx: 60,
   cy: 60,
@@ -35,7 +35,7 @@ const y = k`
     palette: { grey: r }
   }
 }) => r[10]};
-`, $ = s.circle`
+`, p = s.circle`
   transition: stroke-dashoffset ${({ transitionDuration: r }) => r}ms linear 0s;
   ${({ size: r }) => r === "large" ? {
   cx: 60,
@@ -51,13 +51,14 @@ const y = k`
     palette: { brand: r }
   }
 }) => r.primary.main};
-`, b = g(
-  function({ size: e = "small", value: i = 0, transitionDuration: l = 500, inlineCSS: d, loop: t, ...a }, f) {
-    const o = e === "large" ? 52 : 18, c = 2 * Math.PI * o, m = c * (1 - (t ? 20 : i) / 100);
-    return /* @__PURE__ */ h(
-      u,
+  will-change: stroke-dashoffset;
+`, W = k(
+  function({ size: e = "small", value: i = 0, transitionDuration: l = 500, inlineCSS: d, loop: t, ...a }, m) {
+    const o = e === "large" ? 52 : 18, c = 2 * Math.PI * o, f = Math.min(100, Math.max(0, t ? 20 : i)), h = c * (1 - f / 100);
+    return /* @__PURE__ */ g(
+      x,
       {
-        ref: f,
+        ref: m,
         viewBox: e === "large" ? "0 0 120 120" : "0 0 40 40",
         fill: "none",
         size: e,
@@ -68,15 +69,16 @@ const y = k`
         ...a,
         css: d,
         children: [
-          /* @__PURE__ */ n(x, { size: e, r: o }),
+          /* @__PURE__ */ n($, { size: e, r: o }),
           /* @__PURE__ */ n(
-            $,
+            p,
             {
+              className: "progress-indicator",
               size: e,
               transitionDuration: l,
               r: o,
               strokeLinecap: "round",
-              strokeDashoffset: m,
+              strokeDashoffset: h,
               strokeDasharray: c
             }
           )
@@ -86,5 +88,5 @@ const y = k`
   }
 );
 export {
-  b as default
+  W as default
 };

package/Collapse/Collapse.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const p=require("@emotion/react/jsx-runtime"),t=require("react"),q=require("../Box/Box.cjs"),x=require("../hooks/interactions/useCollapse/useCollapse.cjs"),R=t.forwardRef(function({children:r,isCollapsed:s=!0,duration:u=200,delay:l=0,easing:o,onTransitionStart:a,onTransitionEnd:n,...i},c){t.useImperativeHandle(c,()=>e.current);const{targetRef:e,style:f,ariaProps:d}=x.default({isCollapsed:s,duration:u,delay:l,easing:o,onTransitionStart:a,onTransitionEnd:n});return p.jsx(q.default,{ref:e,style:{flexShrink:0,...f},...d,...i,children:r})});exports.default=R;

package/Collapse/Collapse.d.ts

@@ -0,0 +1,7 @@
+import { HTMLAttributes } from 'react';
+import { UseCollapseProps } from '../hooks/interactions/useCollapse/useCollapse';
+import { GeneralComponentProps } from '../typings/component';
+
+export type CollapseProps = Omit<GeneralComponentProps<HTMLAttributes<HTMLDivElement>>, 'onTransitionStart' | 'onTransitionEnd'> & UseCollapseProps;
+declare const Collapse: import('react').ForwardRefExoticComponent<Omit<GeneralComponentProps<HTMLAttributes<HTMLDivElement>>, "onTransitionEnd" | "onTransitionStart"> & UseCollapseProps & import('react').RefAttributes<HTMLDivElement>>;
+export default Collapse;

package/Collapse/Collapse.es.js

@@ -0,0 +1,28 @@
+import { jsx as u } from "@emotion/react/jsx-runtime";
+import { forwardRef as c, useImperativeHandle as x } from "react";
+import d from "../Box/Box.es.js";
+import C from "../hooks/interactions/useCollapse/useCollapse.es.js";
+const k = c(function({
+  children: e,
+  isCollapsed: o = !0,
+  duration: t = 200,
+  delay: s = 0,
+  easing: a,
+  onTransitionStart: f,
+  onTransitionEnd: l,
+  ...p
+}, m) {
+  x(m, () => r.current);
+  const { targetRef: r, style: i, ariaProps: n } = C({
+    isCollapsed: o,
+    duration: t,
+    delay: s,
+    easing: a,
+    onTransitionStart: f,
+    onTransitionEnd: l
+  });
+  return /* @__PURE__ */ u(d, { ref: r, style: { flexShrink: 0, ...i }, ...n, ...p, children: e });
+});
+export {
+  k as default
+};

package/Collapse/Collapse.stories.d.ts

@@ -0,0 +1,27 @@
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: import('react').ForwardRefExoticComponent<Omit<import('../../typings/component').GeneralComponentProps<import('react').HTMLAttributes<HTMLDivElement>>, "onTransitionEnd" | "onTransitionStart"> & import('../../hooks').UseCollapseProps & import('react').RefAttributes<HTMLDivElement>>;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    argTypes: {
+        isCollapsed: {
+            control: "boolean";
+        };
+        duration: {
+            control: {
+                type: "number";
+                min: number;
+                max: number;
+                step: number;
+            };
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Custom: Story;

package/Collapse/index.cjs

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

package/Collapse/index.d.ts

@@ -0,0 +1,4 @@
+import { default as Collapse } from './Collapse';
+
+export type { CollapseProps } from './Collapse';
+export default Collapse;

package/Collapse/index.es.js

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

package/hooks/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./useCheckHoverPossible/useCheckHoverPossible.cjs"),u=require("./useCheckKeyboardMode/useCheckKeyboardMode.cjs"),s=require("./useCheckHasFocus/useCheckHasFocus.cjs"),o=require("./useFocusBoundary/useFocusBoundary.cjs");exports.useCheckHoverPossible=e.default;exports.useCheckKeyboardMode=u.default;exports.useCheckHasFocus=s.default;exports.useFocusBoundary=o.default;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./useCheckHoverPossible/useCheckHoverPossible.cjs"),u=require("./useCheckKeyboardMode/useCheckKeyboardMode.cjs"),s=require("./useCheckHasFocus/useCheckHasFocus.cjs"),o=require("./useFocusBoundary/useFocusBoundary.cjs"),r=require("./interactions/useCollapse/useCollapse.cjs"),t=require("./useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.cjs"),c=require("./usePrefersReducedMotion/usePrefersReducedMotion.cjs");exports.useCheckHoverPossible=e.default;exports.useCheckKeyboardMode=u.default;exports.useCheckHasFocus=s.default;exports.useFocusBoundary=o.default;exports.useCollapse=r.default;exports.useIsomorphicLayoutEffect=t.default;exports.usePrefersReducedMotion=c.default;

package/hooks/index.d.ts

@@ -2,3 +2,8 @@ export { default as useCheckHoverPossible } from './useCheckHoverPossible/useChe
 export { default as useCheckKeyboardMode } from './useCheckKeyboardMode/useCheckKeyboardMode';
 export { default as useCheckHasFocus } from './useCheckHasFocus/useCheckHasFocus';
 export { default as useFocusBoundary } from './useFocusBoundary/useFocusBoundary';
+export { default as useCollapse } from './interactions/useCollapse/useCollapse';
+export { default as useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect/useIsomorphicLayoutEffect';
+export { default as usePrefersReducedMotion } from './usePrefersReducedMotion/usePrefersReducedMotion';
+export type { UseFocusBoundaryProps } from './useFocusBoundary/useFocusBoundary';
+export type { UseCollapseProps } from './interactions/useCollapse/useCollapse';

package/hooks/index.es.js

@@ -1,10 +1,16 @@
 import { default as s } from "./useCheckHoverPossible/useCheckHoverPossible.es.js";
-import { default as r } from "./useCheckKeyboardMode/useCheckKeyboardMode.es.js";
+import { default as a } from "./useCheckKeyboardMode/useCheckKeyboardMode.es.js";
 import { default as f } from "./useCheckHasFocus/useCheckHasFocus.es.js";
 import { default as d } from "./useFocusBoundary/useFocusBoundary.es.js";
+import { default as p } from "./interactions/useCollapse/useCollapse.es.js";
+import { default as m } from "./useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.es.js";
+import { default as h } from "./usePrefersReducedMotion/usePrefersReducedMotion.es.js";
 export {
   f as useCheckHasFocus,
   s as useCheckHoverPossible,
-  r as useCheckKeyboardMode,
-  d as useFocusBoundary
+  a as useCheckKeyboardMode,
+  p as useCollapse,
+  d as useFocusBoundary,
+  m as useIsomorphicLayoutEffect,
+  h as usePrefersReducedMotion
 };

package/hooks/interactions/useCollapse/useCollapse.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("react"),v=require("../../useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.cjs"),y=require("../../usePrefersReducedMotion/usePrefersReducedMotion.cjs");function P({isCollapsed:t=!0,duration:s=200,delay:f=0,easing:o="ease-in-out",onTransitionStart:i,onTransitionEnd:l}={}){const{prefersReducedMotion:x}=y.default(),h=r.useRef(null),e=r.useRef(null),u=r.useRef(i),c=r.useRef(l),a=r.useRef(!0);u.current=i,c.current=l;const[g,H]=r.useState(t?"0px":"auto");return v.default(()=>{var d;if(a.current){a.current=!1;return}const n=h.current;if(!n)return;e.current&&(e.current.cancel(),e.current=null);const R=n.scrollHeight,M=t?[{height:`${R}px`},{height:"0px"}]:[{height:"0px"},{height:`${R}px`}],q=t?"0px":"auto";return(d=u.current)==null||d.call(u),e.current=n.animate(M,{duration:x?0:s,easing:o,delay:f,fill:"forwards"}),e.current.onfinish=()=>{var m,p;(m=e.current)==null||m.commitStyles(),H(q),(p=c.current)==null||p.call(c),e.current=null},()=>{e.current&&(e.current.cancel(),e.current=null)}},[t,s,f,o]),{targetRef:h,isCollapsed:t,height:g,style:{height:g,overflow:"hidden"},ariaProps:{"aria-hidden":t}}}exports.default=P;

package/hooks/interactions/useCollapse/useCollapse.d.ts

@@ -0,0 +1,22 @@
+import { CSSValue } from '../../../typings/utility';
+
+export interface UseCollapseProps {
+    isCollapsed?: boolean;
+    duration?: number;
+    delay?: number;
+    easing?: string;
+    onTransitionStart?: () => void;
+    onTransitionEnd?: () => void;
+}
+export default function useCollapse({ isCollapsed, duration, delay, easing, onTransitionStart, onTransitionEnd }?: UseCollapseProps): {
+    targetRef: import('react').RefObject<HTMLDivElement>;
+    isCollapsed: boolean;
+    height: CSSValue;
+    style: {
+        height: CSSValue;
+        overflow: string;
+    };
+    ariaProps: {
+        'aria-hidden': boolean;
+    };
+};

package/hooks/interactions/useCollapse/useCollapse.es.js

@@ -0,0 +1,51 @@
+import { useRef as r, useState as M } from "react";
+import P from "../../useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.es.js";
+import $ from "../../usePrefersReducedMotion/usePrefersReducedMotion.es.js";
+function L({
+  isCollapsed: t = !0,
+  duration: o = 200,
+  delay: f = 0,
+  easing: i = "ease-in-out",
+  onTransitionStart: s,
+  onTransitionEnd: h
+} = {}) {
+  const { prefersReducedMotion: H } = $(), l = r(null), e = r(null), u = r(s), c = r(h), m = r(!0);
+  u.current = s, c.current = h;
+  const [p, d] = M(t ? "0px" : "auto");
+  return P(() => {
+    var g;
+    if (m.current) {
+      m.current = !1;
+      return;
+    }
+    const n = l.current;
+    if (!n) return;
+    e.current && (e.current.cancel(), e.current = null);
+    const a = n.scrollHeight, w = t ? [{ height: `${a}px` }, { height: "0px" }] : [{ height: "0px" }, { height: `${a}px` }], y = t ? "0px" : "auto";
+    return (g = u.current) == null || g.call(u), e.current = n.animate(w, {
+      duration: H ? 0 : o,
+      easing: i,
+      delay: f,
+      fill: "forwards"
+    }), e.current.onfinish = () => {
+      var x, R;
+      (x = e.current) == null || x.commitStyles(), d(y), (R = c.current) == null || R.call(c), e.current = null;
+    }, () => {
+      e.current && (e.current.cancel(), e.current = null);
+    };
+  }, [t, o, f, i]), {
+    targetRef: l,
+    isCollapsed: t,
+    height: p,
+    style: {
+      height: p,
+      overflow: "hidden"
+    },
+    ariaProps: {
+      "aria-hidden": t
+    }
+  };
+}
+export {
+  L as default
+};

package/hooks/useFocusBoundary/useFocusBoundary.d.ts

@@ -1,6 +1,6 @@
 import { RefObject } from 'react';
 
-interface UseFocusBoundaryProps {
+export interface UseFocusBoundaryProps {
     ref: RefObject<HTMLElement>;
     active?: boolean;
     disabled?: boolean;

package/hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react"),t=require("../../utils/isServer/isServer.cjs"),u=t.default()?e.useEffect:e.useLayoutEffect;exports.default=u;

package/hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.d.ts

@@ -0,0 +1,4 @@
+import { useEffect } from 'react';
+
+declare const useIsomorphicLayoutEffect: typeof useEffect;
+export default useIsomorphicLayoutEffect;

package/hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.es.js

@@ -0,0 +1,6 @@
+import { useLayoutEffect as e, useEffect as o } from "react";
+import t from "../../utils/isServer/isServer.es.js";
+const s = t() ? o : e;
+export {
+  s as default
+};

package/hooks/usePrefersReducedMotion/usePrefersReducedMotion.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const d=require("react"),o=require("../../utils/isPrefersReducedMotion/isPrefersReducedMotion.cjs");function c(){const[n,r]=d.useState(()=>o.default());return d.useEffect(()=>{if(typeof window>"u"||!(window!=null&&window.matchMedia))return;const e=window.matchMedia("(prefers-reduced-motion: reduce)"),t=u=>r(u.matches);return e.addEventListener("change",t),()=>{e.removeEventListener("change",t)}},[]),{prefersReducedMotion:n}}exports.default=c;

package/hooks/usePrefersReducedMotion/usePrefersReducedMotion.d.ts

@@ -0,0 +1,3 @@
+export default function usePrefersReducedMotion(): {
+    prefersReducedMotion: boolean;
+};

package/hooks/usePrefersReducedMotion/usePrefersReducedMotion.es.js

@@ -0,0 +1,15 @@
+import { useState as o, useEffect as i } from "react";
+import c from "../../utils/isPrefersReducedMotion/isPrefersReducedMotion.es.js";
+function a() {
+  const [d, n] = o(() => c());
+  return i(() => {
+    if (typeof window > "u" || !(window != null && window.matchMedia)) return;
+    const e = window.matchMedia("(prefers-reduced-motion: reduce)"), t = (r) => n(r.matches);
+    return e.addEventListener("change", t), () => {
+      e.removeEventListener("change", t);
+    };
+  }, []), { prefersReducedMotion: d };
+}
+export {
+  a as default
+};

package/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./Button/Button.cjs"),t=require("./Icon/Icon.cjs"),o=require("./Label/Label.cjs"),r=require("./Typography/Typography.cjs"),u=require("./Box/Box.cjs"),n=require("./Flexbox/Flexbox.cjs"),i=require("./TextField/TextField.cjs"),a=require("./TextArea/TextArea.cjs"),l=require("./IconButton/IconButton.cjs"),c=require("./PageControl/PageControl.cjs"),d=require("./Checkbox/Checkbox.cjs"),s=require("./Radio/Radio.cjs"),f=require("./Chip/Chip.cjs"),q=require("./SegmentedButton/SegmentedButton.cjs"),B=require("./SegmentedButton/SegmentedButtonBlock/SegmentedButtonBlock.cjs"),g=require("./Backdrop/Backdrop.cjs"),S=require("./Dialog/Dialog.cjs"),T=require("./Dialog/DialogTitle/DialogTitle.cjs"),k=require("./Dialog/DialogContent/DialogContent.cjs"),m=require("./Dialog/DialogAction/DialogAction.cjs"),p=require("./Dialog/DialogText/DialogText.cjs"),h=require("./Tooltip/Tooltip.cjs"),C=require("./Select/Select.cjs"),b=require("./Select/Option/Option.cjs"),x=require("./Menu/Menu.cjs"),D=require("./Menu/MenuBlock/MenuBlock.cjs");require("./Menu/MenuButton/MenuButton.cjs");const y=require("./Skeleton/Skeleton.cjs"),P=require("./Switch/Switch.cjs"),A=require("./BottomSheet/BottomSheet.cjs"),F=require("./BottomSheet/BottomSheetTitle/BottomSheetTitle.cjs"),I=require("./BottomSheet/BottomSheetContent/BottomSheetContent.cjs"),L=require("./BottomSheet/BottomSheetAction/BottomSheetAction.cjs"),v=require("./BottomSheet/BottomSheetText/BottomSheetText.cjs"),M=require("./Snackbar/Snackbar.cjs"),w=require("./ChainPicker/ChainPicker.cjs"),E=require("./DatePicker/DatePicker.cjs"),G=require("./DatePicker/EventDot/EventDot.cjs"),K=require("./DatePicker/EventDotGroup/EventDotGroup.cjs"),N=require("./FormControlText/FormControlText.cjs"),R=require("./ClickAwayListener/ClickAwayListener.cjs"),O=require("./Card/Card.cjs"),j=require("./LineProgressIndicator/LineProgressIndicator.cjs"),z=require("./CircularProgressIndicator/CircularProgressIndicator.cjs"),H=require("./NumberKeypad/NumberKeypad.cjs"),J=require("./NumberKeypad/NumberKeypadBlock/NumberKeypadBlock.cjs"),Q=require("./FocusBoundary/FocusBoundary.cjs"),U=require("./Badge/Badge.cjs"),V=require("./Tab/Tab.cjs"),W=require("./Tab/TabBlock/TabBlock.cjs"),X=require("./Slider/Slider.cjs"),Y=require("./Accordion/Accordion.cjs"),Z=require("./RadioGroup/RadioGroup.cjs");exports.Button=e.default;exports.Icon=t.default;exports.Label=o.default;exports.Typography=r.default;exports.Box=u.default;exports.Flexbox=n.default;exports.TextField=i.default;exports.TextArea=a.default;exports.IconButton=l.default;exports.PageControl=c.default;exports.Checkbox=d.default;exports.Radio=s.default;exports.Chip=f.default;exports.SegmentedButton=q.default;exports.SegmentedButtonBlock=B.default;exports.Backdrop=g.default;exports.Dialog=S.default;exports.DialogTitle=T.default;exports.DialogContent=k.default;exports.DialogAction=m.default;exports.DialogText=p.default;exports.Tooltip=h.default;exports.Select=C.default;exports.Option=b.default;exports.Menu=x.default;exports.MenuBlock=D.default;exports.Skeleton=y.default;exports.Switch=P.default;exports.BottomSheet=A.default;exports.BottomSheetTitle=F.default;exports.BottomSheetContent=I.default;exports.BottomSheetAction=L.default;exports.BottomSheetText=v.default;exports.Snackbar=M.default;exports.ChainPicker=w.default;exports.DatePicker=E.default;exports.EventDot=G.default;exports.EventDotGroup=K.default;exports.FormControlText=N.default;exports.ClickAwayListener=R.default;exports.Card=O.default;exports.LineProgressIndicator=j.default;exports.CircularProgressIndicator=z.default;exports.NumberKeypad=H.default;exports.NumberKeypadBlock=J.default;exports.FocusBoundary=Q.default;exports.Badge=U.default;exports.Tab=V.default;exports.TabBlock=W.default;exports.Slider=X.default;exports.Accordion=Y.default;exports.RadioGroup=Z.default;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./Button/Button.cjs"),t=require("./Icon/Icon.cjs"),o=require("./Label/Label.cjs"),r=require("./Typography/Typography.cjs"),u=require("./Box/Box.cjs"),n=require("./Flexbox/Flexbox.cjs"),a=require("./TextField/TextField.cjs"),i=require("./TextArea/TextArea.cjs"),l=require("./IconButton/IconButton.cjs"),c=require("./PageControl/PageControl.cjs"),d=require("./Checkbox/Checkbox.cjs"),s=require("./Radio/Radio.cjs"),f=require("./Chip/Chip.cjs"),q=require("./SegmentedButton/SegmentedButton.cjs"),B=require("./SegmentedButton/SegmentedButtonBlock/SegmentedButtonBlock.cjs"),g=require("./Backdrop/Backdrop.cjs"),S=require("./Dialog/Dialog.cjs"),p=require("./Dialog/DialogTitle/DialogTitle.cjs"),T=require("./Dialog/DialogContent/DialogContent.cjs"),k=require("./Dialog/DialogAction/DialogAction.cjs"),C=require("./Dialog/DialogText/DialogText.cjs"),m=require("./Tooltip/Tooltip.cjs"),h=require("./Select/Select.cjs"),b=require("./Select/Option/Option.cjs"),x=require("./Menu/Menu.cjs"),D=require("./Menu/MenuBlock/MenuBlock.cjs");require("./Menu/MenuButton/MenuButton.cjs");const y=require("./Skeleton/Skeleton.cjs"),P=require("./Switch/Switch.cjs"),A=require("./BottomSheet/BottomSheet.cjs"),F=require("./BottomSheet/BottomSheetTitle/BottomSheetTitle.cjs"),I=require("./BottomSheet/BottomSheetContent/BottomSheetContent.cjs"),L=require("./BottomSheet/BottomSheetAction/BottomSheetAction.cjs"),v=require("./BottomSheet/BottomSheetText/BottomSheetText.cjs"),M=require("./Snackbar/Snackbar.cjs"),w=require("./ChainPicker/ChainPicker.cjs"),E=require("./DatePicker/DatePicker.cjs"),G=require("./DatePicker/EventDot/EventDot.cjs"),K=require("./DatePicker/EventDotGroup/EventDotGroup.cjs"),N=require("./FormControlText/FormControlText.cjs"),R=require("./ClickAwayListener/ClickAwayListener.cjs"),O=require("./Card/Card.cjs"),j=require("./LineProgressIndicator/LineProgressIndicator.cjs"),z=require("./CircularProgressIndicator/CircularProgressIndicator.cjs"),H=require("./NumberKeypad/NumberKeypad.cjs"),J=require("./NumberKeypad/NumberKeypadBlock/NumberKeypadBlock.cjs"),Q=require("./FocusBoundary/FocusBoundary.cjs"),U=require("./Badge/Badge.cjs"),V=require("./Tab/Tab.cjs"),W=require("./Tab/TabBlock/TabBlock.cjs"),X=require("./Slider/Slider.cjs"),Y=require("./Accordion/Accordion.cjs"),Z=require("./RadioGroup/RadioGroup.cjs"),_=require("./Collapse/Collapse.cjs");exports.Button=e.default;exports.Icon=t.default;exports.Label=o.default;exports.Typography=r.default;exports.Box=u.default;exports.Flexbox=n.default;exports.TextField=a.default;exports.TextArea=i.default;exports.IconButton=l.default;exports.PageControl=c.default;exports.Checkbox=d.default;exports.Radio=s.default;exports.Chip=f.default;exports.SegmentedButton=q.default;exports.SegmentedButtonBlock=B.default;exports.Backdrop=g.default;exports.Dialog=S.default;exports.DialogTitle=p.default;exports.DialogContent=T.default;exports.DialogAction=k.default;exports.DialogText=C.default;exports.Tooltip=m.default;exports.Select=h.default;exports.Option=b.default;exports.Menu=x.default;exports.MenuBlock=D.default;exports.Skeleton=y.default;exports.Switch=P.default;exports.BottomSheet=A.default;exports.BottomSheetTitle=F.default;exports.BottomSheetContent=I.default;exports.BottomSheetAction=L.default;exports.BottomSheetText=v.default;exports.Snackbar=M.default;exports.ChainPicker=w.default;exports.DatePicker=E.default;exports.EventDot=G.default;exports.EventDotGroup=K.default;exports.FormControlText=N.default;exports.ClickAwayListener=R.default;exports.Card=O.default;exports.LineProgressIndicator=j.default;exports.CircularProgressIndicator=z.default;exports.NumberKeypad=H.default;exports.NumberKeypadBlock=J.default;exports.FocusBoundary=Q.default;exports.Badge=U.default;exports.Tab=V.default;exports.TabBlock=W.default;exports.Slider=X.default;exports.Accordion=Y.default;exports.RadioGroup=Z.default;exports.Collapse=_.default;

package/index.d.ts

@@ -37,3 +37,4 @@ export { default as Tab, TabBlock } from './Tab';
 export { default as Slider } from './Slider';
 export { default as Accordion } from './Accordion';
 export { default as RadioGroup } from './RadioGroup';
+export { default as Collapse } from './Collapse';

package/index.es.js

@@ -1,13 +1,13 @@
 import { default as a } from "./Button/Button.es.js";
 import { default as f } from "./Icon/Icon.es.js";
 import { default as d } from "./Label/Label.es.js";
-import { default as m } from "./Typography/Typography.es.js";
+import { default as p } from "./Typography/Typography.es.js";
 import { default as x } from "./Box/Box.es.js";
 import { default as n } from "./Flexbox/Flexbox.es.js";
 import { default as c } from "./TextField/TextField.es.js";
 import { default as g } from "./TextArea/TextArea.es.js";
 import { default as k } from "./IconButton/IconButton.es.js";
-import { default as h } from "./PageControl/PageControl.es.js";
+import { default as T } from "./PageControl/PageControl.es.js";
 import { default as b } from "./Checkbox/Checkbox.es.js";
 import { default as y } from "./Radio/Radio.es.js";
 import { default as P } from "./Chip/Chip.es.js";
@@ -25,17 +25,17 @@ import { default as X } from "./Select/Option/Option.es.js";
 import { default as Z } from "./Menu/Menu.es.js";
 import { default as $ } from "./Menu/MenuBlock/MenuBlock.es.js";
 import "./Menu/MenuButton/MenuButton.es.js";
-import { default as to } from "./Skeleton/Skeleton.es.js";
+import { default as eo } from "./Skeleton/Skeleton.es.js";
 import { default as ao } from "./Switch/Switch.es.js";
 import { default as fo } from "./BottomSheet/BottomSheet.es.js";
 import { default as uo } from "./BottomSheet/BottomSheetTitle/BottomSheetTitle.es.js";
-import { default as po } from "./BottomSheet/BottomSheetContent/BottomSheetContent.es.js";
+import { default as mo } from "./BottomSheet/BottomSheetContent/BottomSheetContent.es.js";
 import { default as so } from "./BottomSheet/BottomSheetAction/BottomSheetAction.es.js";
 import { default as io } from "./BottomSheet/BottomSheetText/BottomSheetText.es.js";
 import { default as Bo } from "./Snackbar/Snackbar.es.js";
 import { default as So } from "./ChainPicker/ChainPicker.es.js";
-import { default as To } from "./DatePicker/DatePicker.es.js";
-import { default as Co } from "./DatePicker/EventDot/EventDot.es.js";
+import { default as Co } from "./DatePicker/DatePicker.es.js";
+import { default as ho } from "./DatePicker/EventDot/EventDot.es.js";
 import { default as Do } from "./DatePicker/EventDotGroup/EventDotGroup.es.js";
 import { default as Ao } from "./FormControlText/FormControlText.es.js";
 import { default as Fo } from "./ClickAwayListener/ClickAwayListener.es.js";
@@ -51,13 +51,14 @@ import { default as Uo } from "./Tab/TabBlock/TabBlock.es.js";
 import { default as Wo } from "./Slider/Slider.es.js";
 import { default as Yo } from "./Accordion/Accordion.es.js";
 import { default as _o } from "./RadioGroup/RadioGroup.es.js";
+import { default as oe } from "./Collapse/Collapse.es.js";
 export {
   Yo as Accordion,
   E as Backdrop,
   zo as Badge,
   fo as BottomSheet,
   so as BottomSheetAction,
-  po as BottomSheetContent,
+  mo as BottomSheetContent,
   io as BottomSheetText,
   uo as BottomSheetTitle,
   x as Box,
@@ -68,13 +69,14 @@ export {
   P as Chip,
   Go as CircularProgressIndicator,
   Fo as ClickAwayListener,
-  To as DatePicker,
+  oe as Collapse,
+  Co as DatePicker,
   K as Dialog,
   q as DialogAction,
   O as DialogContent,
   H as DialogText,
   N as DialogTitle,
-  Co as EventDot,
+  ho as EventDot,
   Do as EventDotGroup,
   n as Flexbox,
   jo as FocusBoundary,
@@ -88,13 +90,13 @@ export {
   Mo as NumberKeypad,
   Ro as NumberKeypadBlock,
   X as Option,
-  h as PageControl,
+  T as PageControl,
   y as Radio,
   _o as RadioGroup,
   I as SegmentedButton,
   v as SegmentedButtonBlock,
   V as Select,
-  to as Skeleton,
+  eo as Skeleton,
   Wo as Slider,
   Bo as Snackbar,
   ao as Switch,
@@ -103,5 +105,5 @@ export {
   g as TextArea,
   c as TextField,
   Q as Tooltip,
-  m as Typography
+  p as Typography
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dotss/ui",
-  "version": "1.2.2",
+  "version": "1.3.0",
   "description": "React UI components for Dotss",
   "type": "module",
   "main": "./index.cjs",

package/utils/isPrefersReducedMotion/isPrefersReducedMotion.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});function e(){return window!=null&&window.matchMedia?window.matchMedia("(prefers-reduced-motion: reduce)").matches:!1}exports.default=e;

package/utils/isPrefersReducedMotion/isPrefersReducedMotion.d.ts

@@ -0,0 +1 @@
+export default function isPrefersReducedMotion(): boolean;

package/utils/isPrefersReducedMotion/isPrefersReducedMotion.es.js

@@ -0,0 +1,6 @@
+function e() {
+  return window != null && window.matchMedia ? window.matchMedia("(prefers-reduced-motion: reduce)").matches : !1;
+}
+export {
+  e as default
+};

package/utils/isServer/isServer.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});function e(){return typeof document>"u"}exports.default=e;

package/utils/isServer/isServer.d.ts

@@ -0,0 +1 @@
+export default function isServer(): boolean;

package/utils/isServer/isServer.es.js

@@ -0,0 +1,6 @@
+function e() {
+  return typeof document > "u";
+}
+export {
+  e as default
+};