gbs-add-block 1.2.14 → 1.2.16

package/source/beta-components/checkbox/react/props.ts

@@ -0,0 +1,6 @@
+export type CheckboxSlot = "root" | "control" | "input" | "label" | "description" | "error";
+
+export type CheckboxGroupSlot = "root" | "legend" | "description" | "items" | "error";
+
+// Shared with every other component, so class handling cannot drift.
+export { cx } from "../../shared/core/cx";

package/source/beta-components/checkbox/styles.css

@@ -0,0 +1,212 @@
+/*
+ * Checkbox and CheckboxGroup styles.
+ *
+ * The box is the native <input> with `appearance: none`, so it keeps native
+ * behavior. Tokens read the shared --gbs-* variables when they are set on an
+ * ancestor (set them on :root to theme every component at once). Rules live in the `components` layer, so utility classes passed
+ * through `className` / `classNames` override them.
+ */
+@layer theme, base, components, utilities;
+
+@layer components {
+  .ck-root,
+  .ck-group {
+    --ck-fg: var(--gbs-fg, var(--dg-fg, light-dark(#18181b, #f4f4f5)));
+    --ck-muted: var(--gbs-muted, var(--dg-muted, light-dark(#71717a, #a1a1aa)));
+    --ck-border: var(--gbs-border-control, light-dark(#a1a1aa, #52525b));
+    --ck-input-bg: var(--gbs-input-bg, var(--dg-input-bg, light-dark(#ffffff, #121216)));
+    --ck-accent: var(--gbs-accent, var(--dg-accent, light-dark(#2563eb, #60a5fa)));
+    --ck-accent-fg: var(--gbs-accent-fg, var(--dg-accent-fg, light-dark(#ffffff, #0b1220)));
+    --ck-focus: var(--gbs-focus, var(--dg-focus, light-dark(#2563eb, #60a5fa)));
+    --ck-danger: var(--gbs-danger, var(--dg-danger, light-dark(#dc2626, #f87171)));
+    --ck-font-size: var(--gbs-font-size, var(--dg-font-size, 13px));
+    --ck-size: 16px;
+    --ck-radius: 4px;
+
+    color-scheme: inherit;
+    font-size: var(--ck-font-size);
+    line-height: 1.4;
+    color: var(--ck-fg);
+  }
+
+  :where(.dark, [data-theme="dark"]) :is(.ck-root, .ck-group) {
+    color-scheme: dark;
+  }
+  :where(.light, [data-theme="light"]) :is(.ck-root, .ck-group) {
+    color-scheme: light;
+  }
+
+  :where(.ck-root, .ck-group) *,
+  :where(.ck-root, .ck-group) *::before,
+  :where(.ck-root, .ck-group) *::after {
+    box-sizing: border-box;
+  }
+
+  .ck-root {
+    display: flex;
+    align-items: flex-start;
+    gap: 8px;
+    min-width: 0;
+  }
+  .ck-root[data-size="sm"] {
+    --ck-size: 14px;
+    --ck-font-size: 12px;
+  }
+  .ck-root[data-size="lg"] {
+    --ck-size: 20px;
+    --ck-font-size: 14px;
+    --ck-radius: 5px;
+  }
+
+  /* ---------------------------------------------------------------- box */
+
+  .ck-control {
+    position: relative;
+    display: grid;
+    flex: none;
+    width: var(--ck-size);
+    height: var(--ck-size);
+    /* Center the box on the first line of the label. */
+    margin-top: calc((1.4em - var(--ck-size)) / 2);
+  }
+
+  .ck-input {
+    grid-area: 1 / 1;
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    appearance: none;
+    border: 1.5px solid var(--ck-border);
+    border-radius: var(--ck-radius);
+    background: var(--ck-input-bg);
+    cursor: pointer;
+    transition:
+      background-color 120ms ease,
+      border-color 120ms ease;
+  }
+  .ck-input:hover:not(:disabled) {
+    border-color: color-mix(in oklab, var(--ck-border), var(--ck-fg) 35%);
+  }
+  .ck-input:focus-visible {
+    outline: 2px solid var(--ck-focus);
+    outline-offset: 2px;
+  }
+  .ck-input:is(:checked, :indeterminate) {
+    border-color: var(--ck-accent);
+    background: var(--ck-accent);
+  }
+  .ck-root[data-invalid] .ck-input:not(:checked, :indeterminate) {
+    border-color: var(--ck-danger);
+  }
+  .ck-input:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .ck-icon {
+    grid-area: 1 / 1;
+    width: 100%;
+    height: 100%;
+    fill: none;
+    stroke: var(--ck-accent-fg);
+    stroke-width: 2;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    pointer-events: none;
+  }
+  .ck-check {
+    stroke-dasharray: 1;
+    stroke-dashoffset: 1;
+    transition: stroke-dashoffset 160ms ease;
+  }
+  .ck-dash {
+    opacity: 0;
+  }
+  .ck-input:checked:not(:indeterminate) + .ck-icon .ck-check {
+    stroke-dashoffset: 0;
+  }
+  .ck-input:indeterminate + .ck-icon .ck-dash {
+    opacity: 1;
+  }
+
+  /* --------------------------------------------------------------- text */
+
+  .ck-text {
+    display: flex;
+    flex-direction: column;
+    gap: 1px;
+    min-width: 0;
+  }
+  .ck-label {
+    cursor: pointer;
+  }
+  .ck-root[data-disabled] .ck-label {
+    color: var(--ck-muted);
+    cursor: not-allowed;
+  }
+  .ck-label[data-required]::after,
+  .ck-legend[data-required]::after {
+    content: " *";
+    color: var(--ck-danger);
+  }
+  .ck-description {
+    color: var(--ck-muted);
+    font-size: 0.92em;
+  }
+  .ck-error {
+    color: var(--ck-danger);
+    font-size: 0.92em;
+  }
+
+  /* -------------------------------------------------------------- group */
+
+  .ck-group {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    min-width: 0;
+    margin: 0;
+    padding: 0;
+    border: 0;
+  }
+  .ck-legend {
+    /* A floated legend joins the flex gap like any other child. */
+    float: left;
+    width: 100%;
+    margin-bottom: 2px;
+    padding: 0;
+    font-weight: 500;
+  }
+  .ck-legend + * {
+    clear: both;
+  }
+  .ck-items {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+  .ck-group[data-orientation="horizontal"] .ck-items {
+    flex-flow: row wrap;
+    gap: 8px 20px;
+  }
+  .ck-group[data-select-all] .ck-items {
+    padding-inline-start: calc(var(--ck-size) + 8px);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .ck-input,
+    .ck-check {
+      transition: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    .ck-input:is(:checked, :indeterminate) {
+      background: Highlight;
+      border-color: Highlight;
+    }
+    .ck-icon {
+      stroke: HighlightText;
+    }
+  }
+}

package/source/beta-components/combobox/README.md

@@ -17,9 +17,9 @@ import { MultiSelect, Select } from "@/components/combobox";
 import "@/components/combobox/styles.css";
 ```
 
-The stylesheet reuses the DataGrid's `--dg-*` variables when that stylesheet is
-loaded, so both components share a theme, and falls back to the same palette
-when used on its own.
+The stylesheet reads the shared `--gbs-*` variables when you set them on
+`:root`, so every component in the library shares one theme, and falls back to
+the same default palette otherwise.
 
 ## Basic usage