@dotss/ui 0.0.4 → 0.0.7

package/dist/Badge/Badge.es.js

@@ -0,0 +1,98 @@
+import { jsx as a, jsxs as p } from "@emotion/react/jsx-runtime";
+import { forwardRef as u } from "react";
+import g from "@emotion/styled";
+const m = g.div`
+  position: relative;
+  width: inherit;
+`, c = g.div`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  position: ${({ position: e }) => e};
+  border-radius: 20px;
+
+  ${({
+  theme: {
+    palette: { pink: e, etc: t }
+  },
+  color: r
+}) => {
+  let i = {
+    backgroundColor: e[90]
+  };
+  return r === "orange" && (i = {
+    backgroundColor: t.orange
+  }), i;
+}};
+
+  ${({ size: e, horizontal: t }) => {
+  let r = {
+    height: 8,
+    minWidth: 8,
+    top: 0,
+    left: t === "left" ? 0 : "auto",
+    right: t === "right" ? 0 : "auto"
+  };
+  return e === "large" && (r = {
+    height: 16,
+    minWidth: 16,
+    top: -4,
+    left: t === "left" ? -8 : "auto",
+    right: t === "right" ? -8 : "auto"
+  }), r;
+}};
+`, f = g.span`
+  ${({
+  theme: {
+    palette: { grey: e },
+    typography: { c4B: t }
+  }
+}) => ({
+  fontSize: t.size,
+  fontWeight: t.weight,
+  lineHeight: t.lineHeight,
+  letterSpacing: t.letterSpacing,
+  color: e.white
+})}
+`, x = u(function({
+  children: t,
+  color: r,
+  size: i = "small",
+  position: n = "absolute",
+  horizontal: d = "right",
+  content: l,
+  inlineCSS: h,
+  ...o
+}, s) {
+  return n === "static" ? /* @__PURE__ */ a(
+    c,
+    {
+      ref: s,
+      position: n,
+      color: r,
+      size: i,
+      horizontal: d,
+      ...o,
+      css: h,
+      children: i === "large" && l && /* @__PURE__ */ a(f, { children: l })
+    }
+  ) : /* @__PURE__ */ p(m, { children: [
+    /* @__PURE__ */ a(
+      c,
+      {
+        ref: s,
+        position: n,
+        color: r,
+        size: i,
+        horizontal: d,
+        ...o,
+        css: h,
+        children: i === "large" && l && /* @__PURE__ */ a(f, { children: l })
+      }
+    ),
+    t
+  ] });
+});
+export {
+  x as default
+};

package/dist/Badge/Badge.stories.d.ts

@@ -0,0 +1,14 @@
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: import('react').ForwardRefExoticComponent<import('./Badge').BadgeProps & import('react').RefAttributes<HTMLDivElement>>;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Absolute: Story;
+export declare const Static: Story;

package/dist/Badge/index.cjs

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

package/dist/Badge/index.d.ts

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

package/dist/Badge/index.es.js

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

package/dist/BottomSheet/BottomSheet.cjs

@@ -0,0 +1,33 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("@emotion/react/jsx-runtime"),r=require("react"),q=require("../Backdrop/Backdrop.cjs"),B=require("../Flexbox/Flexbox.cjs"),O=require("@emotion/styled"),C=e=>e&&e.__esModule?e:{default:e},l=C(O),P=l.default.div`
+  display: flex;
+  justify-content: flex-end;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  cursor: ${({isDragging:e})=>e?"grabbing":"default"};
+  overflow: hidden;
+`,A=l.default.div`
+  display: flex;
+  flex-direction: column;
+  max-height: 100%;
+  margin-top: ${({theme:{spacing:e}})=>`calc(var(--status-bar-height, 0px) + ${e.content(10)}px)`};
+  overflow-y: auto;
+  background-color: ${({theme:{palette:{grey:e}}})=>e.white};
+  border-radius: 16px 16px 0 0;
+  box-shadow: ${({theme:{elevation:e}})=>e[4]};
+  transition: transform ${({transitionDuration:e})=>e}ms;
+  transform: translate3d(0, ${({open:e})=>e?0:"100%"}, 0);
+`,H=l.default.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: ${({theme:{spacing:e}})=>e.content(3)}px
+    ${({theme:{spacing:e}})=>e.content(4)}px;
+  cursor: ${({isDragging:e})=>e?"grabbing":"grab"};
+`,I=l.default.div`
+  width: 32px;
+  height: 4px;
+  border-radius: 100px;
+  background-color: ${({theme:{palette:{grey:e}}})=>e[60]};
+  cursor: ${({isDragging:e})=>e?"grabbing":"grab"};
+`,L=r.forwardRef(function({children:y,open:a,onClose:n,transitionDuration:d=200,inlineCSS:b,enableDragCloseHandler:T,backdropProps:M,systemNavigationBarColor:S="#FFFFFF",hideSystemNavigationBar:$=!1,...w},k){const[D,g]=r.useState(!1),[o,f]=r.useState(!1),c=r.useRef(),h=r.useRef(0),u=r.useRef(0),j=t=>t.stopPropagation(),R=t=>{f(!1),o&&t.stopPropagation()},m=t=>()=>{f(!0),h.current=t},p=(t,i)=>()=>{o&&(u.current=t-h.current,!(u.current<0)&&(i.currentTarget.style.transitionDuration="0ms",i.currentTarget.style.transform=`translate3d(0, ${u.current}px, 0)`))},x=t=>{u.current>=20&&typeof n=="function"?(t.currentTarget.style.transitionDuration=`${d}ms`,t.currentTarget.style.transform="translate3d(0, 100%, 0)",n()):t.currentTarget.removeAttribute("style"),h.current=0,u.current=0,f(!1)},v=t=>{o&&t.currentTarget.removeAttribute("style")},E=t=>m(t.clientY)(),F=t=>p(t.clientY,t)(),_=t=>m(t.touches[0].clientY)(),Y=t=>p(t.touches[0].clientY,t)();return r.useEffect(()=>{a?(c.current&&clearTimeout(c.current),c.current=setTimeout(()=>{g(!0)},100)):g(!1)},[a]),r.useEffect(()=>{const t=i=>{i.key==="Escape"&&a&&n&&n()};return document.addEventListener("keydown",t),()=>document.removeEventListener("keydown",t)},[a,n]),r.useEffect(()=>()=>{c.current&&clearTimeout(c.current)},[]),s.jsx(q.default,{open:a,onClose:n,transitionDuration:d,fullScreen:!0,...M,children:s.jsx(P,{isDragging:o,onClick:R,children:s.jsxs(A,{ref:k,open:D,transitionDuration:d,onClick:j,onMouseMove:F,onMouseUp:x,onMouseOut:v,onTouchMove:Y,onTouchEnd:x,onTouchCancel:v,...w,css:b,children:[T&&s.jsx(H,{isDragging:o,onMouseDown:E,onTouchStart:_,children:s.jsx(I,{isDragging:o})}),y,!$&&s.jsx(B.default,{inlineCSS:{minHeight:"var(--system-navigation-bar-height, 0px)",backgroundColor:S}})]})})})});exports.default=L;

package/dist/BottomSheet/BottomSheet.d.ts

@@ -0,0 +1,15 @@
+import { HTMLAttributes } from 'react';
+import { BackdropProps } from '../Backdrop/Backdrop';
+import { GeneralComponentProps } from '../typings/component';
+
+export interface BottomSheetProps extends GeneralComponentProps<HTMLAttributes<HTMLDivElement>> {
+    open?: boolean;
+    onClose?: () => void;
+    transitionDuration?: number;
+    enableDragCloseHandler?: boolean;
+    backdropProps?: BackdropProps;
+    systemNavigationBarColor?: string;
+    hideSystemNavigationBar?: boolean;
+}
+declare const BottomSheet: import('react').ForwardRefExoticComponent<BottomSheetProps & import('react').RefAttributes<HTMLDivElement>>;
+export default BottomSheet;

package/dist/BottomSheet/BottomSheet.es.js

@@ -0,0 +1,131 @@
+import { jsx as s, jsxs as A } from "@emotion/react/jsx-runtime";
+import { forwardRef as H, useState as b, useRef as h, useEffect as m } from "react";
+import I from "../Backdrop/Backdrop.es.js";
+import L from "../Flexbox/Flexbox.es.js";
+import u from "@emotion/styled";
+const P = u.div`
+  display: flex;
+  justify-content: flex-end;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  cursor: ${({ isDragging: t }) => t ? "grabbing" : "default"};
+  overflow: hidden;
+`, W = u.div`
+  display: flex;
+  flex-direction: column;
+  max-height: 100%;
+  margin-top: ${({ theme: { spacing: t } }) => `calc(var(--status-bar-height, 0px) + ${t.content(10)}px)`};
+  overflow-y: auto;
+  background-color: ${({
+  theme: {
+    palette: { grey: t }
+  }
+}) => t.white};
+  border-radius: 16px 16px 0 0;
+  box-shadow: ${({ theme: { elevation: t } }) => t[4]};
+  transition: transform ${({ transitionDuration: t }) => t}ms;
+  transform: translate3d(0, ${({ open: t }) => t ? 0 : "100%"}, 0);
+`, K = u.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: ${({ theme: { spacing: t } }) => t.content(3)}px
+    ${({ theme: { spacing: t } }) => t.content(4)}px;
+  cursor: ${({ isDragging: t }) => t ? "grabbing" : "grab"};
+`, U = u.div`
+  width: 32px;
+  height: 4px;
+  border-radius: 100px;
+  background-color: ${({
+  theme: {
+    palette: { grey: t }
+  }
+}) => t[60]};
+  cursor: ${({ isDragging: t }) => t ? "grabbing" : "grab"};
+`, Q = H(function({
+  children: T,
+  open: o,
+  onClose: r,
+  transitionDuration: l = 200,
+  inlineCSS: $,
+  enableDragCloseHandler: w,
+  backdropProps: k,
+  systemNavigationBarColor: M = "#FFFFFF",
+  hideSystemNavigationBar: S = !1,
+  ...D
+}, F) {
+  const [E, g] = b(!1), [n, d] = b(!1), a = h(), f = h(0), c = h(0), Y = (e) => e.stopPropagation(), B = (e) => {
+    d(!1), n && e.stopPropagation();
+  }, p = (e) => () => {
+    d(!0), f.current = e;
+  }, x = (e, i) => () => {
+    n && (c.current = e - f.current, !(c.current < 0) && (i.currentTarget.style.transitionDuration = "0ms", i.currentTarget.style.transform = `translate3d(0, ${c.current}px, 0)`));
+  }, v = (e) => {
+    c.current >= 20 && typeof r == "function" ? (e.currentTarget.style.transitionDuration = `${l}ms`, e.currentTarget.style.transform = "translate3d(0, 100%, 0)", r()) : e.currentTarget.removeAttribute("style"), f.current = 0, c.current = 0, d(!1);
+  }, y = (e) => {
+    n && e.currentTarget.removeAttribute("style");
+  }, R = (e) => p(e.clientY)(), j = (e) => x(e.clientY, e)(), C = (e) => p(e.touches[0].clientY)(), O = (e) => x(e.touches[0].clientY, e)();
+  return m(() => {
+    o ? (a.current && clearTimeout(a.current), a.current = setTimeout(() => {
+      g(!0);
+    }, 100)) : g(!1);
+  }, [o]), m(() => {
+    const e = (i) => {
+      i.key === "Escape" && o && r && r();
+    };
+    return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
+  }, [o, r]), m(() => () => {
+    a.current && clearTimeout(a.current);
+  }, []), /* @__PURE__ */ s(
+    I,
+    {
+      open: o,
+      onClose: r,
+      transitionDuration: l,
+      fullScreen: !0,
+      ...k,
+      children: /* @__PURE__ */ s(P, { isDragging: n, onClick: B, children: /* @__PURE__ */ A(
+        W,
+        {
+          ref: F,
+          open: E,
+          transitionDuration: l,
+          onClick: Y,
+          onMouseMove: j,
+          onMouseUp: v,
+          onMouseOut: y,
+          onTouchMove: O,
+          onTouchEnd: v,
+          onTouchCancel: y,
+          ...D,
+          css: $,
+          children: [
+            w && /* @__PURE__ */ s(
+              K,
+              {
+                isDragging: n,
+                onMouseDown: R,
+                onTouchStart: C,
+                children: /* @__PURE__ */ s(U, { isDragging: n })
+              }
+            ),
+            T,
+            !S && /* @__PURE__ */ s(
+              L,
+              {
+                inlineCSS: {
+                  minHeight: "var(--system-navigation-bar-height, 0px)",
+                  backgroundColor: M
+                }
+              }
+            )
+          ]
+        }
+      ) })
+    }
+  );
+});
+export {
+  Q as default
+};

package/dist/BottomSheet/BottomSheet.stories.d.ts

@@ -0,0 +1,29 @@
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: import('react').ForwardRefExoticComponent<import('./BottomSheet').BottomSheetProps & import('react').RefAttributes<HTMLDivElement>>;
+    parameters: {
+        layout: string;
+    };
+    argTypes: {
+        backdropProps: {
+            control: {
+                disable: true;
+            };
+        };
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const FullFeature: Story;
+export declare const WithBottomSheetTitle: Story;
+export declare const WithBottomSheetContent: Story;
+export declare const WithBottomSheetAction: Story;
+export declare const Custom: Story;
+export declare const MaxHeight: Story;
+export declare const MaxHeightWithBottomSheetContent: Story;
+export declare const EnableDragCloseHandler: Story;
+export declare const InContainer: Story;

package/dist/BottomSheet/BottomSheetAction/BottomSheetAction.cjs

@@ -0,0 +1,15 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("@emotion/react/jsx-runtime"),l=require("react"),s=require("@emotion/styled"),u=t=>t&&t.__esModule?t:{default:t},d=u(s),a=d.default.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: ${({theme:{spacing:t}})=>t.content(2)}px;
+  width: 100%;
+  margin-top: -${({theme:{spacing:t}})=>t.content(1)}px;
+  padding: ${({theme:{spacing:t}})=>`0 ${t.content(4)}px ${t.content(3)}px`};
+
+  & > button {
+    width: calc(100% / 3);
+    flex-grow: 1;
+  }
+`,f=l.forwardRef(function({children:e,enableAdjustSpacing:o,inlineCSS:n,...c},r){return i.jsx(a,{ref:r,enableAdjustSpacing:o,...c,css:n,children:e})});exports.default=f;

package/dist/BottomSheet/BottomSheetAction/BottomSheetAction.d.ts

@@ -0,0 +1,8 @@
+import { HTMLAttributes } from 'react';
+import { GeneralComponentProps } from '../../typings/component';
+
+export interface BottomSheetActionProps extends GeneralComponentProps<HTMLAttributes<HTMLDivElement>> {
+    enableAdjustSpacing?: boolean;
+}
+declare const BottomSheetAction: import('react').ForwardRefExoticComponent<BottomSheetActionProps & import('react').RefAttributes<HTMLDivElement>>;
+export default BottomSheetAction;

package/dist/BottomSheet/BottomSheetAction/BottomSheetAction.es.js

@@ -0,0 +1,34 @@
+import { jsx as i } from "@emotion/react/jsx-runtime";
+import { forwardRef as m } from "react";
+import p from "@emotion/styled";
+const f = p.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: ${({ theme: { spacing: t } }) => t.content(2)}px;
+  width: 100%;
+  margin-top: -${({ theme: { spacing: t } }) => t.content(1)}px;
+  padding: ${({ theme: { spacing: t } }) => `0 ${t.content(4)}px ${t.content(3)}px`};
+
+  & > button {
+    width: calc(100% / 3);
+    flex-grow: 1;
+  }
+`, s = m(
+  function({ children: e, enableAdjustSpacing: o, inlineCSS: n, ...r }, c) {
+    return /* @__PURE__ */ i(
+      f,
+      {
+        ref: c,
+        enableAdjustSpacing: o,
+        ...r,
+        css: n,
+        children: e
+      }
+    );
+  }
+);
+export {
+  s as default
+};

package/dist/BottomSheet/BottomSheetAction/index.cjs

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

package/dist/BottomSheet/BottomSheetAction/index.d.ts

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

package/dist/BottomSheet/BottomSheetAction/index.es.js

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

package/dist/BottomSheet/BottomSheetContent/BottomSheetContent.cjs

@@ -0,0 +1,8 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("@emotion/react/jsx-runtime"),d=require("react"),s=require("@emotion/styled"),c=t=>t&&t.__esModule?t:{default:t},f=c(s),i=f.default.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${({theme:{spacing:t}})=>t.content(2)}px;
+  padding: ${({theme:{spacing:t},enableAdjustSpacing:e})=>e?`0 ${t.content(4)}px ${t.content(4)}px`:`${t.content(4)}px`};
+  overflow-y: auto;
+  flex: 1;
+`,a=d.forwardRef(function({children:e,enableAdjustSpacing:o,inlineCSS:n,...l},u){return r.jsx(i,{ref:u,enableAdjustSpacing:o,...l,css:n,children:e})});exports.default=a;

package/dist/BottomSheet/BottomSheetContent/BottomSheetContent.d.ts

@@ -0,0 +1,8 @@
+import { HTMLAttributes } from 'react';
+import { GeneralComponentProps } from '../../typings/component';
+
+export interface BottomSheetContentProps extends GeneralComponentProps<HTMLAttributes<HTMLDivElement>> {
+    enableAdjustSpacing?: boolean;
+}
+declare const BottomSheetContent: import('react').ForwardRefExoticComponent<BottomSheetContentProps & import('react').RefAttributes<HTMLDivElement>>;
+export default BottomSheetContent;

package/dist/BottomSheet/BottomSheetContent/BottomSheetContent.es.js

@@ -0,0 +1,27 @@
+import { jsx as f } from "@emotion/react/jsx-runtime";
+import { forwardRef as d } from "react";
+import l from "@emotion/styled";
+const p = l.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme: { spacing: t } }) => t.content(2)}px;
+  padding: ${({ theme: { spacing: t }, enableAdjustSpacing: o }) => o ? `0 ${t.content(4)}px ${t.content(4)}px` : `${t.content(4)}px`};
+  overflow-y: auto;
+  flex: 1;
+`, s = d(
+  function({ children: o, enableAdjustSpacing: e, inlineCSS: n, ...r }, m) {
+    return /* @__PURE__ */ f(
+      p,
+      {
+        ref: m,
+        enableAdjustSpacing: e,
+        ...r,
+        css: n,
+        children: o
+      }
+    );
+  }
+);
+export {
+  s as default
+};

package/dist/BottomSheet/BottomSheetContent/index.cjs

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

package/dist/BottomSheet/BottomSheetContent/index.d.ts

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

package/dist/BottomSheet/BottomSheetContent/index.es.js

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

package/dist/BottomSheet/BottomSheetText/BottomSheetText.cjs

@@ -0,0 +1,5 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("@emotion/react/jsx-runtime"),u=require("react"),a=require("@emotion/styled"),c=e=>e&&e.__esModule?e:{default:e},g=c(a),f=g.default.div`
+  text-align: ${({textAlign:e})=>e};
+
+  ${({theme:{palette:{grey:e},typography:{b2R:t,b4R:i}},type:n})=>n==="sub"?{fontSize:i.size,fontWeight:i.weight,lineHeight:i.lineHeight,letterSpacing:i.letterSpacing,color:e[70]}:{fontSize:t.size,fontWeight:t.weight,lineHeight:t.lineHeight,letterSpacing:t.letterSpacing}}
+`,d=u.forwardRef(function({children:t,type:i="main",textAlign:n="center",inlineCSS:o,...r},l){return s.jsx(f,{ref:l,type:i,textAlign:n,...r,css:o,children:t})});exports.default=d;

package/dist/BottomSheet/BottomSheetText/BottomSheetText.d.ts

@@ -0,0 +1,10 @@
+import { HTMLAttributes } from 'react';
+import { Property } from 'csstype';
+import { GeneralComponentProps } from '../../typings/component';
+
+export interface BottomSheetTextProps extends GeneralComponentProps<HTMLAttributes<HTMLDivElement>> {
+    type?: 'main' | 'sub';
+    textAlign?: Property.TextAlign;
+}
+declare const BottomSheetText: import('react').ForwardRefExoticComponent<BottomSheetTextProps & import('react').RefAttributes<HTMLDivElement>>;
+export default BottomSheetText;

package/dist/BottomSheet/BottomSheetText/BottomSheetText.es.js

@@ -0,0 +1,30 @@
+import { jsx as l } from "@emotion/react/jsx-runtime";
+import { forwardRef as h } from "react";
+import f from "@emotion/styled";
+const a = f.div`
+  text-align: ${({ textAlign: i }) => i};
+
+  ${({
+  theme: {
+    palette: { grey: i },
+    typography: { b2R: t, b4R: e }
+  },
+  type: o
+}) => o === "sub" ? {
+  fontSize: e.size,
+  fontWeight: e.weight,
+  lineHeight: e.lineHeight,
+  letterSpacing: e.letterSpacing,
+  color: i[70]
+} : {
+  fontSize: t.size,
+  fontWeight: t.weight,
+  lineHeight: t.lineHeight,
+  letterSpacing: t.letterSpacing
+}}
+`, s = h(function({ children: t, type: e = "main", textAlign: o = "center", inlineCSS: n, ...r }, g) {
+  return /* @__PURE__ */ l(a, { ref: g, type: e, textAlign: o, ...r, css: n, children: t });
+});
+export {
+  s as default
+};

package/dist/BottomSheet/BottomSheetText/index.cjs

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

package/dist/BottomSheet/BottomSheetText/index.d.ts

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

package/dist/BottomSheet/BottomSheetText/index.es.js

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

package/dist/BottomSheet/BottomSheetTitle/BottomSheetTitle.cjs

@@ -0,0 +1,28 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("@emotion/react/jsx-runtime"),u=require("react"),p=require("../../Icon/Icon.cjs"),f=require("@emotion/styled"),h=e=>e&&e.__esModule?e:{default:e},o=h(f),x=o.default.div`
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: ${({theme:{spacing:e}})=>e.content(3)}px
+    ${({theme:{spacing:e}})=>e.content(4)}px;
+  gap: ${({theme:{spacing:e}})=>e.content(2)}px;
+  min-height: 48px;
+  max-height: 48px;
+  border-bottom: 1px solid
+    ${({theme:{palette:{grey:e}},hideLine:n})=>n?"transparent":e[10]};
+`,m=o.default.div`
+  flex-grow: 1;
+  text-align: center;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+
+  ${({theme:{typography:{h4B:e}}})=>({fontSize:e.size,fontWeight:e.weight,lineHeight:e.lineHeight,letterSpacing:e.letterSpacing})};
+`,g=o.default.button`
+  position: absolute;
+  top: 50%;
+  right: 16px;
+  transform: translateY(-50%);
+`,i=o.default.div`
+  min-width: 24px;
+`,S=u.forwardRef(function({children:n,onClose:l,hideCloseButton:s,hideLine:a,inlineCSS:r,...c},d){return t.jsxs(x,{ref:d,hideLine:a,...c,css:r,children:[t.jsx(i,{}),t.jsx(m,{children:n}),t.jsx(i,{}),!s&&t.jsx(g,{className:"closeButton",onClick:l,"aria-label":"창 닫기",children:t.jsx(p.default,{name:"CloseLine"})})]})});exports.default=S;

package/dist/BottomSheet/BottomSheetTitle/BottomSheetTitle.d.ts

@@ -0,0 +1,10 @@
+import { HTMLAttributes } from 'react';
+import { GeneralComponentProps } from '../../typings/component';
+
+export interface BottomSheetTitleProps extends GeneralComponentProps<HTMLAttributes<HTMLDivElement>> {
+    onClose?: () => void;
+    hideCloseButton?: boolean;
+    hideLine?: boolean;
+}
+declare const BottomSheetTitle: import('react').ForwardRefExoticComponent<BottomSheetTitleProps & import('react').RefAttributes<HTMLDivElement>>;
+export default BottomSheetTitle;

package/dist/BottomSheet/BottomSheetTitle/BottomSheetTitle.es.js

@@ -0,0 +1,58 @@
+import { jsxs as c, jsx as e } from "@emotion/react/jsx-runtime";
+import { forwardRef as h } from "react";
+import d from "../../Icon/Icon.es.js";
+import o from "@emotion/styled";
+const f = o.div`
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: ${({ theme: { spacing: t } }) => t.content(3)}px
+    ${({ theme: { spacing: t } }) => t.content(4)}px;
+  gap: ${({ theme: { spacing: t } }) => t.content(2)}px;
+  min-height: 48px;
+  max-height: 48px;
+  border-bottom: 1px solid
+    ${({
+  theme: {
+    palette: { grey: t }
+  },
+  hideLine: i
+}) => i ? "transparent" : t[10]};
+`, x = o.div`
+  flex-grow: 1;
+  text-align: center;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+
+  ${({
+  theme: {
+    typography: { h4B: t }
+  }
+}) => ({
+  fontSize: t.size,
+  fontWeight: t.weight,
+  lineHeight: t.lineHeight,
+  letterSpacing: t.letterSpacing
+})};
+`, g = o.button`
+  position: absolute;
+  top: 50%;
+  right: 16px;
+  transform: translateY(-50%);
+`, n = o.div`
+  min-width: 24px;
+`, v = h(
+  function({ children: i, onClose: r, hideCloseButton: l, hideLine: s, inlineCSS: p, ...a }, m) {
+    return /* @__PURE__ */ c(f, { ref: m, hideLine: s, ...a, css: p, children: [
+      /* @__PURE__ */ e(n, {}),
+      /* @__PURE__ */ e(x, { children: i }),
+      /* @__PURE__ */ e(n, {}),
+      !l && /* @__PURE__ */ e(g, { className: "closeButton", onClick: r, "aria-label": "창 닫기", children: /* @__PURE__ */ e(d, { name: "CloseLine" }) })
+    ] });
+  }
+);
+export {
+  v as default
+};

package/dist/BottomSheet/BottomSheetTitle/index.cjs

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

package/dist/BottomSheet/BottomSheetTitle/index.d.ts

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

package/dist/BottomSheet/BottomSheetTitle/index.es.js

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

package/dist/BottomSheet/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("./BottomSheet.cjs"),e=require("./BottomSheetTitle/BottomSheetTitle.cjs"),o=require("./BottomSheetContent/BottomSheetContent.cjs"),u=require("./BottomSheetAction/BottomSheetAction.cjs"),r=require("./BottomSheetText/BottomSheetText.cjs");exports.default=t.default;exports.BottomSheetTitle=e.default;exports.BottomSheetContent=o.default;exports.BottomSheetAction=u.default;exports.BottomSheetText=r.default;