@denisluyo/react-web 0.1.0

package/dist/text-field.css

@@ -0,0 +1,181 @@
+.ds-text-field {
+  display: inline-flex;
+  width: 328px;
+  max-width: 100%;
+  flex-direction: column;
+  gap: var(--ds-semantic-units-base-spacing-xs, 4px);
+  color: var(--ds-semantic-color-text-neutral-primary, #000);
+  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
+}
+
+.ds-text-field__label,
+.ds-text-field__help {
+  min-height: 16px;
+  font-size: var(--ds-semantic-typography-large-bodies-body3-semibold-size, 12px);
+  font-weight: var(--ds-semantic-typography-large-bodies-body3-semibold-weight, 600);
+  line-height: var(--ds-semantic-typography-large-bodies-body3-semibold-line-height, 16px);
+  letter-spacing: var(--ds-semantic-typography-large-bodies-body3-semibold-letter-spacing, 0);
+}
+
+.ds-text-field__label {
+  color: var(--ds-semantic-color-text-neutral-secondary, #6c6c6c);
+}
+
+.ds-text-field__field {
+  box-sizing: border-box;
+  display: flex;
+  width: 100%;
+  height: 56px;
+  align-items: center;
+  gap: var(--ds-semantic-units-base-spacing-s, 8px);
+  padding: var(--ds-semantic-units-base-spacing-l, 16px);
+  border: var(--ds-semantic-border-width-xs, 1px) solid var(--ds-semantic-color-border-neutral-tertiary, #b3b3b3);
+  border-radius: var(--ds-semantic-units-border-radius-s, 8px);
+  background: var(--ds-semantic-color-background-neutral-primary, #fafafa);
+  transition: border-color var(--ds-semantic-motion-duration-fast, 120ms) var(--ds-semantic-motion-easing-standard, ease);
+}
+
+.ds-text-field__field:focus-within,
+.ds-text-field[data-preview-state='focus'] .ds-text-field__field,
+.ds-text-field[data-preview-state='writing'] .ds-text-field__field {
+  border-color: var(--ds-semantic-color-border-brand-default, #7d5df3);
+}
+
+.ds-text-field__adornment {
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+}
+
+.ds-text-field__password-toggle {
+  display: inline-flex;
+  width: 24px;
+  height: 24px;
+  flex: 0 0 24px;
+  align-items: center;
+  justify-content: center;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  border-radius: var(--ds-semantic-units-border-radius-xs, 4px);
+  color: var(--ds-semantic-color-border-neutral-secondary, #404040);
+  background: transparent;
+  cursor: pointer;
+}
+
+.ds-text-field__password-toggle:focus-visible {
+  outline: var(--ds-semantic-border-width-s, 2px) solid var(--ds-semantic-color-border-brand-default, #7d5df3);
+  outline-offset: 2px;
+}
+
+.ds-text-field__password-icon {
+  display: block;
+  width: 22px;
+  height: 22px;
+  background: currentColor;
+  -webkit-mask: url('./assets/password-eye-slash.svg') center / 22px 22px no-repeat;
+  mask: url('./assets/password-eye-slash.svg') center / 22px 22px no-repeat;
+}
+
+.ds-text-field__field:focus-within .ds-text-field__password-toggle,
+.ds-text-field[data-preview-state='focus'] .ds-text-field__password-toggle,
+.ds-text-field[data-preview-state='writing'] .ds-text-field__password-toggle {
+  color: var(--ds-semantic-color-text-brand-primary, #7d5df3);
+}
+
+.ds-text-field__input-shell {
+  position: relative;
+  min-width: 0;
+  flex: 1 1 auto;
+}
+
+.ds-text-field__input {
+  display: block;
+  width: 100%;
+  min-width: 0;
+  height: 24px;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  outline: 0;
+  color: var(--ds-semantic-color-text-neutral-primary, #000);
+  background: transparent;
+  font: inherit;
+  font-size: var(--ds-semantic-typography-large-bodies-body1-regular-size, 16px);
+  font-weight: var(--ds-semantic-typography-large-bodies-body1-regular-weight, 400);
+  line-height: var(--ds-semantic-typography-large-bodies-body1-regular-line-height, 24px);
+  letter-spacing: var(--ds-semantic-typography-large-bodies-body1-regular-letter-spacing, 0);
+}
+
+.ds-text-field__input::placeholder {
+  color: var(--ds-semantic-color-text-neutral-tertiary, #a0a0a0);
+  opacity: 1;
+}
+
+.ds-text-field__help {
+  padding-inline: var(--ds-semantic-units-base-spacing-s, 8px);
+  color: var(--ds-semantic-color-text-neutral-tertiary, #a0a0a0);
+}
+
+.ds-text-field[data-error='true'] .ds-text-field__label,
+.ds-text-field[data-error='true'] .ds-text-field__help {
+  color: var(--ds-semantic-color-text-feedback-bold-error, #f22418);
+}
+
+.ds-text-field[data-error='true'] .ds-text-field__field,
+.ds-text-field[data-preview-state='error-writing'] .ds-text-field__field {
+  border-color: var(--ds-semantic-color-border-feedback-bold-error, #f22418);
+}
+
+.ds-text-field[data-error='true'] .ds-text-field__password-toggle,
+.ds-text-field[data-preview-state='error-writing'] .ds-text-field__password-toggle {
+  color: var(--ds-semantic-color-text-feedback-bold-error, #f22418);
+}
+
+.ds-text-field[data-disabled='true'] .ds-text-field__field {
+  border-color: transparent;
+  background: var(--ds-semantic-color-background-neutral-disabled, #e1e1e1);
+}
+
+.ds-text-field[data-disabled='true'] .ds-text-field__label,
+.ds-text-field[data-disabled='true'] .ds-text-field__help,
+.ds-text-field[data-disabled='true'] .ds-text-field__password-toggle {
+  color: var(--ds-semantic-color-text-neutral-disabled, #e1e1e1);
+}
+
+.ds-text-field__password-toggle:disabled {
+  cursor: not-allowed;
+}
+
+.ds-text-field__input:disabled {
+  color: var(--ds-semantic-color-text-neutral-tertiary, #a0a0a0);
+  cursor: not-allowed;
+  opacity: 1;
+  -webkit-text-fill-color: currentColor;
+}
+
+.ds-text-field__preview {
+  display: inline-flex;
+  position: absolute;
+  inset: 0 auto auto 0;
+  height: 24px;
+  align-items: center;
+  pointer-events: none;
+  visibility: hidden;
+  white-space: pre;
+  font-size: var(--ds-semantic-typography-large-bodies-body1-regular-size, 16px);
+  font-weight: var(--ds-semantic-typography-large-bodies-body1-regular-weight, 400);
+  line-height: var(--ds-semantic-typography-large-bodies-body1-regular-line-height, 24px);
+}
+
+.ds-text-field__preview-caret {
+  width: 1px;
+  height: 18px;
+  background: var(--ds-semantic-color-text-brand-primary, #7d5df3);
+  visibility: visible;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ds-text-field__field { transition: none; }
+}

package/dist/toast.css

@@ -0,0 +1,152 @@
+.ds-toast {
+  box-sizing: border-box;
+  display: flex;
+  width: min(328px, 100%);
+  min-width: min(328px, 100%);
+  min-height: 56px;
+  align-items: center;
+  gap: var(--ds-semantic-units-base-spacing-s, 8px);
+  padding: var(--ds-semantic-units-base-spacing-s, 8px);
+  border-radius: var(--ds-semantic-units-border-radius-s, 8px);
+  color: var(--ds-semantic-color-text-neutral-primary, #000);
+  background: var(--ds-semantic-color-background-feedback-medium-informative, #8fcefa);
+  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
+  font-size: var(--ds-semantic-typography-small-captions-caption1-semibold-size, 12px);
+  font-weight: var(--ds-semantic-typography-small-captions-caption1-semibold-weight, 600);
+  line-height: var(--ds-semantic-typography-small-captions-caption1-semibold-line-height, 16px);
+  letter-spacing: var(--ds-semantic-typography-small-captions-caption1-semibold-letter-spacing, 0);
+}
+
+.ds-toast[data-state='success'] {
+  background: var(--ds-semantic-color-background-feedback-medium-success, #8ef4a0);
+}
+
+.ds-toast[data-state='warning'] {
+  background: var(--ds-semantic-color-background-feedback-medium-alert, #f4c48e);
+}
+
+.ds-toast[data-state='error'] {
+  background: var(--ds-semantic-color-background-feedback-medium-error, var(--ds-semantic-color-background-feedback-medium-error-light, #f59999));
+}
+
+.ds-toast__content {
+  display: flex;
+  min-width: 0;
+  flex: 1 1 auto;
+  align-items: center;
+  gap: var(--ds-semantic-units-base-spacing-s, 8px);
+}
+
+.ds-toast__label {
+  min-width: 0;
+  flex: 1 1 auto;
+  overflow-wrap: anywhere;
+}
+
+.ds-toast__icon {
+  display: grid;
+  width: 24px;
+  height: 24px;
+  flex: 0 0 24px;
+  place-items: center;
+}
+
+.ds-toast__state-icon {
+  display: block;
+  width: 20px;
+  height: 20px;
+  background: currentColor;
+  -webkit-mask-position: center;
+  mask-position: center;
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  -webkit-mask-size: contain;
+  mask-size: contain;
+}
+
+.ds-toast__state-icon--information {
+  color: var(--ds-semantic-color-background-feedback-bold-informative, #0088ff);
+  -webkit-mask-image: url('./assets/toast-information.svg');
+  mask-image: url('./assets/toast-information.svg');
+}
+
+.ds-toast__state-icon--success {
+  -webkit-mask-image: url('./assets/toast-success.svg');
+  mask-image: url('./assets/toast-success.svg');
+}
+
+.ds-toast__state-icon--warning {
+  width: 19px;
+  height: 18px;
+  -webkit-mask-image: url('./assets/toast-warning.svg');
+  mask-image: url('./assets/toast-warning.svg');
+}
+
+.ds-toast__state-icon--error {
+  width: 19px;
+  height: 19px;
+  -webkit-mask-image: url('./assets/toast-error.svg');
+  mask-image: url('./assets/toast-error.svg');
+}
+
+.ds-toast__close {
+  display: grid;
+  width: 20px;
+  height: 20px;
+  flex: 0 0 20px;
+  place-items: center;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  border-radius: var(--ds-semantic-units-border-radius-xs, 4px);
+  color: inherit;
+  background: transparent;
+  cursor: pointer;
+}
+
+.ds-toast__close:hover {
+  background: rgb(0 0 0 / 8%);
+}
+
+.ds-toast__close:active {
+  background: rgb(0 0 0 / 14%);
+}
+
+.ds-toast__close:focus-visible {
+  outline: var(--ds-semantic-border-width-s, 2px) solid currentColor;
+  outline-offset: 2px;
+}
+
+.ds-toast__close-icon {
+  display: block;
+  position: relative;
+  width: 12px;
+  height: 12px;
+}
+
+.ds-toast__close-stroke {
+  display: block;
+  position: absolute;
+  inset: 0;
+  background: currentColor;
+  -webkit-mask-position: center;
+  mask-position: center;
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  -webkit-mask-size: contain;
+  mask-size: contain;
+}
+
+.ds-toast__close-stroke--forward {
+  -webkit-mask-image: url('./assets/toast-close-forward.svg');
+  mask-image: url('./assets/toast-close-forward.svg');
+}
+
+.ds-toast__close-stroke--backward {
+  -webkit-mask-image: url('./assets/toast-close-backward.svg');
+  mask-image: url('./assets/toast-close-backward.svg');
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ds-toast__close { transition: none; }
+}

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@denisluyo/react-web",
+  "version": "0.1.0",
+  "description": "Componentes React web generales del Design System de Denis Luyo.",
+  "license": "MIT",
+  "type": "module",
+  "files": ["dist", "README.md", "LICENSE"],
+  "keywords": ["design-system", "react", "components", "ui"],
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "sideEffects": ["**/*.css"],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./styles.css": "./dist/styles.css"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json && cp src/button.css src/radio-button.css src/checkbox.css src/text-field.css src/text-area.css src/chip.css src/toast.css src/styles.css dist/ && cp -R src/assets dist/",
+    "typecheck": "tsc -p tsconfig.json --noEmit",
+    "test": "pnpm build && node --test",
+    "prepublishOnly": "pnpm test"
+  },
+  "peerDependencies": {
+    "react": ">=18"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.0",
+    "react": "19.2.8",
+    "react-dom": "19.2.8",
+    "typescript": "7.0.2"
+  },
+  "engines": {
+    "node": ">=18"
+  }
+}