bison-web-components 1.0.0

package/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "bison-web-components",
+  "version": "1.0.0",
+  "description": "Bison JIB's suite of web components",
+  "main": "component.js",
+  "type": "module",
+  "keywords": [
+    "web component",
+    "form",
+    "custom element"
+  ],
+  "author": "Your Name",
+  "license": "MIT"
+}

package/test.js

@@ -0,0 +1,3 @@
+import { BisonJibPayAPI } from './api.js';
+const api = new BisonJibPayAPI("https://bison-backend-development-hhgrdbhcbwhahdfk.southeastasia-01.azurewebsites.net", "BwVEfJ2u5y2JPsX8qGxtXlIhHyhu3qU2VW2y6Nf9Qc6KTsETvr");
+api.findOperatorFromEnverus("12345").then(console.log).catch(console.error);

package/test.mjs

@@ -0,0 +1,3 @@
+import { BisonJibPayAPI } from './api.js';
+const api = new BisonJibPayAPI("https://bison-backend-development-hhgrdbhcbwhahdfk.southeastasia-01.azurewebsites.net", "BwVEfJ2u5y2JPsX8qGxtXlIhHyhu3qU2VW2y6Nf9Qc6KTsETvr");
+api.findOperatorFromEnverus("12345").then(console.log).catch(console.error);

package/theme.css

@@ -0,0 +1,312 @@
+@theme {
+    /* ----- COLORS ----- */
+    --color-orange-100: oklch(95.4% 0.038 75.164);
+    --color-orange-600: oklch(64.6% 0.222 41.116);
+    --color-gray-50: oklch(98.5% 0.002 247.839);
+    --color-gray-100: oklch(96.7% 0.003 264.542);
+    --color-gray-200: oklch(92.8% 0.006 264.531);
+    --color-gray-400: oklch(70.7% 0.022 261.325);
+    --color-gray-500: oklch(55.1% 0.027 264.364);
+    --color-gray-600: oklch(44.6% 0.03 256.802);
+    --color-gray-700: oklch(37.3% 0.034 259.733);
+    --color-black: #000;
+    --color-white: #fff;
+
+    --color-primary: #4c7b63;
+    --color-primary-light: #e8f0eb;
+    --color-headline: #0f2a39;
+    --color-secondary: #5f6e78;
+    --color-success: #22c55e;
+    --color-warning: #f59e0b;
+    --color-error: #dd524b;
+    --color-sidebar: #fafafa;
+    --color-border: #e8e8e8;
+
+    /* ----- SPACING ----- */
+    --spacing: 0.25rem;
+    --spacing-xs: 0.25rem;
+    --spacing-sm: 0.5rem;
+    --spacing-md: 1rem;
+    --spacing-lg: 1.5rem;
+    --spacing-xl: 2rem;
+    --spacing-2xl: 3rem;
+
+    /* ----- CONTAINERS ----- */
+    --container-xs: 20rem;
+    --container-sm: 24rem;
+    --container-md: 28rem;
+    --container-lg: 32rem;
+    --container-xl: 36rem;
+    --container-2xl: 42rem;
+    --container-3xl: 48rem;
+    --container-4xl: 56rem;
+    --container-6xl: 72rem;
+
+    /* ----- TEXT SIZES ----- */
+    --text-xs: 0.75rem;
+    --text-xs--line-height: calc(1 / 0.75);
+    --text-sm: 0.875rem;
+    --text-sm--line-height: calc(1.25 / 0.875);
+    --text-base: 1rem;
+    --text-base--line-height: 1.5;
+    --text-lg: 1.125rem;
+    --text-lg--line-height: calc(1.75 / 1.125);
+    --text-xl: 1.25rem;
+    --text-xl--line-height: calc(1.75 / 1.25);
+    --text-2xl: 1.5rem;
+    --text-2xl--line-height: calc(2 / 1.5);
+    --text-3xl: 1.875rem;
+    --text-3xl--line-height: 1.2;
+    --text-8xl: 6rem;
+    --text-8xl--line-height: 1;
+
+    /* ----- FONT WEIGHTS ----- */
+    --font-weight-medium: 500;
+    --font-weight-semibold: 600;
+    --font-weight-bold: 700;
+
+    /* ----- MISC ----- */
+    --tracking-wide: 0.025em;
+    --leading-relaxed: 1.625;
+    --radius-lg: 0.5rem;
+    --radius-xl: 0.75rem;
+    --radius-2xl: 1rem;
+    --duration-fast: 150ms;
+    --duration-normal: 200ms;
+    --duration-slow: 300ms;
+    --ease-in: cubic-bezier(0.4, 0, 1, 1);
+    --ease-out: cubic-bezier(0, 0, 0.2, 1);
+    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+    --animate-spin: spin 1s linear infinite;
+    --blur-sm: 8px;
+
+    --default-transition-duration: 0.15s;
+    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+
+    --font-sans: 'Inter', system-ui, sans-serif;
+    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+
+    --z-dropdown: 10;
+    --z-sticky: 20;
+    --z-modal-backdrop: 40;
+    --z-modal: 50;
+    --z-toast: 60;
+}
+
+@layer base {
+
+    *,
+    ::after,
+    ::before,
+    ::backdrop {
+        box-sizing: border-box;
+        border: 0 solid;
+        margin: 0;
+        padding: 0;
+    }
+
+    html,
+    :host {
+        -webkit-text-size-adjust: 100%;
+        tab-size: 4;
+        line-height: 1.5;
+        font-family: var(--font-sans);
+        -webkit-tap-highlight-color: transparent;
+    }
+
+    body {
+        line-height: inherit;
+        background-color: var(--color-white);
+        color: var(--color-secondary);
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+        margin: 0;
+    }
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+        font-size: inherit;
+        font-weight: var(--font-weight-semibold);
+        color: var(--color-headline);
+    }
+
+    h1 {
+        font-size: var(--text-3xl);
+        line-height: 1.2;
+    }
+
+    h2 {
+        font-size: var(--text-2xl);
+        line-height: 1.33;
+    }
+
+    h3 {
+        font-size: var(--text-xl);
+        line-height: 1.4;
+    }
+
+    h4 {
+        font-size: var(--text-lg);
+        line-height: 1.55;
+    }
+
+    a {
+        color: inherit;
+        text-decoration: inherit;
+    }
+
+    b,
+    strong {
+        font-weight: bolder;
+    }
+
+    button,
+    input,
+    select,
+    optgroup,
+    textarea {
+        font-family: inherit;
+        font-size: 100%;
+        font-weight: inherit;
+        line-height: inherit;
+        color: inherit;
+        margin: 0;
+        padding: 0;
+    }
+
+    button,
+    select {
+        text-transform: none;
+    }
+
+    button,
+    [type='button'],
+    [type='reset'],
+    [type='submit'] {
+        -webkit-appearance: button;
+        background-color: transparent;
+        background-image: none;
+        cursor: pointer;
+    }
+
+    /* Custom checkbox styling from production */
+    input[type="checkbox"] {
+        appearance: none;
+        -webkit-appearance: none;
+        width: 1.125rem;
+        height: 1.125rem;
+        border: 1.5px solid var(--color-border);
+        border-radius: 0.25rem;
+        background-color: white;
+        cursor: pointer;
+        flex-shrink: 0;
+        background-repeat: no-repeat;
+        background-position: center;
+        margin: 0;
+        vertical-align: middle;
+    }
+
+    input[type="checkbox"]:checked {
+        border-color: var(--color-primary);
+        background-color: var(--color-primary);
+        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
+        background-size: 12px;
+    }
+
+    input[type="checkbox"]:hover {
+        border-color: var(--color-secondary);
+    }
+
+    input[type="checkbox"]:focus-visible {
+        outline: 2px solid var(--color-primary);
+        outline-offset: 2px;
+    }
+
+    /* Scrollbar Utilities */
+    .scrollbar-hide::-webkit-scrollbar {
+        display: none;
+    }
+
+    .scrollbar-subtle::-webkit-scrollbar {
+        height: 8px;
+        width: 8px;
+    }
+
+    .scrollbar-subtle::-webkit-scrollbar-track {
+        background: transparent;
+    }
+
+    .scrollbar-subtle::-webkit-scrollbar-thumb {
+        background: var(--color-border);
+        border-radius: 4px;
+    }
+
+    .scrollbar-subtle::-webkit-scrollbar-thumb:hover {
+        background: var(--color-secondary);
+    }
+}
+
+@layer utilities {
+    .collapse {
+        visibility: collapse;
+    }
+
+    /* Additional utilities commonly found */
+    .w-full {
+        width: 100%;
+    }
+
+    /* Explicitly map max-width utilities to container variables to override spacing collision */
+    .max-w-xs {
+        max-width: var(--container-xs);
+    }
+
+    .max-w-sm {
+        max-width: var(--container-sm);
+    }
+
+    .max-w-md {
+        max-width: var(--container-md);
+    }
+
+    .max-w-lg {
+        max-width: var(--container-lg);
+    }
+
+    .max-w-xl {
+        max-width: var(--container-xl);
+    }
+
+    .max-w-2xl {
+        max-width: var(--container-2xl);
+    }
+
+    .max-w-3xl {
+        max-width: var(--container-3xl);
+    }
+
+    .max-w-4xl {
+        max-width: var(--container-4xl);
+    }
+
+    .max-w-6xl {
+        max-width: var(--container-6xl);
+    }
+}
+
+/* Toast Animation */
+@keyframes slideIn {
+    from {
+        opacity: 0;
+        transform: translateX(100%);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateX(0);
+    }
+}