@tapcart/mobile-components 0.2.12 → 0.3.0

package/dist/styles.css

@@ -1,5 +1,5 @@
 /*
-! tailwindcss v3.4.4 | MIT License | https://tailwindcss.com
+! tailwindcss v3.3.5 | MIT License | https://tailwindcss.com
 *//*
 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
 2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
@@ -26,20 +26,17 @@
 4. Use the user's configured `sans` font-family by default.
 5. Use the user's configured `sans` font-feature-settings by default.
 6. Use the user's configured `sans` font-variation-settings by default.
-7. Disable tap highlights on iOS
 */
 
-html,
-:host {
+html {
   line-height: 1.5; /* 1 */
   -webkit-text-size-adjust: 100%; /* 2 */
   -moz-tab-size: 4; /* 3 */
   -o-tab-size: 4;
      tab-size: 4; /* 3 */
-  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
+  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
   font-feature-settings: normal; /* 5 */
   font-variation-settings: normal; /* 6 */
-  -webkit-tap-highlight-color: transparent; /* 7 */
 }
 
 /*
@@ -106,10 +103,8 @@ strong {
 }
 
 /*
-1. Use the user's configured `mono` font-family by default.
-2. Use the user's configured `mono` font-feature-settings by default.
-3. Use the user's configured `mono` font-variation-settings by default.
-4. Correct the odd `em` font sizing in all browsers.
+1. Use the user's configured `mono` font family by default.
+2. Correct the odd `em` font sizing in all browsers.
 */
 
 code,
@@ -117,9 +112,7 @@ kbd,
 samp,
 pre {
   font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
-  font-feature-settings: normal; /* 2 */
-  font-variation-settings: normal; /* 3 */
-  font-size: 1em; /* 4 */
+  font-size: 1em; /* 2 */
 }
 
 /*
@@ -179,7 +172,6 @@ textarea {
   font-size: 100%; /* 1 */
   font-weight: inherit; /* 1 */
   line-height: inherit; /* 1 */
-  letter-spacing: inherit; /* 1 */
   color: inherit; /* 1 */
   margin: 0; /* 2 */
   padding: 0; /* 3 */
@@ -200,9 +192,9 @@ select {
 */
 
 button,
-input:where([type='button']),
-input:where([type='reset']),
-input:where([type='submit']) {
+[type='button'],
+[type='reset'],
+[type='submit'] {
   -webkit-appearance: button; /* 1 */
   background-color: transparent; /* 2 */
   background-image: none; /* 2 */
@@ -565,10 +557,6 @@ video {
   --tw-backdrop-opacity:  ;
   --tw-backdrop-saturate:  ;
   --tw-backdrop-sepia:  ;
-  --tw-contain-size:  ;
-  --tw-contain-layout:  ;
-  --tw-contain-paint:  ;
-  --tw-contain-style:  ;
 }
 
 ::backdrop {
@@ -619,10 +607,6 @@ video {
   --tw-backdrop-opacity:  ;
   --tw-backdrop-saturate:  ;
   --tw-backdrop-sepia:  ;
-  --tw-contain-size:  ;
-  --tw-contain-layout:  ;
-  --tw-contain-paint:  ;
-  --tw-contain-style:  ;
 }
 .container {
   width: 100%;
@@ -764,6 +748,10 @@ video {
   margin-top: 0.75rem;
   margin-bottom: 0.75rem;
 }
+.my-auto {
+  margin-top: auto;
+  margin-bottom: auto;
+}
 .-ml-4 {
   margin-left: -1rem;
 }
@@ -773,6 +761,9 @@ video {
 .mb-2 {
   margin-bottom: 0.5rem;
 }
+.mb-6 {
+  margin-bottom: 1.5rem;
+}
 .ml-2 {
   margin-left: 0.5rem;
 }
@@ -785,6 +776,9 @@ video {
 .mt-2 {
   margin-top: 0.5rem;
 }
+.mt-3 {
+  margin-top: 0.75rem;
+}
 .mt-auto {
   margin-top: auto;
 }
@@ -815,9 +809,21 @@ video {
 .aspect-\[4\/5\] {
   aspect-ratio: 4/5;
 }
+.aspect-productImages {
+  aspect-ratio: var(--productImage-aspectRatio);
+}
 .aspect-square {
   aspect-ratio: 1 / 1;
 }
+.h-0 {
+  height: 0px;
+}
+.h-0\.5 {
+  height: 0.125rem;
+}
+.h-1 {
+  height: 0.25rem;
+}
 .h-10 {
   height: 2.5rem;
 }
@@ -845,6 +851,9 @@ video {
 .h-64 {
   height: 16rem;
 }
+.h-7 {
+  height: 1.75rem;
+}
 .h-8 {
   height: 2rem;
 }
@@ -881,8 +890,8 @@ video {
 .w-10 {
   width: 2.5rem;
 }
-.w-11 {
-  width: 2.75rem;
+.w-12 {
+  width: 3rem;
 }
 .w-14 {
   width: 3.5rem;
@@ -905,6 +914,9 @@ video {
 .w-6 {
   width: 1.5rem;
 }
+.w-7 {
+  width: 1.75rem;
+}
 .w-8 {
   width: 2rem;
 }
@@ -930,6 +942,9 @@ video {
 .min-w-\[8rem\] {
   min-width: 8rem;
 }
+.max-w-full {
+  max-width: 100%;
+}
 .max-w-lg {
   max-width: 32rem;
 }
@@ -942,6 +957,9 @@ video {
 .shrink-0 {
   flex-shrink: 0;
 }
+.grow {
+  flex-grow: 1;
+}
 .grow-0 {
   flex-grow: 0;
 }
@@ -1083,6 +1101,9 @@ video {
 .self-start {
   align-self: flex-start;
 }
+.self-center {
+  align-self: center;
+}
 .overflow-hidden {
   overflow: hidden;
 }
@@ -1095,8 +1116,8 @@ video {
 .overflow-y-auto {
   overflow-y: auto;
 }
-.overscroll-y-none {
-  overscroll-behavior-y: none;
+.overflow-y-hidden {
+  overflow-y: hidden;
 }
 .truncate {
   overflow: hidden;
@@ -1109,9 +1130,6 @@ video {
 .whitespace-nowrap {
   white-space: nowrap;
 }
-.text-wrap {
-  text-wrap: wrap;
-}
 .rounded {
   border-radius: 0.25rem;
 }
@@ -1156,6 +1174,9 @@ video {
 .border {
   border-width: 1px;
 }
+.border-0 {
+  border-width: 0px;
+}
 .border-2 {
   border-width: 2px;
 }
@@ -1172,6 +1193,15 @@ video {
   --tw-border-opacity: 1;
   border-color: rgb(0 0 0 / var(--tw-border-opacity));
 }
+.border-buttonColors-primaryOutlineColor {
+  border-color: var(--buttonColors-primaryOutlineColor);
+}
+.border-buttonColors-secondaryOutlineColor {
+  border-color: var(--buttonColors-secondaryOutlineColor);
+}
+.border-coreColors-brandColorPrimary {
+  border-color: var(--coreColors-brandColorPrimary);
+}
 .border-coreColors-dividingLines {
   border-color: var(--coreColors-dividingLines);
 }
@@ -1228,10 +1258,6 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(245 245 245 / var(--tw-bg-opacity));
 }
-.bg-neutral-300 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(212 212 212 / var(--tw-bg-opacity));
-}
 .bg-productBadging-fill {
   background-color: var(--productBadging-fill);
 }
@@ -1439,6 +1465,9 @@ video {
 .leading-\[130\%\] {
   line-height: 130%;
 }
+.leading-\[13px\] {
+  line-height: 13px;
+}
 .leading-\[160\%\] {
   line-height: 160%;
 }
@@ -1448,6 +1477,10 @@ video {
 .leading-none {
   line-height: 1;
 }
+.text-black {
+  --tw-text-opacity: 1;
+  color: rgb(0 0 0 / var(--tw-text-opacity));
+}
 .text-buttonColors-destructiveText {
   color: var(--buttonColors-destructiveText);
 }
@@ -1635,24 +1668,18 @@ video {
 .outline-1 {
   outline-width: 1px;
 }
-.outline-buttonColors-primaryOutline {
-  outline-color: var(--buttonColors-primaryOutline);
-}
-.outline-buttonColors-secondaryOutline {
-  outline-color: var(--buttonColors-secondaryOutline);
-}
 .outline-coreColors-brandColorPrimary {
   outline-color: var(--coreColors-brandColorPrimary);
 }
 .outline-coreColors-dividingLines {
   outline-color: var(--coreColors-dividingLines);
 }
-.outline-input {
-  outline-color: hsl(var(--input));
-}
 .outline-stateColors-error {
   outline-color: var(--stateColors-error);
 }
+.outline-stateColors-skeleton {
+  outline-color: var(--stateColors-skeleton);
+}
 .ring-0 {
   --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);
@@ -1661,6 +1688,10 @@ video {
 .ring-offset-background {
   --tw-ring-offset-color: hsl(var(--background));
 }
+.drop-shadow-\[0_3px_1px_0_rgba\(0\2c 0\2c 0\2c 1\)\] {
+  --tw-drop-shadow: drop-shadow(0 3px 1px 0 rgba(0,0,0,1));
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
 .filter {
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
@@ -1690,6 +1721,12 @@ video {
 .duration-300 {
   transition-duration: 300ms;
 }
+.duration-500 {
+  transition-duration: 500ms;
+}
+.ease-in-out {
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
 @keyframes enter {
 
   from {
@@ -1710,6 +1747,12 @@ video {
 .duration-300 {
   animation-duration: 300ms;
 }
+.duration-500 {
+  animation-duration: 500ms;
+}
+.ease-in-out {
+  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
 /* Hide scrollbar for Chrome, Safari and Opera */
 .no-scrollbar *::-webkit-scrollbar {
     display: none;
@@ -1757,6 +1800,12 @@ video {
 .placeholder-shown\:p-4:placeholder-shown {
   padding: 1rem;
 }
+.hover\:h-\[18px\]:hover {
+  height: 18px;
+}
+.hover\:w-\[18px\]:hover {
+  width: 18px;
+}
 .hover\:bg-accent:hover {
   background-color: hsl(var(--accent));
 }
@@ -1778,6 +1827,9 @@ video {
 .hover\:underline:hover {
   text-decoration-line: underline;
 }
+.hover\:\!line-through:hover {
+  text-decoration-line: line-through !important;
+}
 .focus\:border-coreColors-brandColorPrimary:focus {
   border-color: var(--coreColors-brandColorPrimary);
 }
@@ -1861,8 +1913,8 @@ video {
 .disabled\:opacity-50:disabled {
   opacity: 0.5;
 }
-.disabled\:outline-stateColors-disabled:disabled {
-  outline-color: var(--stateColors-disabled);
+.disabled\:opacity-70:disabled {
+  opacity: 0.7;
 }
 .group:hover .group-hover\:opacity-100 {
   opacity: 1;
@@ -1918,8 +1970,8 @@ video {
 .data-\[disabled\]\:pointer-events-none[data-disabled] {
   pointer-events: none;
 }
-.data-\[state\=checked\]\:translate-x-5[data-state=checked] {
-  --tw-translate-x: 1.25rem;
+.data-\[state\=checked\]\:translate-x-6[data-state=checked] {
+  --tw-translate-x: 1.5rem;
   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));
 }
 .data-\[state\=unchecked\]\:translate-x-0[data-state=unchecked] {
@@ -1964,14 +2016,14 @@ video {
 .data-\[state\=open\]\:animate-accordion-down[data-state=open] {
   animation: accordion-down 0.2s ease-out;
 }
-.data-\[state\=checked\]\:bg-primary[data-state=checked] {
-  background-color: hsl(var(--primary));
+.data-\[state\=checked\]\:bg-stateColors-success[data-state=checked] {
+  background-color: var(--stateColors-success);
 }
 .data-\[state\=on\]\:bg-accent[data-state=on] {
   background-color: hsl(var(--accent));
 }
-.data-\[state\=unchecked\]\:bg-input[data-state=unchecked] {
-  background-color: hsl(var(--input));
+.data-\[state\=unchecked\]\:bg-stateColors-disabled[data-state=unchecked] {
+  background-color: var(--stateColors-disabled);
 }
 .data-\[icon\=true\]\:pr-10[data-icon=true] {
   padding-right: 2.5rem;
@@ -2063,7 +2115,7 @@ video {
 .data-\[state\=open\]\:duration-500[data-state=open] {
   animation-duration: 500ms;
 }
-.dark\:bg-neutral-900:is(.dark *) {
+:is(.dark .dark\:bg-neutral-900) {
   --tw-bg-opacity: 1;
   background-color: rgb(23 23 23 / var(--tw-bg-opacity));
 }
@@ -2107,18 +2159,8 @@ video {
 .\[\&\>div\>button\]\:border-coreColors-brandColorPrimary>div>button {
   border-color: var(--coreColors-brandColorPrimary);
 }
-.\[\&\>p\]\:text-black>p {
-  --tw-text-opacity: 1;
-  color: rgb(0 0 0 / var(--tw-text-opacity));
-}
-.\[\&\>p\]\:text-buttonColors-primaryText>p {
-  color: var(--buttonColors-primaryText);
-}
-.\[\&\>p\]\:text-buttonColors-secondaryText>p {
-  color: var(--buttonColors-secondaryText);
-}
-.\[\&\>p\]\:text-coreColors-pageColor>p {
-  color: var(--coreColors-pageColor);
+.\[\&\>div\]\:w-full>div {
+  width: 100%;
 }
 .\[\&\>p\]\:text-stateColors-disabled>p {
   color: var(--stateColors-disabled);
@@ -2132,9 +2174,6 @@ video {
 .\[\&\>p\]\:\!line-through>p {
   text-decoration-line: line-through !important;
 }
-.hover\:\[\&\>p\]\:text-accent-foreground>p:hover {
-  color: hsl(var(--accent-foreground));
-}
 .\[\&\[data-state\=open\]\]\:outline-coreColors-brandColorPrimary[data-state=open] {
   outline-color: var(--coreColors-brandColorPrimary);
 }
@@ -2161,25 +2200,6 @@ video {
 .\[\&_p\]\:text-stateColors-disabled p {
   color: var(--stateColors-disabled);
 }
-.\[\&_svg\]\:text-black svg {
-  --tw-text-opacity: 1;
-  color: rgb(0 0 0 / var(--tw-text-opacity));
-}
-.\[\&_svg\]\:text-buttonColors-primaryText svg {
-  color: var(--buttonColors-primaryText);
-}
-.\[\&_svg\]\:text-buttonColors-secondaryText svg {
-  color: var(--buttonColors-secondaryText);
-}
-.\[\&_svg\]\:text-coreColors-pageColor svg {
-  color: var(--coreColors-pageColor);
-}
-.\[\&_svg\]\:text-textColors-primaryColor svg {
-  color: var(--textColors-primaryColor, #121212ff);
-}
-.hover\:\[\&_svg\]\:text-accent-foreground svg:hover {
-  color: hsl(var(--accent-foreground));
-}
 .active\:\[\&_svg\]\:text-stateColors-favorites svg:active {
   color: var(--stateColors-favorites);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tapcart/mobile-components",
-  "version": "0.2.12",
+  "version": "0.3.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "style": "dist/styles.css",
@@ -17,7 +17,9 @@
     "build:styles": "postcss styles/globals.css -o dist/styles.css",
     "build:ts": "tsc -p tsconfig.json && tsc-alias",
     "build": "pnpm run build:ts && pnpm run build:styles",
-    "dev": "tsc -w -p tsconfig.json"
+    "dev:ts": "tsc -w -p tsconfig.json",
+    "dev:styles": "npx tailwindcss -i styles/globals.css -o dist/styles.css --watch",
+    "dev": "concurrently \"pnpm run dev:ts\" \"pnpm run dev:styles\""
   },
   "peerDependencies": {
     "react": "^17.0.2 || ^18.0.0",
@@ -28,6 +30,9 @@
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.0",
     "autoprefixer": "^10.4.14",
+    "chokidar-cli": "^3.0.0",
+    "app-studio-types": "workspace:*",
+    "concurrently": "^8.2.2",
     "eslint": "^7.32.0",
     "eslint-config-custom": "workspace:*",
     "postcss": "^8.4.24",
@@ -41,12 +46,13 @@
     "@radix-ui/react-alert-dialog": "^1.0.5",
     "@radix-ui/react-aspect-ratio": "^1.0.3",
     "@radix-ui/react-checkbox": "^1.0.4",
-    "@radix-ui/react-dropdown-menu": "^2.1.1",
     "@radix-ui/react-dialog": "^1.0.5",
+    "@radix-ui/react-dropdown-menu": "^2.1.1",
     "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-radio-group": "^1.1.3",
     "@radix-ui/react-scroll-area": "^1.0.5",
     "@radix-ui/react-separator": "^1.0.3",
+    "@radix-ui/react-slider": "^1.1.2",
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-switch": "^1.0.3",
     "@radix-ui/react-toast": "^1.1.5",

package/dist/components/ThemeProvider.d.ts

@@ -1,3 +0,0 @@
-import { ThemeProviderProps } from "next-themes/dist/types";
-export declare function ThemeProvider({ children, ...props }: ThemeProviderProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=ThemeProvider.d.ts.map

package/dist/components/ThemeProvider.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../../components/ThemeProvider.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAA;AAE3D,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,kBAAkB,2CAEvE"}

package/dist/components/ThemeProvider.js

@@ -1,18 +0,0 @@
-"use client";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import { jsx as _jsx } from "react/jsx-runtime";
-import { ThemeProvider as NextThemesProvider } from "next-themes";
-export function ThemeProvider(_a) {
-    var { children } = _a, props = __rest(_a, ["children"]);
-    return _jsx(NextThemesProvider, Object.assign({}, props, { children: children }), void 0);
-}

package/dist/components/ThemeToggle.d.ts

@@ -1,2 +0,0 @@
-export declare function ThemeToggle(): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=ThemeToggle.d.ts.map

package/dist/components/ThemeToggle.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ThemeToggle.d.ts","sourceRoot":"","sources":["../../components/ThemeToggle.tsx"],"names":[],"mappings":"AAOA,wBAAgB,WAAW,4CAc1B"}

package/dist/components/ThemeToggle.js

@@ -1,8 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useTheme } from "next-themes";
-import { Button } from "../components/ui/button";
-export function ThemeToggle() {
-    const { setTheme, theme } = useTheme();
-    return (_jsxs(Button, Object.assign({ variant: "ghost", size: "sm", onClick: () => setTheme(theme === "light" ? "dark" : "light") }, { children: [_jsx("div", { className: "rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" }, void 0), _jsx("div", { className: "absolute rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" }, void 0), _jsx("span", Object.assign({ className: "sr-only" }, { children: "Toggle theme" }), void 0)] }), void 0));
-}