@crfrsr/ui 1.0.0

package/dist/styles/button.css

@@ -0,0 +1,89 @@
+/* crfrsr Design System — Button */
+
+.crfrsr-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  white-space: nowrap;
+  font-family: inherit;
+  font-weight: var(--crfrsr-font-weight-medium, 500);
+  line-height: 1.25;
+  border-radius: var(--crfrsr-radius-lg);
+  cursor: pointer;
+  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease,
+    box-shadow 0.2s ease;
+  user-select: none;
+}
+
+.crfrsr-btn:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--crfrsr-color-background),
+    0 0 0 4px var(--crfrsr-color-focus-ring);
+}
+
+.crfrsr-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* ----- Variants -------------------------------------------------------- */
+
+/* primary */
+.crfrsr-btn--primary {
+  background-color: var(--crfrsr-btn-primary-bg, var(--crfrsr-color-primary));
+  color: var(--crfrsr-btn-primary-color, var(--crfrsr-color-text-on-primary));
+}
+.crfrsr-btn--primary:hover:not(:disabled) {
+  background-color: var(--crfrsr-btn-primary-bg-hover, var(--crfrsr-color-primary-dark));
+}
+
+/* secondary — neutral filled button (light in light mode). Exposed as its own
+   set of vars because the "secondary" palette color is a text tone, not a good
+   button fill. */
+.crfrsr-btn--secondary {
+  background-color: var(--crfrsr-btn-secondary-bg, var(--crfrsr-color-surface-hover));
+  color: var(--crfrsr-btn-secondary-color, var(--crfrsr-color-text));
+}
+.crfrsr-btn--secondary:hover:not(:disabled) {
+  background-color: var(--crfrsr-btn-secondary-bg-hover, var(--crfrsr-color-divider));
+}
+
+/* outline */
+.crfrsr-btn--outline {
+  background-color: transparent;
+  color: var(--crfrsr-color-text);
+  border: 1px solid var(--crfrsr-color-border);
+}
+.crfrsr-btn--outline:hover:not(:disabled) {
+  background-color: var(--crfrsr-color-surface-hover);
+}
+
+/* ghost */
+.crfrsr-btn--ghost {
+  background-color: transparent;
+  color: var(--crfrsr-color-text);
+}
+.crfrsr-btn--ghost:hover:not(:disabled) {
+  background-color: var(--crfrsr-color-surface-hover);
+}
+
+/* ----- Sizes ----------------------------------------------------------- */
+
+.crfrsr-btn--sm {
+  padding: 0.375rem 0.75rem;
+  font-size: var(--crfrsr-font-size-sm, 0.875rem);
+}
+.crfrsr-btn--md {
+  padding: 0.5rem 1rem;
+  font-size: var(--crfrsr-font-size-base, 1rem);
+}
+.crfrsr-btn--lg {
+  padding: 0.75rem 1.5rem;
+  font-size: var(--crfrsr-font-size-lg, 1.125rem);
+}
+.crfrsr-btn--icon {
+  width: 2.25rem;
+  height: 2.25rem;
+  padding: 0;
+}

package/dist/styles/combobox.css

@@ -0,0 +1,200 @@
+/* crfrsr Design System — Combobox (+ popover & command primitives) */
+
+/* ----- Popover --------------------------------------------------------- */
+
+@keyframes crfrsr-popover-in {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes crfrsr-popover-out {
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+}
+
+.crfrsr-popover__content {
+  z-index: 50;
+  width: 18rem;
+  padding: 1rem;
+  border-radius: var(--crfrsr-radius-md);
+  border: 1px solid var(--crfrsr-color-border);
+  background-color: var(--crfrsr-color-surface);
+  color: var(--crfrsr-color-text);
+  box-shadow: var(--crfrsr-shadow-md);
+  outline: none;
+  transform-origin: var(--radix-popover-content-transform-origin);
+}
+/* Duration (0.2s) must match the 200ms search-reset timer in Combobox.tsx. */
+.crfrsr-popover__content[data-state='open'] {
+  animation: crfrsr-popover-in 0.2s ease-out;
+}
+.crfrsr-popover__content[data-state='closed'] {
+  animation: crfrsr-popover-out 0.2s ease-in;
+}
+
+/* ----- Command (cmdk) -------------------------------------------------- */
+
+.crfrsr-command {
+  display: flex;
+  height: 100%;
+  width: 100%;
+  flex-direction: column;
+  overflow: hidden;
+  border-radius: var(--crfrsr-radius-md);
+  background-color: var(--crfrsr-color-surface);
+  color: var(--crfrsr-color-text);
+}
+
+.crfrsr-command__input-wrapper {
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid var(--crfrsr-color-border);
+  padding: 0 0.75rem;
+}
+
+.crfrsr-command__input-icon {
+  margin-right: 0.5rem;
+  height: 1rem;
+  width: 1rem;
+  flex-shrink: 0;
+  opacity: 0.5;
+}
+
+.crfrsr-command__input {
+  display: flex;
+  height: 2.5rem;
+  width: 100%;
+  border: 0;
+  border-radius: var(--crfrsr-radius-md);
+  background-color: transparent;
+  padding: 0.75rem 0;
+  font-size: var(--crfrsr-font-size-sm, 0.875rem);
+  color: inherit;
+  outline: none;
+}
+.crfrsr-command__input::placeholder {
+  color: var(--crfrsr-color-text-secondary);
+}
+.crfrsr-command__input:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.crfrsr-command__list {
+  max-height: 300px;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.crfrsr-command__empty {
+  padding: 1.5rem 0;
+  text-align: center;
+  font-size: var(--crfrsr-font-size-sm, 0.875rem);
+}
+
+.crfrsr-command__group {
+  overflow: hidden;
+  padding: 0.25rem;
+  color: var(--crfrsr-color-text);
+}
+.crfrsr-command__group [cmdk-group-heading] {
+  padding: 0.375rem 0.5rem;
+  font-size: var(--crfrsr-font-size-xs, 0.75rem);
+  font-weight: var(--crfrsr-font-weight-medium, 500);
+  color: var(--crfrsr-color-text-secondary);
+}
+
+.crfrsr-command__item {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  cursor: default;
+  user-select: none;
+  border-radius: var(--crfrsr-radius-sm);
+  padding: 0.375rem 0.5rem;
+  font-size: var(--crfrsr-font-size-sm, 0.875rem);
+  color: var(--crfrsr-color-text);
+  outline: none;
+}
+.crfrsr-command__item[data-disabled='true'] {
+  pointer-events: none;
+  opacity: 0.5;
+}
+.crfrsr-command__item[data-selected='true'] {
+  background-color: var(--crfrsr-color-surface-hover);
+  color: var(--crfrsr-color-text);
+}
+
+.crfrsr-command__separator {
+  height: 1px;
+  background-color: var(--crfrsr-color-border);
+}
+
+/* ----- Combobox (overrides win over the command defaults above) -------- */
+
+.crfrsr-combobox {
+  position: relative;
+}
+
+.crfrsr-combobox__popover {
+  padding: 0;
+  overflow: hidden;
+}
+
+.crfrsr-combobox__list {
+  max-height: 30vh;
+  overflow: auto;
+}
+@media (min-width: 640px) {
+  .crfrsr-combobox__list {
+    max-height: 300px;
+  }
+}
+
+.crfrsr-combobox__message {
+  padding: 0.5rem;
+  text-align: center;
+  font-size: var(--crfrsr-font-size-xs, 0.75rem);
+}
+
+.crfrsr-combobox__clear {
+  position: absolute;
+  right: -1rem;
+  top: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1rem;
+  height: 1rem;
+  padding: 0;
+  color: var(--crfrsr-color-text-secondary);
+  background: transparent;
+  border: 0;
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity 0.2s ease, color 0.2s ease;
+  z-index: 10;
+}
+.crfrsr-combobox:hover .crfrsr-combobox__clear {
+  opacity: 1;
+}
+.crfrsr-combobox__clear:hover {
+  color: var(--crfrsr-color-text);
+}
+.crfrsr-combobox__clear svg {
+  width: 1rem;
+  height: 1rem;
+}

package/dist/styles/pill.css

@@ -0,0 +1,44 @@
+/* crfrsr Design System — Pill */
+
+.crfrsr-pill {
+  display: inline-flex;
+  align-items: center;
+  white-space: nowrap;
+  color: var(--crfrsr-pill-color, #ffffff);
+  background-color: var(--crfrsr-pill-bg, var(--crfrsr-color-secondary));
+  font-weight: var(--crfrsr-font-weight-bold, 700);
+  border-radius: var(--crfrsr-radius-sm);
+  cursor: default;
+  /* Default font size; consumers override per-size via className if desired. */
+  font-size: var(--crfrsr-pill-font-size, var(--crfrsr-font-size-xs, 0.75rem));
+}
+
+.crfrsr-pill--uppercase .crfrsr-pill__label {
+  text-transform: uppercase;
+}
+
+.crfrsr-pill--hoverable {
+  transition: background-color 0.2s ease;
+}
+.crfrsr-pill--hoverable:hover {
+  background-color: var(--crfrsr-pill-bg-hover, var(--crfrsr-pill-bg));
+}
+
+/* Space between glyph and label only when both are present. */
+.crfrsr-pill__glyph + .crfrsr-pill__label {
+  margin-left: 0.125rem;
+}
+
+/* ----- Sizes ----------------------------------------------------------- */
+
+.crfrsr-pill--default {
+  padding: 1px 0.375rem;
+}
+.crfrsr-pill--small {
+  padding: 1px 0.25rem;
+  line-height: 12px;
+}
+.crfrsr-pill--icon {
+  padding: 1px 0.25rem;
+  line-height: 12px;
+}

package/dist/styles/reset.css

@@ -0,0 +1,273 @@
+/*
+ * crfrsr Design System — reset.css
+ *
+ * A faithful transcription of Tailwind v3 Preflight, with theme lookups routed
+ * through the --crfrsr-* custom properties. Consumers that disable their own CSS
+ * reset (e.g. Tailwind `corePlugins: { preflight: false }`) should import this so
+ * there is exactly one reset shared across every app.
+ *
+ * Kept unlayered on purpose: element-level, low-specificity rules that any
+ * component or app class easily overrides.
+ */
+
+*,
+::before,
+::after {
+  box-sizing: border-box;
+  border-width: 0;
+  border-style: solid;
+  border-color: var(--crfrsr-color-border, currentColor);
+}
+
+::before,
+::after {
+  --tw-content: '';
+}
+
+html,
+:host {
+  line-height: 1.5;
+  -webkit-text-size-adjust: 100%;
+  -moz-tab-size: 4;
+  tab-size: 4;
+  font-family: var(
+    --crfrsr-font-family-base,
+    ui-sans-serif,
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    Roboto,
+    'Helvetica Neue',
+    Arial,
+    sans-serif
+  );
+  font-feature-settings: normal;
+  font-variation-settings: normal;
+  -webkit-tap-highlight-color: transparent;
+}
+
+body {
+  margin: 0;
+  line-height: inherit;
+}
+
+hr {
+  height: 0;
+  color: inherit;
+  border-top-width: 1px;
+}
+
+abbr:where([title]) {
+  text-decoration: underline dotted;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-size: inherit;
+  font-weight: inherit;
+}
+
+a {
+  color: inherit;
+  text-decoration: inherit;
+}
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+code,
+kbd,
+samp,
+pre {
+  font-family: var(
+    --crfrsr-font-family-mono,
+    ui-monospace,
+    SFMono-Regular,
+    Menlo,
+    Monaco,
+    Consolas,
+    'Liberation Mono',
+    'Courier New',
+    monospace
+  );
+  font-feature-settings: normal;
+  font-variation-settings: normal;
+  font-size: 1em;
+}
+
+small {
+  font-size: 80%;
+}
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+table {
+  text-indent: 0;
+  border-color: inherit;
+  border-collapse: collapse;
+}
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit;
+  font-feature-settings: inherit;
+  font-variation-settings: inherit;
+  font-size: 100%;
+  font-weight: inherit;
+  line-height: inherit;
+  letter-spacing: inherit;
+  color: inherit;
+  margin: 0;
+  padding: 0;
+}
+
+button,
+select {
+  text-transform: none;
+}
+
+button,
+input:where([type='button']),
+input:where([type='reset']),
+input:where([type='submit']) {
+  -webkit-appearance: button;
+  background-color: transparent;
+  background-image: none;
+}
+
+:-moz-focusring {
+  outline: auto;
+}
+
+:-moz-ui-invalid {
+  box-shadow: none;
+}
+
+progress {
+  vertical-align: baseline;
+}
+
+::-webkit-inner-spin-button,
+::-webkit-outer-spin-button {
+  height: auto;
+}
+
+[type='search'] {
+  -webkit-appearance: textfield;
+  outline-offset: -2px;
+}
+
+::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button;
+  font: inherit;
+}
+
+summary {
+  display: list-item;
+}
+
+blockquote,
+dl,
+dd,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+hr,
+figure,
+p,
+pre {
+  margin: 0;
+}
+
+fieldset {
+  margin: 0;
+  padding: 0;
+}
+
+legend {
+  padding: 0;
+}
+
+ol,
+ul,
+menu {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+dialog {
+  padding: 0;
+}
+
+textarea {
+  resize: vertical;
+}
+
+input::placeholder,
+textarea::placeholder {
+  opacity: 1;
+  color: var(--crfrsr-color-text-disabled, #9ca3af);
+}
+
+button,
+[role='button'] {
+  cursor: pointer;
+}
+
+:disabled {
+  cursor: default;
+}
+
+img,
+svg,
+video,
+canvas,
+audio,
+iframe,
+embed,
+object {
+  display: block;
+  vertical-align: middle;
+}
+
+img,
+video {
+  max-width: 100%;
+  height: auto;
+}
+
+[hidden] {
+  display: none;
+}

package/dist/styles/styles.css

@@ -0,0 +1,14 @@
+/*
+ * crfrsr Design System — component styles aggregator.
+ *
+ * Import this once in your app for all component CSS. It does NOT include the
+ * reset or token defaults — import those separately and first:
+ *
+ *   import '@crfrsr/ui/reset.css';
+ *   import '@crfrsr/ui/tokens.css';
+ *   import '@crfrsr/ui/styles.css';
+ */
+
+@import './button.css';
+@import './pill.css';
+@import './combobox.css';

package/dist/styles/tokens.css

@@ -0,0 +1,100 @@
+/*
+ * crfrsr Design System — tokens.css
+ *
+ * Static default values for the --crfrsr-* contract. These mirror the light and
+ * dark output of `getCssVariables()` in @crfrsr/core and provide
+ * first-paint / no-JS / no-ThemeProvider defaults. ThemeProvider overrides these
+ * at runtime for the active mode.
+ *
+ * Keep in sync with packages/core/src/{colors,theme,cssVars}.ts.
+ *
+ * Apps re-theme by overriding any of these variables in their own stylesheet.
+ */
+
+:root {
+  /* Colors */
+  --crfrsr-color-primary: #0066ff;
+  --crfrsr-color-primary-light: #3385ff;
+  --crfrsr-color-primary-dark: #0052cc;
+  --crfrsr-color-text-on-primary: #ffffff;
+  --crfrsr-color-secondary: #6c757d;
+  --crfrsr-color-secondary-light: #8e959c;
+  --crfrsr-color-secondary-dark: #545b62;
+  --crfrsr-color-success: #28a745;
+  --crfrsr-color-warning: #ffc107;
+  --crfrsr-color-error: #dc3545;
+  --crfrsr-color-info: #17a2b8;
+  --crfrsr-color-background: #ffffff;
+  --crfrsr-color-surface: #f8f9fa;
+  --crfrsr-color-surface-hover: #f1f3f5;
+  --crfrsr-color-text: #212529;
+  --crfrsr-color-text-secondary: #6c757d;
+  --crfrsr-color-text-disabled: #adb5bd;
+  --crfrsr-color-border: #dee2e6;
+  --crfrsr-color-divider: #e9ecef;
+  --crfrsr-color-focus-ring: #0066ff;
+  --crfrsr-color-overlay: rgb(0 0 0 / 0.5);
+
+  /* Typography */
+  --crfrsr-font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    'Helvetica Neue', Arial, sans-serif;
+  --crfrsr-font-family-mono: Menlo, Monaco, 'Courier New', monospace;
+  --crfrsr-font-size-xs: 0.75rem;
+  --crfrsr-font-size-sm: 0.875rem;
+  --crfrsr-font-size-base: 1rem;
+  --crfrsr-font-size-lg: 1.125rem;
+  --crfrsr-font-size-xl: 1.25rem;
+  --crfrsr-font-size-2xl: 1.5rem;
+  --crfrsr-font-size-3xl: 1.875rem;
+  --crfrsr-font-size-4xl: 2.25rem;
+  --crfrsr-font-weight-normal: 400;
+  --crfrsr-font-weight-medium: 500;
+  --crfrsr-font-weight-semibold: 600;
+  --crfrsr-font-weight-bold: 700;
+  --crfrsr-line-height-tight: 1.25;
+  --crfrsr-line-height-normal: 1.5;
+  --crfrsr-line-height-relaxed: 1.75;
+
+  /* Radius */
+  --crfrsr-radius-sm: 0.25rem;
+  --crfrsr-radius-md: 0.375rem;
+  --crfrsr-radius-lg: 0.5rem;
+  --crfrsr-radius-full: 9999px;
+
+  /* Spacing */
+  --crfrsr-spacing-xs: 4px;
+  --crfrsr-spacing-sm: 8px;
+  --crfrsr-spacing-md: 16px;
+  --crfrsr-spacing-lg: 24px;
+  --crfrsr-spacing-xl: 32px;
+  --crfrsr-spacing-2xl: 48px;
+
+  /* Shadow */
+  --crfrsr-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --crfrsr-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+}
+
+/* Dark mode: only the color tokens change. */
+.crfrsr-dark {
+  --crfrsr-color-primary: #4d9aff;
+  --crfrsr-color-primary-light: #66adff;
+  --crfrsr-color-primary-dark: #3385ff;
+  --crfrsr-color-text-on-primary: #ffffff;
+  --crfrsr-color-secondary: #adb5bd;
+  --crfrsr-color-secondary-light: #ced4da;
+  --crfrsr-color-secondary-dark: #8e959c;
+  --crfrsr-color-success: #48d597;
+  --crfrsr-color-warning: #ffd54f;
+  --crfrsr-color-error: #ff6b6b;
+  --crfrsr-color-info: #4dd0e1;
+  --crfrsr-color-background: #121212;
+  --crfrsr-color-surface: #1e1e1e;
+  --crfrsr-color-surface-hover: #2a2a2a;
+  --crfrsr-color-text: #ffffff;
+  --crfrsr-color-text-secondary: #b0b0b0;
+  --crfrsr-color-text-disabled: #6c6c6c;
+  --crfrsr-color-border: #2e2e2e;
+  --crfrsr-color-divider: #3a3a3a;
+  --crfrsr-color-focus-ring: #4d9aff;
+  --crfrsr-color-overlay: rgb(0 0 0 / 0.7);
+}