@pairbo/ui-kit 0.0.6 → 0.1.0

package/dist/src/mocks/shopifyHandler.d.ts

@@ -0,0 +1,2 @@
+export declare const shopifyCardsHandler: import('msw').HttpHandler;
+export declare const shopifyCategoriesHandler: import('msw').HttpHandler;

package/dist/src/themes/default.css

@@ -333,89 +333,193 @@
   /*                                  Spacings                                  */
   /* -------------------------------------------------------------------------- */
 
-  --pbo-spacing-3xs: 0.125rem;
-  --pbo-spacing-2xs: 0.25rem;
-  --pbo-spacing-xs: 0.5rem;
-  --pbo-spacing-s: 0.75rem;
-  --pbo-spacing-m: 1rem;
-  --pbo-spacing-l: 1.5rem;
-  --pbo-spacing-xl: 1.75rem;
-  --pbo-spacing-2xl: 2.25rem;
-  --pbo-spacing-3xl: 3rem;
-  --pbo-spacing-4xl: 4.5rem;
-
-  /* -------------------------------------------------------------------------- */
-  /*                                 Transitions                                */
-  /* -------------------------------------------------------------------------- */
+  --pbo-spacing-3x-small: 0.125rem; /* 2px */
+  --pbo-spacing-2x-small: 0.25rem; /* 4px */
+  --pbo-spacing-x-small: 0.5rem; /* 8px */
+  --pbo-spacing-small: 0.75rem; /* 12px */
+  --pbo-spacing-medium: 1rem; /* 16px */
+  --pbo-spacing-large: 1.25rem; /* 20px */
+  --pbo-spacing-x-large: 1.75rem; /* 28px */
+  --pbo-spacing-2x-large: 2.25rem; /* 36px */
+  --pbo-spacing-3x-large: 3rem; /* 48px */
+  --pbo-spacing-4x-large: 4.5rem; /* 72px */
+
+  /*
+   * Transitions
+   */
 
   --pbo-transition-x-slow: 1000ms;
   --pbo-transition-slow: 500ms;
   --pbo-transition-medium: 250ms;
   --pbo-transition-fast: 150ms;
-  --pbo-transition-x-fast: 100ms;
-
-  /* -------------------------------------------------------------------------- */
-  /*                                 Typography                                 */
-  /* -------------------------------------------------------------------------- */
-
-  /* ---------------------------------- Fonts --------------------------------- */
-  --pbo-font-open-sans: "Open Sans", sans-serif;
-  /* -------------------------------- Font size ------------------------------- */
-
-  /* ------------------------------ Font weights ------------------------------ */
-
-  /* ----------------------------- Letter spacings ---------------------------- */
-
-  /* ------------------------------- Lne heights ------------------------------ */
-
-  /* -------------------------------------------------------------------------- */
-  /*                                    Forms                                   */
-  /* -------------------------------------------------------------------------- */
-
-  /* --------------------------------- Buttons -------------------------------- */
-
-  /* --------------------------------- Inputs --------------------------------- */
-  --pbo-input-height-small: 1.875rem;
-  --pbo-input-height-medium: 2.5rem;
-  --pbo-input-height-large: 3.125rem;
-
+  --pbo-transition-x-fast: 50ms;
+
+  /*
+   * Typography
+   */
+
+  /* Fonts */
+  --pbo-font-mono: SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
+  --pbo-font-sans:
+    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji",
+    "Segoe UI Emoji", "Segoe UI Symbol";
+  --pbo-font-serif: Georgia, "Times New Roman", serif;
+
+  /* Font sizes */
+  --pbo-font-size-2x-small: 0.625rem; /* 10px */
+  --pbo-font-size-x-small: 0.75rem; /* 12px */
+  --pbo-font-size-small: 0.875rem; /* 14px */
+  --pbo-font-size-medium: 1rem; /* 16px */
+  --pbo-font-size-large: 1.25rem; /* 20px */
+  --pbo-font-size-x-large: 1.5rem; /* 24px */
+  --pbo-font-size-2x-large: 2.25rem; /* 36px */
+  --pbo-font-size-3x-large: 3rem; /* 48px */
+  --pbo-font-size-4x-large: 4.5rem; /* 72px */
+
+  /* Font weights */
+  --pbo-font-weight-light: 300;
+  --pbo-font-weight-normal: 400;
+  --pbo-font-weight-semibold: 500;
+  --pbo-font-weight-bold: 700;
+
+  /* Letter spacings */
+  --pbo-letter-spacing-denser: -0.03em;
+  --pbo-letter-spacing-dense: -0.015em;
+  --pbo-letter-spacing-normal: normal;
+  --pbo-letter-spacing-loose: 0.075em;
+  --pbo-letter-spacing-looser: 0.15em;
+
+  /* Line heights */
+  --pbo-line-height-denser: 1;
+  --pbo-line-height-dense: 1.4;
+  --pbo-line-height-normal: 1.8;
+  --pbo-line-height-loose: 2.2;
+  --pbo-line-height-looser: 2.6;
+
+  /* Focus rings */
+  --pbo-focus-ring-color: var(--pbo-color-primary-600);
+  --pbo-focus-ring-style: solid;
+  --pbo-focus-ring-width: 3px;
+  --pbo-focus-ring: var(--pbo-focus-ring-style) var(--pbo-focus-ring-width) var(--pbo-focus-ring-color);
+  --pbo-focus-ring-offset: 1px;
+
+  /*
+   * Forms
+   */
+
+  /* Buttons */
+  --pbo-button-font-size-small: var(--pbo-font-size-x-small);
+  --pbo-button-font-size-medium: var(--pbo-font-size-small);
+  --pbo-button-font-size-large: var(--pbo-font-size-medium);
+
+  /* Inputs */
+  --pbo-input-height-small: 1.875rem; /* 30px */
+  --pbo-input-height-medium: 2.5rem; /* 40px */
+  --pbo-input-height-large: 3.125rem; /* 50px */
+
+  --pbo-input-background-color: var(--pbo-color-neutral-0);
+  --pbo-input-background-color-hover: var(--pbo-input-background-color);
+  --pbo-input-background-color-focus: var(--pbo-input-background-color);
+  --pbo-input-background-color-disabled: var(--pbo-color-neutral-100);
+  --pbo-input-border-color: var(--pbo-color-neutral-300);
+  --pbo-input-border-color-hover: var(--pbo-color-neutral-400);
+  --pbo-input-border-color-focus: var(--pbo-color-primary-500);
+  --pbo-input-border-color-disabled: var(--pbo-color-neutral-300);
   --pbo-input-border-width: 1px;
-
-  --pbo-input-font-family: var(--pbo-font-open-sans);
+  --pbo-input-required-content: "*";
+  --pbo-input-required-content-offset: -2px;
+  --pbo-input-required-content-color: var(--pbo-input-label-color);
 
   --pbo-input-border-radius-small: var(--pbo-border-radius-medium);
   --pbo-input-border-radius-medium: var(--pbo-border-radius-medium);
   --pbo-input-border-radius-large: var(--pbo-border-radius-medium);
 
-  /* --------------------------------- Labels --------------------------------- */
+  --pbo-input-font-family: var(--pbo-font-sans);
+  --pbo-input-font-weight: var(--pbo-font-weight-normal);
+  --pbo-input-font-size-small: var(--pbo-font-size-small);
+  --pbo-input-font-size-medium: var(--pbo-font-size-medium);
+  --pbo-input-font-size-large: var(--pbo-font-size-large);
+  --pbo-input-letter-spacing: var(--pbo-letter-spacing-normal);
+
+  --pbo-input-color: var(--pbo-color-neutral-700);
+  --pbo-input-color-hover: var(--pbo-color-neutral-700);
+  --pbo-input-color-focus: var(--pbo-color-neutral-700);
+  --pbo-input-color-disabled: var(--pbo-color-neutral-900);
+  --pbo-input-icon-color: var(--pbo-color-neutral-500);
+  --pbo-input-icon-color-hover: var(--pbo-color-neutral-600);
+  --pbo-input-icon-color-focus: var(--pbo-color-neutral-600);
+  --pbo-input-placeholder-color: var(--pbo-color-neutral-500);
+  --pbo-input-placeholder-color-disabled: var(--pbo-color-neutral-600);
+  --pbo-input-spacing-small: var(--pbo-spacing-small);
+  --pbo-input-spacing-medium: var(--pbo-spacing-medium);
+  --pbo-input-spacing-large: var(--pbo-spacing-large);
+
+  --pbo-input-focus-ring-color: hsl(198.6 88.7% 48.4% / 40%);
+  --pbo-input-focus-ring-offset: 0;
+
+  --pbo-input-filled-background-color: var(--pbo-color-neutral-100);
+  --pbo-input-filled-background-color-hover: var(--pbo-color-neutral-100);
+  --pbo-input-filled-background-color-focus: var(--pbo-color-neutral-100);
+  --pbo-input-filled-background-color-disabled: var(--pbo-color-neutral-100);
+  --pbo-input-filled-color: var(--pbo-color-neutral-800);
+  --pbo-input-filled-color-hover: var(--pbo-color-neutral-800);
+  --pbo-input-filled-color-focus: var(--pbo-color-neutral-700);
+  --pbo-input-filled-color-disabled: var(--pbo-color-neutral-800);
+
+  /* Labels */
+  --pbo-input-label-font-size-small: var(--pbo-font-size-small);
+  --pbo-input-label-font-size-medium: var(--pbo-font-size-medium);
+  --pbo-input-label-font-size-large: var(--pbo-font-size-large);
+  --pbo-input-label-color: inherit;
+
+  /* Help text */
+  --pbo-input-help-text-font-size-small: var(--pbo-font-size-x-small);
+  --pbo-input-help-text-font-size-medium: var(--pbo-font-size-small);
+  --pbo-input-help-text-font-size-large: var(--pbo-font-size-medium);
+  --pbo-input-help-text-color: var(--pbo-color-neutral-500);
+
+  /* Toggles (checkboxes, radios, switches) */
+  --pbo-toggle-size-small: 0.875rem; /* 14px */
+  --pbo-toggle-size-medium: 1.125rem; /* 18px */
+  --pbo-toggle-size-large: 1.375rem; /* 22px */
+
+  /*
+   * Overlays
+   */
 
-  /* -------------------------------- Help text ------------------------------- */
+  --pbo-overlay-background-color: hsl(240 3.8% 46.1% / 33%);
 
-  /* -------------- Toggles (checkboxes, radio buttons, switches) ------------- */
+  /*
+   * Panels
+   */
 
-  /* -------------------------------------------------------------------------- */
-  /*                                  Overlays                                  */
-  /* -------------------------------------------------------------------------- */
-
-  --pbo-overlay-background-color: hsl(240 3.8% 46.1% / 33%);
-  /* -------------------------------------------------------------------------- */
-  /*                                   Panels                                   */
-  /* -------------------------------------------------------------------------- */
   --pbo-panel-background-color: var(--pbo-color-neutral-0);
   --pbo-panel-border-color: var(--pbo-color-neutral-200);
   --pbo-panel-border-width: 1px;
-  /* -------------------------------------------------------------------------- */
-  /*                                  Tooltips                                  */
-  /* -------------------------------------------------------------------------- */
 
-  /* -------------------------------------------------------------------------- */
-  /*                                   z-index                                  */
-  /* -------------------------------------------------------------------------- */
-
-  /* ------------------------------- Transitions ------------------------------ */
-  --pbo-transition-x-slow: 1000ms;
-  --pbo-transition-slow: 500ms;
-  --pbo-transition-medium: 250ms;
-  --pbo-transition-fast: 150ms;
-  --pbo-transition-x-fast: 100ms;
+  /*
+   * Tooltips
+   */
+
+  --pbo-tooltip-border-radius: var(--pbo-border-radius-medium);
+  --pbo-tooltip-background-color: var(--pbo-color-neutral-800);
+  --pbo-tooltip-color: var(--pbo-color-neutral-0);
+  --pbo-tooltip-font-family: var(--pbo-font-sans);
+  --pbo-tooltip-font-weight: var(--pbo-font-weight-normal);
+  --pbo-tooltip-font-size: var(--pbo-font-size-small);
+  --pbo-tooltip-line-height: var(--pbo-line-height-dense);
+  --pbo-tooltip-padding: var(--pbo-spacing-2x-small) var(--pbo-spacing-x-small);
+  --pbo-tooltip-arrow-size: 6px;
+
+  /*
+   * Z-indexes
+   */
+
+  --pbo-z-index-drawer: 700;
+  --pbo-z-index-dialog: 800;
+  --pbo-z-index-dropdown: 900;
+  --pbo-z-index-toast: 950;
+  --pbo-z-index-tooltip: 1000;
 }
+
+/* _utility.css */

package/dist/src/utilities/mobile.d.ts

@@ -0,0 +1,3 @@
+export declare const isMobileDevice: () => boolean;
+export declare const isNullOrUndefined: (...values: any[]) => boolean;
+export declare const isValid: <T>(value: T) => value is NonNullable<T>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pairbo/ui-kit",
-  "version": "0.0.6",
+  "version": "0.1.0",
   "description": "",
   "type": "module",
   "readme": "./README-NPM.md",
@@ -45,6 +45,7 @@
     "husky": "^9.1.7",
     "inquirer": "^12.4.2",
     "lint-staged": "^15.4.3",
+    "msw": "^2.7.3",
     "npm-run-all": "^4.1.5",
     "plop": "^4.0.1",
     "prettier": "^3.5.0",
@@ -77,5 +78,10 @@
     "lit": "^3.2.1",
     "markdown-it": "^14.1.0",
     "markdown-it-attrs": "^4.3.1"
+  },
+  "msw": {
+    "workerDirectory": [
+      "public"
+    ]
   }
 }