@sendoutcards/quantum-design-ui 1.8.39-alpha.5 → 2.0.0-alpha.0

package/README.md

@@ -0,0 +1,117 @@
+# Quantum Design System UI Package
+
+A comprehensive React component library built with TypeScript, providing atoms, molecules, and organisms for consistent UI development.
+
+## Branch Strategy
+
+### Master Branch (Current Stable)
+- Contains the current stable version (pre-2.0.0)
+- Used for production releases and hotfixes
+- Maintains backward compatibility
+- All current feature development and bug fixes
+
+### Canary Branch (Version 2.0.0 Development)
+- **Active development branch for version 2.0.0**
+- Contains breaking changes and new architecture
+- Used for experimental features and major refactoring
+- Published as **alpha releases** (e.g., `2.0.0-alpha.1`, `2.0.0-alpha.2`) until stable 2.0.0
+- **Not recommended for production use**
+
+### Working with Branches
+
+**For current stable features and bug fixes:**
+```bash
+git checkout master
+# Make changes
+git push origin master
+```
+
+**For 2.0.0 development:**
+```bash
+git checkout canary
+# Make changes for v2.0.0
+git push origin canary
+```
+
+**Installing alpha releases:**
+```bash
+# Install latest alpha version
+yarn add @sendoutcards/quantum-design-ui@alpha
+
+# Install specific alpha version
+yarn add @sendoutcards/quantum-design-ui@2.0.0-alpha.1
+```
+
+## Build Process
+
+This package uses a hybrid build approach combining Vite and TypeScript compiler for optimal output:
+
+### Build Command
+```bash
+yarn build
+```
+
+### What happens during build:
+
+1. **Vite Build** (`vite build`)
+   - Bundles source code into optimized ES modules
+   - Processes and bundles CSS
+   - Handles tree-shaking and code splitting
+   - Outputs: `dist/index.mjs` and `dist/index.css`
+
+2. **TypeScript Declaration Generation** (`tsc --project tsconfig.build.json`)
+   - Generates TypeScript declaration files (`.d.ts`)
+   - Uses specialized `tsconfig.build.json` config
+   - Excludes stories, tests, and spec files
+   - Outputs: `dist/index.d.ts` + `dist/src/**/*.d.ts` (417+ files)
+
+### Build Outputs
+- `dist/index.mjs` - ES module bundle (~813KB)
+- `dist/index.css` - Compiled styles (~14KB)
+- `dist/index.d.ts` - Main TypeScript declarations entry point
+- `dist/src/**/*.d.ts` - Individual component type definitions
+
+### Configuration Files
+- `vite.config.ts` - Vite bundling configuration
+- `tsconfig.build.json` - TypeScript declaration generation config
+- `package.json` - Points to `dist/index.d.ts` via `typings` field
+
+This approach ensures consumers get both optimized runtime code and complete TypeScript support.
+
+## Development Commands
+
+- `yarn build` - Build the library using Vite + generate TypeScript declarations
+- `yarn test` - Run Jest tests
+- `yarn test --testNamePattern="ComponentName"` - Run specific test
+- `yarn lint` - ESLint src directory
+- `yarn prettier` - Format code with Prettier
+- `yarn storybook` - Start Storybook dev server
+
+## Package Structure
+
+```
+src/
+├── atoms/          # Basic building blocks (Button, Input, etc.)
+├── molecules/      # Composed components (Card, Dialog, etc.)
+├── organisms/      # Complex components (Accordion, Navigation, etc.)
+├── hooks/          # Custom React hooks
+├── theme/          # Theme configuration and tokens
+├── helpers/        # Utility functions and HOCs
+└── exports/        # Barrel files for clean imports
+```
+
+## Usage
+
+```typescript
+import { Button, Card, Dialog } from '@sendoutcards/quantum-design-ui'
+import '@sendoutcards/quantum-design-ui/dist/index.css'
+
+// Components come with full TypeScript support
+<Button variant="primary" size="large">
+  Click me
+</Button>
+```
+
+## TypeScript Support
+
+This package provides comprehensive TypeScript definitions for all components, hooks, and utilities. The build process generates over 400 declaration files to ensure complete type safety and IntelliSense support in your IDE.

package/dist/index.css

@@ -0,0 +1 @@
+body{font-family:var(--qds-font-body, "Inter", sans-serif);font-size:16px;line-height:1.65}*{box-sizing:border-box}h1,h2,h3,h4,h5,h6{font-family:var(--qds-font-heading, "Inter", sans-serif)}button{font-family:var(--qds-font-body, "Inter", sans-serif)}.quantum-theme-root{font-size:16px}.quantum-theme-root>div{font-size:inherit}.avatar-container{position:relative;border-radius:15%;background-color:var(--avatar-background-color);background-position:center;background-size:cover;border:var(--avatar-border-width) solid var(--avatar-border-color);box-shadow:var(--avatar-box-shadow);display:flex;justify-content:center;align-items:center}.avatar-container.size-xSmall{height:var(--avatar-size-xSmall);width:var(--avatar-size-xSmall);min-width:var(--avatar-size-xSmall)}.avatar-container.size-small{height:var(--avatar-size-small);width:var(--avatar-size-small);min-width:var(--avatar-size-small)}.avatar-container.size-medium{height:var(--avatar-size-medium);width:var(--avatar-size-medium);min-width:var(--avatar-size-medium)}.avatar-container.size-large{height:var(--avatar-size-large);width:var(--avatar-size-large);min-width:var(--avatar-size-large)}.avatar-container.size-xLarge{height:var(--avatar-size-xLarge);width:var(--avatar-size-xLarge);min-width:var(--avatar-size-xLarge)}.avatar-container.has-image{background-image:var(--avatar-image-url)}.avatar-container.no-image{background-image:linear-gradient(var(--avatar-default-accent),var(--avatar-default-accent))}.active-bubble{position:absolute;bottom:0;background:var(--avatar-bubble-background);border-radius:50%;z-index:1;box-shadow:var(--avatar-box-shadow)}.active-bubble.size-xSmall{width:var(--avatar-bubble-size-xSmall);height:var(--avatar-bubble-size-xSmall);left:var(--avatar-bubble-left-xSmall)}.active-bubble.size-small{width:var(--avatar-bubble-size-small);height:var(--avatar-bubble-size-small);left:var(--avatar-bubble-left-small)}.active-bubble.size-medium{width:var(--avatar-bubble-size-medium);height:var(--avatar-bubble-size-medium);left:var(--avatar-bubble-left-medium)}.active-bubble.size-large{width:var(--avatar-bubble-size-large);height:var(--avatar-bubble-size-large);left:var(--avatar-bubble-left-large)}.active-bubble.size-xLarge{width:var(--avatar-bubble-size-xLarge);height:var(--avatar-bubble-size-xLarge);left:var(--avatar-bubble-left-xLarge)}.checkmark-container{position:absolute;bottom:0}.checkmark-container.size-xSmall{left:var(--avatar-bubble-left-xSmall)}.checkmark-container.size-small{left:var(--avatar-bubble-left-small)}.checkmark-container.size-medium{left:var(--avatar-bubble-left-medium)}.checkmark-container.size-large{left:var(--avatar-bubble-left-large)}.checkmark-container.size-xLarge{left:var(--avatar-bubble-left-xLarge)}.tooltip{position:relative;left:0;background:var(--tooltip-background);transform:var(--tooltip-transform)}.tooltip:after,.tooltip:before{border:solid transparent;content:" ";height:0;width:0;position:absolute;pointer-events:none}.tooltip:after{border-color:#fefefe00;border-width:8px}.tooltip:before{border-color:#e3e6e800;border-width:9px}.tooltip.direction-left:after,.tooltip.direction-left:before{right:100%;top:50%}.tooltip.direction-left:after{border-right-color:var(--tooltip-background);margin-top:-8px}.tooltip.direction-left:before{border-right-color:var(--tooltip-background);margin-top:-9px}.tooltip.direction-right:after,.tooltip.direction-right:before{left:100%;top:50%}.tooltip.direction-right:after{border-left-color:var(--tooltip-background);margin-top:-8px}.tooltip.direction-right:before{border-left-color:var(--tooltip-background);margin-top:-9px}.tooltip.direction-top:after,.tooltip.direction-top:before{bottom:100%;left:50%}.tooltip.direction-top:after{border-bottom-color:var(--tooltip-background);margin-left:-8px}.tooltip.direction-top:before{border-bottom-color:var(--tooltip-background);margin-left:-9px}.tooltip.direction-bottom:after,.tooltip.direction-bottom:before{top:100%;left:50%}.tooltip.direction-bottom:after{border-top-color:var(--tooltip-background);margin-left:-8px}.tooltip.direction-bottom:before{border-top-color:var(--tooltip-background);margin-left:-9px}.tooltip.reposition{transform:translateY(-125%)}.button-base:disabled{opacity:.35;cursor:not-allowed}.button-base:disabled:hover{box-shadow:none!important;transform:translateY(0)!important}.button-hover:hover{transform:translateY(3px);box-shadow:none;transition:transform .2s,box-shadow .2s ease-out}.info-block-container{display:flex;flex-direction:column;justify-content:flex-start;align-items:center;white-space:nowrap}.info-block-container span{display:block}.info-block-caption-container{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;white-space:nowrap}.info-block-caption-container span{display:block}.icon-link-container{width:100%}.icon-link-icon-container{display:flex;justify-content:center;align-items:center}.icon-link-title-container{white-space:nowrap}.icon-link-container.disabled,.icon-link-container.disabled .icon-link-icon-container,.icon-link-container.disabled .icon-link-title-container{cursor:not-allowed}.grid{display:grid;width:100%;grid-gap:var(--grid-gap);grid-template-columns:repeat(auto-fit,minmax(var(--grid-column-size),1fr));grid-auto-rows:minmax(var(--grid-row-size),auto);grid-auto-flow:var(--grid-auto-flow);max-width:var(--grid-max-width);height:var(--grid-height);overflow:var(--grid-overflow)}.grid-item{width:100%;height:100%;display:flex;align-items:flex-end;grid-column-end:span var(--grid-item-col-span);grid-row-end:span var(--grid-item-row-span);grid-column-start:var(--grid-item-col-start);grid-row-start:var(--grid-item-row-start);aspect-ratio:var(--grid-item-aspect-ratio)}.progress-container{display:flex;align-items:center;width:100%}.progress-bar{height:8px;position:relative;width:100%;margin-right:8px}.progress-fill{background:var(--progress-background);width:var(--progress-width);height:100%;position:relative;border-radius:inherit}.progress-bar.complete .progress-fill{background:#4cd964}.progress-bar.incomplete .progress-fill{background:linear-gradient(to right,#4cd964,#5ac8fa,#007aff,#34aadc)}.navigation-link:hover~.navigation-tooltip{opacity:1}.sheet-wrapper{position:var(--sheet-wrapper-position);bottom:0;left:0;z-index:var(--sheet-wrapper-z-index)}.sheet{width:var(--sheet-width-base);display:flex;background-color:var(--sheet-background-color);place-items:start center;place-content:start center;flex-direction:column;border-radius:var(--sheet-border-radius-base);box-shadow:var(--sheet-box-shadow);position:var(--sheet-position);bottom:var(--sheet-bottom);z-index:3;order:var(--sheet-order-base)}@media screen and (min-width: 768px){.sheet{border-radius:var(--sheet-border-radius-small)}}@media screen and (min-width: 1024px){.sheet{width:var(--sheet-width-medium);order:var(--sheet-order-medium);border-radius:var(--sheet-border-radius-medium)}}.sheet-drag-bar{transform:translate(-50%)}.sheet-child-wrapper::-webkit-scrollbar{width:0px;background:transparent}.menu-container{max-width:246px;overflow:hidden}.input-container input::placeholder{color:#6f8394;transition:color .3s ease-in;font-family:inherit}.input-container input:invalid{box-shadow:none}.input-container input[type=number]{-moz-appearance:textfield}.input-container input::-webkit-outer-spin-button,.input-container input::-webkit-inner-spin-button{-webkit-appearance:none;-moz-appearance:none;appearance:none}.input-container:focus-within input::placeholder{color:transparent;transition:color .3s}.input-container:focus-within span{transform:scale(1.1);transition:transform .3s}.input-container .number-input-buttons svg{opacity:var(--button-opacity, 1)}.dialogContainer{min-width:308px;display:flex;justify-content:flex-start;flex-direction:column;position:relative}.select-container{display:flex;justify-content:center;flex-direction:column;width:100%;position:relative}.select-body{cursor:pointer;display:flex;align-items:center;justify-content:space-between;height:var(--select-height);width:var(--select-width);padding:0 8px;border:none;outline:none;overflow:hidden}.select-body:focus{border:solid 1.5px var(--focus-color)!important}.select-dropdown-contents{max-height:var(--dropdown-max-height);overflow-y:auto;position:absolute;left:var(--dropdown-left);transform:var(--dropdown-transform);scrollbar-width:var(--scrollbar-width)}.active-option{width:100%;height:100%;display:flex;align-items:center;justify-content:var(--active-option-justify)}.active-option .hide-on-active{display:none}.option{width:100%;padding:12px;border:none;display:flex;justify-content:var(--option-justify);outline:none;align-items:center;cursor:pointer;font-size:inherit}.transitionContainer{width:100%}.checkbox-container input[type=checkbox]{opacity:0}.checkbox-container label{display:flex;align-items:center;cursor:pointer}.checkbox-box:hover{background:var(--checkbox-unchecked-bg)}.checkbox-container input[type=checkbox]:checked+label .checkbox-box{border:var(--checkbox-border-width) solid var(--checkbox-checked-color);transition:box-shadow .3s .05s,border .3s .14s}.checkbox-container input[type=checkbox]:checked+label .checkbox-box .checkbox-inner{background:var(--checkbox-checked-color);transform:scale(1.1);transition:all .3s}.hideScrollbar::-webkit-scrollbar{display:none}.showScrollbar::-webkit-scrollbar{display:auto}.image-container p{position:relative;z-index:100}.image-css>div{position:absolute;width:100%;height:100%;margin:0;padding:0;border-radius:inherit}.image-background:before{content:"";background:inherit;width:100%;height:100%;display:block;z-index:1;position:absolute;top:16px;transform:scale(.9);filter:blur(10px);opacity:.88;border-radius:inherit}.image-background:after{content:"";background:inherit;width:100%;height:100%;display:block;z-index:2;position:absolute;border-radius:inherit}.filter-overlay:before{content:"";border-radius:inherit;display:block;height:100%;width:100%;top:0;left:0;position:absolute;pointer-events:none;mix-blend-mode:var(--filter-mix-blend-mode, initial);opacity:var(--filter-opacity, initial);background:var(--filter-background, initial)}.close-button-container:hover{transform:translate(-2px,2px)!important;transition:transform .25s ease}@media screen and (max-width: var(--small-breakpoint, 768px)){.close-button-container{border-radius:11px!important;top:var(--small-top, 7px)!important;right:var(--small-right, 7px)!important}}.slider-bar{width:100%;height:6px;border-radius:var(--slider-border-radius);background:var(--slider-background-color);overflow:hidden}.slider-progress{height:100%;width:100%}.slider-progress.disabled{opacity:.5}.slider-progress.enabled{opacity:1}.slider-handle{width:var(--slider-handle-size);height:var(--slider-handle-size);background:var(--slider-handle-color);border-radius:var(--slider-handle-radius);box-shadow:var(--slider-handle-shadow);position:absolute;left:0}.slider-handle.enabled{cursor:pointer}.slider-handle.disabled{cursor:not-allowed}.table-container{display:grid}.table-row{display:grid;grid-template-columns:repeat(1,1fr)}.table-row.responsive{grid-template-columns:repeat(var(--table-columns),1fr)}.row-item{display:grid;align-items:center;width:100%;height:100%}.row-item.align-left{justify-items:start;padding:0 0 0 8px}.row-item.align-center{justify-items:center;padding:initial}.row-item.align-right{justify-items:end;padding:0 8px 0 0}@media (min-width: var(--breakpoint-small)){.table-row{grid-template-columns:repeat(var(--table-columns),1fr)}}.userCardContainer{display:flex;justify-content:flex-start;align-items:center}.userInfoContainer{padding-left:16px}.navigation-pill-cutout:before,.navigation-pill-cutout:after{content:" ";position:absolute;width:100vw;height:100%;background-color:#fff;top:30%;border-top:solid 2px #fff}.navigation-pill-cutout:before{right:100%;border-top-right-radius:24px}.navigation-pill-cutout:after{left:100%;border-top-left-radius:24px}.navigation-pill-item>div{height:100%}.expandedButtonContainer{margin-bottom:65px}@media (min-height: 600px){.expandedButtonContainer{margin-bottom:initial}}.awardCardContainer:hover>div:first-of-type{transform:scale(1.06);transition:transform .2s ease-in-out}.incremental{white-space:nowrap}.pin-form input[type=tel]::-webkit-inner-spin-button,.pin-form input[type=tel]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.phoneInputWrapper{width:100%;display:flex;flex-direction:column}.phoneInputContainer{display:flex;justify-content:center;align-items:center;width:100%;height:50px}.video-player{transition:all .5s cubic-bezier(0,.99,.67,1)}.video-player>iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:none;border-radius:inherit}.play-button{cursor:pointer;transition:all .5s cubic-bezier(0,.99,.67,1)}.play-button>div{transition:all .5s cubic-bezier(0,.99,.67,1)}.play-button:hover>div{transform:scale(1.28);transition:all .5s cubic-bezier(0,.99,.67,1)}.play-button:hover svg path{transition:all .5s cubic-bezier(0,.99,.67,1)}.iconContainer:hover{background:var(--icon-hover-bg)}.thumbnailContainer{scrollbar-width:none}.thumbnailContainer::-webkit-scrollbar{width:0;background:transparent}.ribbon{clip-path:inset(0);transform:rotate(45deg);right:-33px;top:12px;line-height:initial;text-align:center}.ribbon p{line-height:initial}.fillRuleWrapper{position:relative;background:#d4d4d4;cursor:pointer}.fillRuleWrapper:before{content:"";position:absolute;width:50%;height:50%;background:#a1a1a1;top:0;left:0;border-radius:50px 0 0}.fillRuleWrapper:after{content:"";position:absolute;width:50%;height:50%;background:#a1a1a1;bottom:0;right:0;border-radius:0 0 50px}.stickersContainer::-webkit-scrollbar{width:0;background:transparent}.wrapper{position:relative;height:100%;width:100%;overflow:hidden;cursor:pointer;display:flex}.container{position:absolute;left:0;height:100%;width:100%;border-radius:8px;display:flex;justify-content:space-between;align-items:center;padding:0 2rem;overflow:hidden}.upload{background:transparent;color:#eb417b;z-index:1;top:0;padding:0 2rem}.loading{background:#ff059f;color:#fff;z-index:2;top:-100%;position:relative;padding:0 2rem 0 3rem}.loadingBar{position:absolute;bottom:0;left:0;width:0%;height:3px;background:#fff}.done{background:#2abb8b;color:#fff;z-index:3;top:-100%;padding:0 2rem 0 3.5rem}.paperTypeCardContainer ::-webkit-scrollbar{width:0px;background:transparent}

package/dist/index.d.ts

@@ -1 +1 @@
-export * from './src/index';
+export * from './src/index';