@dotss/ui 0.0.4 → 0.0.6

package/dist/SegmentedButton/SegmentedButtonBlock/SegmentedButtonBlock.es.js

@@ -0,0 +1,177 @@
+import { jsxs as s, jsx as p } from "@emotion/react/jsx-runtime";
+import { forwardRef as g } from "react";
+import n from "@emotion/styled";
+const b = n.button`
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  padding: 0 ${({ theme: { spacing: e } }) => e.content(4)}px;
+  border: 1px solid transparent;
+  background-color: ${({
+  theme: {
+    palette: { grey: e }
+  }
+}) => e[10]};
+
+  ${({
+  theme: {
+    palette: { brand: e, grey: t }
+  },
+  variant: o,
+  color: r,
+  isActive: l
+}) => {
+  let i = null;
+  switch (o) {
+    case "outlined":
+      i = {
+        marginRight: -1,
+        borderColor: t[30]
+      }, r === "primary" && l && (i = {
+        ...i,
+        backgroundColor: e.primary.disableLine,
+        borderColor: e.primary.line,
+        zIndex: 1
+      }), r === "secondary" && l && (i = {
+        ...i,
+        backgroundColor: t.white,
+        borderColor: t[100],
+        zIndex: 1
+      });
+      break;
+  }
+  return i;
+}};
+
+  ${({ isFirst: e, isLast: t }) => {
+  let o = null;
+  return e && (o = {
+    borderTopLeftRadius: 8,
+    borderBottomLeftRadius: 8
+  }), t && (o = {
+    borderTopRightRadius: 8,
+    borderBottomRightRadius: 8
+  }), o;
+}};
+
+  ${({ rounded: e }) => e ? null : { borderRadius: 0 }};
+
+  &:disabled {
+    ${({
+  theme: {
+    palette: { grey: e, background: t }
+  },
+  variant: o
+}) => {
+  let r = {
+    cursor: "default"
+  };
+  return o === "outlined" && (r = {
+    ...r,
+    backgroundColor: t.primary,
+    borderColor: e[30],
+    "& > div": {
+      color: e[30]
+    }
+  }), o === "solid" && (r = {
+    ...r,
+    "& > div": {
+      color: e[30]
+    }
+  }), r;
+}};
+  }
+`, x = n.div`
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+
+  ${({
+  theme: {
+    palette: { grey: e },
+    typography: { b4M: t }
+  },
+  isActive: o
+}) => ({
+  fontSize: t.size,
+  fontWeight: t.weight,
+  lineHeight: t.lineHeight,
+  letterSpacing: t.letterSpacing,
+  color: o ? void 0 : e[70]
+})};
+`, y = n.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: ${({ theme: { spacing: e } }) => e.content(1)}px;
+`, k = n.span`
+  position: absolute;
+  top: 50%;
+  right: 0;
+  transform: translateY(-50%);
+  width: 1px;
+  height: 20px;
+  background-color: ${({
+  theme: {
+    palette: { grey: e }
+  }
+}) => e[30]};
+`, $ = n.span`
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  height: 4px;
+  background-color: ${({
+  theme: {
+    palette: { grey: e }
+  }
+}) => e.black};
+`, C = g(
+  function({
+    variant: t = "outlined",
+    color: o = "primary",
+    text: r,
+    label: l,
+    isFirst: i,
+    isLast: a,
+    isActive: d,
+    rounded: u = !0,
+    disabled: c,
+    inlineCSS: h,
+    ...m
+  }, f) {
+    return /* @__PURE__ */ s(
+      b,
+      {
+        ref: f,
+        variant: t,
+        color: o,
+        rounded: u,
+        isFirst: i,
+        isLast: a,
+        isActive: d,
+        disabled: c,
+        ...m,
+        css: h,
+        children: [
+          /* @__PURE__ */ s(x, { isActive: d, children: [
+            /* @__PURE__ */ s(y, { children: [
+              r,
+              l
+            ] }),
+            t === "solid" && d && !c && /* @__PURE__ */ p($, {})
+          ] }),
+          t === "solid" && !a && /* @__PURE__ */ p(k, {})
+        ]
+      }
+    );
+  }
+);
+export {
+  C as default
+};

package/dist/SegmentedButton/SegmentedButtonBlock/index.cjs

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

package/dist/SegmentedButton/SegmentedButtonBlock/index.d.ts

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

package/dist/SegmentedButton/SegmentedButtonBlock/index.es.js

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

package/dist/SegmentedButton/index.cjs

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

package/dist/SegmentedButton/index.d.ts

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

package/dist/SegmentedButton/index.es.js

@@ -0,0 +1,6 @@
+import e from "./SegmentedButton.es.js";
+import { default as r } from "./SegmentedButtonBlock/SegmentedButtonBlock.es.js";
+export {
+  r as SegmentedButtonBlock,
+  e as default
+};

package/dist/Select/Option/Option.cjs

@@ -0,0 +1,32 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("@emotion/react/jsx-runtime"),x=require("react"),c=require("../../Icon/Icon.cjs"),g=require("@emotion/styled"),$=require("../../hooks/useCheckHoverPossible/useCheckHoverPossible.cjs"),m=e=>e&&e.__esModule?e:{default:e},u=m(g),v=u.default.li`
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  gap: ${({theme:{spacing:e}})=>e.content(2)}px;
+  padding: ${({theme:{spacing:e}})=>`calc(10px - 2px) ${e.content(3)}px`};
+  width: 100%;
+  cursor: pointer;
+  overflow: hidden;
+
+  &[disabled],
+  &[disabled] * {
+    color: ${({theme:e})=>e.palette.grey[30]};
+    pointer-events: none;
+    & svg {
+      color: ${({theme:e})=>e.palette.grey[30]};
+    }
+  }
+
+  ${({theme:{palette:e},isHoverPossible:t})=>t?{"&:hover":{background:e.grey[10]}}:{}}
+  &:hover {
+    background: ${({theme:e})=>e.palette.grey[10]};
+  }
+
+  ${({theme:{typography:e,palette:{grey:t,brand:i}},selected:r})=>r?{"&, & *":{fontSize:e.h5B.size,fontWeight:e.h5B.weight,lineHeight:e.h5B.lineHeight,letterSpacing:e.h5B.letterSpacing,color:i.primary.text,"& svg":{color:i.primary.text}}}:{"&, & *":{fontSize:e.b4R.size,fontWeight:e.b4R.weight,lineHeight:e.b4R.lineHeight,letterSpacing:e.b4R.letterSpacing,color:t[100]}}}
+
+  ${({theme:{palette:{grey:e}},focused:t})=>t?{border:`2px solid ${e[100]}`}:{border:"2px solid transparent"}}
+
+  ${({theme:{palette:{grey:e}},focused:t})=>t?{border:`2px solid ${e[100]}`}:{}}
+`,b=u.default.div`
+  ${({ellipsis:e})=>e?{overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}:{}}
+`,w=x.forwardRef(function({children:t,onClick:i,selected:r,focused:l,startAdornment:s,endAdornment:a,disabled:n=!1,ellipsis:d=!0,...f},p){const{isHoverPossible:h}=$.default();return o.jsxs(v,{role:"option",ref:p,onClick:i,selected:r,"aria-selected":r,focused:l,"data-focused":l,disabled:n,"aria-disabled":n,isHoverPossible:h,...f,children:[s,o.jsx(b,{ellipsis:d,style:{width:`calc(100% - ${s?"28px":"0px"} - ${a?"28px":"0px"}`},children:t}),!r&&a,r&&!n&&o.jsx(c.default,{name:"CheckLine",size:"small",color:"yellow.90"}),r&&n&&o.jsx(c.default,{name:"CheckLine",size:"small",color:"grey.30"})]})});exports.default=w;

package/dist/Select/Option/Option.d.ts

@@ -0,0 +1,17 @@
+import { HTMLAttributes, ReactNode } from 'react';
+import { GeneralComponentProps } from '../../typings/component';
+
+export interface OptionProps extends GeneralComponentProps<HTMLAttributes<HTMLLIElement>> {
+    value?: string;
+    selected?: boolean;
+    focused?: boolean;
+    onClick?: () => void;
+    startAdornment?: ReactNode;
+    endAdornment?: ReactNode;
+    disabled?: boolean;
+    ellipsis?: boolean;
+}
+declare const Option: import('react').ForwardRefExoticComponent<OptionProps & {
+    children?: ReactNode | undefined;
+} & import('react').RefAttributes<HTMLLIElement>>;
+export default Option;

package/dist/Select/Option/Option.es.js

@@ -0,0 +1,133 @@
+import { jsxs as u, jsx as n } from "@emotion/react/jsx-runtime";
+import { forwardRef as d } from "react";
+import c from "../../Icon/Icon.es.js";
+import p from "@emotion/styled";
+import g from "../../hooks/useCheckHoverPossible/useCheckHoverPossible.es.js";
+const $ = p.li`
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  gap: ${({ theme: { spacing: e } }) => e.content(2)}px;
+  padding: ${({ theme: { spacing: e } }) => `calc(10px - 2px) ${e.content(3)}px`};
+  width: 100%;
+  cursor: pointer;
+  overflow: hidden;
+
+  &[disabled],
+  &[disabled] * {
+    color: ${({ theme: e }) => e.palette.grey[30]};
+    pointer-events: none;
+    & svg {
+      color: ${({ theme: e }) => e.palette.grey[30]};
+    }
+  }
+
+  ${({ theme: { palette: e }, isHoverPossible: t }) => t ? {
+  "&:hover": {
+    background: e.grey[10]
+  }
+} : {}}
+  &:hover {
+    background: ${({ theme: e }) => e.palette.grey[10]};
+  }
+
+  ${({
+  theme: {
+    typography: e,
+    palette: { grey: t, brand: i }
+  },
+  selected: r
+}) => r ? {
+  "&, & *": {
+    fontSize: e.h5B.size,
+    fontWeight: e.h5B.weight,
+    lineHeight: e.h5B.lineHeight,
+    letterSpacing: e.h5B.letterSpacing,
+    color: i.primary.text,
+    "& svg": {
+      color: i.primary.text
+    }
+  }
+} : {
+  "&, & *": {
+    fontSize: e.b4R.size,
+    fontWeight: e.b4R.weight,
+    lineHeight: e.b4R.lineHeight,
+    letterSpacing: e.b4R.letterSpacing,
+    color: t[100]
+  }
+}}
+
+  ${({
+  theme: {
+    palette: { grey: e }
+  },
+  focused: t
+}) => t ? {
+  border: `2px solid ${e[100]}`
+} : {
+  border: "2px solid transparent"
+}}
+
+  ${({
+  theme: {
+    palette: { grey: e }
+  },
+  focused: t
+}) => t ? {
+  border: `2px solid ${e[100]}`
+} : {}}
+`, v = p.div`
+  ${({ ellipsis: e }) => e ? {
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap"
+} : {}}
+`, H = d(function({
+  children: t,
+  onClick: i,
+  selected: r,
+  focused: l,
+  startAdornment: s,
+  endAdornment: a,
+  disabled: o = !1,
+  ellipsis: f = !0,
+  ...h
+}, m) {
+  const { isHoverPossible: x } = g();
+  return /* @__PURE__ */ u(
+    $,
+    {
+      role: "option",
+      ref: m,
+      onClick: i,
+      selected: r,
+      "aria-selected": r,
+      focused: l,
+      "data-focused": l,
+      disabled: o,
+      "aria-disabled": o,
+      isHoverPossible: x,
+      ...h,
+      children: [
+        s,
+        /* @__PURE__ */ n(
+          v,
+          {
+            ellipsis: f,
+            style: {
+              width: `calc(100% - ${s ? "28px" : "0px"} - ${a ? "28px" : "0px"}`
+            },
+            children: t
+          }
+        ),
+        !r && a,
+        r && !o && /* @__PURE__ */ n(c, { name: "CheckLine", size: "small", color: "yellow.90" }),
+        r && o && /* @__PURE__ */ n(c, { name: "CheckLine", size: "small", color: "grey.30" })
+      ]
+    }
+  );
+});
+export {
+  H as default
+};

package/dist/Select/Option/index.cjs

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

package/dist/Select/Option/index.d.ts

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

package/dist/Select/Option/index.es.js

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

package/dist/Select/Select.cjs

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

package/dist/Select/Select.d.ts

@@ -0,0 +1,20 @@
+import { HTMLAttributes, ReactElement, ReactNode } from 'react';
+import { default as Option } from './Option';
+import { GeneralComponentProps, Size, Variant } from '../typings/component';
+
+export interface SelectProps extends GeneralComponentProps<Omit<HTMLAttributes<HTMLDivElement>, 'onChange'>> {
+    value: string;
+    onChange: (val: string) => void;
+    open?: boolean;
+    onOpen?: () => void;
+    onClose?: () => void;
+    variant?: Extract<Variant, 'outlined' | 'filled'>;
+    size?: Extract<Size, 'large' | 'xLarge'>;
+    startAdornment?: ReactNode;
+    placeholder?: string;
+    disabled?: boolean;
+    fullWidth?: boolean;
+    children?: ReactElement<typeof Option> | ReactElement<typeof Option>[];
+}
+declare const Select: import('react').ForwardRefExoticComponent<SelectProps & import('react').RefAttributes<HTMLDivElement>>;
+export default Select;