@tale-ui/react-styles 0.0.3

package/src/popover.css

@@ -0,0 +1,104 @@
+/*
+ * Popover — @tale-ui/react
+ *
+ * Styled with @tale-ui/core design tokens.
+ * Base-ui Popover exposes:
+ *   Popup: [data-open] [data-closed] [data-starting-style] [data-ending-style]
+ *          [data-side] [data-align] [data-instant]
+ *
+ * Usage:
+ *   <Popover.Root>
+ *     <Popover.Trigger className="tale-button tale-button--neutral">Open</Popover.Trigger>
+ *     <Popover.Portal>
+ *       <Popover.Positioner>
+ *         <Popover.Popup className="tale-popover__popup">
+ *           <Popover.Title className="tale-popover__title">Title</Popover.Title>
+ *           <Popover.Description className="tale-popover__description">…</Popover.Description>
+ *           <Popover.Close className="tale-popover__close">✕</Popover.Close>
+ *         </Popover.Popup>
+ *       </Popover.Positioner>
+ *     </Popover.Portal>
+ *   </Popover.Root>
+ */
+
+/* ─── Popup ────────────────────────────────────────────────────────────────── */
+
+.tale-popover__popup {
+  position: relative;
+  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-m);
+  max-width: 32rem;
+  outline: none;
+  transition: opacity 0.15s ease, transform 0.15s ease;
+}
+
+.tale-popover__popup[data-starting-style],
+.tale-popover__popup[data-ending-style] {
+  opacity: 0;
+  transform: scale(0.97);
+}
+
+/* ─── Title ────────────────────────────────────────────────────────────────── */
+
+.tale-popover__title {
+  margin: 0 0 var(--space-2xs);
+  color: var(--neutral-90);
+  font-family: var(--label-font-family);
+  font-size: var(--label-m-font-size);
+  font-weight: var(--label-font-weight);
+  line-height: 1.3;
+}
+
+/* ─── Description ──────────────────────────────────────────────────────────── */
+
+.tale-popover__description {
+  margin: 0;
+  color: var(--neutral-70);
+  font-family: var(--body-font-family);
+  font-size: var(--text-s-font-size);
+  line-height: 1.5;
+}
+
+/* ─── Close button ─────────────────────────────────────────────────────────── */
+
+.tale-popover__close {
+  position: absolute;
+  top: var(--space-2xs);
+  right: var(--space-2xs);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.8rem;
+  height: 2.8rem;
+  border: none;
+  border-radius: 0.4rem;
+  background-color: transparent;
+  color: var(--neutral-60);
+  cursor: pointer;
+  outline: none;
+  transition: background-color 0.15s ease, color 0.15s ease;
+}
+
+.tale-popover__close:hover {
+  background-color: var(--neutral-14);
+  color: var(--neutral-90);
+}
+
+.tale-popover__close:focus-visible {
+  box-shadow: 0 0 0 2px var(--color-60);
+}
+
+/* ─── Arrow ────────────────────────────────────────────────────────────────── */
+
+.tale-popover__arrow {
+  width: 1rem;
+  height: 0.5rem;
+  fill: var(--neutral-10);
+  stroke: var(--neutral-20);
+  stroke-width: 1;
+}

package/src/preview-card.css

@@ -0,0 +1,51 @@
+/*
+ * PreviewCard — @tale-ui/react
+ *
+ * Styled with @tale-ui/core design tokens.
+ * Base-ui PreviewCard exposes:
+ *   Popup: [data-open] [data-closed] [data-starting-style] [data-ending-style]
+ *          [data-side] [data-align]
+ *
+ * Usage:
+ *   <PreviewCard.Root>
+ *     <PreviewCard.Trigger>Hover link</PreviewCard.Trigger>
+ *     <PreviewCard.Portal>
+ *       <PreviewCard.Positioner>
+ *         <PreviewCard.Popup className="tale-preview-card__popup">
+ *           Card content
+ *         </PreviewCard.Popup>
+ *       </PreviewCard.Positioner>
+ *     </PreviewCard.Portal>
+ *   </PreviewCard.Root>
+ */
+
+/* ─── Popup ────────────────────────────────────────────────────────────────── */
+
+.tale-preview-card__popup {
+  background-color: var(--neutral-10);
+  border: 1px solid var(--neutral-20);
+  border-radius: 1rem;
+  box-shadow:
+    0 2px 4px rgba(0, 0, 0, 0.06),
+    0 12px 32px rgba(0, 0, 0, 0.1);
+  padding: var(--space-m);
+  max-width: 32rem;
+  outline: none;
+  transition: opacity 0.15s ease, transform 0.15s ease;
+}
+
+.tale-preview-card__popup[data-starting-style],
+.tale-preview-card__popup[data-ending-style] {
+  opacity: 0;
+  transform: scale(0.97);
+}
+
+/* ─── Arrow ────────────────────────────────────────────────────────────────── */
+
+.tale-preview-card__arrow {
+  width: 1rem;
+  height: 0.5rem;
+  fill: var(--neutral-10);
+  stroke: var(--neutral-20);
+  stroke-width: 1;
+}

package/src/progress.css

@@ -0,0 +1,81 @@
+/*
+ * Progress — @tale-ui/react
+ *
+ * Styled with @tale-ui/core design tokens.
+ * Base-ui Progress exposes:
+ *   Root:      [data-complete] [data-indeterminate] [data-progressing]
+ *   Indicator: [data-complete] [data-indeterminate] [data-progressing]
+ *   Value:     [data-complete] [data-indeterminate] [data-progressing]
+ *
+ * Usage:
+ *   <Progress.Root className="tale-progress" value={60}>
+ *     <Progress.Track className="tale-progress__track">
+ *       <Progress.Indicator className="tale-progress__indicator" />
+ *     </Progress.Track>
+ *   </Progress.Root>
+ */
+
+/* ─── Root ─────────────────────────────────────────────────────────────────── */
+
+.tale-progress {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4xs);
+  width: 100%;
+}
+
+/* ─── Label ────────────────────────────────────────────────────────────────── */
+
+.tale-progress__label {
+  color: var(--neutral-80);
+  font-family: var(--label-font-family);
+  font-size: var(--label-m-font-size);
+  font-weight: var(--label-font-weight);
+}
+
+/* ─── Track ────────────────────────────────────────────────────────────────── */
+
+.tale-progress__track {
+  position: relative;
+  width: 100%;
+  height: 0.8rem;
+  border-radius: 9999px;
+  background-color: var(--neutral-20);
+  overflow: hidden;
+}
+
+/* ─── Indicator — the filled portion ─────────────────────────────────────── */
+
+.tale-progress__indicator {
+  height: 100%;
+  background-color: var(--color-60);
+  border-radius: 9999px;
+  transition: width 0.3s ease;
+}
+
+/* ─── Complete state ──────────────────────────────────────────────────────── */
+
+.tale-progress[data-complete] .tale-progress__indicator {
+  background-color: var(--green-60, var(--color-60));
+}
+
+/* ─── Indeterminate state ─────────────────────────────────────────────────── */
+
+@keyframes tale-progress-indeterminate {
+  0%   { transform: translateX(-100%); }
+  100% { transform: translateX(300%); }
+}
+
+.tale-progress[data-indeterminate] .tale-progress__indicator {
+  width: 40% !important;
+  animation: tale-progress-indeterminate 1.5s ease-in-out infinite;
+}
+
+/* ─── Value label ──────────────────────────────────────────────────────────── */
+
+.tale-progress__value {
+  color: var(--neutral-60);
+  font-family: var(--label-font-family);
+  font-size: var(--label-s-font-size);
+  text-align: right;
+}

package/src/radio.css

@@ -0,0 +1,110 @@
+/*
+ * Radio — @tale-ui/react
+ *
+ * Styled with @tale-ui/core design tokens.
+ * Base-ui Radio exposes:
+ *   Root:      [data-checked] [data-unchecked] [data-disabled]
+ *              [data-readonly] [data-required] [data-valid] [data-invalid]
+ *              [data-focused]
+ *   Indicator: [data-checked] [data-unchecked] [data-disabled]
+ *
+ * Usage:
+ *   <Radio.Root className="tale-radio">
+ *     <Radio.Indicator className="tale-radio__indicator" />
+ *   </Radio.Root>
+ */
+
+/* ─── Root — circular hit area ────────────────────────────────────────────── */
+
+.tale-radio {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.8rem;
+  height: 1.8rem;
+  border-radius: 50%;
+  border: 1.5px solid var(--neutral-40);
+  background-color: var(--neutral-10);
+  cursor: pointer;
+  outline: none;
+  transition:
+    background-color 0.15s ease,
+    border-color 0.15s ease,
+    box-shadow 0.15s ease;
+  flex-shrink: 0;
+}
+
+.tale-radio:focus-visible {
+  box-shadow: 0 0 0 2px var(--neutral-100), 0 0 0 4px var(--color-60);
+}
+
+/* ─── Checked state ───────────────────────────────────────────────────────── */
+
+.tale-radio[data-checked] {
+  border-color: var(--color-60);
+  background-color: var(--neutral-10);
+}
+
+.tale-radio[data-checked]:hover:not([data-disabled]) {
+  border-color: var(--color-50);
+}
+
+/* ─── Hover (unchecked) ───────────────────────────────────────────────────── */
+
+.tale-radio:hover:not([data-disabled]):not([data-checked]) {
+  border-color: var(--neutral-60);
+  background-color: var(--neutral-14);
+}
+
+/* ─── Invalid state ───────────────────────────────────────────────────────── */
+
+.tale-radio[data-invalid] {
+  border-color: var(--red-60);
+}
+
+/* ─── Disabled state ──────────────────────────────────────────────────────── */
+
+.tale-radio[data-disabled] {
+  opacity: 0.45;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+/* ─── Size modifiers ──────────────────────────────────────────────────────── */
+
+.tale-radio--sm {
+  width: 1.4rem;
+  height: 1.4rem;
+}
+
+.tale-radio--lg {
+  width: 2.2rem;
+  height: 2.2rem;
+}
+
+/* ─── Indicator — filled dot shown when checked ───────────────────────────── */
+
+.tale-radio__indicator {
+  width: 0.8rem;
+  height: 0.8rem;
+  border-radius: 50%;
+  background-color: var(--color-60);
+  transition: transform 0.15s ease, opacity 0.15s ease;
+  transform: scale(0);
+  opacity: 0;
+}
+
+.tale-radio--sm .tale-radio__indicator {
+  width: 0.6rem;
+  height: 0.6rem;
+}
+
+.tale-radio--lg .tale-radio__indicator {
+  width: 1rem;
+  height: 1rem;
+}
+
+.tale-radio__indicator[data-checked] {
+  transform: scale(1);
+  opacity: 1;
+}

package/src/scroll-area.css

@@ -0,0 +1,92 @@
+/*
+ * ScrollArea — @tale-ui/react
+ *
+ * Styled with @tale-ui/core design tokens.
+ * Base-ui ScrollArea has no data attributes on Root.
+ * Scrollbar: orientation (horizontal/vertical)
+ *
+ * Usage:
+ *   <ScrollArea.Root className="tale-scroll-area">
+ *     <ScrollArea.Viewport className="tale-scroll-area__viewport">
+ *       {content}
+ *     </ScrollArea.Viewport>
+ *     <ScrollArea.Scrollbar className="tale-scroll-area__scrollbar" orientation="vertical">
+ *       <ScrollArea.Thumb className="tale-scroll-area__thumb" />
+ *     </ScrollArea.Scrollbar>
+ *     <ScrollArea.Corner className="tale-scroll-area__corner" />
+ *   </ScrollArea.Root>
+ */
+
+/* ─── Root ─────────────────────────────────────────────────────────────────── */
+
+.tale-scroll-area {
+  position: relative;
+  overflow: hidden;
+}
+
+/* ─── Viewport ─────────────────────────────────────────────────────────────── */
+
+.tale-scroll-area__viewport {
+  width: 100%;
+  height: 100%;
+  overflow: scroll;
+  scrollbar-width: none;
+}
+
+.tale-scroll-area__viewport::-webkit-scrollbar {
+  display: none;
+}
+
+/* ─── Scrollbar ────────────────────────────────────────────────────────────── */
+
+.tale-scroll-area__scrollbar {
+  display: flex;
+  touch-action: none;
+  user-select: none;
+  padding: 0.2rem;
+  background-color: transparent;
+  transition: background-color 0.15s ease;
+}
+
+.tale-scroll-area__scrollbar[data-orientation="vertical"] {
+  flex-direction: column;
+  width: 1rem;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+}
+
+.tale-scroll-area__scrollbar[data-orientation="horizontal"] {
+  flex-direction: row;
+  height: 1rem;
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+
+.tale-scroll-area__scrollbar:hover {
+  background-color: var(--neutral-14);
+}
+
+/* ─── Thumb ────────────────────────────────────────────────────────────────── */
+
+.tale-scroll-area__thumb {
+  flex: 1;
+  border-radius: 9999px;
+  background-color: var(--neutral-40);
+  position: relative;
+  transition: background-color 0.15s ease;
+}
+
+.tale-scroll-area__thumb:hover,
+.tale-scroll-area__scrollbar:hover .tale-scroll-area__thumb {
+  background-color: var(--neutral-55);
+}
+
+/* ─── Corner ───────────────────────────────────────────────────────────────── */
+
+.tale-scroll-area__corner {
+  background-color: var(--neutral-14);
+}

package/src/select.css

@@ -0,0 +1,187 @@
+/*
+ * Select — @tale-ui/react
+ *
+ * Styled with @tale-ui/core design tokens.
+ * Base-ui Select exposes:
+ *   Trigger: (standard button-like)
+ *   Popup:   [data-open] [data-closed] [data-starting-style] [data-ending-style]
+ *            [data-side] [data-align]
+ *   Item:    [data-selected] [data-highlighted] [data-disabled]
+ *
+ * Usage:
+ *   <Select.Root>
+ *     <Select.Trigger className="tale-select__trigger">
+ *       <Select.Value placeholder="Pick one" />
+ *       <Select.Icon className="tale-select__icon">▾</Select.Icon>
+ *     </Select.Trigger>
+ *     <Select.Portal>
+ *       <Select.Positioner>
+ *         <Select.Popup className="tale-select__popup">
+ *           <Select.Item className="tale-select__item" value="a">
+ *             <Select.ItemText className="tale-select__item-text">Option A</Select.ItemText>
+ *             <Select.ItemIndicator className="tale-select__item-indicator">✓</Select.ItemIndicator>
+ *           </Select.Item>
+ *         </Select.Popup>
+ *       </Select.Positioner>
+ *     </Select.Portal>
+ *   </Select.Root>
+ */
+
+/* ─── Trigger ──────────────────────────────────────────────────────────────── */
+
+.tale-select__trigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-xs);
+  min-width: 16rem;
+  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);
+  cursor: pointer;
+  outline: none;
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+}
+
+.tale-select__trigger:hover {
+  border-color: var(--neutral-40);
+}
+
+.tale-select__trigger:focus-visible,
+.tale-select__trigger[data-popup-open] {
+  border-color: var(--color-60);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-60) 20%, transparent);
+}
+
+.tale-select__trigger[data-disabled] {
+  opacity: 0.45;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+/* ─── Value / placeholder ──────────────────────────────────────────────────── */
+
+.tale-select__value[data-placeholder] {
+  color: var(--neutral-50);
+}
+
+/* ─── Icon ─────────────────────────────────────────────────────────────────── */
+
+.tale-select__icon {
+  width: 1.6rem;
+  height: 1.6rem;
+  color: var(--neutral-60);
+  flex-shrink: 0;
+  transition: transform 0.2s ease;
+}
+
+.tale-select__trigger[data-popup-open] .tale-select__icon {
+  transform: rotate(180deg);
+}
+
+/* ─── Popup ────────────────────────────────────────────────────────────────── */
+
+.tale-select__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);
+  outline: none;
+  overflow: hidden;
+  min-width: var(--available-width, 16rem);
+  max-height: 28rem;
+  overflow-y: auto;
+  padding: var(--space-4xs);
+  transition: opacity 0.15s ease, transform 0.15s ease;
+}
+
+.tale-select__popup[data-starting-style],
+.tale-select__popup[data-ending-style] {
+  opacity: 0;
+  transform: scale(0.97);
+}
+
+/* ─── List ─────────────────────────────────────────────────────────────────── */
+
+.tale-select__list {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+}
+
+/* ─── Item ─────────────────────────────────────────────────────────────────── */
+
+.tale-select__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-select__item[data-highlighted] {
+  background-color: var(--neutral-14);
+  color: var(--neutral-90);
+}
+
+.tale-select__item[data-selected] {
+  color: var(--color-60);
+  font-weight: var(--label-font-weight);
+}
+
+.tale-select__item[data-disabled] {
+  opacity: 0.45;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+/* ─── Item text ────────────────────────────────────────────────────────────── */
+
+.tale-select__item-text {
+  flex: 1;
+}
+
+/* ─── Item indicator (checkmark) ───────────────────────────────────────────── */
+
+.tale-select__item-indicator {
+  width: 1.4rem;
+  height: 1.4rem;
+  flex-shrink: 0;
+  color: var(--color-60);
+  margin-left: auto;
+}
+
+/* ─── Group label ──────────────────────────────────────────────────────────── */
+
+.tale-select__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;
+}
+
+/* ─── Separator ────────────────────────────────────────────────────────────── */
+
+.tale-select__separator {
+  height: 1px;
+  background-color: var(--neutral-18);
+  margin: var(--space-4xs) 0;
+}

package/src/separator.css

@@ -0,0 +1,32 @@
+/*
+ * Separator — @tale-ui/react
+ *
+ * Styled with @tale-ui/core design tokens.
+ * Base-ui Separator has no data attributes.
+ *
+ * Orientation modifier: .tale-separator--vertical
+ *
+ * Usage:
+ *   <Separator className="tale-separator" />
+ *   <Separator className="tale-separator tale-separator--vertical" />
+ */
+
+/* ─── Base ─────────────────────────────────────────────────────────────────── */
+
+.tale-separator {
+  display: block;
+  border: none;
+  background-color: var(--neutral-20);
+  width: 100%;
+  height: 1px;
+  flex-shrink: 0;
+}
+
+/* ─── Vertical orientation ────────────────────────────────────────────────── */
+
+.tale-separator--vertical,
+.tale-separator[aria-orientation="vertical"] {
+  width: 1px;
+  height: auto;
+  align-self: stretch;
+}