@ctrl-ui/react 0.8.0

package/dist/styles/recipes/field.css

@@ -0,0 +1,234 @@
+@layer components {
+  :where([data-control-family="field"][data-control="true"]) {
+    gap: calc(var(--spacing) * 1.5);
+    --cui-field-radius: var(--radius-control);
+    --cui-field-background: oklch(from var(--card) l c h / 0.72);
+    --cui-field-foreground: var(--foreground);
+    --cui-field-border-color: var(--control-rim);
+    --cui-field-border-width: var(--control-rim-width);
+    --cui-field-shadow: var(--shadow-inset);
+    --cui-field-backdrop-filter: blur(0px);
+    --cui-field-focus-border-color: var(--border);
+    --cui-field-height: var(--control-h-md);
+    --cui-field-padding-inline: var(--padding-x);
+    --cui-field-font-size: var(--text-body);
+    border: var(--cui-field-border-width) solid var(--cui-field-border-color);
+    border-radius: var(--cui-field-radius);
+    outline: none;
+    background: var(--cui-field-background);
+    box-shadow: var(--cui-field-shadow);
+    color: var(--cui-field-foreground);
+    backdrop-filter: var(--cui-field-backdrop-filter);
+  }
+
+  :where(
+    [data-control-family="field"][data-control="true"]:not([data-control-family="field"][data-field-kind="autocomplete"]):not(
+      [data-control-family="field"][data-field-kind="combobox"]
+    )
+  ) {
+    transition-property: color, background-color, border-color, box-shadow, opacity, backdrop-filter;
+    transition-duration: var(--duration-fast);
+    transition-timing-function: var(--ease-standard);
+  }
+
+  :where([data-control-family="field"][data-control="true"][data-size="xs"]) {
+    gap: calc(var(--spacing) * 1);
+    --cui-field-height: var(--control-h-xs);
+    --cui-field-padding-inline: calc(var(--padding-x) * 0.6);
+    --cui-field-font-size: var(--text-caption);
+  }
+  :where([data-control-family="field"][data-control="true"][data-size="sm"]) {
+    --cui-field-height: var(--control-h-sm);
+    --cui-field-padding-inline: calc(var(--padding-x) * 0.75);
+    --cui-field-font-size: var(--text-label);
+  }
+  :where([data-control-family="field"][data-control="true"][data-size="lg"]) {
+    gap: calc(var(--spacing) * 2);
+    --cui-field-height: var(--control-h-lg);
+    --cui-field-padding-inline: calc(var(--padding-x) * 1.25);
+  }
+
+  :where([data-control-family="field"][data-control="true"][data-size]) {
+    block-size: var(--cui-field-height);
+    padding-inline: var(--cui-field-padding-inline);
+    font-size: var(--cui-field-font-size);
+  }
+
+  :where([data-control-family="field"][data-control="true"])::placeholder {
+    color: var(--muted-foreground);
+  }
+
+  @media (hover: hover) {
+    :where([data-control-family="field"][data-field-kind="autocomplete"]:hover),
+    :where([data-control-family="field"][data-field-kind="combobox"]:hover),
+    :where([data-control-family="field"][data-field-kind="native-select"]:hover),
+    :where([data-control-family="field"][data-field-kind="number-field"]:hover) {
+      background: var(--hover-fill);
+    }
+  }
+
+  :where([data-control-family="field"][data-control="true"]:is(:focus-visible, :focus-within)) {
+    border-color: var(--cui-field-focus-border-color);
+  }
+
+  :where([data-control-family="field"][data-control="true"][data-invalid]),
+  :where([data-control-family="field"][data-control="true"][aria-invalid="true"]) {
+    box-shadow:
+      0 0 0 2px var(--destructive),
+      var(--cui-field-shadow);
+  }
+
+  :where([data-control-family="field"][data-control="true"]:disabled),
+  :where([data-control-family="field"][data-control="true"][data-disabled]) {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  :where([data-control-family="field"][data-field-kind="input-otp"][data-slot="slot"]) {
+    text-align: center;
+    font-size: var(--text-body);
+    font-weight: var(--font-weight-medium);
+    font-variant-numeric: tabular-nums;
+  }
+
+  :where([data-control-family="field"][data-field-kind="combobox"][data-slot="input"]) {
+    padding-inline-end: calc(var(--spacing) * 9);
+    font-weight: var(--font-weight-medium);
+  }
+
+  :where([data-control-family="field"][data-field-kind="native-select"][data-slot="root"]) {
+    padding-inline-end: calc(var(--padding-x) * 1.4);
+    font-weight: var(--font-weight-medium);
+    appearance: none;
+  }
+
+  :where([data-control-family="field"][data-field-kind="number-field"][data-slot="drag-icon"]) {
+    color: var(--foreground);
+  }
+
+  :where([data-control-family="field"][data-field-kind="number-field"][data-slot="input"]) {
+    padding-inline: calc(var(--spacing) * 2);
+    text-align: center;
+    font-weight: var(--font-weight-medium);
+    font-variant-numeric: tabular-nums;
+  }
+
+  :where([data-control-family="field"][data-field-kind="number-field"][data-slot="group"]) {
+    padding-inline: 0;
+    font-weight: var(--font-weight-medium);
+  }
+
+  :where([data-control-family="field"][data-field-kind="textarea"][data-slot="root"]) {
+    min-block-size: calc(var(--spacing) * 16);
+    max-block-size: calc(var(--spacing) * 64);
+    padding: calc(var(--spacing) * 2) calc(var(--spacing) * 3);
+    font-size: var(--text-body);
+  }
+
+  :where([data-control-family="field"][data-field-kind="autocomplete"][data-slot="input"]) {
+    padding-inline-end: calc(var(--spacing) * 9);
+    font-weight: var(--font-weight-medium);
+  }
+
+  :where([data-control-family="field"][data-field-kind="field"][data-slot="root"]) {
+    gap: calc(var(--spacing) * 3);
+  }
+
+  :where([data-control-family="field"][data-field-kind="field"][data-slot="content"]) {
+    gap: calc(var(--spacing) * 1);
+  }
+
+  :where([data-control-family="field"][data-field-kind="field"][data-slot="group"]),
+  :where([data-control-family="field"][data-field-kind="form"][data-slot="root"]) {
+    gap: calc(var(--spacing) * 5);
+  }
+
+  :where([data-control-family="field"][data-field-kind="field"][data-slot="item"]) {
+    gap: calc(var(--spacing) * 2);
+  }
+
+  :where([data-control-family="field"][data-field-kind="field"][data-slot="set"]) {
+    gap: calc(var(--spacing) * 4);
+  }
+
+  :where([data-control-family="field"][data-field-kind="field"][data-slot="separator"]) {
+    block-size: 1px;
+  }
+
+  :where([data-control-family="field"][data-field-kind="field"][data-slot="separator"][data-content]) {
+    margin-block: calc(var(--spacing) * 2);
+    block-size: calc(var(--spacing) * 5);
+  }
+
+  :where([data-control-family="field"][data-field-kind="field"][data-slot="separator-content"]) {
+    margin-inline: auto;
+    padding-inline: calc(var(--spacing) * 2);
+  }
+
+  :where([data-control-family="field"][data-field-kind="phone-input"][data-slot="input"]) {
+    padding-inline: calc(var(--spacing) * 3);
+  }
+}
+
+@property --cui-field-radius {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-field-background {
+  syntax: "*";
+  inherits: true;
+}
+
+@property --cui-field-foreground {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-field-border-color {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-field-border-width {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-field-shadow {
+  syntax: "*";
+  inherits: true;
+}
+
+@property --cui-field-backdrop-filter {
+  syntax: "*";
+  inherits: true;
+}
+
+@property --cui-field-focus-border-color {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-field-height {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-field-padding-inline {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-field-font-size {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 1rem;
+}

package/dist/styles/recipes/gradient-editor.css

@@ -0,0 +1,109 @@
+@layer components {
+  :where([data-control-family="gradient-editor"][data-slot="value-row"]) {
+    gap: calc(var(--spacing) * 2);
+  }
+
+  :where([data-control-family="gradient-editor"][data-slot="root"]) {
+    gap: calc(var(--spacing) * 3);
+    --cui-gradient-editor-add-border-color: var(--border);
+    --cui-gradient-editor-add-radius: 9999px;
+    --cui-gradient-editor-preview-radius: var(--radius-field);
+    --cui-gradient-editor-preview-ring-color: oklch(from var(--border) l c h / 0.6);
+    --cui-gradient-editor-stop-border-color: oklch(1 0 0);
+    --cui-gradient-editor-stop-radius: 9999px;
+    --cui-gradient-editor-stop-shadow: 0 0 0 1px oklch(from var(--foreground) l c h / 0.4);
+    --cui-gradient-editor-track-radius: 9999px;
+  }
+  :where([data-control-family="gradient-editor"][data-slot="preview"]) {
+    block-size: calc(var(--spacing) * 32);
+    border-radius: var(--cui-gradient-editor-preview-radius);
+    box-shadow: inset 0 0 0 1px var(--cui-gradient-editor-preview-ring-color);
+  }
+
+  :where([data-control-family="gradient-editor"][data-slot="track"]) {
+    block-size: calc(var(--spacing) * 6);
+    border: 0;
+    border-radius: var(--cui-gradient-editor-track-radius);
+    box-shadow: inset 0 0 0 1px oklch(from var(--border) l c h / 0.6);
+  }
+
+  :where([data-control-family="gradient-editor"][data-slot="stop"]) {
+    inline-size: calc(var(--spacing) * 5);
+    block-size: calc(var(--spacing) * 5);
+    border: 2px solid var(--cui-gradient-editor-stop-border-color);
+    border-radius: var(--cui-gradient-editor-stop-radius);
+    box-shadow: var(--cui-gradient-editor-stop-shadow);
+    outline: none;
+    transition: scale var(--duration-fast) var(--ease-standard);
+  }
+
+  :where([data-control-family="gradient-editor"][data-slot="stop-add"]) {
+    inline-size: calc(var(--spacing) * 7);
+    block-size: calc(var(--spacing) * 7);
+    border: 1px dashed var(--cui-gradient-editor-add-border-color);
+    border-radius: var(--cui-gradient-editor-add-radius);
+    color: var(--muted-foreground);
+    outline: none;
+    transition:
+      border-color var(--duration-fast) var(--ease-standard),
+      color var(--duration-fast) var(--ease-standard);
+  }
+
+  @media (hover: hover) {
+    :where([data-control-family="gradient-editor"][data-slot="stop-add"]:hover) {
+      border-color: oklch(from var(--foreground) l c h / 0.4);
+      color: var(--foreground);
+    }
+  }
+
+  :where([data-control-family="gradient-editor"][data-slot="stop"][data-selected="true"]) {
+    scale: 115% 115%;
+  }
+}
+
+@property --cui-gradient-editor-preview-radius {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-gradient-editor-preview-ring-color {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-gradient-editor-track-radius {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-gradient-editor-stop-radius {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-gradient-editor-stop-border-color {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-gradient-editor-stop-shadow {
+  syntax: "*";
+  inherits: true;
+}
+
+@property --cui-gradient-editor-add-radius {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-gradient-editor-add-border-color {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}

package/dist/styles/recipes/infinite-canvas.css

@@ -0,0 +1,78 @@
+@layer components {
+  :where([data-control-family="infinite-canvas"][data-slot="root"]) {
+    --cui-infinite-canvas-radius: var(--radius-panel);
+    --cui-infinite-canvas-background: var(--canvas);
+    --cui-infinite-canvas-grid-dot-color: oklch(from var(--foreground) l c h / 0.16);
+    --cui-infinite-canvas-border-color: var(--border);
+    --cui-infinite-canvas-controls-radius: var(--radius-control);
+    --cui-infinite-canvas-controls-background: var(--card);
+    --cui-infinite-canvas-controls-border-color: var(--border);
+    --cui-infinite-canvas-controls-shadow: var(--shadow-sm);
+    border-radius: var(--cui-infinite-canvas-radius);
+    background-color: var(--cui-infinite-canvas-background);
+    background-image: radial-gradient(circle at center, var(--cui-infinite-canvas-grid-dot-color) 1px, transparent 1px);
+    box-shadow: 0 0 0 1px var(--cui-infinite-canvas-border-color);
+    outline-style: none;
+  }
+
+  :where([data-control-family="infinite-canvas"][data-slot="controls"]) {
+    gap: calc(var(--spacing) * 0.5);
+    padding: calc(var(--spacing) * 1);
+    border-radius: var(--cui-infinite-canvas-controls-radius);
+    background-color: var(--cui-infinite-canvas-controls-background);
+    box-shadow:
+      var(--cui-infinite-canvas-controls-shadow),
+      0 0 0 1px var(--cui-infinite-canvas-controls-border-color);
+  }
+
+  :where([data-control-family="infinite-canvas"][data-slot="content"]) {
+    transform-origin: 0 0;
+  }
+}
+
+@property --cui-infinite-canvas-radius {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-infinite-canvas-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-infinite-canvas-grid-dot-color {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-infinite-canvas-border-color {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-infinite-canvas-controls-radius {
+  syntax: "<length-percentage>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-infinite-canvas-controls-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-infinite-canvas-controls-border-color {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-infinite-canvas-controls-shadow {
+  syntax: "*";
+  inherits: true;
+}

package/dist/styles/recipes/inline-attachment.css

@@ -0,0 +1,182 @@
+@layer components {
+  :where([data-control-family="inline-attachment"][data-slot="root"]) {
+    --cui-inline-attachment-background: var(--muted);
+    --cui-inline-attachment-hover-shadow: var(--shadow-md);
+    --cui-inline-attachment-radius: var(--radius-scene);
+    --cui-inline-attachment-ring-color: var(--border);
+    --cui-inline-attachment-shadow: var(--shadow-sm);
+    --cui-inline-attachment-content-background: oklch(from var(--background) l c h / 0.85);
+    --cui-inline-attachment-content-foreground: var(--foreground);
+    --cui-inline-attachment-content-radius: var(--radius-control);
+    --cui-inline-attachment-content-shadow: var(--shadow-sm);
+    --_inline-attachment-media-hover-scale: 1.02;
+    border-radius: var(--cui-inline-attachment-radius);
+    background: var(--cui-inline-attachment-background);
+    box-shadow:
+      inset 0 0 0 1px var(--cui-inline-attachment-ring-color),
+      var(--cui-inline-attachment-shadow);
+    transition: box-shadow var(--duration-fast) var(--ease-standard);
+    text-align: left;
+  }
+
+  @media (hover: hover) {
+    :where([data-control-family="inline-attachment"][data-slot="root"]:hover) {
+      box-shadow:
+        inset 0 0 0 1px var(--cui-inline-attachment-ring-color),
+        var(--cui-inline-attachment-hover-shadow);
+    }
+
+    :where([data-control-family="inline-attachment"][data-slot="root"]:disabled:hover) {
+      box-shadow:
+        inset 0 0 0 1px var(--cui-inline-attachment-ring-color),
+        var(--cui-inline-attachment-shadow);
+    }
+  }
+
+  :where([data-control-family="inline-attachment"][data-slot="media-image"]) {
+    transition: scale var(--duration-slow) var(--ease-standard);
+  }
+
+  @media (hover: hover) {
+    :where([data-control-family="inline-attachment"][data-slot="root"]:hover [data-slot="media-image"]) {
+      scale: var(--_inline-attachment-media-hover-scale);
+    }
+  }
+
+  :where([data-control-family="inline-attachment"][data-slot="document"]) {
+    padding: calc(var(--spacing) * 5);
+    background: linear-gradient(135deg in srgb, var(--color-slate-50) 0%, var(--color-zinc-100) 46%, var(--color-stone-200) 100%);
+  }
+
+  :where([data-control-family="inline-attachment"][data-slot="document-sheet"]) {
+    padding: calc(var(--spacing) * 4);
+    border-radius: 1rem;
+    background: oklch(from var(--card) l c h / 0.78);
+    box-shadow:
+      inset 0 0 0 1px oklch(from var(--foreground) l c h / 0.1),
+      var(--shadow-sm);
+  }
+
+  :where([data-control-family="inline-attachment"][data-slot="document-sheet"] > div) {
+    margin-block-start: calc(var(--spacing) * 5);
+    gap: calc(var(--spacing) * 2);
+  }
+
+  :where([data-control-family="inline-attachment"][data-slot="document-heading"]) {
+    block-size: calc(var(--spacing) * 2);
+    inline-size: calc(var(--spacing) * 20);
+    border-radius: 9999px;
+    background: oklch(from var(--foreground) l c h / 0.12);
+  }
+
+  :where([data-control-family="inline-attachment"][data-slot="document-line"]) {
+    block-size: calc(var(--spacing) * 1.5);
+    inline-size: calc(var(--spacing) * 44);
+    border-radius: 9999px;
+    background: oklch(from var(--foreground) l c h / 0.12);
+  }
+
+  :where([data-control-family="inline-attachment"][data-slot="document-line"][data-width="medium"]) {
+    inline-size: calc(var(--spacing) * 36);
+    background: oklch(from var(--foreground) l c h / 0.12);
+  }
+
+  :where([data-control-family="inline-attachment"][data-slot="document-line"][data-width="longest"]) {
+    inline-size: calc(var(--spacing) * 48);
+    background: oklch(from var(--foreground) l c h / 0.14);
+  }
+
+  :where([data-control-family="inline-attachment"][data-slot="document-line"][data-width="short"]) {
+    inline-size: calc(var(--spacing) * 28);
+    background: oklch(from var(--foreground) l c h / 0.1);
+  }
+
+  :where([data-control-family="inline-attachment"][data-slot="document-stamp"]) {
+    margin-block-start: calc(var(--spacing) * 5);
+    block-size: calc(var(--spacing) * 9);
+    inline-size: calc(var(--spacing) * 24);
+    border: 1px dashed oklch(from var(--foreground) l c h / 0.18);
+    border-radius: 0.75rem;
+  }
+
+  :where([data-control-family="inline-attachment"][data-slot="content"]) {
+    padding-inline: calc(var(--spacing) * 3);
+    padding-block: calc(var(--spacing) * 1);
+    border-radius: var(--cui-inline-attachment-content-radius);
+    background: var(--cui-inline-attachment-content-background);
+    color: var(--cui-inline-attachment-content-foreground);
+    box-shadow: var(--cui-inline-attachment-content-shadow);
+    backdrop-filter: blur(var(--backdrop-blur-popover));
+    font-size: var(--text-caption);
+    font-weight: var(--font-weight-medium);
+  }
+
+  :where([data-control-family="inline-attachment"][data-slot="description"]) {
+    font-size: var(--text-micro);
+    opacity: 0.65;
+  }
+
+  :where([data-control-family="inline-attachment"][data-slot="actions"]) {
+    margin-block-start: calc(var(--spacing) * 1);
+    gap: calc(var(--spacing) * 1);
+  }
+
+  :where([data-control-family="inline-attachment"][data-slot="action"]) {
+    padding-inline: calc(var(--spacing) * 1.5);
+    padding-block: calc(var(--spacing) * 0.5);
+    border-radius: var(--radius-control);
+    background: oklch(from var(--foreground) l c h / 0.08);
+    font-size: var(--text-micro);
+  }
+}
+
+@property --cui-inline-attachment-radius {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-inline-attachment-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-inline-attachment-ring-color {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-inline-attachment-shadow {
+  syntax: "*";
+  inherits: true;
+}
+
+@property --cui-inline-attachment-hover-shadow {
+  syntax: "*";
+  inherits: true;
+}
+
+@property --cui-inline-attachment-content-radius {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-inline-attachment-content-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-inline-attachment-content-foreground {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-inline-attachment-content-shadow {
+  syntax: "*";
+  inherits: true;
+}