@soul-refiner/design-system 2.0.0-alpha.8 → 2.0.1-alpha.1

package/dist/components/input/calendar/calendar.js

@@ -0,0 +1,141 @@
+"use client";
+"use strict";var React=require("react"),styled=require("styled-components"),date$1=require("../../../common/date.js"),button=require("../../actions/button/button.js"),paragraph=require("../../atoms/typography/paragraph.js"),chevron_left=require("../../../icons/arrow/chevron_left.js"),chevron_right=require("../../../icons/arrow/chevron_right.js"),calendar=require("../../../icons/time/calendar.js"),date=require("../../../utils/date.js");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React);const CalendarInput=({selectedDate:e,onSelect:t,disablePastDates:l})=>{const o=new Date;o.setHours(0),o.setMinutes(0),o.setSeconds(0),o.setMilliseconds(0),new Date(o).setDate(1);const a=React__default.default.useRef(null),[r,n]=React__default.default.useState(!1),[d,i]=React__default.default.useState(()=>e?.toDateString()||(new Date).toDateString()),[u,c]=React__default.default.useState(()=>e?.toDateString()||(new Date).toDateString());React__default.default.useEffect(()=>{c(e?.toDateString()||(new Date).toDateString())},[e]);const s=e=>{var e=e.target,t=e.getAttribute("data-day"),a=e.getAttribute("data-month"),e=e.getAttribute("data-year");a=new Date(a+`-${t}-`+e),c(a.toDateString())};var f=date.buildCalendar(new Date(d).getMonth()+1,new Date(d).getFullYear()),[p,g,y]=(e||new Date).toLocaleString("default",{year:"2-digit",month:"2-digit",day:"2-digit"}).split("/");return React__default.default.createElement(Wrapper,{onBlurCapture:e=>{a?.current&&!a?.current?.contains(e.relatedTarget)&&n(!1)},ref:a,tabIndex:0},React__default.default.createElement(InputWrapper,null,React__default.default.createElement(Input,{value:e?p+` / ${g} / `+y:"",onFocus:()=>n(e=>!e),style:{letterSpacing:"1px",fontSize:"16px"},readOnly:!0}),React__default.default.createElement(calendar.Calendar,null)),r&&React__default.default.createElement(DateSelector,null,React__default.default.createElement(InnerWrapper,null,React__default.default.createElement("div",null,React__default.default.createElement(MonthBar,null,React__default.default.createElement(Arrow,{onClick:()=>{i(e=>{e=new Date(e);return e.setMonth(e.getMonth()-1),e.toDateString()})}},React__default.default.createElement(chevron_left.ChevronLeft,{size:24})),React__default.default.createElement(paragraph.P,null,Object.values(date$1.MONTHS)[Math.max(0,Math.min(new Date(d).getMonth(),11))]+" "+new Date(d).getFullYear()),React__default.default.createElement(Arrow,{onClick:()=>{i(e=>{e=new Date(e);return e.setMonth(e.getMonth()+1),e.toDateString()})}},React__default.default.createElement(chevron_right.ChevronRight,{size:24}))),React__default.default.createElement(WeekdayWrapper,null,Object.values(date$1.WEEKDAYS).map(e=>React__default.default.createElement(paragraph.P,{key:e},e))),React__default.default.createElement(Calendar,null,f.map((e,t)=>React__default.default.createElement(Week,{key:"week-"+t.toString(36)},e.map((e,t)=>{var a=new Date(`${e[1]}-${e[2]}-`+e[0]),r=0<o.getTime()-a.getTime(),n=e[1]!==date.zeroPad(new Date(d).getMonth()+1,2),r=l?r:n,n=Math.abs(a.getTime()-o.getTime())<.5,a=new Date(u).getTime()===a.getTime();return React__default.default.createElement(Day,{className:((n?"today":"")+(r?" not-current":"")+(a?" selected":"")).trim(),"data-day":e[2],"data-month":e[1],"data-year":e[0],key:"day-"+t.toString(36),onClick:s},(""+e[2]).startsWith("0")?(""+e[2])[1]:e[2])})))),React__default.default.createElement(BottomWrapper,null,React__default.default.createElement(button.Button,{onClick:()=>{c(e?.toDateString()||(new Date).toDateString()),n(!1)},size:"small",sx:"width: 80px;",type:"outlined"},"Cancel"),React__default.default.createElement(button.Button,{onClick:()=>{t(new Date(u)),n(!1)},size:"small",sx:"width: 80px;"},"Apply"))))))},Wrapper=styled.styled.div`
+  position: relative;
+  width: fit-content;
+  font-family: var(--font-inter);
+`,DateSelector=styled.styled.div`
+  transform: translateY(26px);
+  position: absolute;
+  z-index: 5;
+  background-color: #ffffff;
+  border-radius: 25px;
+  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.25);
+`,InnerWrapper=styled.styled.div`
+  display: flex;
+  gap: 31px;
+  padding: 30px;
+  position: relative;
+  border-radius: 25px;
+
+  &::before {
+    position: absolute;
+    content: '';
+    width: 24px;
+    height: 24px;
+    top: -12px;
+    left: 48px;
+    background-color: #ffffff;
+    transform: rotate(45deg);
+    box-shadow: -3px -3px 5px rgba(0, 0, 0, 0.1);
+  }
+`,MonthBar=styled.styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 32px;
+  user-select: none;
+`,Arrow=styled.styled.button`
+  appearance: none;
+  border: none;
+  outline: none;
+  padding: 12px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 50%;
+  cursor: pointer;
+  background-color: transparent;
+
+  &:hover {
+    background-color: var(--color-primary-blue-2);
+    border-color: #ffffff;
+    svg {
+      fill: #ffffff;
+    }
+  }
+`,WeekdayWrapper=styled.styled.div`
+  display: flex;
+  gap: 32px;
+  user-select: none;
+`,Calendar=styled.styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+  margin: 32px 0px;
+  user-select: none;
+`,Week=styled.styled.div`
+  display: flex;
+  gap: 32px;
+  border-radius: 24px;
+`,Day=styled.styled.button`
+  outline: none;
+  border: none;
+  background: transparent;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  cursor: pointer;
+  font-family: var(--font-inter);
+  font-size: 16px;
+  line-height: 24px;
+
+  &.today {
+    color: var(--color-primary-blue-2);
+    font-weight: 600;
+  }
+
+  &.not-current {
+    color: var(--color-grey-9);
+    cursor: default;
+    pointer-events: none;
+  }
+
+  &.selected {
+    background-color: var(--color-primary-blue-2);
+    color: #ffffff;
+
+    &.not-current {
+      background-color: var(--color-blue-9);
+    }
+  }
+`,BottomWrapper=styled.styled.div`
+  display: flex;
+  justify-content: flex-end;
+  gap: 18px;
+`,Input=styled.styled.input`
+  max-width: 140px;
+  padding: 0px;
+  flex: 1;
+  font-family: var(--font-inter);
+  font-size: 14px;
+  color: var(--color-grey-3);
+  border: none;
+  outline: none;
+  border-radius: 8px;
+  background-color: transparent;
+
+  &::placeholder {
+    color: var(--color-grey-6);
+  }
+`,InputWrapper=styled.styled.div`
+  width: fit-content;
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  box-sizing: border-box;
+  padding: 12px;
+  background-color: var(--color-blue-10);
+  border-radius: 8px;
+  border: 1px solid transparent;
+
+  &:hover {
+    border-color: var(--color-grey-8);
+  }
+
+  &:focus-within {
+    border-color: var(--color-primary-blue-2);
+  }
+`;exports.CalendarInput=CalendarInput;

package/dist/components/input/checkbox/checkbox.js

@@ -0,0 +1,14 @@
+"use client";
+"use strict";var React=require("react"),styled=require("styled-components"),styles=require("../../../common/styles.js"),checkmark=require("../../../icons/basic/checkmark.js");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React);const Checkbox=({disabled:e,selected:r,sx:t,...o})=>React__default.default.createElement(Box,{$align:"center",$disabled:!!e,$display:"flex",$justify:"center",$selected:r,$sx:t,...o},r&&React__default.default.createElement(checkmark.Checkmark,{color:"white"})),Box=styled.styled.div`
+  display: flex;
+  width: 20px;
+  height: 20px;
+  border-radius: 4px;
+  cursor: pointer;
+  box-sizing: border-box;
+
+  ${({$selected:e})=>e?`background-color: var(--color-primary-blue-2);
+    border: 1px solid var(--color-primary-blue-2);`:"border: 1px solid var(--color-grey-8);"}
+  ${styles.Styles.flex}
+  ${({$sx:e})=>e||""}
+`;exports.Checkbox=Checkbox;

package/dist/components/input/date/date.js

@@ -0,0 +1,301 @@
+"use client";
+"use strict";var React=require("react"),styled=require("styled-components"),date$1=require("../../../common/date.js"),button=require("../../actions/button/button.js"),paragraph=require("../../atoms/typography/paragraph.js"),chevron_left=require("../../../icons/arrow/chevron_left.js"),chevron_right=require("../../../icons/arrow/chevron_right.js"),arrow_right=require("../../../icons/arrow/arrow_right.js"),date=require("../../../utils/date.js");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React);const DatePicker=({endDate:e,label:t,onSelect:a,startDate:r})=>{const u=new Date,o=(u.setHours(0),u.setMinutes(0),u.setSeconds(0),u.setMilliseconds(0),new Date(u)),l=(o.setDate(1),o.getMonth()+1),n=o.getFullYear(),s=!e,d=React__default.default.useRef(null),[i,c]=React__default.default.useState(!1),[f,p]=React__default.default.useState(()=>e?.toDateString()??r.toDateString()),[g,x]=React__default.default.useState(()=>r.toDateString()),[b,y]=React__default.default.useState(()=>e?.toDateString()??r.toDateString()),[h,m]=React__default.default.useState(!0);React__default.default.useEffect(()=>{x(r.toDateString())},[r]),React__default.default.useEffect(()=>{y((e??new Date)?.toDateString())},[e]),React__default.default.useEffect(()=>{var e;!s&&new Date(g).getTime()>new Date(b).getTime()&&(e=g,x(b),y(e))},[b,g]);const _=({type:e,value:t})=>{("start"===e?x:y)(t.toDateString())},v=e=>{s||m(e=>!e);var e=e.target,t=h?"start":"end",a=e.getAttribute("data-day"),r=e.getAttribute("data-month"),e=e.getAttribute("data-year");_({type:t,value:new Date(r+`-${a}-`+e)})};var D=date.buildCalendar(new Date(f).getMonth()+1,new Date(f).getFullYear());const w=new Date(g).getTime(),R=new Date(b).getTime();var k=new Date(f);const S=new Date(k),E=(S.setDate(1),new Date(k));return E.setDate(date.getMonthDays(k.getMonth()+1)),React__default.default.createElement(Wrapper,{onBlurCapture:e=>{d?.current&&!d?.current?.contains(e.relatedTarget)&&c(!1)},ref:d,tabIndex:0},React__default.default.createElement(Trigger,{onClick:()=>c(e=>!e)},t&&React__default.default.createElement(React__default.default.Fragment,null,t," | "),React__default.default.createElement("span",null,r.toLocaleDateString("en-US").replaceAll("/","-")),!!e&&r.toDateString()!==e?.toDateString()&&React__default.default.createElement(arrow_right.ArrowRight,{sx:"padding: 0px 8px; margin-bottom: -2px;"}),r.toDateString()!==e?.toDateString()&&React__default.default.createElement("span",null,e?.toLocaleDateString("en-US").replaceAll("/","-"))),i&&React__default.default.createElement(DateSelector,null,React__default.default.createElement(InnerWrapper,null,!!e&&React__default.default.createElement(Left,null,React__default.default.createElement(button.Button,{size:"small",type:"text",onClick:()=>{_({type:"start",value:u}),_({type:"end",value:u}),p(u.toDateString()),m(!0)}},"Today"),React__default.default.createElement(button.Button,{size:"small",type:"text",onClick:()=>{var e=new Date(u.getFullYear(),u.getMonth(),u.getDate()-1);_({type:"start",value:e}),_({type:"end",value:e}),p(u.toDateString()),m(!0)}},"Yesterday"),React__default.default.createElement(button.Button,{size:"small",type:"text",onClick:()=>{var e=new Date(u.getFullYear(),u.getMonth(),u.getDate()-7);_({type:"start",value:e}),_({type:"end",value:u}),p(u.toDateString()),m(!0)}},"Last 7 days"),React__default.default.createElement(button.Button,{size:"small",type:"text",onClick:()=>{var e=new Date(u);e.setMonth(l-2),_({type:"start",value:e}),_({type:"end",value:u}),p(u.toDateString()),m(!0)}},"Last 30 days"),React__default.default.createElement(button.Button,{size:"small",type:"text",onClick:()=>{_({type:"start",value:o}),_({type:"end",value:new Date(o.getFullYear(),o.getMonth(),date.getMonthDays())}),p(u.toDateString()),m(!0)}},"This month"),React__default.default.createElement(button.Button,{size:"small",type:"text",onClick:()=>{var e=new Date(o);e.setMonth(l-2),_({type:"start",value:e}),_({type:"end",value:new Date(e.getFullYear(),e.getMonth(),date.getMonthDays(e.getMonth()+1))}),p(e.toDateString()),m(!0)}},"Last month"),React__default.default.createElement(button.Button,{size:"small",type:"text",onClick:()=>{var e=new Date(u);e.setFullYear(n-1),_({type:"start",value:e}),_({type:"end",value:u}),p(u.toDateString()),m(!0)}},"Last Year")),React__default.default.createElement("div",null,React__default.default.createElement(MonthBar,null,React__default.default.createElement(Arrow,{onClick:()=>{p(e=>{e=new Date(e);return e.setMonth(e.getMonth()-1),e.toDateString()})}},React__default.default.createElement(chevron_left.ChevronLeft,{size:24})),React__default.default.createElement(paragraph.P,null,Object.values(date$1.MONTHS)[Math.max(0,Math.min(new Date(f).getMonth(),11))]+" "+new Date(f).getFullYear()),React__default.default.createElement(Arrow,{onClick:()=>{p(e=>{e=new Date(e);return e.setMonth(e.getMonth()+1),e.toDateString()})}},React__default.default.createElement(chevron_right.ChevronRight,{size:24}))),React__default.default.createElement(WeekdayWrapper,null,Object.values(date$1.WEEKDAYS).map(e=>React__default.default.createElement(paragraph.P,{key:e},e))),React__default.default.createElement(Calendar,null,D.map((e,t)=>React__default.default.createElement(Week,{key:"week-"+t.toString(36)},e.map((e,t)=>{var a=e[1]!==date.zeroPad(new Date(f).getMonth()+1,2),r=new Date(`${e[1]}-${e[2]}-`+e[0]),o=Math.abs(r.getTime()-u.getTime())<.5,l=r.toDateString(),n=l===g,d=!s&&l===b,r=!s&&w<=r.getTime()&&r.getTime()<=R&&!n&&!d,i=S.toDateString()===l,l=E.toDateString()===l;return React__default.default.createElement(Day,{className:((o?"today":"")+(a?" not-current":"")+(n?" start-date":"")+(d?" end-date":"")+(r?" between":"")+(i?" first-of-month":"")+(l?" last-of-month":"")).trim(),"data-day":e[2],"data-month":e[1],"data-year":e[0],key:"day-"+t.toString(36),onClick:v},(""+e[2]).startsWith("0")?(""+e[2])[1]:e[2])})))),React__default.default.createElement(BottomWrapper,null,React__default.default.createElement(button.Button,{onClick:()=>{x(r.toDateString()),y((e??new Date)?.toDateString()),m(!0),c(!1)},size:"small",sx:"width: 80px;",type:"outlined"},"Cancel"),React__default.default.createElement(button.Button,{onClick:()=>{a({type:"start",value:new Date(g)}),s||a({type:"end",value:new Date(b)}),s||m(!0),c(!1)},size:"small",sx:"width: 80px;"},"Apply"))))))},Wrapper=styled.styled.div`
+  position: relative;
+  width: fit-content;
+  font-family: var(--font-inter);
+`,Trigger=styled.styled.button`
+  padding: 12px 24px;
+  background-color: #ffffff;
+  border: 1px solid var(--color-grey-6);
+  border-radius: 24px;
+  color: var(--color-grey-3);
+  outline: none;
+  line-height: 100%;
+  font-family: var(--font-inter);
+  font-size: 14px;
+  line-height: 20px;
+  cursor: pointer;
+
+  span {
+    line-height: 20px;
+    color: var(--color-blue-5);
+  }
+
+  &:hover {
+    background-color: var(--color-blue-5);
+    border-color: var(--color-blue-5);
+    color: #ffffff;
+    span {
+      color: #ffffff;
+    }
+  }
+
+  &:active {
+    background-color: var(--color-blue-3);
+    border-color: var(--color-blue-3);
+  }
+`,DateSelector=styled.styled.div`
+  transform: translateY(26px);
+  position: absolute;
+  z-index: 5;
+  background-color: #ffffff;
+  border-radius: 25px;
+  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.25);
+`,InnerWrapper=styled.styled.div`
+  display: flex;
+  gap: 31px;
+  padding: 30px;
+  position: relative;
+  border-radius: 25px;
+
+  &::before {
+    position: absolute;
+    content: '';
+    width: 24px;
+    height: 24px;
+    top: -12px;
+    left: 48px;
+    background-color: #ffffff;
+    transform: rotate(45deg);
+    box-shadow: -3px -3px 5px rgba(0, 0, 0, 0.1);
+  }
+`,Left=styled.styled.div`
+  display: flex;
+  flex-flow: column nowrap;
+  gap: 24px;
+  align-items: flex-start;
+  width: max-content;
+  margin-bottom: 96px;
+  padding-right: 48px;
+  border-right: 1px solid var(--color-grey-8);
+  user-select: none;
+
+  button {
+    padding: 0px;
+
+    span {
+      font-size: 16px;
+      line-height: 24px;
+      color: var(--color-grey-5);
+      font-weight: 400;
+    }
+
+    &:hover {
+      span {
+        color: var(--color-primary-blue-2);
+      }
+    }
+  }
+`,MonthBar=styled.styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 32px;
+  user-select: none;
+`,Arrow=styled.styled.button`
+  appearance: none;
+  border: none;
+  outline: none;
+  padding: 12px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 50%;
+  cursor: pointer;
+  background-color: transparent;
+
+  &:hover {
+    background-color: var(--color-primary-blue-2);
+    border-color: #ffffff;
+    svg {
+      fill: #ffffff;
+    }
+  }
+`,WeekdayWrapper=styled.styled.div`
+  display: flex;
+  gap: 32px;
+  user-select: none;
+`,Calendar=styled.styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+  margin: 32px 0px;
+  user-select: none;
+`,Week=styled.styled.div`
+  display: flex;
+  gap: 32px;
+  border-radius: 24px;
+`,Day=styled.styled.button`
+  outline: none;
+  border: none;
+  background: transparent;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  cursor: pointer;
+  font-family: var(--font-inter);
+  font-size: 16px;
+  line-height: 24px;
+
+  &.today {
+    color: var(--color-primary-blue-2);
+    font-weight: 600;
+  }
+
+  &:hover:not(&[class~='start-date']):not(&[class~='end-date']) {
+    background-color: var(--color-primary-blue-4);
+    color: var(--color-primary-blue-1);
+  }
+
+  &[class~='not-current'] {
+    color: var(--color-grey-9);
+    cursor: default;
+    pointer-events: none;
+  }
+
+  &[class~='start-date'],
+  &[class~='end-date'] {
+    background-color: var(--color-primary-blue-2);
+    color: #ffffff;
+
+    &[class~='not-current'] {
+      background-color: var(--color-blue-9);
+    }
+  }
+
+  &[class~='start-date'] + [class~='end-date'] {
+    position: relative;
+    &::before {
+      content: '';
+      position: absolute;
+      z-index: -2;
+      height: 32px;
+      width: 64px;
+      background-color: var(--color-primary-blue-3);
+      right: 16px;
+      top: 0;
+    }
+
+    &[class~='not-current'] {
+      &::before {
+        background-color: var(--color-blue-10);
+      }
+    }
+  }
+
+  &[class~='not-current'] {
+    position: relative;
+    &[class~='end-date']:not(:first-of-type):not(.start-date) {
+      &::before {
+        content: '';
+        position: absolute;
+        z-index: -2;
+        height: 32px;
+        width: 62px;
+        background-color: var(--color-blue-10);
+        right: 16px;
+        top: 0;
+      }
+    }
+  }
+
+  &[class~='first-of-month'] {
+    &[class~='end-date'] {
+      &::before {
+        background-color: var(--color-blue-10);
+      }
+    }
+  }
+
+  &[class~='between'] {
+    position: relative;
+
+    &::before {
+      content: '';
+      position: absolute;
+      z-index: -2;
+      height: 32px;
+      width: 132px;
+      background-color: var(--color-primary-blue-3);
+      right: -48px;
+      top: 0;
+    }
+
+    &:first-of-type::before {
+      width: 80px;
+      border-radius: 24px 0px 0px 24px;
+    }
+
+    &:last-of-type::before {
+      width: 80px;
+      right: 0px;
+      border-radius: 0px 24px 24px 0px;
+    }
+
+    &[class~='not-current'] {
+      &::before {
+        background-color: var(--color-blue-10);
+      }
+    }
+
+    &[class~='first-of-month']:not(:first-of-type) {
+      &::before {
+        width: 32px;
+        border-top-left-radius: 24px;
+        border-bottom-left-radius: 24px;
+      }
+    }
+
+    &[class~='first-of-month']:not([class~='not-current']):not(
+        :first-of-type
+      ):not(:last-of-type) {
+      &::before {
+        width: 64px;
+        border-top-left-radius: 24px;
+        border-bottom-left-radius: 24px;
+        background-color: var(--color-blue-10);
+        right: 16px;
+      }
+      &::after {
+        content: '';
+        position: absolute;
+        z-index: -2;
+        height: 32px;
+        width: 70px;
+        background-color: var(--color-primary-blue-3);
+        right: -32px;
+        top: 0;
+        border-top-left-radius: 24px;
+        border-bottom-left-radius: 24px;
+      }
+      &:last-of-type {
+        &::before {
+          width: 32px;
+        }
+      }
+    }
+
+    &[class~='last-of-month']:not(&[class~='not-current']) {
+      &::before {
+        z-index: -1;
+        border-radius: 0px 24px 24px 0px;
+        width: 80px;
+        right: 0px;
+      }
+      &:first-of-type {
+        &::before {
+          border-top-left-radius: 24px;
+          border-bottom-left-radius: 24px;
+          width: 32px;
+        }
+      }
+    }
+  }
+`,BottomWrapper=styled.styled.div`
+  display: flex;
+  justify-content: flex-end;
+  gap: 18px;
+`;exports.DatePicker=DatePicker;

package/dist/components/input/filter/filter.js

@@ -0,0 +1,133 @@
+"use client";
+"use strict";var React=require("react"),styled=require("styled-components"),box=require("../../atoms/box/box.js"),button=require("../../actions/button/button.js"),paragraph=require("../../atoms/typography/paragraph.js"),chevron_down=require("../../../icons/arrow/chevron_down.js"),chevron_up=require("../../../icons/arrow/chevron_up.js"),close=require("../../../icons/basic/close.js"),styles=require("../../../common/styles.js"),filter_option=require("./filter_option.js");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React),styled__default=_interopDefaultCompat(styled);const Filter=({closeOnBlur:t=!0,disabled:e,graphic:a,graphicAlignment:l="left",resetGraphic:r,label:o="",sx:n,triggerType:d,options:u,defaultValue:c="",closeOnChange:i=!0,optionOnChange:s,optionShowClose:p,checkbox:f,applyOnClick:_,resetOnClick:g,applyResetActions:v})=>{const b=!!f,y=React__default.default.useRef(null);var h=React__default.default.useRef(null);const[m,x]=React__default.default.useState(!1),[R,C]=React__default.default.useState(()=>c||(b?[]:"")),[E,k]=React__default.default.useState("");React__default.default.useEffect(()=>{e&&x(!1)},[e]),React__default.default.useEffect(()=>{"outlined"===d&&void 0===c&&C(b?[u[0]?.value]:u[0]?.value)},[d,c]),React__default.default.useEffect(()=>{var e;m||(R.length?(e=u.find(e=>"string"!=typeof e&&w(e.value)),"string"==typeof R?k(e.label):k(1<R.length?e.label+" +"+(R.length-1):e.label)):k(o))},[R,u,m]);const $=b?e=>{e.stopPropagation();const t=e.target.getAttribute("data-value")??"";Array.isArray(R)&&R.includes(t)?C(e=>e.filter(e=>e!==t)):C(e=>[t,...e]),i&&!_&&x(!1),s&&s(e)}:e=>{e.stopPropagation();var t=e.target.getAttribute("data-value")??"";R!==t?C(t):C(""),i&&!_&&x(!1),s&&s(e)},w=e=>b?R.includes(e):e===R;var P=[...u.map((e,t)=>"string"==typeof e&&"break"===e?React__default.default.createElement(filter_option.Spacer,{key:React__default.default.useId()+"-spacer-"+t}):React__default.default.createElement(filter_option.Option,{key:e.value,onClick:$,selected:w(e.value),checkbox:f,radio:!b&&"pill"===d,showClose:void 0===p?0===t&&"pill"===d:p,onClose:()=>x(!1),...e})),"pill"===d&&React__default.default.createElement(filter_option.Spacer,{key:"spacer-"+u.length})],S=r&&("string"==typeof R?!!R:!!R.length);return React__default.default.createElement(Wrapper,{$sx:n,tabIndex:0,ref:y,onBlurCapture:e=>{t&&y?.current&&!y?.current?.contains(e.relatedTarget)&&x(!1)}},React__default.default.createElement(FilterTrigger,{disabled:e,graphic:a,graphicAlignment:l,label:o,onClick:()=>{e||x(e=>!e)},onReset:r?e=>{e.stopPropagation(),g&&g(e),C(b?[]:""),x(!1)}:void 0,open:m,resetGraphic:S,type:d,value:E}),m&&React__default.default.createElement(Container,{ref:h},React__default.default.createElement(React__default.default.Fragment,null,P,"pill"===d&&v&&React__default.default.createElement(box.Box,{$display:"flex",$dir:"row",$align:"center",$justify:"flex-end",$gap:8,sx:"margin-top: 8px; padding-right: 8px; padding-bottom: 8px"},React__default.default.createElement(button.Button,{onClick:e=>{g&&g(e),C(b?[]:""),x(!1)},size:"small",type:"text"},"Reset"),React__default.default.createElement(button.Button,{onClick:e=>{_&&_(e),x(!1)},size:"small",type:"primary"},"Apply")))))},Wrapper=styled__default.default.div`
+  position: relative;
+  display: block;
+  outline: none;
+  ${({$sx:e})=>e||""}
+`,Container=styled__default.default.div`
+  position: absolute;
+  width: max-content;
+  z-index: 100;
+  outline: none;
+  box-shadow: var(--elevation-2);
+  background-color: var(--color-white);
+  cursor: pointer;
+  border-radius: 8px;
+
+  & > div:first-of-type {
+    border-radius: 8px 8px 0px 0px;
+  }
+
+  & > div:last-of-type {
+    border-radius: 0px 0px 8px 8px;
+  }
+`,textProps={as:"span",$fontSize:14,$lineHeight:20},wrapperProps={$align:"center",$dir:"row",$gap:16},FilterTrigger=({disabled:e,graphic:t,graphicAlignment:a,label:l,onClick:r,resetGraphic:o,open:n,onReset:d,type:u,value:c})=>"pill"===u?React__default.default.createElement(Pill,{disabled:e,onClick:r,$labelIsDefault:c===l,...wrapperProps},"left"===a?t:null,React__default.default.createElement(paragraph.P,{...textProps},c),o?React__default.default.createElement(close.Close,{color:"blue-3",onClick:d}):null,"right"===a?t:null,!t&&!o&&(n?React__default.default.createElement(chevron_up.ChevronUp,null):React__default.default.createElement(chevron_down.ChevronDown,null))):"labeled"===u?React__default.default.createElement(Labeled,{disabled:e,onClick:r,...wrapperProps},React__default.default.createElement(paragraph.P,{...textProps},l),React__default.default.createElement(LabelSeparator,null),React__default.default.createElement(paragraph.P,{$color:"primary-blue-2",$mediumBold:!0,...textProps},c),n?React__default.default.createElement(chevron_up.ChevronUp,null):React__default.default.createElement(chevron_down.ChevronDown,null)):"avatar"===u?React__default.default.createElement(Avatar,{$align:"center",$dir:"row",$gap:8,disabled:e,onClick:r},t,n?React__default.default.createElement(chevron_up.ChevronUp,null):React__default.default.createElement(chevron_down.ChevronDown,null)):"text"===u?React__default.default.createElement(Text,{disabled:e,onClick:r,...wrapperProps},React__default.default.createElement(paragraph.P,{$color:"grey-4",$semiBold:!0,...textProps},l,":"),React__default.default.createElement(paragraph.P,{$color:"primary-blue-2",$semiBold:!0,className:"filter-trigger-value",...textProps},c),n?React__default.default.createElement(chevron_up.ChevronUp,null):React__default.default.createElement(chevron_down.ChevronDown,null)):React__default.default.createElement(Outlined,{disabled:e,onClick:r,...wrapperProps},"left"===a?t:null,t,React__default.default.createElement(paragraph.P,{...textProps},c),"right"===a?t:null,!t&&(n?React__default.default.createElement(chevron_up.ChevronUp,null):React__default.default.createElement(chevron_down.ChevronDown,null))),sharedStyles=((Filter.Trigger=FilterTrigger).displayName="Filter.Trigger",styled.css`
+  display: flex;
+  padding: 10px 16px;
+  border: none;
+  outline: none;
+  cursor: pointer;
+  user-select: none;
+
+  &:disabled {
+    background-color: var(--color-grey-9);
+    border: 1px solid var(--color-grey-8);
+    pointer-events: none;
+
+    & > * {
+      color: var(--color-grey-7);
+      fill: var(--color-grey-7);
+    }
+  }
+`),Outlined=styled__default.default.button`
+  ${sharedStyles}
+  ${styles.Styles.flex}
+  border: 1px solid var(--color-grey-8);
+  border-radius: 8px;
+  background-color: var(--color-white);
+  font-family: var(--font-inter);
+
+  &:hover {
+    background-color: var(--color-grey-9);
+  }
+`,Pill=styled__default.default.button`
+  ${sharedStyles}
+  ${styles.Styles.flex}
+  border: 1px solid var(--color-grey-8);
+  border-radius: 24px;
+  background-color: var(--color-white);
+  font-family: var(--font-inter);
+
+  ${({$labelIsDefault:e})=>e?"":`
+      & > * {
+        color: var(--color-primary-blue-2);
+        fill: currentColor;
+
+        &:hover {
+          color: var(--color-primary-blue-1);
+          background-color: var(--color-primary-blue-4);
+        }
+      }
+
+      &:hover {
+        background-color: var(--color-primary-blue-4);
+      }
+    `}
+`,Labeled=styled__default.default.button`
+  ${sharedStyles}
+  ${styles.Styles.flex}
+  border-radius: 24px;
+  border: 1px solid var(--color-grey-8);
+  background-color: var(--color-white);
+  font-family: var(--font-inter);
+
+  &:hover {
+    background-color: var(--color-grey-9);
+  }
+`,LabelSeparator=styled__default.default.div`
+  width: 1px;
+  height: 20px;
+  background-color: var(--color-grey-8);
+`,Avatar=styled__default.default.button`
+  ${sharedStyles}
+  ${styles.Styles.flex}
+  padding: 4px 16px;
+  border-radius: 32px;
+  font-family: var(--font-inter);
+
+  &:hover {
+    background-color: var(--color-grey-10);
+  }
+
+  &:active {
+    background-color: var(--color-grey-9);
+  }
+
+  &:disabled {
+    img {
+      opacity: 0.5;
+    }
+  }
+`,Text=styled__default.default.button`
+  ${sharedStyles}
+  ${styles.Styles.flex}
+  gap: 8px;
+  background-color: transparent;
+  border-radius: 32px;
+  font-family: var(--font-inter);
+
+  &:hover {
+    background-color: var(--color-grey-10);
+  }
+
+  &:active {
+    & > .filter-trigger-value {
+      color: var(--color-primary-blue-0);
+    }
+  }
+
+  &:disabled {
+    background-color: transparent;
+    border: 1px solid transparent;
+  }
+`;exports.Filter=Filter;

package/dist/components/input/filter/filter_option.js

@@ -0,0 +1,41 @@
+"use client";
+"use strict";var React=require("react"),styled=require("styled-components"),box=require("../../atoms/box/box.js"),paragraph=require("../../atoms/typography/paragraph.js"),checkbox=require("../checkbox/checkbox.js"),radio=require("../radio/radio.js"),close=require("../../../icons/basic/close.js");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React);const Option=({label:e,onClick:a,selected:t,sx:r,value:o,checkbox:c,radio:l=!1,showClose:i=!1,onClose:n})=>React__default.default.createElement(OptionWrapper,{"data-value":o,onClick:a,$selected:t,$sx:r,$hasCheckbox:!!c},c&&React__default.default.createElement(checkbox.Checkbox,{selected:t}),l&&React__default.default.createElement(radio.Radio,{checked:t,value:o}),React__default.default.createElement(box.Box,{$dir:"column",$display:"flex"},e&&React__default.default.createElement(paragraph.P,{$color:"grey-4",$fontSize:14,$lineHeight:20,$mediumBold:!0,$textClampLines:1},e)),i&&React__default.default.createElement(close.Close,{sx:"margin-left: auto; pointer-events: auto !important;",size:16,onClick:e=>{e.stopPropagation(),n&&n()}})),OptionWrapper=(Option.displayName="Filter.Option",styled.styled.div`
+  position: relative;
+  z-index: 1;
+  padding: 12px 16px;
+  user-select: none;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 217px;
+
+  & > * {
+    pointer-events: none;
+  }
+
+  ${({$selected:e,$hasCheckbox:a})=>e?`
+      background-color: var(--color-grey-9);
+      &:active {
+        background-color: var(--color-grey-8);
+      }`:a?`&:hover {
+        background-color: var(--color-grey-10);
+      }`:`
+    &:hover {
+      background-color: var(--color-grey-10);
+    }
+
+    &:active {
+      background-color: var(--color-grey-8);
+    }
+    `}
+  ${({$sx:e})=>e||""}
+`),Spacer=({sx:e})=>React__default.default.createElement(SpacerWrapper,{$sx:e}),SpacerWrapper=(Spacer.displayName="Filter.Spacer",styled.styled.div`
+  width: 100%;
+  height: 1px;
+  background-color: var(--color-grey-8);
+
+  &:hover {
+    appearance: none;
+  }
+  ${({$sx:e})=>e||""}
+`);exports.Option=Option,exports.Spacer=Spacer;