kitchn/dist/native/index.esm.js

Tonight Pass delicious React styled-components UI kit

"use client"
import{a as H,b as O,c as je,d as p,e as Me,f as _e,g as S,h as We,i as G,j as He,k as Oe}from"../chunk-Z6OVUEYJ.esm.js";import Fe from"styled-components/native";import"styled-components/native";import{ThemeConsumer as Ue,ThemeContext as Ye,ThemeProvider as Ze,css as er,isStyledComponent as rr,useTheme as tr,withTheme as or}from"styled-components/native";var J={family:{primary:"Figtree",monospace:"Figtree"},weight:{thin:100,extraLight:200,light:300,regular:400,medium:500,semiBold:600,bold:700,extraBold:800,black:900},size:{extraTitle:"48px",title:"32px",large:"24px",medium:"18px",normal:"16px",compact:"14px",small:"13px",tiny:"11px"},breakpoint:{desktop:"1824px",laptop:"1224px",tablet:"1024px",mobile:"768px"},gap:{tiny:"5px",small:"10px",normal:"15px",medium:"20px",large:"30px",extraLarge:"60px"},radius:{square:"8px",round:"99999px"}};var X=e=>({...J,...e}),y={dark:X(H),light:X(O)};import z from"react";import N from"styled-components/native";var Q=({children:e,size:r,shape:t="square",prefix:o,type:n,variant:m,suffix:a,...d})=>{let g=d.loading||d.disabled?"lightest":n==="light"?"darkest":n==="dark"?"lightest":void 0;return z.createElement(pe,{shape:t,size:r,type:n,variant:m,activeOpacity:.9,...d},o&&z.createElement(fe,null,o),e&&typeof e=="string"?z.createElement(R,{color:g,accent:m==="ghost"?n==="light"?"light":n==="info"?"info":n==="success"?"success":n==="warning"?"warning":n==="danger"?"danger":n==="secondary"?"secondary":n==="primary"?"primary":void 0:g?void 0:"light",size:r==="small"?"small":r==="large"?"medium":"normal",weight:"bold"},e):e,a&&z.createElement(de,null,a))},pe=N.TouchableOpacity`
  flex-direction: row;
  align-items: center;
  justify-content: center;

  border-radius: ${({shape:e})=>e==="round"?"99999px":"5px"};

  padding: ${e=>{switch(e.size){case"small":return"4px 8px";case"large":return"12px 16px";case"normal":default:return"8px 12px"}}};

  background: ${e=>{if(e.loading||e.disabled)return`${e.theme.colors.layout.darkest}`;if(e.variant==="ghost")return"transparent";switch(e.type){case"dark":return e.theme.colors.layout.darkest;case"light":return e.theme.colors.layout.lightest;case"info":return e.theme.colors.accent.info;case"success":return e.theme.colors.accent.success;case"warning":return e.theme.colors.accent.warning;case"danger":return e.theme.colors.accent.danger;case"secondary":return e.theme.colors.accent.secondary;case"primary":default:return e.theme.colors.accent.primary}}};

  border: ${e=>{if(e.loading||e.disabled)return`1px solid ${e.theme.colors.layout.darker}`;if(e.variant==="ghost")return"1px solid transparent";switch(e.type){case"dark":return`1px solid ${e.theme.colors.layout.darker}`;case"light":return`1px solid ${e.theme.colors.layout.lightest}`;case"info":return`1px solid ${e.theme.colors.accent.info}`;case"success":return`1px solid ${e.theme.colors.accent.success}`;case"warning":return`1px solid ${e.theme.colors.accent.warning}`;case"danger":return`1px solid ${e.theme.colors.accent.danger}`;case"secondary":return`1px solid ${e.theme.colors.accent.secondary}`;case"primary":default:return`1px solid ${e.theme.colors.accent.secondary}`}}};
`,fe=N.View`
  margin-right: 7px;
`,de=N.View`
  margin-left: 7px;
`;Q.displayName="KitchnButton";var $r=c(Q);import xe from"react";import{View as ye}from"react-native";import be from"styled-components/native";import ge from"styled-components/native";var i=(e,r)=>e.gap[r]||e.breakpoint[r]||(p(r)?`${r}px`:r),he=(e,r)=>e.size[r]||(p(r)?`${r}px`:r),c=e=>ge(e)`
    ${({theme:r,width:t,w:o})=>t||o?`width: ${i(r,t||o)};`:""}
    ${({theme:r,height:t,h:o})=>t||o?`height: ${i(r,t||o)};`:""}
    ${({theme:r,padding:t,p:o})=>t||o?`padding: ${i(r,t||o)};`:""}
    ${({theme:r,margin:t,m:o})=>t||o?`margin: ${i(r,t||o)};`:""}
    ${({theme:r,paddingLeft:t,pl:o,px:n})=>t||o||n?`padding-left: ${i(r,t||o||n)};`:""}
    ${({theme:r,paddingRight:t,pr:o,px:n})=>t||o||n?`padding-right: ${i(r,t||o||n)};`:""}
    ${({theme:r,paddingTop:t,pt:o,py:n})=>t||o||n?`padding-top: ${i(r,t||o||n)};`:""}
    ${({theme:r,paddingBottom:t,pb:o,py:n})=>t||o||n?`padding-bottom: ${i(r,t||o||n)};`:""}
    ${({theme:r,marginLeft:t,ml:o,mx:n})=>t||o||n?`margin-left: ${i(r,t||o||n)};`:""}
    ${({theme:r,marginRight:t,mr:o,mx:n})=>t||o||n?`margin-right: ${i(r,t||o||n)};`:""}
    ${({theme:r,marginTop:t,mt:o,my:n})=>t||o||n?`margin-top: ${i(r,t||o||n)};`:""}
    ${({theme:r,marginBottom:t,mb:o,my:n})=>t||o||n?`margin-bottom: ${i(r,t||o||n)};`:""}
    ${({theme:r,minWidth:t,minW:o})=>t||o?`min-width: ${i(r,t||o)};`:""}
    ${({theme:r,minHeight:t,minH:o})=>t||o?`min-height: ${i(r,t||o)};`:""}
    ${({theme:r,maxWidth:t,maxW:o})=>t||o?`max-width: ${i(r,t||o)};`:""}
    ${({theme:r,maxHeight:t,maxH:o})=>t||o?`max-height: ${i(r,t||o)};`:""}
    ${({theme:r,font:t})=>t?`font-size: ${he(r,t)};`:""}
  `;var U=be(({children:e,...r})=>xe.createElement(ye,{...r},e))`
  display: flex;
  flex-direction: ${e=>e.row?"row":"column"};
  max-width: 100%;
  justify-content: ${e=>e.justify||"flex-start"};
  align-items: ${e=>e.align||"stretch"};
  background: ${e=>e.theme.colors.layout[e.background||e.bg]||e.background||e.bg||e.theme.colors.layout[e.backgroundColor||e.bgc]||e.theme.colors.accent[e.backgroundAccent||e.bga]||"transparent"};
  ${e=>e.gap&&`gap: ${e.theme.gap[e.gap]||`${e.gap}px`};`}
  ${e=>e.flex&&e.flex};
  ${e=>(e.borderRadius||e.br)&&`border-radius: ${e.theme.radius[e.borderRadius||e.br]||(p(e.borderRadius)?`${e.borderRadius||e.br}px`:e.borderRadius||e.br)};`}
`;U.displayName="KitchnContainer";var Er=c(U);import Pe from"react";import Ce from"react-native-remix-icon";import Te from"react";import k from"react";import{useColorScheme as ke}from"react-native";import{ThemeProvider as $e}from"styled-components/native";var B=k.createContext({theme:y.dark,setTheme:e=>{}}),Y=({children:e,theme:r,...t})=>{let n=ke()==="dark",[m,a]=k.useState(r||(n?y.dark:y.light));return k.useEffect(()=>{a(r||(n?y.dark:y.light))},[r,n]),k.createElement(B.Provider,{value:{theme:m,setTheme:a},...t},k.createElement($e,{theme:m},e))};var Z=()=>({...Te.useContext(B)});var ee=({name:e,size:r="normal",fill:t,color:o,accent:n,...m})=>{let{theme:a}=Z();return Pe.createElement(Ce,{name:`${e}-${t?"fill":"line"}`,size:a.size[r]||r||a.size.normal,color:a.colors.accent[n]||a.colors.text[o]||o||a.colors.text.lightest,...m})};ee.displayName="KitchnIcon";var we=c(ee),re=we;import s from"react";import f,{useTheme as ve}from"styled-components/native";import Ie from"react";import{Text as Se}from"react-native";import ze from"styled-components/native";var te=ze(({children:e,truncate:r,...t})=>Ie.createElement(Se,{numberOfLines:r?1:void 0,ellipsizeMode:r?"tail":void 0,...t},e))`
  font-size: ${e=>e.theme.size[e.size||"normal"]};
  color: ${e=>e.theme.colors.accent[e.accent]||e.theme.colors.text[e.color]||e.theme.colors.text.lightest};
  };
  text-align: ${e=>e.align||"left"};
  text-transform: ${e=>e.transform||"none"};
  line-height: ${e=>{let r=e.lineHeight||1.25,t=parseInt(e.theme.size[e.size||"normal"].replace("px",""),10);return typeof r=="number"?`${r*t}px`:r}};
  font-family: ${({theme:e,weight:r="regular",monospace:t})=>`${t?e.family.monospace:e.family.primary}_${e.weight[r]}${S(r)}`};
`;te.displayName="KitchnText";var R=c(te),K=R;var Ge={size:"normal",disabled:!1,prefixStyling:!0,suffixStyling:!0,prefixContainer:!0,suffixContainer:!0,clearable:!1,initialValue:"",readOnly:!1},E=s.forwardRef(({name:e,size:r,prefix:t,suffix:o,disabled:n,prefixContainer:m,suffixContainer:a,prefixStyling:d,suffixStyling:g,clearable:D,value:$,initialValue:V,readOnly:h,onChange:T,onChangeText:P,width:A,onClearClick:F,onFocus:q,onBlur:L,error:u,type:x,label:j,pattern:ne,...M},ae)=>{let v=ve(),b=s.useRef(null);s.useImperativeHandle(ae,()=>b.current);let[C,w]=s.useState(V),_=s.useMemo(()=>$!==void 0,[$]),[I,W]=s.useState(!1),ie=l=>{l.nativeEvent.name=e,l.nativeEvent.pattern=ne,!(n||h)&&(w(l.nativeEvent.text),T&&T(l))},se=l=>{n||h||(w(l),P&&P(l))},le=l=>{n||h||(W(!0),q&&q(l))},ce=l=>{n||h||(W(!1),L&&L(l))},me=l=>{n||h||(w(""),F&&F(l),b.current&&(b.current.clear(),b.current.focus(),T&&T(l),P&&P("")))};s.useEffect(()=>{_&&w($)});let ue={...M,..._?{value:C}:{defaultValue:V}};return s.createElement(Ne,null,j&&s.createElement(K,{size:"small",weight:"medium",color:"light",mb:"tiny"},j),s.createElement(Re,{disabled:n,width:A,size:r},t&&m&&s.createElement(Ke,{size:r,disabled:n,prefixStyling:d,focus:I,error:u,type:x},t),s.createElement(Be,{ref:b,size:r,prefix:t,suffix:o,prefixContainer:m,suffixContainer:a,prefixStyling:d,suffixStyling:g,disabled:n,clearable:D,error:u,focus:I,type:x,value:$,selfValue:C,onChange:ie,onChangeText:se,onFocus:le,onBlur:ce,readOnly:h,...ue,placeholderTextColor:u?G(v.colors.accent.danger,.5):x?G(v.colors.accent[x],.5):v.colors.text.light,...M}),D&&C!==void 0&&s.createElement(De,{size:r,disabled:n,suffix:o,suffixContainer:a,suffixStyling:g,error:u,focus:I,type:x,onPress:me},s.createElement(Ve,{name:"close-circle",size:r==="large"?"normal":r==="small"?"tiny":"small",visible:C!=="",fill:!0})),o&&s.createElement(Ee,{size:r,disabled:n,suffixStyling:g,focus:I,error:u,type:x},o)),u&&s.createElement(K,{size:r==="small"?"tiny":"small",width:A,accent:"danger",mt:"tiny"},u))}),Ne=f.View``,Re=f.View`
  flex-direction: row;
  align-items: center;
  width: ${({width:e})=>e?p(e)?`${e}px`:e:"100%"};
  max-width: 100%;
  font-size: ${({size:e,theme:r})=>{switch(e){case"small":return r.size.tiny;case"large":return r.size.normal;case"normal":default:return r.size.small}}};
  border-radius: ${({theme:e})=>e.radius.square};
`,Be=f.TextInput`
  font-family: ${({theme:e})=>{let r="regular";return`${e.family.primary}_${e.weight[r]}${S(r)}`}};
  flex: 1;
  min-width: 0;
  border-radius: ${({theme:e})=>e.radius.square};
  color: ${({theme:e,error:r,type:t})=>r?e.colors.accent.danger:t?e.colors.accent[t]:e.colors.text.lightest};
  background-color: ${({theme:e,disabled:r})=>r?e.colors.layout.darker:e.colors.layout.darkest};

  padding: 0 ${({theme:e})=>e.gap.small};
  height: ${e=>{switch(e.size){case"small":return"30px";case"large":return"50px";case"normal":default:return"40px"}}};

  border: 1px solid
    ${({theme:e,error:r,focus:t,type:o})=>r?e.colors.accent.danger:o?e.colors.accent[o]:t?e.colors.layout.lighter:e.colors.layout.dark};

  ${({prefix:e,prefixContainer:r})=>e&&r&&`
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  `}
  ${({suffix:e,suffixContainer:r,clearable:t,selfValue:o})=>(e&&r||t&&o!==void 0)&&`
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  `}
  ${({prefix:e,prefixContainer:r,prefixStyling:t})=>e&&r&&!t&&"border-left-width: 0;"}
  ${({suffix:e,suffixContainer:r,suffixStyling:t,clearable:o,selfValue:n})=>(e&&r&&!t||o&&n!==void 0)&&"border-right-width: 0;"}
`,Ke=f.View`
  flex-direction: row;
  align-items: center;
  flex-shrink: 0;
  border: 1px solid
    ${({theme:e,error:r,focus:t,prefixStyling:o,type:n})=>r&&!o?e.colors.accent.danger:n&&!o?e.colors.accent[n]:t&&!o?e.colors.layout.lighter:e.colors.layout.dark};
  border-right-width: 0;
  border-top-left-radius: ${({theme:e})=>e.radius.square};
  border-bottom-left-radius: ${({theme:e})=>e.radius.square};
  padding: 0 ${({theme:e})=>e.gap.small};
  background-color: ${({theme:e,prefixStyling:r,disabled:t})=>r||t?e.colors.layout.darker:e.colors.layout.darkest};
  height: ${e=>{switch(e.size){case"small":return"30px";case"large":return"50px";case"normal":default:return"40px"}}};
`,Ee=f.View`
  flex-direction: row;
  align-items: center;
  flex-shrink: 0;
  border: 1px solid
    ${({theme:e,error:r,focus:t,suffixStyling:o,type:n})=>r&&!o?e.colors.accent.danger:n&&!o?e.colors.accent[n]:t&&!o?e.colors.layout.lighter:e.colors.layout.dark};
  border-left-width: 0;
  border-top-right-radius: ${({theme:e})=>e.radius.square};
  border-bottom-right-radius: ${({theme:e})=>e.radius.square};
  ${({theme:e})=>e.radius.square} 0;
  padding: 0 ${({theme:e})=>e.gap.small};
  background-color: ${({theme:e,suffixStyling:r,disabled:t})=>r||t?e.colors.layout.darker:e.colors.layout.darkest};
  height: ${e=>{switch(e.size){case"small":return"30px";case"large":return"50px";case"normal":default:return"40px"}}};
`,De=f.Pressable`
  flex-direction: row;
  align-items: center;
  flex-shrink: 0;
  color: ${({theme:e})=>e.colors.text.light};
  border: 1px solid
    ${({theme:e,error:r,focus:t,type:o})=>r?e.colors.accent.danger:o?e.colors.accent[o]:t?e.colors.layout.lighter:e.colors.layout.dark};
  border-left-width: 0;
  padding-right: ${({theme:e})=>e.gap.small};
  background-color: ${({theme:e,disabled:r})=>r?e.colors.layout.darker:e.colors.layout.darkest};
  ${({theme:e,suffix:r,suffixContainer:t})=>r&&t?`
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  `:`
    border-top-right-radius: ${e.radius.square};
    border-bottom-right-radius: ${e.radius.square};
  `}
  ${({suffix:e,suffixContainer:r,suffixStyling:t})=>e&&r&&!t&&"border-right-width: 0;"}
  height: ${e=>{switch(e.size){case"small":return"30px";case"large":return"50px";case"normal":default:return"40px"}}};
`,Ve=f(re)`
  ${({visible:e})=>`opacity: ${e?1:0};`}
`;E.defaultProps=Ge;E.displayName="KitchnInput";var gt=c(E);import Ae from"react";var oe=({children:e,theme:r})=>Ae.createElement(Y,{theme:r},e);oe.displayName="KitchnProvider";var kt=c(oe);var qe=Fe,Gt=qe;export{$r as Button,Er as Container,we as Icon,kt as KitchnProvider,Ye as StyledThemeContext,Ze as StyledThemeProvider,R as Text,Ue as ThemeConsumer,S as capitalize,G as convertRGBToRGBA,X as createTheme,er as css,H as darkTheme,Gt as default,y as defaultThemes,Me as getId,_e as isDevelopment,p as isNumber,He as isString,rr as isStyledComponent,O as lightTheme,J as mainTheme,Oe as pickChild,We as shortenName,je as tonightpassTheme,tr as useStyledTheme,Z as useTheme,c as withScale,or as withTheme};
//# sourceMappingURL=index.esm.js.map