@satellatickets/ui 0.0.0-stage → 0.0.0

package/dist/web/styles.css

@@ -0,0 +1,553 @@
+.sui-root-ZzcBVG {
+  box-sizing: border-box;
+  padding: var(--space-1) var(--space-2);
+  border: var(--border-width-thin) solid var(--badge-border);
+  border-radius: var(--radius-full);
+  background-color: var(--badge-bg);
+  color: var(--badge-fg);
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-xs);
+  line-height: var(--font-line-height-xs);
+  font-weight: var(--font-weight-medium);
+  align-items: center;
+  display: inline-flex;
+}
+
+.sui-success-ZzcBVG {
+  --badge-bg: var(--color-feedback-success-bg);
+  --badge-border: var(--color-feedback-success-border);
+  --badge-fg: var(--color-feedback-success-text);
+}
+
+.sui-warning-ZzcBVG {
+  --badge-bg: var(--color-feedback-warning-bg);
+  --badge-border: var(--color-feedback-warning-border);
+  --badge-fg: var(--color-feedback-warning-text);
+}
+
+.sui-danger-ZzcBVG {
+  --badge-bg: var(--color-feedback-danger-bg);
+  --badge-border: var(--color-feedback-danger-border);
+  --badge-fg: var(--color-feedback-danger-text);
+}
+
+.sui-info-ZzcBVG {
+  --badge-bg: var(--color-feedback-info-bg);
+  --badge-border: var(--color-feedback-info-border);
+  --badge-fg: var(--color-feedback-info-text);
+}
+.sui-root-SDR9xW {
+  --box-padding: initial;
+  --box-padding-x: initial;
+  --box-padding-y: initial;
+  --box-background: initial;
+  --box-radius: initial;
+  --box-border-color: initial;
+  --box-border-width: initial;
+  --box-shadow: initial;
+  --box-flex: initial;
+  box-sizing: border-box;
+  min-width: 0;
+  padding: var(--box-padding, 0);
+  padding-inline: var(--box-padding-x, var(--box-padding, 0));
+  padding-block: var(--box-padding-y, var(--box-padding, 0));
+  background-color: var(--box-background, transparent);
+  border-radius: var(--box-radius, 0);
+  border: var(--box-border-width, 0) solid var(--box-border-color, transparent);
+  box-shadow: var(--box-shadow, none);
+  flex: var(--box-flex, initial);
+}
+.sui-root-NjYZ8q {
+  vertical-align: middle;
+  flex-shrink: 0;
+  display: inline-block;
+}
+.sui-root-g-Gv2a {
+  vertical-align: middle;
+  flex-shrink: 0;
+  display: inline-flex;
+}
+
+.sui-icon-g-Gv2a {
+  animation: sui-spin-g-Gv2a calc(var(--duration-slow) * 2) linear infinite;
+}
+
+@keyframes sui-spin-g-Gv2a {
+  to {
+    transform: rotate(360deg);
+  }
+}
+.sui-root--HHqDW {
+  box-sizing: border-box;
+  min-width: 0;
+  min-height: var(--button-height);
+  padding: var(--button-padding-y) var(--button-padding-x);
+  border: var(--border-width-thin) solid var(--button-border);
+  border-radius: var(--radius-md);
+  background-color: var(--button-bg);
+  color: var(--button-fg);
+  font-family: var(--font-family-sans);
+  font-size: var(--button-font-size);
+  line-height: var(--button-line-height);
+  font-weight: var(--font-weight-medium);
+  text-align: center;
+  cursor: pointer;
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
+  transition: background-color var(--duration-fast),
+    border-color var(--duration-fast),
+    color var(--duration-fast);
+  justify-content: center;
+  align-items: center;
+  margin: 0;
+  display: inline-flex;
+  position: relative;
+}
+
+.sui-primary--HHqDW {
+  --button-bg: var(--color-action-primary);
+  --button-bg-hover: var(--color-action-primary-hover);
+  --button-bg-active: var(--color-action-primary-active);
+  --button-bg-disabled: var(--color-action-disabled);
+  --button-fg: var(--color-text-on-primary);
+  --button-border: transparent;
+}
+
+.sui-secondary--HHqDW {
+  --button-bg: var(--color-action-secondary);
+  --button-bg-hover: var(--color-action-secondary-hover);
+  --button-bg-active: var(--color-action-secondary-active);
+  --button-bg-disabled: var(--color-action-disabled);
+  --button-fg: var(--color-text-primary);
+  --button-border: var(--color-border-default);
+}
+
+.sui-ghost--HHqDW {
+  --button-bg: transparent;
+  --button-bg-hover: var(--color-bg-subtle);
+  --button-bg-active: var(--color-bg-muted);
+  --button-bg-disabled: transparent;
+  --button-fg: var(--color-text-primary);
+  --button-border: transparent;
+}
+
+.sui-danger--HHqDW {
+  --button-bg: var(--color-action-danger);
+  --button-bg-hover: var(--color-action-danger-hover);
+  --button-bg-active: var(--color-action-danger-active);
+  --button-bg-disabled: var(--color-action-disabled);
+  --button-fg: var(--color-text-on-danger);
+  --button-border: transparent;
+}
+
+.sui-sm--HHqDW {
+  --button-height: var(--size-control-sm);
+  --button-padding-x: var(--space-3);
+  --button-padding-y: var(--space-1);
+  --button-font-size: var(--font-size-sm);
+  --button-line-height: var(--font-line-height-sm);
+}
+
+.sui-md--HHqDW {
+  --button-height: var(--size-control-md);
+  --button-padding-x: var(--space-4);
+  --button-padding-y: var(--space-2);
+  --button-font-size: var(--font-size-sm);
+  --button-line-height: var(--font-line-height-sm);
+}
+
+.sui-lg--HHqDW {
+  --button-height: var(--size-control-lg);
+  --button-padding-x: var(--space-5);
+  --button-padding-y: var(--space-3);
+  --button-font-size: var(--font-size-md);
+  --button-line-height: var(--font-line-height-md);
+}
+
+.sui-fullWidth--HHqDW {
+  width: 100%;
+  display: flex;
+}
+
+@media (hover: hover) {
+  .sui-root--HHqDW:hover:not(:disabled, [aria-disabled="true"]) {
+    background-color: var(--button-bg-hover);
+  }
+}
+
+.sui-root--HHqDW:active:not(:disabled, [aria-disabled="true"]) {
+  background-color: var(--button-bg-active);
+}
+
+.sui-root--HHqDW:focus-visible {
+  outline: var(--border-width-thick) solid var(--color-border-focus);
+  outline-offset: var(--border-width-thick);
+}
+
+.sui-root--HHqDW:disabled {
+  --button-border: transparent;
+  background-color: var(--button-bg-disabled);
+  color: var(--color-text-disabled);
+  cursor: not-allowed;
+}
+
+.sui-loading--HHqDW {
+  cursor: progress;
+}
+
+.sui-loading--HHqDW .sui-content--HHqDW {
+  opacity: 0;
+}
+
+.sui-content--HHqDW {
+  justify-content: center;
+  align-items: center;
+  gap: var(--space-2);
+  min-width: 0;
+  display: inline-flex;
+}
+
+.sui-label--HHqDW {
+  min-width: 0;
+}
+
+.sui-spinner--HHqDW {
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  position: absolute;
+  inset: 0;
+}
+
+.sui-root--HHqDW svg {
+  stroke: currentColor;
+}
+.sui-stack-xABqRa {
+  --stack-gap: initial;
+  gap: var(--stack-gap, 0);
+  display: flex;
+}
+
+.sui-column-xABqRa {
+  flex-direction: column;
+}
+
+.sui-row-xABqRa {
+  flex-direction: row;
+}
+
+.sui-alignStretch-xABqRa {
+  align-items: stretch;
+}
+
+.sui-alignStart-xABqRa {
+  align-items: flex-start;
+}
+
+.sui-alignCenter-xABqRa {
+  align-items: center;
+}
+
+.sui-alignEnd-xABqRa {
+  align-items: flex-end;
+}
+
+.sui-justifyStart-xABqRa {
+  justify-content: flex-start;
+}
+
+.sui-justifyCenter-xABqRa {
+  justify-content: center;
+}
+
+.sui-justifyEnd-xABqRa {
+  justify-content: flex-end;
+}
+
+.sui-justifyBetween-xABqRa {
+  justify-content: space-between;
+}
+
+.sui-justifyAround-xABqRa {
+  justify-content: space-around;
+}
+
+.sui-wrap-xABqRa {
+  flex-wrap: wrap;
+}
+.sui-root-b2Fw3a {
+  --text-letter-spacing: initial;
+  font-family: var(--text-family);
+  font-size: var(--text-size);
+  line-height: var(--text-line-height);
+  font-weight: var(--text-weight);
+  color: var(--text-color);
+  letter-spacing: var(--text-letter-spacing, normal);
+  overflow-wrap: break-word;
+  margin: 0;
+}
+
+.sui-uppercase-b2Fw3a {
+  text-transform: uppercase;
+}
+
+.sui-left-b2Fw3a {
+  text-align: left;
+}
+
+.sui-center-b2Fw3a {
+  text-align: center;
+}
+
+.sui-right-b2Fw3a {
+  text-align: right;
+}
+
+.sui-truncate-b2Fw3a {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+:root, [data-theme="light"] {
+  color-scheme: light;
+  --color-bg-canvas: #f5f5fa;
+  --color-bg-surface: #fff;
+  --color-bg-elevated: #fff;
+  --color-bg-subtle: #eaeaf2;
+  --color-bg-muted: #dddde9;
+  --color-bg-overlay: #00000080;
+  --color-bg-inverse: #1b1b2a;
+  --color-text-primary: #0b0b12;
+  --color-text-secondary: #34344e;
+  --color-text-muted: #5b5b75;
+  --color-text-disabled: #9494ae;
+  --color-text-inverse: #f5f5fa;
+  --color-text-on-primary: #fff;
+  --color-text-on-danger: #fff;
+  --color-text-link: #5936d9;
+  --color-border-default: #dddde9;
+  --color-border-strong: #82829c;
+  --color-border-focus: #6c4cf5;
+  --color-action-primary: #6c4cf5;
+  --color-action-primary-hover: #5936d9;
+  --color-action-primary-active: #472bae;
+  --color-action-secondary: #eaeaf2;
+  --color-action-secondary-hover: #dddde9;
+  --color-action-secondary-active: #c0c0d4;
+  --color-action-danger: #a82414;
+  --color-action-danger-hover: #7a1a0e;
+  --color-action-danger-active: #5c140b;
+  --color-action-disabled: #eaeaf2;
+  --color-accent-bg: #f0edfe;
+  --color-accent-text: #5936d9;
+  --color-feedback-success-bg: #e8fbf3;
+  --color-feedback-success-border: #3ddc9766;
+  --color-feedback-success-text: #127a44;
+  --color-feedback-success-icon: #127a44;
+  --color-feedback-warning-bg: #fff8ea;
+  --color-feedback-warning-border: #ffc44d66;
+  --color-feedback-warning-text: #9a6312;
+  --color-feedback-warning-icon: #9a6312;
+  --color-feedback-danger-bg: #ffedec;
+  --color-feedback-danger-border: #ff6b5e66;
+  --color-feedback-danger-text: #a82414;
+  --color-feedback-danger-icon: #a82414;
+  --color-feedback-info-bg: #eaf9fd;
+  --color-feedback-info-border: #4cc9f066;
+  --color-feedback-info-text: #0d6e8f;
+  --color-feedback-info-icon: #0d6e8f;
+  --space-0: 0;
+  --space-1: .25rem;
+  --space-2: .5rem;
+  --space-3: .75rem;
+  --space-4: 1rem;
+  --space-5: 1.25rem;
+  --space-6: 1.5rem;
+  --space-8: 2rem;
+  --space-10: 2.5rem;
+  --space-12: 3rem;
+  --space-16: 4rem;
+  --space-20: 5rem;
+  --space-24: 6rem;
+  --size-control-sm: 2.25rem;
+  --size-control-md: 2.75rem;
+  --size-control-lg: 3.25rem;
+  --radius-none: 0;
+  --radius-xs: .25rem;
+  --radius-sm: .375rem;
+  --radius-md: .625rem;
+  --radius-lg: 1rem;
+  --radius-xl: 1.5rem;
+  --radius-full: 999px;
+  --border-width-thin: 1px;
+  --border-width-thick: 2px;
+  --font-family-display: Unbounded, "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
+  --font-family-sans: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
+  --font-family-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
+  --font-size-xs: .75rem;
+  --font-size-sm: .875rem;
+  --font-size-md: 1rem;
+  --font-size-lg: 1.125rem;
+  --font-size-xl: 1.25rem;
+  --font-size-xxl: 1.5rem;
+  --font-size-xxxl: 1.875rem;
+  --font-size-display: 2.25rem;
+  --font-size-hero: 3rem;
+  --font-line-height-xs: 1rem;
+  --font-line-height-sm: 1.25rem;
+  --font-line-height-md: 1.5rem;
+  --font-line-height-lg: 1.75rem;
+  --font-line-height-xl: 1.75rem;
+  --font-line-height-xxl: 2rem;
+  --font-line-height-xxxl: 2.25rem;
+  --font-line-height-display: 2.5rem;
+  --font-line-height-hero: 3rem;
+  --font-weight-regular: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+  --font-weight-extrabold: 800;
+  --shadow-sm: 0 1px 3px 0 #00000073;
+  --shadow-md: 0 8px 24px 0 #00000080;
+  --shadow-lg: 0 24px 60px 0 #0009;
+  --shadow-glow: 0 0 28px 0 #6c4cf559;
+  --duration-instant: 0s;
+  --duration-fast: .15s;
+  --duration-normal: .25s;
+  --duration-slow: .4s;
+  --z-index-base: 0;
+  --z-index-raised: 1;
+  --z-index-dropdown: 1000;
+  --z-index-sticky: 1100;
+  --z-index-overlay: 1200;
+  --z-index-modal: 1300;
+  --z-index-popover: 1400;
+  --z-index-toast: 1500;
+}
+
+[data-theme="dark"] {
+  color-scheme: dark;
+  --color-bg-canvas: #0b0b12;
+  --color-bg-surface: #12121c;
+  --color-bg-elevated: #12121c;
+  --color-bg-subtle: #1b1b2a;
+  --color-bg-muted: #26263a;
+  --color-bg-overlay: #0009;
+  --color-bg-inverse: #f5f5fa;
+  --color-text-primary: #f5f5fa;
+  --color-text-secondary: #c0c0d4;
+  --color-text-muted: #9494ae;
+  --color-text-disabled: #82829c;
+  --color-text-inverse: #0b0b12;
+  --color-text-on-danger: #0b0b12;
+  --color-text-link: #b3a3ff;
+  --color-border-default: #26263a;
+  --color-action-secondary: #1b1b2a;
+  --color-action-secondary-hover: #26263a;
+  --color-action-secondary-active: #34344e;
+  --color-action-danger: #ff6b5e;
+  --color-action-danger-hover: #ff897e;
+  --color-action-danger-active: #ffa69e;
+  --color-action-disabled: #1b1b2a;
+  --color-accent-bg: #211b41;
+  --color-accent-text: #b3a3ff;
+  --color-feedback-success-bg: #11291f;
+  --color-feedback-success-text: #3ddc97;
+  --color-feedback-success-icon: #3ddc97;
+  --color-feedback-warning-bg: #2e2413;
+  --color-feedback-warning-text: #ffc44d;
+  --color-feedback-warning-icon: #ffc44d;
+  --color-feedback-danger-bg: #2e1714;
+  --color-feedback-danger-text: #ff6b5e;
+  --color-feedback-danger-icon: #ff6b5e;
+  --color-feedback-info-bg: #12262e;
+  --color-feedback-info-text: #4cc9f0;
+  --color-feedback-info-icon: #4cc9f0;
+}
+
+[data-theme="dark"][data-brand="admin"] {
+  --color-bg-canvas: #181818;
+  --color-bg-surface: #1c1c1c;
+  --color-bg-elevated: #1c1c1c;
+  --color-bg-subtle: #242424;
+  --color-bg-muted: #2a2a2a;
+  --color-bg-inverse: #f0f0f0;
+  --color-text-primary: #f0f0f0;
+  --color-text-secondary: #b3b3b3;
+  --color-text-muted: #8a8a8a;
+  --color-text-disabled: #6e6e6e;
+  --color-text-inverse: #181818;
+  --color-text-on-primary: #0a120a;
+  --color-text-on-danger: #181818;
+  --color-text-link: #98f380;
+  --color-border-default: #2a2a2a;
+  --color-border-strong: #6e6e6e;
+  --color-border-focus: #7fee64;
+  --color-action-primary: #7fee64;
+  --color-action-primary-hover: #65d94b;
+  --color-action-primary-active: #51ae3c;
+  --color-action-secondary: #242424;
+  --color-action-secondary-hover: #2a2a2a;
+  --color-action-secondary-active: #373737;
+  --color-action-disabled: #242424;
+  --color-accent-bg: #222e21;
+  --color-accent-text: #98f380;
+  --color-feedback-success-bg: #1b2f17;
+  --color-feedback-success-border: #86f06d66;
+  --color-feedback-success-text: #86f06d;
+  --color-feedback-success-icon: #86f06d;
+  --color-feedback-warning-bg: #2e2410;
+  --color-feedback-warning-border: #f5c54266;
+  --color-feedback-warning-text: #f5c542;
+  --color-feedback-warning-icon: #f5c542;
+  --color-feedback-danger-bg: #2e1613;
+  --color-feedback-info-bg: #122430;
+  --color-feedback-info-border: #62c5ee66;
+  --color-feedback-info-text: #62c5ee;
+  --color-feedback-info-icon: #62c5ee;
+  --radius-md: .375rem;
+  --radius-lg: .5rem;
+  --radius-xl: .75rem;
+  --shadow-glow: 0 0 24px 0 #7fee6440;
+}
+
+[data-theme="dark"][data-brand="organizer"] {
+  --color-bg-canvas: #0f0d09;
+  --color-bg-surface: #171310;
+  --color-bg-elevated: #171310;
+  --color-bg-subtle: #201b14;
+  --color-bg-muted: #2d2820;
+  --color-bg-inverse: #faf6ef;
+  --color-text-primary: #faf6ef;
+  --color-text-secondary: #d0c8b8;
+  --color-text-muted: #a29a8a;
+  --color-text-disabled: #8b8374;
+  --color-text-inverse: #0f0d09;
+  --color-text-on-primary: #1c0e02;
+  --color-text-on-danger: #0f0d09;
+  --color-text-link: #ffb26b;
+  --color-border-default: #2d2820;
+  --color-border-strong: #8b8374;
+  --color-border-focus: #f9791f;
+  --color-action-primary: #f9791f;
+  --color-action-primary-hover: #e0660e;
+  --color-action-primary-active: #ca5c0d;
+  --color-action-secondary: #201b14;
+  --color-action-secondary-hover: #2d2820;
+  --color-action-secondary-active: #423a2b;
+  --color-action-disabled: #201b14;
+  --color-accent-bg: #33210f;
+  --color-accent-text: #ffb26b;
+  --color-feedback-warning-bg: #2e2811;
+  --color-feedback-warning-border: #ffdf5766;
+  --color-feedback-warning-text: #ffdf57;
+  --color-feedback-warning-icon: #ffdf57;
+  --shadow-glow: 0 0 28px 0 #f9791f52;
+}
+.sui-root-wZgHIa {
+  color: var(--color-text-primary);
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-md);
+  line-height: var(--font-line-height-md);
+  display: contents;
+}

package/package.json

@@ -1,6 +1,92 @@
 {
   "name": "@satellatickets/ui",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.0.0",
+  "description": "Componentes de satella-ui con una sola API para React (web) y React Native",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/RobertoRodriguezCarbonell/satella-ui.git",
+    "directory": "packages/ui"
+  },
+  "type": "module",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "files": [
+    "dist",
+    "NOTICE.md"
+  ],
+  "exports": {
+    ".": {
+      "react-native": {
+        "types": "./dist/native/index.d.ts",
+        "default": "./dist/native/index.js"
+      },
+      "import": {
+        "types": "./dist/web/index.d.ts",
+        "default": "./dist/web/index.js"
+      },
+      "default": {
+        "types": "./dist/web/index.d.ts",
+        "default": "./dist/web/index.js"
+      }
+    },
+    "./styles.css": "./dist/web/styles.css"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "react": ">=19.0",
+    "react-dom": ">=19.0",
+    "react-native": ">=0.81",
+    "react-native-svg": ">=15.0.0"
+  },
+  "peerDependenciesMeta": {
+    "react-dom": {
+      "optional": true
+    },
+    "react-native": {
+      "optional": true
+    },
+    "react-native-svg": {
+      "optional": true
+    }
+  },
+  "dependencies": {
+    "@satellatickets/core": "0.0.0",
+    "@satellatickets/tokens": "0.0.0"
+  },
+  "devDependencies": {
+    "@react-native/jest-preset": "0.86.3",
+    "@storybook/addon-docs": "^10.6.1",
+    "@storybook/react": "^10.6.1",
+    "@testing-library/react-native": "^14.0.1",
+    "@tsdown/css": "0.23.0",
+    "@types/jest": "^29.5.14",
+    "@types/node": "^22.0.0",
+    "@types/react": "19.2.18",
+    "@types/react-dom": "19.2.7",
+    "eslint": "^10.12.0",
+    "expo": "~57.0.27",
+    "jest": "^29.7.0",
+    "jest-expo": "~57.0.5",
+    "react": "19.2.3",
+    "react-dom": "19.2.3",
+    "react-native": "0.86.3",
+    "react-native-svg": "15.15.4",
+    "storybook": "^10.6.1",
+    "test-renderer": "1.2.0",
+    "tsdown": "^0.23.0",
+    "typescript": "^5.9.3",
+    "@satellatickets/icons": "0.0.0",
+    "@satellatickets/eslint-config": "0.0.0",
+    "@satellatickets/tsconfig": "0.0.0"
+  },
+  "scripts": {
+    "build": "tsdown",
+    "typecheck": "tsc -p tsconfig.web.json && tsc -p tsconfig.native.json",
+    "lint": "eslint . --max-warnings 0",
+    "test:native": "jest"
+  }
 }