@tapcart/mobile-components 0.2.0 → 0.2.2

package/dist/{globals.css → styles.css}

@@ -686,6 +686,9 @@ video {
 .right-2 {
   right: 0.5rem;
 }
+.start-4 {
+  inset-inline-start: 1rem;
+}
 .top-0 {
   top: 0px;
 }
@@ -698,6 +701,9 @@ video {
 .top-\[50\%\] {
   top: 50%;
 }
+.z-10 {
+  z-index: 10;
+}
 .z-50 {
   z-index: 50;
 }
@@ -744,6 +750,9 @@ video {
 .h-11 {
   height: 2.75rem;
 }
+.h-14 {
+  height: 3.5rem;
+}
 .h-2 {
   height: 0.5rem;
 }
@@ -826,6 +835,9 @@ video {
 .basis-full {
   flex-basis: 100%;
 }
+.origin-\[0\] {
+  transform-origin: 0;
+}
 .-translate-x-1\/2 {
   --tw-translate-x: -50%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -964,9 +976,6 @@ video {
 .rounded {
   border-radius: 0.25rem;
 }
-.rounded-\[4px\] {
-  border-radius: 4px;
-}
 .rounded-\[inherit\] {
   border-radius: inherit;
 }
@@ -1002,12 +1011,18 @@ video {
   --tw-border-opacity: 1;
   border-color: rgb(0 0 0 / var(--tw-border-opacity));
 }
+.border-coreColors-dividingLines {
+  border-color: var(--coreColors-dividingLines);
+}
 .border-destructive {
   border-color: hsl(var(--destructive));
 }
 .border-input {
   border-color: hsl(var(--input));
 }
+.border-stateColors-error {
+  border-color: var(--stateColors-error);
+}
 .border-transparent {
   border-color: transparent;
 }
@@ -1036,6 +1051,9 @@ video {
 .bg-buttonColors-secondaryFill {
   background-color: var(--buttonColors-secondaryFill);
 }
+.bg-coreColors-inputBackground {
+  background-color: var(--coreColors-inputBackground);
+}
 .bg-coreColors-pageColor {
   background-color: var(--coreColors-pageColor);
 }
@@ -1061,9 +1079,6 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
-.fill-primary-foreground {
-  fill: hsl(var(--primary-foreground));
-}
 .p-1 {
   padding: 0.25rem;
 }
@@ -1115,10 +1130,6 @@ video {
   padding-top: 0.125rem;
   padding-bottom: 0.125rem;
 }
-.py-2 {
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
-}
 .py-3 {
   padding-top: 0.75rem;
   padding-bottom: 0.75rem;
@@ -1127,6 +1138,9 @@ video {
   padding-top: 1rem;
   padding-bottom: 1rem;
 }
+.pb-2 {
+  padding-bottom: 0.5rem;
+}
 .pb-4 {
   padding-bottom: 1rem;
 }
@@ -1142,6 +1156,9 @@ video {
 .pt-4 {
   padding-top: 1rem;
 }
+.pt-5 {
+  padding-top: 1.25rem;
+}
 .text-center {
   text-align: center;
 }
@@ -1149,6 +1166,12 @@ video {
   font-size: 1.5rem;
   line-height: 2rem;
 }
+.text-\[10px\] {
+  font-size: 10px;
+}
+.text-\[12px\] {
+  font-size: 12px;
+}
 .text-base {
   font-size: 1rem;
   line-height: 1.5rem;
@@ -1193,15 +1216,84 @@ video {
   --tw-text-opacity: 1;
   color: rgb(0 0 0 / var(--tw-text-opacity));
 }
+.text-buttonColors-destructiveText {
+  color: var(--buttonColors-destructiveText);
+}
+.text-buttonColors-disabled {
+  color: var(--buttonColors-disabled);
+}
+.text-buttonColors-primaryFill {
+  color: var(--buttonColors-primaryFill);
+}
+.text-buttonColors-primaryOutline {
+  color: var(--buttonColors-primaryOutline);
+}
+.text-buttonColors-primaryOutlineColor {
+  color: var(--buttonColors-primaryOutlineColor);
+}
+.text-buttonColors-primaryOutlineEnabled {
+  color: var(--buttonColors-primaryOutlineEnabled);
+}
+.text-buttonColors-primaryShadow {
+  color: var(--buttonColors-primaryShadow);
+}
+.text-buttonColors-primaryShadowEnabled {
+  color: var(--buttonColors-primaryShadowEnabled);
+}
 .text-buttonColors-primaryText {
   color: var(--buttonColors-primaryText);
 }
+.text-buttonColors-secondaryFill {
+  color: var(--buttonColors-secondaryFill);
+}
+.text-buttonColors-secondaryOutlineColor {
+  color: var(--buttonColors-secondaryOutlineColor);
+}
+.text-buttonColors-secondaryOutlineEnabled {
+  color: var(--buttonColors-secondaryOutlineEnabled);
+}
+.text-buttonColors-secondaryShadowEnabled {
+  color: var(--buttonColors-secondaryShadowEnabled);
+}
 .text-buttonColors-secondaryText {
   color: var(--buttonColors-secondaryText);
 }
+.text-coreColors-brandColorPrimary {
+  color: var(--coreColors-brandColorPrimary);
+}
+.text-coreColors-dividingLines {
+  color: var(--coreColors-dividingLines);
+}
+.text-coreColors-headerBackground {
+  color: var(--coreColors-headerBackground);
+}
+.text-coreColors-headerIcon {
+  color: var(--coreColors-headerIcon);
+}
+.text-coreColors-inputBackground {
+  color: var(--coreColors-inputBackground);
+}
+.text-coreColors-modalBackground {
+  color: var(--coreColors-modalBackground);
+}
 .text-coreColors-pageColor {
   color: var(--coreColors-pageColor);
 }
+.text-coreColors-primaryIcon {
+  color: var(--coreColors-primaryIcon);
+}
+.text-coreColors-secondaryIcon {
+  color: var(--coreColors-secondaryIcon);
+}
+.text-coreColors-shadow {
+  color: var(--coreColors-shadow);
+}
+.text-coreColors-shadowsEnabled {
+  color: var(--coreColors-shadowsEnabled);
+}
+.text-coreColors-tabBar {
+  color: var(--coreColors-tabBar);
+}
 .text-destructive-foreground {
   color: hsl(var(--destructive-foreground));
 }
@@ -1223,18 +1315,63 @@ video {
 .text-secondary-foreground {
   color: hsl(var(--secondary-foreground));
 }
+.text-stateColors-disabled {
+  color: var(--stateColors-disabled);
+}
+.text-stateColors-error {
+  color: var(--stateColors-error);
+}
+.text-stateColors-favorites {
+  color: var(--stateColors-favorites);
+}
+.text-stateColors-reviews {
+  color: var(--stateColors-reviews);
+}
+.text-stateColors-skeleton {
+  color: var(--stateColors-skeleton);
+}
+.text-stateColors-subscriptions {
+  color: var(--stateColors-subscriptions);
+}
+.text-stateColors-success {
+  color: var(--stateColors-success);
+}
+.text-stateColors-warning {
+  color: var(--stateColors-warning);
+}
+.text-textColors-legalText {
+  color: var(--textColors-legalText);
+}
+.text-textColors-pageTitle {
+  color: var(--textColors-pageTitle);
+}
+.text-textColors-priceText {
+  color: var(--textColors-priceText);
+}
 .text-textColors-primaryColor {
   color: var(--textColors-primaryColor);
 }
+.text-textColors-productTitle {
+  color: var(--textColors-productTitle);
+}
+.text-textColors-salePriceText {
+  color: var(--textColors-salePriceText);
+}
 .text-textColors-secondaryColor {
   color: var(--textColors-secondaryColor);
 }
+.text-textColors-strikethroughPriceText {
+  color: var(--textColors-strikethroughPriceText);
+}
 .underline-offset-4 {
   text-underline-offset: 4px;
 }
 .opacity-0 {
   opacity: 0;
 }
+.opacity-100 {
+  opacity: 1;
+}
 .opacity-90 {
   opacity: 0.9;
 }
@@ -1326,11 +1463,23 @@ video {
 .file\:font-medium::file-selector-button {
   font-weight: 500;
 }
-.placeholder\:text-muted-foreground::-moz-placeholder {
-  color: hsl(var(--muted-foreground));
+.placeholder\:text-stateColors-error::-moz-placeholder {
+  color: var(--stateColors-error);
 }
-.placeholder\:text-muted-foreground::placeholder {
-  color: hsl(var(--muted-foreground));
+.placeholder\:text-stateColors-error::placeholder {
+  color: var(--stateColors-error);
+}
+.placeholder\:text-textColors-secondaryColor::-moz-placeholder {
+  color: var(--textColors-secondaryColor);
+}
+.placeholder\:text-textColors-secondaryColor::placeholder {
+  color: var(--textColors-secondaryColor);
+}
+.placeholder-shown\:p-4:-moz-placeholder-shown {
+  padding: 1rem;
+}
+.placeholder-shown\:p-4:placeholder-shown {
+  padding: 1rem;
 }
 .hover\:bg-accent:hover {
   background-color: hsl(var(--accent));
@@ -1362,6 +1511,12 @@ video {
 .hover\:underline:hover {
   text-decoration-line: underline;
 }
+.focus\:border-coreColors-brandColorPrimary:focus {
+  border-color: var(--coreColors-brandColorPrimary);
+}
+.focus\:border-stateColors-error:focus {
+  border-color: var(--stateColors-error);
+}
 .focus\:opacity-100:focus {
   opacity: 1;
 }
@@ -1384,6 +1539,11 @@ video {
   outline: 2px solid transparent;
   outline-offset: 2px;
 }
+.focus-visible\:ring-0:focus-visible {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
 .focus-visible\:ring-2:focus-visible {
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
@@ -1455,6 +1615,12 @@ video {
 .group.destructive .group-\[\.destructive\]\:focus\:ring-offset-red-600:focus {
   --tw-ring-offset-color: #dc2626;
 }
+.peer:-moz-placeholder-shown ~ .peer-placeholder-shown\:opacity-0 {
+  opacity: 0;
+}
+.peer:placeholder-shown ~ .peer-placeholder-shown\:opacity-0 {
+  opacity: 0;
+}
 .peer:disabled ~ .peer-disabled\:cursor-not-allowed {
   cursor: not-allowed;
 }
@@ -1516,6 +1682,9 @@ video {
 .data-\[state\=unchecked\]\:bg-input[data-state=unchecked] {
   background-color: hsl(var(--input));
 }
+.data-\[icon\=true\]\:pr-10[data-icon=true] {
+  padding-right: 2.5rem;
+}
 .data-\[state\=on\]\:text-accent-foreground[data-state=on] {
   color: hsl(var(--accent-foreground));
 }
@@ -1654,6 +1823,9 @@ video {
     max-width: 420px;
   }
 }
+.\[\&\+label\]\:text-stateColors-error+label {
+  color: var(--stateColors-error);
+}
 .\[\&\[data-state\=open\]\>svg\]\:rotate-180[data-state=open]>svg {
   --tw-rotate: 180deg;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@tapcart/mobile-components",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "main": "dist/index.js",
-  "module": "dist/index.esm.js",
+  "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
   "style": "dist/styles.css",
   "sourceMap": true,
@@ -16,9 +16,8 @@
     "lint": "eslint \"**/*.ts*\"",
     "ui:add": "pnpm dlx shadcn-ui@latest add",
     "build:styles": "postcss styles/globals.css -o dist/styles.css",
-    "build:ts": "tsc -p tsconfig.json",
-    "build": "pnpm run build:ts && pnpm run build:styles",
-    "build:sdk": "tsc && node scripts/build-css.js"
+    "build:ts": "tsup",
+    "build": "pnpm run build:ts && pnpm run build:styles"
   },
   "devDependencies": {
     "@types/react": "^18.2.0",
@@ -30,6 +29,7 @@
     "react": "^17.0.2",
     "tailwindcss": "^3.3.2",
     "tsconfig": "workspace:*",
+    "tsup": "^8.1.0",
     "typescript": "^4.5.2"
   },
   "dependencies": {

package/README.md

@@ -1,264 +0,0 @@
-<div align="center">
-  <a href="https://tapcart.com">
-    <img
-      src="https://storage.googleapis.com/tapcart-asset-uploads-prod/dx-github.png"
-      alt=""
-    />
-  </a>
-</div>
-
-# @tapcart/mobile-components
-
-> Build the next-gen shopper experience for Tapcart's core product, the mobile app.
-
-[![storybook](https://shields.io/badge/storybook-grey?logo=storybook&style=flat)](https://tapcart-consumer-web-storybook.vercel.app/) [![npm version](https://img.shields.io/npm/v/@tapcart/mobile-components.svg?label=@tapcart/mobile-components)](https://www.npmjs.com/package/@tapcart/mobile-components)
-
-| Status | Owner            | Help            |
-| ------ | ---------------- |-----------------|
-| Active | @tapcart/mobile-components | dev@tapcart.com |
-
-## About this repo
-
-The tapcart/mobile-components repository is a component library made up of all the code components that drive our app experience.
-
-## Installation using NPM
-
-### Install into your React.js project
-
-```sh
-npm install @tapcart/mobile-components
-```
-
-
-
-
-## Usage
-**Easy. Cake. Done.**
-
-```jsx
-import {
-  Button,
-  Input,
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger,
-  AspectRatio,
-  Switch,
-  Label,
-  Separator,
-  Badge,
-  Video,
-  ScrollArea,
-  Text,
-  Toast,
-  Toaster,
-  useToast,
-  Icon,
-  Container,
-  Grid,
-  ToggleGroup,
-  ToggleGroupItem,
-} from "@tapcart/mobile-components";
-
-<Video>
-  <source src="https://assets.tapcart.com/image-block/video/FhEjfK4zD2_6614803b487c620032dc21c4.mp4" /> 
-</Video>
-
-<Separator />
-
-<Container variant="spaced">
-  <Input placeholder="Search for products" type="email"></Input>
-</Container>
-
-<Separator />
-
-<Accordion type="single" collapsible className="w-full">
-  <AccordionItem value="item-1">
-    <Container>
-      <AccordionTrigger>
-        <div className="flex">
-          <Icon>
-            <svg
-              width="15"
-              height="18"
-              viewBox="0 0 15 18"
-              fill="none"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M7.3 8.14a4.08 4.08 0 0 1-4.07-4.07C3.23 1.83 5.05 0 7.3 0s4.07 1.83 4.07 4.07A4.08 4.08 0 0 1 7.3 8.14Zm0-6.64a2.57 2.57 0 1 0 0 5.14 2.57 2.57 0 1 0 0-5.14ZM12.88 17.69H1.72c-.95 0-1.72-.77-1.72-1.72 0-3.54 2.88-6.42 6.42-6.42h1.76c3.54 0 6.42 2.88 6.42 6.42 0 .95-.77 1.72-1.72 1.72Zm-6.46-6.64a4.93 4.93 0 0 0-4.92 4.92c0 .12.1.22.22.22h11.16c.12 0 .22-.1.22-.22a4.93 4.93 0 0 0-4.92-4.92H6.42Z"
-                fill="currentColor"
-              ></path>
-            </svg>
-          </Icon>
-          Product details
-        </div>
-      </AccordionTrigger>
-      <AccordionContent>
-        <img src="https://assets.tapcart.com/pdp/images/FhEjfK4zD2_6629470724b8221a7b750a97.png" />
-      </AccordionContent>
-    </Container>
-  </AccordionItem>
-  <AccordionItem value="item-2">
-    <Container>
-      <AccordionTrigger>
-        <div className="flex">
-          <Icon>
-            <svg
-              width="18"
-              height="17"
-              viewBox="0 0 18 17"
-              fill="none"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M6.61 13.22c-1.77 0-3.43-.69-4.67-1.94A6.567 6.567 0 0 1 0 6.61c0-1.76.69-3.43 1.94-4.67A6.533 6.533 0 0 1 6.61 0c1.77 0 3.43.69 4.67 1.94a6.567 6.567 0 0 1 1.94 4.67c0 1.76-.69 3.43-1.94 4.67a6.567 6.567 0 0 1-4.67 1.94Zm0-11.72C5.24 1.5 3.96 2.03 3 3c-.97.97-1.5 2.25-1.5 3.61 0 1.36.53 2.65 1.5 3.61.96.97 2.25 1.5 3.61 1.5 1.36 0 2.65-.53 3.61-1.5.97-.97 1.5-2.25 1.5-3.61 0-1.36-.53-2.65-1.5-3.61-.96-.97-2.25-1.5-3.61-1.5ZM16.4 16.15c-.19 0-.38-.07-.53-.22l-3.18-3.18a.754.754 0 0 1 0-1.06c.29-.29.77-.29 1.06 0l3.18 3.18c.29.29.29.77 0 1.06-.15.15-.34.22-.53.22Z"
-                fill="currentColor"
-              ></path>
-            </svg>
-          </Icon>
-          Size Guide
-        </div>
-      </AccordionTrigger>
-      <AccordionContent>
-        Yes. It comes with default styles that matches the other
-        components&apos; aesthetic.
-      </AccordionContent>
-    </Container>
-  </AccordionItem>
-</Accordion>
-
-{/*Aspect Ratio+ scroll area Example*/}
-<Container>
-  <Text className="py-2 font-medium">New Drop Collection</Text>
-</Container>
-
-<ScrollArea>
-  {Products.map((product) => (
-    <ProductCard
-      className="w-[138px] mr-[7px]"
-      key={product.id}
-      product={product}
-      quickAdd={quickAdd}
-      openProduct={clickProduct}
-      switchVariant={switchVariant}
-      carousel={false}
-    ></ProductCard>
-  ))}
-</ScrollArea>
-
-<Separator className="my-[15px]" />
-
-<div className="container flex items-center space-x-2">
-  <ToggleGroup
-    onValueChange={(e) => changeGrid(e)}
-    type="single"
-    defaultValue="2">
-    <ToggleGroupItem value="1" aria-label="Toggle bold">
-      <Icon>
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="24"
-          height="24"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="2"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          className="lucide lucide-rows-2">
-          <rect width="18" height="18" x="3" y="3" rx="2" />
-          <path d="M3 12h18" />
-        </svg>
-      </Icon>
-    </ToggleGroupItem>
-    <ToggleGroupItem value="2" aria-label="Toggle italic">
-      <Icon>
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="24"
-          height="24"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="2"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          className="lucide lucide-columns-3"
-        >
-          <rect width="18" height="18" x="3" y="3" rx="2" />
-          <path d="M9 3v18" />
-          <path d="M15 3v18" />
-        </svg>
-      </Icon>
-    </ToggleGroupItem>
-    <ToggleGroupItem value="3" aria-label="Toggle underline">
-      <Icon>
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="24"
-          height="24"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="2"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          className="lucide lucide-columns-3">
-          <rect width="18" height="18" x="3" y="3" rx="2" />
-          <path d="M9 3v18" />
-          <path d="M15 3v18" />
-        </svg>
-      </Icon>
-    </ToggleGroupItem>
-  </ToggleGroup>
-</div>
-
-<Separator className="my-[15px]" />
-
-<Grid columns={grid} className="">
-  {Products.map((product) => (
-    <ProductCard
-      key={product.id}
-      className="w-full"
-      product={product}
-      quickAdd={quickAdd}
-      openProduct={clickProduct}
-      switchVariant={switchVariant}
-      carousel={true}
-    ></ProductCard>
-  ))}
-</Grid>
-
-```
-
-
-## Licenses
-
-Copyright (c) 2017-present Tapcart Inc.
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-The rights granted above may only be exercised to develop and distribute
-applications that integrate or interoperate with Tapcart software or services,
-and in the case of external, stand-alone applications that do not embed
-directly inside Tapcart, the rights granted above may only be exercised to
-develop and distribute applications that are dissimilar and visually distinct
-from Tapcart products and services, as determined by Tapcart in its sole discretion.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.