kitchn/dist/native/index.cjs.js

Tonight Pass delicious React styled-components UI kit

"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }"use client"
var _chunkDNEPB34Ecjsjs = require('../chunk-DNEPB34E.cjs.js');var _native = require('styled-components/native'); var _native2 = _interopRequireDefault(_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= exports.defaultThemes ={dark:X(_chunkDNEPB34Ecjsjs.a),light:X(_chunkDNEPB34Ecjsjs.b)};var _react = require('react'); var _react2 = _interopRequireDefault(_react);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 _react2.default.createElement(pe,{shape:t,size:r,type:n,variant:m,activeOpacity:.9,...d},o&&_react2.default.createElement(fe,null,o),e&&typeof e=="string"?_react2.default.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&&_react2.default.createElement(de,null,a))},pe=_native2.default.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=_native2.default.View`
  margin-right: 7px;
`,de=_native2.default.View`
  margin-left: 7px;
`;Q.displayName="KitchnButton";var $r=c(Q);var _reactnative = require('react-native');var i=(e,r)=>e.gap[r]||e.breakpoint[r]||(_chunkDNEPB34Ecjsjs.d.call(void 0, r)?`${r}px`:r),he=(e,r)=>e.size[r]||(_chunkDNEPB34Ecjsjs.d.call(void 0, r)?`${r}px`:r),c= exports.withScale =e=>_native2.default.call(void 0, 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=_native2.default.call(void 0, ({children:e,...r})=>_react2.default.createElement(_reactnative.View,{...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]||(_chunkDNEPB34Ecjsjs.d.call(void 0, e.borderRadius)?`${e.borderRadius||e.br}px`:e.borderRadius||e.br)};`}
`;U.displayName="KitchnContainer";var Er=c(U);var _reactnativeremixicon = require('react-native-remix-icon'); var _reactnativeremixicon2 = _interopRequireDefault(_reactnativeremixicon);var B=_react2.default.createContext({theme:y.dark,setTheme:e=>{}}),Y=({children:e,theme:r,...t})=>{let n=_reactnative.useColorScheme.call(void 0, )==="dark",[m,a]=_react2.default.useState(r||(n?y.dark:y.light));return _react2.default.useEffect(()=>{a(r||(n?y.dark:y.light))},[r,n]),_react2.default.createElement(B.Provider,{value:{theme:m,setTheme:a},...t},_react2.default.createElement(_native.ThemeProvider,{theme:m},e))};var Z=()=>({..._react2.default.useContext(B)});var ee=({name:e,size:r="normal",fill:t,color:o,accent:n,...m})=>{let{theme:a}=Z();return _react2.default.createElement(_reactnativeremixicon2.default,{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;var te=_native2.default.call(void 0, ({children:e,truncate:r,...t})=>_react2.default.createElement(_reactnative.Text,{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]}${_chunkDNEPB34Ecjsjs.g.call(void 0, 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=_react2.default.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=_native.useTheme.call(void 0, ),b=_react2.default.useRef(null);_react2.default.useImperativeHandle(ae,()=>b.current);let[C,w]=_react2.default.useState(V),_=_react2.default.useMemo(()=>$!==void 0,[$]),[I,W]=_react2.default.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("")))};_react2.default.useEffect(()=>{_&&w($)});let ue={...M,..._?{value:C}:{defaultValue:V}};return _react2.default.createElement(Ne,null,j&&_react2.default.createElement(K,{size:"small",weight:"medium",color:"light",mb:"tiny"},j),_react2.default.createElement(Re,{disabled:n,width:A,size:r},t&&m&&_react2.default.createElement(Ke,{size:r,disabled:n,prefixStyling:d,focus:I,error:u,type:x},t),_react2.default.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?_chunkDNEPB34Ecjsjs.i.call(void 0, v.colors.accent.danger,.5):x?_chunkDNEPB34Ecjsjs.i.call(void 0, v.colors.accent[x],.5):v.colors.text.light,...M}),D&&C!==void 0&&_react2.default.createElement(De,{size:r,disabled:n,suffix:o,suffixContainer:a,suffixStyling:g,error:u,focus:I,type:x,onPress:me},_react2.default.createElement(Ve,{name:"close-circle",size:r==="large"?"normal":r==="small"?"tiny":"small",visible:C!=="",fill:!0})),o&&_react2.default.createElement(Ee,{size:r,disabled:n,suffixStyling:g,focus:I,error:u,type:x},o)),u&&_react2.default.createElement(K,{size:r==="small"?"tiny":"small",width:A,accent:"danger",mt:"tiny"},u))}),Ne=_native2.default.View``,Re=_native2.default.View`
  flex-direction: row;
  align-items: center;
  width: ${({width:e})=>e?_chunkDNEPB34Ecjsjs.d.call(void 0, 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=_native2.default.TextInput`
  font-family: ${({theme:e})=>{let r="regular";return`${e.family.primary}_${e.weight[r]}${_chunkDNEPB34Ecjsjs.g.call(void 0, 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=_native2.default.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=_native2.default.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=_native2.default.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=_native2.default.call(void 0, re)`
  ${({visible:e})=>`opacity: ${e?1:0};`}
`;E.defaultProps=Ge;E.displayName="KitchnInput";var gt=c(E);var oe=({children:e,theme:r})=>_react2.default.createElement(Y,{theme:r},e);oe.displayName="KitchnProvider";var kt=c(oe);var qe=_native2.default,Gt= exports.default =qe;exports.Button = $r; exports.Container = Er; exports.Icon = we; exports.KitchnProvider = kt; exports.StyledThemeContext = _native.ThemeContext; exports.StyledThemeProvider = _native.ThemeProvider; exports.Text = R; exports.ThemeConsumer = _native.ThemeConsumer; exports.capitalize = _chunkDNEPB34Ecjsjs.g; exports.convertRGBToRGBA = _chunkDNEPB34Ecjsjs.i; exports.createTheme = X; exports.css = _native.css; exports.darkTheme = _chunkDNEPB34Ecjsjs.a; exports.default = Gt; exports.defaultThemes = y; exports.getId = _chunkDNEPB34Ecjsjs.e; exports.isDevelopment = _chunkDNEPB34Ecjsjs.f; exports.isNumber = _chunkDNEPB34Ecjsjs.d; exports.isString = _chunkDNEPB34Ecjsjs.j; exports.isStyledComponent = _native.isStyledComponent; exports.lightTheme = _chunkDNEPB34Ecjsjs.b; exports.mainTheme = J; exports.pickChild = _chunkDNEPB34Ecjsjs.k; exports.shortenName = _chunkDNEPB34Ecjsjs.h; exports.tonightpassTheme = _chunkDNEPB34Ecjsjs.c; exports.useStyledTheme = _native.useTheme; exports.useTheme = Z; exports.withScale = c; exports.withTheme = _native.withTheme;
//# sourceMappingURL=index.cjs.js.map