@tale-ui/react-styles 0.0.3

package/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2019 Material-UI SAS
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "@tale-ui/react-styles",
+  "version": "0.0.3",
+  "description": "CSS styles for @tale-ui/react components, built on @tale-ui/core design tokens.",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Tale-UI/react.git",
+    "directory": "packages/styles"
+  },
+  "license": "MIT",
+  "main": "src/index.css",
+  "style": "src/index.css",
+  "exports": {
+    ".": "./src/index.css",
+    "./button": "./src/button.css",
+    "./checkbox": "./src/checkbox.css",
+    "./radio": "./src/radio.css",
+    "./switch": "./src/switch.css",
+    "./toggle": "./src/toggle.css",
+    "./input": "./src/input.css",
+    "./number-field": "./src/number-field.css",
+    "./slider": "./src/slider.css",
+    "./select": "./src/select.css",
+    "./combobox": "./src/combobox.css",
+    "./autocomplete": "./src/autocomplete.css",
+    "./accordion": "./src/accordion.css",
+    "./collapsible": "./src/collapsible.css",
+    "./tabs": "./src/tabs.css",
+    "./scroll-area": "./src/scroll-area.css",
+    "./separator": "./src/separator.css",
+    "./dialog": "./src/dialog.css",
+    "./alert-dialog": "./src/alert-dialog.css",
+    "./popover": "./src/popover.css",
+    "./drawer": "./src/drawer.css",
+    "./tooltip": "./src/tooltip.css",
+    "./preview-card": "./src/preview-card.css",
+    "./menu": "./src/menu.css",
+    "./navigation-menu": "./src/navigation-menu.css",
+    "./progress": "./src/progress.css",
+    "./meter": "./src/meter.css",
+    "./avatar": "./src/avatar.css",
+    "./toast": "./src/toast.css",
+    "./field": "./src/field.css",
+    "./fieldset": "./src/fieldset.css",
+    "./form": "./src/form.css",
+    "./toolbar": "./src/toolbar.css"
+  },
+  "dependencies": {
+    "@tale-ui/core": "^1.1.6"
+  },
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "private": false,
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/accordion.css

@@ -0,0 +1,101 @@
+/*
+ * Accordion — @tale-ui/react
+ *
+ * Styled with @tale-ui/core design tokens.
+ * Base-ui Accordion exposes:
+ *   Root: [data-disabled] [data-orientation]
+ *   Item: [data-index] [data-disabled] [data-open]
+ *
+ * Usage:
+ *   <Accordion.Root className="tale-accordion">
+ *     <Accordion.Item className="tale-accordion__item">
+ *       <Accordion.Header>
+ *         <Accordion.Trigger className="tale-accordion__trigger">Title</Accordion.Trigger>
+ *       </Accordion.Header>
+ *       <Accordion.Panel className="tale-accordion__panel">Content</Accordion.Panel>
+ *     </Accordion.Item>
+ *   </Accordion.Root>
+ */
+
+/* ─── Root ─────────────────────────────────────────────────────────────────── */
+
+.tale-accordion {
+  width: 100%;
+  border: 1px solid var(--neutral-20);
+  border-radius: 0.8rem;
+  overflow: hidden;
+}
+
+/* ─── Item ─────────────────────────────────────────────────────────────────── */
+
+.tale-accordion__item {
+  border-bottom: 1px solid var(--neutral-20);
+}
+
+.tale-accordion__item:last-child {
+  border-bottom: none;
+}
+
+/* ─── Trigger ──────────────────────────────────────────────────────────────── */
+
+.tale-accordion__trigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: var(--space-s) var(--space-m);
+  background-color: transparent;
+  border: none;
+  color: var(--neutral-90);
+  font-family: var(--label-font-family);
+  font-size: var(--label-m-font-size);
+  font-weight: var(--label-font-weight);
+  text-align: left;
+  cursor: pointer;
+  outline: none;
+  transition: background-color 0.15s ease, color 0.15s ease;
+  gap: var(--space-xs);
+}
+
+.tale-accordion__trigger:hover {
+  background-color: var(--neutral-12);
+}
+
+.tale-accordion__trigger:focus-visible {
+  box-shadow: inset 0 0 0 2px var(--color-60);
+}
+
+.tale-accordion__item[data-disabled] .tale-accordion__trigger {
+  opacity: 0.45;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+/* ─── Trigger chevron icon ────────────────────────────────────────────────── */
+
+.tale-accordion__trigger-icon {
+  width: 1.6rem;
+  height: 1.6rem;
+  flex-shrink: 0;
+  color: var(--neutral-50);
+  transition: transform 0.2s ease;
+}
+
+.tale-accordion__item[data-open] .tale-accordion__trigger-icon {
+  transform: rotate(180deg);
+}
+
+/* ─── Panel ────────────────────────────────────────────────────────────────── */
+
+.tale-accordion__panel {
+  overflow: hidden;
+  padding: 0 var(--space-m) var(--space-s);
+  color: var(--neutral-80);
+  font-family: var(--body-font-family);
+  font-size: var(--text-m-font-size);
+  line-height: 1.6;
+}
+
+.tale-accordion__panel:not([data-open]) {
+  display: none;
+}

package/src/alert-dialog.css

@@ -0,0 +1,102 @@
+/*
+ * AlertDialog — @tale-ui/react
+ *
+ * Styled with @tale-ui/core design tokens.
+ * Shares the same popup structure as Dialog.
+ * AlertDialog is a Dialog variant that locks focus and requires explicit action.
+ *
+ * Base-ui AlertDialog exposes:
+ *   Popup:    [data-open] [data-closed] [data-starting-style] [data-ending-style]
+ *   Backdrop: [data-open] [data-closed] [data-starting-style] [data-ending-style]
+ *
+ * Usage:
+ *   <AlertDialog.Root>
+ *     <AlertDialog.Trigger className="tale-button tale-button--danger">Delete</AlertDialog.Trigger>
+ *     <AlertDialog.Portal>
+ *       <AlertDialog.Backdrop className="tale-alert-dialog__backdrop" />
+ *       <AlertDialog.Popup className="tale-alert-dialog__popup">
+ *         <AlertDialog.Title className="tale-alert-dialog__title">Confirm</AlertDialog.Title>
+ *         <AlertDialog.Description className="tale-alert-dialog__description">…</AlertDialog.Description>
+ *         <div className="tale-alert-dialog__actions">
+ *           <AlertDialog.Close className="tale-button tale-button--neutral">Cancel</AlertDialog.Close>
+ *           <AlertDialog.Close className="tale-button tale-button--danger">Delete</AlertDialog.Close>
+ *         </div>
+ *       </AlertDialog.Popup>
+ *     </AlertDialog.Portal>
+ *   </AlertDialog.Root>
+ */
+
+/* ─── Backdrop ─────────────────────────────────────────────────────────────── */
+
+.tale-alert-dialog__backdrop {
+  position: fixed;
+  inset: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 100;
+  transition: opacity 0.2s ease;
+}
+
+.tale-alert-dialog__backdrop[data-starting-style],
+.tale-alert-dialog__backdrop[data-ending-style] {
+  opacity: 0;
+}
+
+/* ─── Popup ────────────────────────────────────────────────────────────────── */
+
+.tale-alert-dialog__popup {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 101;
+  width: min(90vw, 44rem);
+  background-color: var(--neutral-10);
+  border: 1px solid var(--neutral-20);
+  border-radius: 1.2rem;
+  box-shadow:
+    0 4px 6px -1px rgba(0, 0, 0, 0.1),
+    0 20px 40px -4px rgba(0, 0, 0, 0.15);
+  padding: var(--space-xl);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-m);
+  outline: none;
+  transition: opacity 0.2s ease, transform 0.2s ease;
+}
+
+.tale-alert-dialog__popup[data-starting-style],
+.tale-alert-dialog__popup[data-ending-style] {
+  opacity: 0;
+  transform: translate(-50%, calc(-50% - 0.8rem));
+}
+
+/* ─── Title ────────────────────────────────────────────────────────────────── */
+
+.tale-alert-dialog__title {
+  margin: 0;
+  color: var(--neutral-95);
+  font-family: var(--label-font-family);
+  font-size: var(--label-l-font-size);
+  font-weight: var(--label-font-weight);
+  line-height: 1.3;
+}
+
+/* ─── Description ──────────────────────────────────────────────────────────── */
+
+.tale-alert-dialog__description {
+  margin: 0;
+  color: var(--neutral-70);
+  font-family: var(--body-font-family);
+  font-size: var(--text-m-font-size);
+  line-height: 1.6;
+}
+
+/* ─── Actions ──────────────────────────────────────────────────────────────── */
+
+.tale-alert-dialog__actions {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--space-xs);
+  margin-top: var(--space-xs);
+}

package/src/autocomplete.css

@@ -0,0 +1,128 @@
+/*
+ * Autocomplete — @tale-ui/react
+ *
+ * Styled with @tale-ui/core design tokens.
+ * Autocomplete wraps an Input with a listbox popup for suggestions.
+ *
+ * Usage:
+ *   <Autocomplete.Root>
+ *     <Autocomplete.Input className="tale-autocomplete__input" />
+ *     <Autocomplete.Portal>
+ *       <Autocomplete.Positioner>
+ *         <Autocomplete.Popup className="tale-autocomplete__popup">
+ *           <Autocomplete.Item className="tale-autocomplete__item" value="a">Option A</Autocomplete.Item>
+ *           <Autocomplete.Empty className="tale-autocomplete__empty">No results</Autocomplete.Empty>
+ *         </Autocomplete.Popup>
+ *       </Autocomplete.Positioner>
+ *     </Autocomplete.Portal>
+ *   </Autocomplete.Root>
+ */
+
+/* ─── Input ────────────────────────────────────────────────────────────────── */
+
+.tale-autocomplete__input {
+  display: block;
+  width: 100%;
+  min-height: 3.6rem;
+  padding: var(--space-3xs) var(--space-xs);
+  border: 1px solid var(--neutral-26);
+  border-radius: 0.6rem;
+  background-color: var(--neutral-10);
+  color: var(--neutral-90);
+  font-family: var(--body-font-family);
+  font-size: var(--text-m-font-size);
+  outline: none;
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+}
+
+.tale-autocomplete__input::placeholder {
+  color: var(--neutral-50);
+}
+
+.tale-autocomplete__input:hover {
+  border-color: var(--neutral-40);
+}
+
+.tale-autocomplete__input:focus {
+  border-color: var(--color-60);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-60) 20%, transparent);
+}
+
+/* ─── Popup ────────────────────────────────────────────────────────────────── */
+
+.tale-autocomplete__popup {
+  background-color: var(--neutral-10);
+  border: 1px solid var(--neutral-20);
+  border-radius: 0.8rem;
+  box-shadow:
+    0 2px 4px rgba(0, 0, 0, 0.06),
+    0 8px 24px rgba(0, 0, 0, 0.08);
+  padding: var(--space-4xs);
+  outline: none;
+  max-height: 28rem;
+  overflow-y: auto;
+  transition: opacity 0.15s ease, transform 0.15s ease;
+}
+
+.tale-autocomplete__popup[data-starting-style],
+.tale-autocomplete__popup[data-ending-style] {
+  opacity: 0;
+  transform: scale(0.97);
+}
+
+/* ─── Item ─────────────────────────────────────────────────────────────────── */
+
+.tale-autocomplete__item {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2xs);
+  padding: var(--space-2xs) var(--space-xs);
+  border-radius: 0.5rem;
+  color: var(--neutral-80);
+  font-family: var(--body-font-family);
+  font-size: var(--text-m-font-size);
+  cursor: pointer;
+  outline: none;
+  transition: background-color 0.1s ease, color 0.1s ease;
+  user-select: none;
+}
+
+.tale-autocomplete__item[data-highlighted] {
+  background-color: var(--neutral-14);
+  color: var(--neutral-90);
+}
+
+.tale-autocomplete__item[data-selected] {
+  color: var(--color-60);
+  font-weight: var(--label-font-weight);
+}
+
+.tale-autocomplete__item[data-disabled] {
+  opacity: 0.45;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+/* ─── Empty state ──────────────────────────────────────────────────────────── */
+
+.tale-autocomplete__empty {
+  padding: var(--space-m);
+  text-align: center;
+  color: var(--neutral-50);
+  font-family: var(--body-font-family);
+  font-size: var(--text-m-font-size);
+  cursor: default;
+}
+
+/* ─── Group label ──────────────────────────────────────────────────────────── */
+
+.tale-autocomplete__group-label {
+  padding: var(--space-4xs) var(--space-xs);
+  color: var(--neutral-50);
+  font-family: var(--label-font-family);
+  font-size: var(--label-s-font-size);
+  font-weight: var(--label-font-weight);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  cursor: default;
+}

package/src/avatar.css

@@ -0,0 +1,102 @@
+/*
+ * Avatar — @tale-ui/react
+ *
+ * Styled with @tale-ui/core design tokens.
+ * Base-ui Avatar exposes:
+ *   Image:    [data-starting-style] [data-ending-style] (for lazy load transition)
+ *   Fallback: (shown when image fails or while loading)
+ *
+ * Sizes:  .tale-avatar--sm   (2.4rem)
+ *         .tale-avatar--md   (3.6rem, default)
+ *         .tale-avatar--lg   (5.6rem)
+ *         .tale-avatar--xl   (8rem)
+ *
+ * Usage:
+ *   <Avatar.Root className="tale-avatar tale-avatar--md">
+ *     <Avatar.Image className="tale-avatar__image" src="..." alt="..." />
+ *     <Avatar.Fallback className="tale-avatar__fallback">AB</Avatar.Fallback>
+ *   </Avatar.Root>
+ */
+
+/* ─── Root ─────────────────────────────────────────────────────────────────── */
+
+.tale-avatar {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  background-color: var(--neutral-22);
+  overflow: hidden;
+  flex-shrink: 0;
+
+  /* Default size: md */
+  width: 3.6rem;
+  height: 3.6rem;
+}
+
+/* ─── Image ────────────────────────────────────────────────────────────────── */
+
+.tale-avatar__image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: inherit;
+  transition: opacity 0.15s ease;
+}
+
+.tale-avatar__image[data-starting-style] {
+  opacity: 0;
+}
+
+/* ─── Fallback — initials / icon shown when image unavailable ─────────────── */
+
+.tale-avatar__fallback {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--neutral-70);
+  font-family: var(--label-font-family);
+  font-size: var(--label-s-font-size);
+  font-weight: var(--label-font-weight);
+  line-height: 1;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  user-select: none;
+}
+
+/* ─── Size modifiers ──────────────────────────────────────────────────────── */
+
+.tale-avatar--sm {
+  width: 2.4rem;
+  height: 2.4rem;
+}
+
+.tale-avatar--sm .tale-avatar__fallback {
+  font-size: var(--label-xs-font-size, 1rem);
+}
+
+.tale-avatar--md {
+  width: 3.6rem;
+  height: 3.6rem;
+}
+
+.tale-avatar--lg {
+  width: 5.6rem;
+  height: 5.6rem;
+}
+
+.tale-avatar--lg .tale-avatar__fallback {
+  font-size: var(--label-m-font-size);
+}
+
+.tale-avatar--xl {
+  width: 8rem;
+  height: 8rem;
+}
+
+.tale-avatar--xl .tale-avatar__fallback {
+  font-size: var(--label-l-font-size);
+}

package/src/button.css

@@ -0,0 +1,148 @@
+/*
+ * Button — @tale-ui/react
+ *
+ * Styled with @tale-ui/core design tokens.
+ * Tale UI Button exposes: [data-disabled]
+ *
+ * Variants:   .tale-button--primary  (default filled)
+ *             .tale-button--neutral  (subtle secondary)
+ *             .tale-button--ghost    (transparent, border only)
+ *             .tale-button--danger   (destructive)
+ *
+ * Sizes:      .tale-button--sm
+ *             .tale-button--md  (default)
+ *             .tale-button--lg
+ *
+ * Usage:
+ *   <Button className="tale-button tale-button--primary">Label</Button>
+ */
+
+/* ─── Base ─────────────────────────────────────────────────────────────────── */
+
+.tale-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-3xs);
+  border: 1px solid transparent;
+  border-radius: 0.6rem;
+  font-family: var(--label-font-family);
+  font-size: var(--label-m-font-size);
+  font-weight: var(--label-font-weight);
+  line-height: 1;
+  text-decoration: none;
+  cursor: pointer;
+  outline: none;
+  transition:
+    background-color 0.15s ease,
+    border-color 0.15s ease,
+    color 0.15s ease,
+    box-shadow 0.15s ease;
+  white-space: nowrap;
+  user-select: none;
+
+  /* Default size: md */
+  padding: var(--space-3xs) var(--space-xs);
+  min-height: 3.6rem;
+}
+
+.tale-button:focus-visible {
+  box-shadow: 0 0 0 2px var(--neutral-100), 0 0 0 4px var(--color-60);
+}
+
+/* ─── Disabled state (from data-disabled attr set by tale-ui) ─────────────── */
+
+.tale-button[data-disabled] {
+  pointer-events: none;
+  cursor: not-allowed;
+  opacity: 0.45;
+}
+
+/* ─── Primary variant — filled brand colour ───────────────────────────────── */
+
+.tale-button--primary {
+  background-color: var(--color-60);
+  color: var(--neutral-100);
+  border-color: transparent;
+}
+
+.tale-button--primary:hover:not([data-disabled]) {
+  background-color: var(--color-50);
+}
+
+.tale-button--primary:active:not([data-disabled]) {
+  background-color: var(--color-40);
+}
+
+/* ─── Neutral variant — subtle secondary style ────────────────────────────── */
+
+.tale-button--neutral {
+  background-color: var(--neutral-14);
+  color: var(--neutral-90);
+  border-color: var(--neutral-22);
+}
+
+.tale-button--neutral:hover:not([data-disabled]) {
+  background-color: var(--neutral-18);
+  border-color: var(--neutral-28);
+}
+
+.tale-button--neutral:active:not([data-disabled]) {
+  background-color: var(--neutral-22);
+}
+
+/* ─── Ghost variant — transparent, border only ────────────────────────────── */
+
+.tale-button--ghost {
+  background-color: transparent;
+  color: var(--neutral-80);
+  border-color: transparent;
+}
+
+.tale-button--ghost:hover:not([data-disabled]) {
+  background-color: var(--neutral-14);
+  color: var(--neutral-90);
+}
+
+.tale-button--ghost:active:not([data-disabled]) {
+  background-color: var(--neutral-18);
+}
+
+/* ─── Danger variant — destructive actions ────────────────────────────────── */
+
+.tale-button--danger {
+  background-color: var(--red-60);
+  color: #fff;
+  border-color: transparent;
+}
+
+.tale-button--danger:hover:not([data-disabled]) {
+  background-color: var(--red-50);
+}
+
+.tale-button--danger:active:not([data-disabled]) {
+  background-color: var(--red-40);
+}
+
+/* ─── Size modifiers ──────────────────────────────────────────────────────── */
+
+.tale-button--sm {
+  font-size: var(--label-s-font-size);
+  padding: var(--space-4xs) var(--space-3xs);
+  min-height: 2.8rem;
+  gap: var(--space-4xs);
+}
+
+.tale-button--md {
+  /* same as base defaults — explicit for clarity */
+  font-size: var(--label-m-font-size);
+  padding: var(--space-3xs) var(--space-xs);
+  min-height: 3.6rem;
+}
+
+.tale-button--lg {
+  font-size: var(--label-l-font-size);
+  padding: var(--space-2xs) var(--space-s);
+  min-height: 4.4rem;
+  gap: var(--space-2xs);
+}