@mobilestock-native/card 0.0.1

package/index.d.ts

@@ -0,0 +1,77 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ButtonProps } from '@mobilestock-native/button';
+import React, { ReactNode } from 'react';
+import { ViewBaseProps } from '@mobilestock-native/container';
+import { TypographyProps } from '@mobilestock-native/typography';
+import { Icon } from '@mobilestock-native/icons';
+import { DefaultTheme } from 'styled-components/native';
+
+declare function CardButton(props: ButtonProps): react_jsx_runtime.JSX.Element;
+
+declare function Vertical$2({ children, ...rest }: FooterSubComponentProps): react_jsx_runtime.JSX.Element;
+
+interface FooterSubComponentProps extends ViewBaseProps {
+    children: ReactNode;
+}
+
+declare function Horizontal$2({ children, ...rest }: FooterSubComponentProps): react_jsx_runtime.JSX.Element;
+
+declare function Vertical$1({ children, ...rest }: ContentSubComponentProps): react_jsx_runtime.JSX.Element;
+
+interface ContentSubComponentProps extends ViewBaseProps {
+    children: ReactNode;
+}
+
+declare function Horizontal$1({ children, ...rest }: ContentSubComponentProps): react_jsx_runtime.JSX.Element;
+
+declare function Subtitle({ children, ...rest }: TypographyProps): react_jsx_runtime.JSX.Element;
+
+declare function Title({ children, ...rest }: TypographyProps): react_jsx_runtime.JSX.Element;
+
+declare function CardIcon(props: React.ComponentProps<typeof Icon>): react_jsx_runtime.JSX.Element;
+
+declare function Vertical({ children, isFloating, ...rest }: CardHeaderProps): react_jsx_runtime.JSX.Element;
+
+interface CardHeaderProps extends ViewBaseProps {
+    children: ReactNode;
+    isFloating?: boolean;
+}
+
+declare function Horizontal({ children, isFloating, ...rest }: CardHeaderProps): react_jsx_runtime.JSX.Element;
+
+type Variant = 'SOLID' | 'OUTLINE' | 'STRIPED';
+type Colors = Uppercase<keyof DefaultTheme['colors']['card'] & string>;
+interface CardContextProps {
+    variant: Variant;
+    color: Colors;
+}
+
+type BorderRadius = Exclude<Uppercase<keyof DefaultTheme['borderRadius'] & string>, 'ROUNDED'>;
+type CardStyleProps = Omit<ViewBaseProps, 'color'> & Partial<CardContextProps>;
+interface CardBaseProps extends CardStyleProps, Omit<ViewBaseProps, 'color'> {
+    children: ReactNode;
+    borderRadius?: BorderRadius;
+    borderActive?: boolean;
+}
+declare function CardBase({ variant, color, borderRadius, borderActive, ...rest }: CardBaseProps): react_jsx_runtime.JSX.Element;
+
+declare const Card: typeof CardBase & {
+    Header: (() => never) & {
+        Vertical: typeof Vertical;
+        Horizontal: typeof Horizontal;
+        Icon: typeof CardIcon;
+        Title: typeof Title;
+        Subtitle: typeof Subtitle;
+    };
+    Content: (() => never) & {
+        Vertical: typeof Vertical$1;
+        Horizontal: typeof Horizontal$1;
+    };
+    Footer: (() => never) & {
+        Vertical: typeof Vertical$2;
+        Horizontal: typeof Horizontal$2;
+        Button: typeof CardButton;
+    };
+};
+
+export { Card };

package/index.js

@@ -0,0 +1,73 @@
+"use strict";var Vo=Object.create;var u=Object.defineProperty,Po=Object.defineProperties,vo=Object.getOwnPropertyDescriptor,Ko=Object.getOwnPropertyDescriptors,So=Object.getOwnPropertyNames,y=Object.getOwnPropertySymbols,wo=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty,K=Object.prototype.propertyIsEnumerable;var v=(o,r,t)=>r in o?u(o,r,{enumerable:!0,configurable:!0,writable:!0,value:t}):o[r]=t,a=(o,r)=>{for(var t in r||(r={}))x.call(r,t)&&v(o,t,r[t]);if(y)for(var t of y(r))K.call(r,t)&&v(o,t,r[t]);return o},p=(o,r)=>Po(o,Ko(r));var c=(o,r)=>{var t={};for(var e in o)x.call(o,e)&&r.indexOf(e)<0&&(t[e]=o[e]);if(o!=null&&y)for(var e of y(o))r.indexOf(e)<0&&K.call(o,e)&&(t[e]=o[e]);return t};var ho=(o,r)=>{for(var t in r)u(o,t,{get:r[t],enumerable:!0})},S=(o,r,t,e)=>{if(r&&typeof r=="object"||typeof r=="function")for(let n of So(r))!x.call(o,n)&&n!==t&&u(o,n,{get:()=>r[n],enumerable:!(e=vo(r,n))||e.enumerable});return o};var C=(o,r,t)=>(t=o!=null?Vo(wo(o)):{},S(r||!o||!o.__esModule?u(t,"default",{value:o,enumerable:!0}):t,o)),Bo=o=>S(u({},"__esModule",{value:!0}),o);var Yo={};ho(Yo,{Card:()=>Wo});module.exports=Bo(Yo);var h=C(require("styled-components/native")),B=require("@mobilestock-native/container");var $=require("react"),T=(0,$.createContext)(void 0);function i(){let o=(0,$.useContext)(T);if(!o)throw new Error("useCardContext should used inside a CardContext.Provider");return o}var f=C(require("chroma-js")),s=require("styled-components"),g=C(require("@mobilestock-native/tools"));function V(o){return(0,f.default)(o).luminance()<.55?(0,f.default)(o).brighten(3).css():(0,f.default)(o).darken(5).css()}function w(o){return(0,f.default)(o).brighten(3).css()}function Eo(o,r,t,e,n){return s.css`
+    border-radius: ${n.borderRadius[t.toLowerCase()]};
+    position: relative;
+    overflow: hidden;
+
+    ${e&&o!=="OUTLINE"&&s.css`
+      border-width: 1px;
+      border-color: ${(0,f.default)(n.colors.card[r.toLowerCase()]).darken(1).css()};
+      border-style: solid;
+    `}
+
+    ${o==="OUTLINE"&&s.css`
+      border-width: 2px;
+      border-color: ${n.colors.card[r.toLowerCase()]};
+      border-style: solid;
+    `}
+
+    ${o==="SOLID"&&s.css`
+      background-color: ${n.colors.card[r.toLowerCase()]};
+    `}
+  `}function Ro(o,r,t){return o==="STRIPED"?s.css`
+      background-color: ${w(t.colors.card[r.toLowerCase()])};
+    `:s.css``}function Lo(o,r,t){switch(o){case"STRIPED":return s.css`
+        background-color: ${t.colors.card[r.toLowerCase()]};
+      `;case"OUTLINE":return s.css`
+        border-top-width: 1px;
+        border-top-color: ${t.colors.card[r.toLowerCase()]};
+        border-style: solid;
+      `;default:return s.css``}}function Ho(o){return o?s.css`
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      background-color: transparent;
+      z-index: 10;
+    `:s.css``}function Do(o,r,t,e){let n=s.css``;switch(o){case"STRIPED":n=s.css`
+        background-color: ${e.colors.card[r.toLowerCase()]};
+      `;break;case"OUTLINE":n=s.css`
+        border-bottom-width: 1px;
+        border-bottom-color: ${e.colors.card[r.toLowerCase()]};
+        border-style: solid;
+      `;break;default:n=s.css``}return s.css`
+    ${n}
+    ${Ho(t)}
+  `}function Fo(o,r,t){return s.css`
+    color: ${o==="OUTLINE"?t.colors.card[r.toLowerCase()]:g.default.defineTextColor(t.colors.card[r.toLowerCase()])};
+  `}function No(o,r,t,e){return!e&&(o==="OUTLINE"?s.css`
+          background-color: ${t.colors.card[r.toLowerCase()]};
+          color: ${g.default.defineTextColor(t.colors.card[r.toLowerCase()])};
+        `:s.css`
+          background-color: ${V(t.colors.card[r.toLowerCase()])};
+          color: ${g.default.defineTextColor(V(t.colors.card[r.toLowerCase()]))};
+        `)}var l={defineBackgroundColor:V,defineLightBackground:w,getStylesCard:Eo,getStylesFooter:Lo,getStylesHeader:Do,getTextStyles:Fo,getStyleButton:No,getBackgroundColorContent:Ro};var P=require("react/jsx-runtime");function E(d){var m=d,{variant:o="SOLID",color:r="DEFAULT",borderRadius:t="DEFAULT",borderActive:e=!0}=m,n=c(m,["variant","color","borderRadius","borderActive"]);let b={variant:o,color:r};return(0,P.jsx)(T.Provider,{value:b,children:(0,P.jsx)(Io,p(a({$variantKey:b.variant,$colorKey:b.color,$radiusKey:t,$borderActiveKey:e},n),{children:n.children}))})}var Io=(0,h.default)(B.Container.Vertical)`
+  ${({$variantKey:o,$colorKey:r,$radiusKey:t,$borderActiveKey:e,theme:n})=>l.getStylesCard(o,r,t,e,n)}
+`;var R=require("styled-components/native"),L=require("@mobilestock-native/container");var D=require("react/jsx-runtime");function H(t){var e=t,{children:o}=e,r=c(e,["children"]);let{variant:n,color:d}=i();return(0,D.jsx)(ko,p(a({$variantKey:n,$colorKey:d,align:"CENTER",padding:"MD",gap:"XS"},r),{children:o}))}var ko=(0,R.styled)(L.Container.Horizontal)`
+  ${({$variantKey:o,$colorKey:r,theme:t})=>l.getBackgroundColorContent(o,r,t)}
+`;var F=require("styled-components/native"),N=require("@mobilestock-native/container");var k=require("react/jsx-runtime");function I(t){var e=t,{children:o}=e,r=c(e,["children"]);let{variant:n,color:d}=i();return(0,k.jsx)(Oo,p(a({$variantKey:n,$colorKey:d,padding:"MD",align:"CENTER",gap:"XS"},r),{children:o}))}var Oo=(0,F.styled)(N.Container.Vertical)`
+  ${({$variantKey:o,$colorKey:r,theme:t})=>l.getBackgroundColorContent(o,r,t)}
+`;function Uo(){throw new Error("The Card.Content component should not be used directly. Use Card.Content.Vertical, Card.Content.Horizontal instead.")}var O=Object.assign(Uo,{Vertical:I,Horizontal:H});var U=C(require("styled-components/native")),z=require("@mobilestock-native/button");var X=require("react/jsx-runtime");function M(o){let{color:r,variant:t}=i();return(0,X.jsx)(zo,a({$colorKey:r,$variantKey:t},o))}var zo=(0,U.default)(z.Button)`
+  ${({$colorKey:o,$variantKey:r,theme:t,backgroundColor:e})=>l.getStyleButton(r,o,t,e)}
+`;var A=C(require("styled-components/native")),G=require("@mobilestock-native/container");var q=require("react/jsx-runtime");function _(t){var e=t,{children:o}=e,r=c(e,["children"]);let{variant:n,color:d}=i();return(0,q.jsx)(Mo,p(a({$variantKey:n,$colorKey:d,padding:"MD",align:"CENTER",gap:"XS"},r),{children:o}))}var Mo=(0,A.default)(G.Container.Horizontal)`
+  ${({$variantKey:o,$colorKey:r,theme:t})=>l.getStylesFooter(o,r,t)}
+`;var J=C(require("styled-components/native")),Q=require("@mobilestock-native/container");var Y=require("react/jsx-runtime");function W(t){var e=t,{children:o}=e,r=c(e,["children"]);let{variant:n,color:d}=i();return(0,Y.jsx)(Xo,p(a({$variantKey:n,$colorKey:d,padding:"MD",align:"CENTER",gap:"XS"},r),{children:o}))}var Xo=(0,J.default)(Q.Container.Vertical)`
+  ${({$variantKey:o,$colorKey:r,theme:t})=>l.getStylesFooter(o,r,t)}
+`;function Ao(){throw new Error("The Card.Footer component should not be used directly. Use Card.Footer.Vertical or Card.Footer.Horizontal instead.")}var Z=Object.assign(Ao,{Vertical:W,Horizontal:_,Button:M});var j=require("styled-components/native"),oo=require("@mobilestock-native/icons"),ro=C(require("@mobilestock-native/tools"));var eo=require("react/jsx-runtime");function to(o){let r=(0,j.useTheme)(),{variant:t,color:e}=i(),n=e.toLowerCase(),d=r.colors.card[n];return(0,eo.jsx)(oo.Icon,a({size:"LG",color:t==="OUTLINE"?d:ro.default.defineTextColor(d)},o))}var no=C(require("styled-components/native")),ao=require("@mobilestock-native/typography");var so=require("react/jsx-runtime");function io(t){var e=t,{children:o}=e,r=c(e,["children"]);let{variant:n,color:d}=i();return(0,so.jsx)(Go,p(a({$colorKey:d,$variantKey:n},r),{children:o}))}var Go=(0,no.default)(ao.Typography)`
+  ${({$colorKey:o,$variantKey:r,theme:t})=>l.getTextStyles(r,o,t)}
+`;var lo=C(require("styled-components/native")),po=require("@mobilestock-native/typography");var Co=require("react/jsx-runtime");function co(t){var e=t,{children:o}=e,r=c(e,["children"]);let{variant:n,color:d}=i();return(0,Co.jsx)(_o,p(a({size:"LG",weight:"BOLD",$colorKey:d,$variantKey:n},r),{children:o}))}var _o=(0,lo.default)(po.Typography)`
+  ${({$colorKey:o,$variantKey:r,theme:t})=>l.getTextStyles(r,o,t)}
+`;var mo=require("styled-components/native"),fo=require("@mobilestock-native/container");var yo=require("react/jsx-runtime");function uo(e){var n=e,{children:o,isFloating:r=!1}=n,t=c(n,["children","isFloating"]);let{variant:d,color:m}=i();return(0,yo.jsx)(qo,p(a({padding:"MD",align:"CENTER_CENTER",gap:"XS",$variantKey:d,$colorKey:m,$isFloatingKey:r},t),{children:o}))}var qo=(0,mo.styled)(fo.Container.Horizontal)`
+  ${({$variantKey:o,$colorKey:r,$isFloatingKey:t,theme:e})=>l.getStylesHeader(o,r,t,e)}
+`;var $o=require("styled-components/native"),go=require("@mobilestock-native/container");var xo=require("react/jsx-runtime");function bo(e){var n=e,{children:o,isFloating:r=!1}=n,t=c(n,["children","isFloating"]);let{variant:d,color:m}=i();return(0,xo.jsx)(Jo,p(a({gap:"2XS",align:"CENTER_CENTER",padding:"MD",$variantKey:d,$colorKey:m,$isFloating:r},t),{children:o}))}var Jo=(0,$o.styled)(go.Container.Vertical)`
+  ${({$variantKey:o,$colorKey:r,$isFloating:t,theme:e})=>l.getStylesHeader(o,r,t,e)}
+`;function Qo(){throw new Error("The Card.Header component should not be used directly. Use Card.Header.Vertical or Card.Header.Horizontal instead.")}var To=Object.assign(Qo,{Vertical:bo,Horizontal:uo,Icon:to,Title:co,Subtitle:io});var Wo=Object.assign(E,{Header:To,Content:O,Footer:Z});0&&(module.exports={Card});

package/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "@mobilestock-native/card",
+  "version": "0.0.1",
+  "main": "index.js",
+  "dependencies": {
+    "@mobilestock-native/icons": "^0.0.6",
+    "@mobilestock-native/typography": "^0.0.8",
+    "@mobilestock-native/tools": "^0.0.9",
+    "@mobilestock-native/button": "^1.0.8",
+    "@mobilestock-native/container": "^0.0.4"
+  },
+  "peerDependencies": {
+    "react": "catalog",
+    "react-native": "0.74.5",
+    "styled-components": "^6.1.8",
+    "chroma-js": "^3.1.2",
+    "@mobilestock-native/theme": "^0.0.4"
+  }
+}