@seed-design/css 0.0.0-alpha-20260324091316

package/recipes/select-box.d.ts

@@ -0,0 +1,24 @@
+declare interface SelectBoxVariant {
+  /**
+  * @default "horizontal"
+  */
+  layout: "horizontal" | "vertical";
+}
+
+declare type SelectBoxVariantMap = {
+  [key in keyof SelectBoxVariant]: Array<SelectBoxVariant[key]>;
+};
+
+export declare type SelectBoxVariantProps = Partial<SelectBoxVariant>;
+
+export declare type SelectBoxSlotName = "root" | "trigger" | "content" | "body" | "label" | "description" | "footer";
+
+export declare const selectBoxVariantMap: SelectBoxVariantMap;
+
+export declare const selectBox: ((
+  props?: SelectBoxVariantProps,
+) => Record<SelectBoxSlotName, string>) & {
+  splitVariantProps: <T extends SelectBoxVariantProps>(
+    props: T,
+  ) => [SelectBoxVariantProps, Omit<T, keyof SelectBoxVariantProps>];
+}

package/recipes/select-box.layered.css

@@ -0,0 +1,148 @@
+@layer seed-components {
+  .seed-select-box__root {
+    cursor: pointer;
+    border-radius: var(--seed-radius-r3);
+    background-color: var(--seed-color-bg-transparent);
+    box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
+    transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
+    flex-direction: column;
+    display: flex;
+    position: relative;
+    overflow: hidden;
+  }
+
+  .seed-select-box__root:after {
+    content: "";
+    border-radius: inherit;
+    transition: border-color .1s var(--seed-timing-function-easing);
+    pointer-events: none;
+    border: 2px solid #0000;
+    position: absolute;
+    inset: 0;
+  }
+
+  @media (hover: hover) {
+    .seed-select-box__root:not(:is(:disabled, [disabled], [data-disabled])):is(:hover, [data-hover]) {
+      background-color: var(--seed-color-bg-transparent-pressed);
+    }
+  }
+
+  @media (hover: none) {
+    .seed-select-box__root:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
+      background-color: var(--seed-color-bg-transparent-pressed);
+    }
+  }
+
+  .seed-select-box__root:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, [data-checked]):after {
+    border-width: 2px;
+    border-color: var(--seed-color-stroke-neutral-contrast);
+  }
+
+  .seed-select-box__root:is(:disabled, [disabled], [data-disabled]) {
+    cursor: not-allowed;
+    box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
+  }
+
+  .seed-select-box__root:is(:disabled, [disabled], [data-disabled]):is(:checked, [data-checked]) {
+    box-shadow: inset 0 0 0 2px var(--seed-color-stroke-neutral-muted);
+  }
+
+  .seed-select-box__root {
+    outline: var(--seed-dimension-x0_5) solid transparent;
+    outline-offset: var(--seed-dimension-x0_5);
+  }
+
+  .seed-select-box__root:is(:focus-visible, [data-focus-visible]) {
+    outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
+    outline-offset: var(--seed-dimension-x0_5);
+  }
+
+  .seed-select-box__trigger {
+    justify-content: space-between;
+    gap: var(--seed-dimension-x1_5);
+    --seed-focus-ring: none;
+    flex-grow: 1;
+    display: flex;
+  }
+
+  .seed-select-box__content {
+    --seed-prefix-icon-size: 22px;
+    --seed-prefix-icon-color: var(--seed-color-fg-neutral);
+    display: flex;
+  }
+
+  .seed-select-box__content:is(:disabled, [disabled], [data-disabled]) {
+    --seed-prefix-icon-color: var(--seed-color-fg-disabled);
+  }
+
+  .seed-select-box__body {
+    gap: var(--seed-dimension-x0_5);
+    flex-direction: column;
+    margin-right: auto;
+    display: flex;
+  }
+
+  .seed-select-box__label {
+    align-items: center;
+    gap: var(--seed-dimension-x1);
+    color: var(--seed-color-fg-neutral);
+    font-size: var(--seed-font-size-t5);
+    line-height: var(--seed-line-height-t5);
+    font-weight: var(--seed-font-weight-medium);
+    justify-content: flex-start;
+    display: flex;
+  }
+
+  .seed-select-box__label:is(:disabled, [disabled], [data-disabled]) {
+    color: var(--seed-color-fg-disabled);
+  }
+
+  .seed-select-box__description {
+    color: var(--seed-color-fg-neutral-muted);
+    font-size: var(--seed-font-size-t3);
+    line-height: var(--seed-line-height-t3);
+    font-weight: var(--seed-font-weight-regular);
+  }
+
+  .seed-select-box__description:is(:disabled, [disabled], [data-disabled]) {
+    color: var(--seed-color-fg-disabled);
+  }
+
+  .seed-select-box__footer[data-collapsible] {
+    opacity: 0;
+    height: 0;
+    transition: height var(--seed-duration-d6) var(--seed-timing-function-easing), opacity .4s var(--seed-timing-function-easing);
+    overflow: hidden;
+  }
+
+  .seed-select-box__footer[data-collapsible]:is([data-state="open"], [data-open]) {
+    height: var(--collapsible-content-height);
+    opacity: 1;
+    transition: height .4s var(--seed-timing-function-easing), opacity var(--seed-duration-d6) var(--seed-timing-function-easing);
+  }
+
+  .seed-select-box__trigger--layout_horizontal {
+    padding-left: var(--seed-dimension-x5);
+    padding-right: var(--seed-dimension-x4);
+    padding-top: var(--seed-dimension-x4);
+    padding-bottom: var(--seed-dimension-x4);
+    align-items: center;
+  }
+
+  .seed-select-box__content--layout_horizontal {
+    align-items: center;
+    gap: var(--seed-dimension-x3);
+  }
+
+  .seed-select-box__trigger--layout_vertical {
+    padding-left: var(--seed-dimension-x4);
+    padding-right: var(--seed-dimension-x4);
+    padding-top: var(--seed-dimension-x5);
+    padding-bottom: var(--seed-dimension-x5);
+  }
+
+  .seed-select-box__content--layout_vertical {
+    gap: var(--seed-dimension-x2_5);
+    flex-direction: column;
+  }
+}

package/recipes/select-box.layered.mjs

@@ -0,0 +1,63 @@
+import './select-box.layered.css';
+import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
+
+const selectBoxSlotNames = [
+  [
+    "root",
+    "seed-select-box__root"
+  ],
+  [
+    "trigger",
+    "seed-select-box__trigger"
+  ],
+  [
+    "content",
+    "seed-select-box__content"
+  ],
+  [
+    "body",
+    "seed-select-box__body"
+  ],
+  [
+    "label",
+    "seed-select-box__label"
+  ],
+  [
+    "description",
+    "seed-select-box__description"
+  ],
+  [
+    "footer",
+    "seed-select-box__footer"
+  ]
+];
+
+const defaultVariant = {
+  "layout": "horizontal"
+};
+
+const compoundVariants = [];
+
+export const selectBoxVariantMap = {
+  "layout": [
+    "horizontal",
+    "vertical"
+  ]
+};
+
+export const selectBoxVariantKeys = Object.keys(selectBoxVariantMap);
+
+export function selectBox(props) {
+  return Object.fromEntries(
+    selectBoxSlotNames.map(([slot, className]) => {
+      return [
+        slot,
+        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
+      ];
+    }),
+  );
+}
+
+Object.assign(selectBox, { splitVariantProps: (props) => splitVariantProps(props, selectBoxVariantMap) });
+
+// @recipe(seed): select-box

package/recipes/select-box.mjs

@@ -0,0 +1,63 @@
+import './select-box.css';
+import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
+
+const selectBoxSlotNames = [
+  [
+    "root",
+    "seed-select-box__root"
+  ],
+  [
+    "trigger",
+    "seed-select-box__trigger"
+  ],
+  [
+    "content",
+    "seed-select-box__content"
+  ],
+  [
+    "body",
+    "seed-select-box__body"
+  ],
+  [
+    "label",
+    "seed-select-box__label"
+  ],
+  [
+    "description",
+    "seed-select-box__description"
+  ],
+  [
+    "footer",
+    "seed-select-box__footer"
+  ]
+];
+
+const defaultVariant = {
+  "layout": "horizontal"
+};
+
+const compoundVariants = [];
+
+export const selectBoxVariantMap = {
+  "layout": [
+    "horizontal",
+    "vertical"
+  ]
+};
+
+export const selectBoxVariantKeys = Object.keys(selectBoxVariantMap);
+
+export function selectBox(props) {
+  return Object.fromEntries(
+    selectBoxSlotNames.map(([slot, className]) => {
+      return [
+        slot,
+        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
+      ];
+    }),
+  );
+}
+
+Object.assign(selectBox, { splitVariantProps: (props) => splitVariantProps(props, selectBoxVariantMap) });
+
+// @recipe(seed): select-box

package/recipes/selectBoxCheckmark.css

@@ -0,0 +1,38 @@
+.seed-selectBoxCheckmark__root {
+    position: relative;
+    box-sizing: border-box;
+    flex: none;
+    width: var(--seed-dimension-x5);
+    height: var(--seed-dimension-x5);
+}
+.seed-selectBoxCheckmark__icon {
+    display: block;
+    position: absolute;
+    margin: auto;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    text-align: center;
+    overflow: initial;
+    width: 15px;
+    height: 15px;
+    color: var(--seed-color-fg-placeholder);
+    transition: color var(--seed-duration-color-transition) var(--seed-timing-function-easing);
+}
+@media (hover: hover) {
+    .seed-selectBoxCheckmark__icon:not(:is(:disabled, [disabled], [data-disabled])):is(:hover, [data-hover]) {
+        color: var(--seed-color-fg-neutral-subtle);
+    }
+}
+@media (hover: none) {
+    .seed-selectBoxCheckmark__icon:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
+        color: var(--seed-color-fg-neutral-subtle);
+    }
+}
+.seed-selectBoxCheckmark__icon:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, [data-checked]) {
+    color: var(--seed-color-fg-neutral);
+}
+.seed-selectBoxCheckmark__icon:is(:disabled, [disabled], [data-disabled]) {
+    color: var(--seed-color-fg-disabled);
+}

package/recipes/selectBoxCheckmark.d.ts

@@ -0,0 +1,21 @@
+declare interface SelectBoxCheckmarkVariant {
+  
+}
+
+declare type SelectBoxCheckmarkVariantMap = {
+  [key in keyof SelectBoxCheckmarkVariant]: Array<SelectBoxCheckmarkVariant[key]>;
+};
+
+export declare type SelectBoxCheckmarkVariantProps = Partial<SelectBoxCheckmarkVariant>;
+
+export declare type SelectBoxCheckmarkSlotName = "root" | "icon";
+
+export declare const selectBoxCheckmarkVariantMap: SelectBoxCheckmarkVariantMap;
+
+export declare const selectBoxCheckmark: ((
+  props?: SelectBoxCheckmarkVariantProps,
+) => Record<SelectBoxCheckmarkSlotName, string>) & {
+  splitVariantProps: <T extends SelectBoxCheckmarkVariantProps>(
+    props: T,
+  ) => [SelectBoxCheckmarkVariantProps, Omit<T, keyof SelectBoxCheckmarkVariantProps>];
+}

package/recipes/selectBoxCheckmark.layered.css

@@ -0,0 +1,42 @@
+@layer seed-components {
+  .seed-selectBoxCheckmark__root {
+    box-sizing: border-box;
+    width: var(--seed-dimension-x5);
+    height: var(--seed-dimension-x5);
+    flex: none;
+    position: relative;
+  }
+
+  .seed-selectBoxCheckmark__icon {
+    text-align: center;
+    overflow: initial;
+    width: 15px;
+    height: 15px;
+    color: var(--seed-color-fg-placeholder);
+    transition: color var(--seed-duration-color-transition) var(--seed-timing-function-easing);
+    margin: auto;
+    display: block;
+    position: absolute;
+    inset: 0;
+  }
+
+  @media (hover: hover) {
+    .seed-selectBoxCheckmark__icon:not(:is(:disabled, [disabled], [data-disabled])):is(:hover, [data-hover]) {
+      color: var(--seed-color-fg-neutral-subtle);
+    }
+  }
+
+  @media (hover: none) {
+    .seed-selectBoxCheckmark__icon:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
+      color: var(--seed-color-fg-neutral-subtle);
+    }
+  }
+
+  .seed-selectBoxCheckmark__icon:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, [data-checked]) {
+    color: var(--seed-color-fg-neutral);
+  }
+
+  .seed-selectBoxCheckmark__icon:is(:disabled, [disabled], [data-disabled]) {
+    color: var(--seed-color-fg-disabled);
+  }
+}

package/recipes/selectBoxCheckmark.layered.mjs

@@ -0,0 +1,36 @@
+import './selectBoxCheckmark.layered.css';
+import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
+
+const selectBoxCheckmarkSlotNames = [
+  [
+    "root",
+    "seed-selectBoxCheckmark__root"
+  ],
+  [
+    "icon",
+    "seed-selectBoxCheckmark__icon"
+  ]
+];
+
+const defaultVariant = {};
+
+const compoundVariants = [];
+
+export const selectBoxCheckmarkVariantMap = {};
+
+export const selectBoxCheckmarkVariantKeys = Object.keys(selectBoxCheckmarkVariantMap);
+
+export function selectBoxCheckmark(props) {
+  return Object.fromEntries(
+    selectBoxCheckmarkSlotNames.map(([slot, className]) => {
+      return [
+        slot,
+        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
+      ];
+    }),
+  );
+}
+
+Object.assign(selectBoxCheckmark, { splitVariantProps: (props) => splitVariantProps(props, selectBoxCheckmarkVariantMap) });
+
+// @recipe(seed): selectBoxCheckmark

package/recipes/selectBoxCheckmark.mjs

@@ -0,0 +1,36 @@
+import './selectBoxCheckmark.css';
+import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
+
+const selectBoxCheckmarkSlotNames = [
+  [
+    "root",
+    "seed-selectBoxCheckmark__root"
+  ],
+  [
+    "icon",
+    "seed-selectBoxCheckmark__icon"
+  ]
+];
+
+const defaultVariant = {};
+
+const compoundVariants = [];
+
+export const selectBoxCheckmarkVariantMap = {};
+
+export const selectBoxCheckmarkVariantKeys = Object.keys(selectBoxCheckmarkVariantMap);
+
+export function selectBoxCheckmark(props) {
+  return Object.fromEntries(
+    selectBoxCheckmarkSlotNames.map(([slot, className]) => {
+      return [
+        slot,
+        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
+      ];
+    }),
+  );
+}
+
+Object.assign(selectBoxCheckmark, { splitVariantProps: (props) => splitVariantProps(props, selectBoxCheckmarkVariantMap) });
+
+// @recipe(seed): selectBoxCheckmark

package/recipes/shared.mjs

@@ -0,0 +1,48 @@
+export const createClassName = (className, variants, compoundVariants = []) => {
+  const variantKeys = Object.keys(variants)
+
+  const variantValues = variantKeys.map((key) => variants[key]);
+
+  const variantClassName = variantKeys
+    .map((key, index) => `${className}--${key}_${variantValues[index]}`)
+    .join(" ");
+
+  const compountVariantClassName = compoundVariants
+    .filter((compoundVariant) =>
+      Object.keys(compoundVariant).every((key) => compoundVariant[key] === variants[key]),
+    )
+    .map(
+      (compoundVariant) =>
+        `${className}--${Object.keys(compoundVariant)
+          .map((key) => {
+            return `${key}_${compoundVariant[key]}`;
+          })
+          .join("-")}`,
+    )
+    .join(" ");
+
+  return [className, variantClassName, compountVariantClassName].filter(Boolean).join(" ");
+};
+
+export function mergeVariants(a, b) {
+  const result = { ...a };
+  for (const k in b) {
+    if (b[k] != null) {
+      result[k] = b[k];
+    }
+  }
+  return result;
+}
+
+export function splitVariantProps(props, variantMap) {
+  const variantProps = {};
+  const otherProps = {};
+  for (const key in props) {
+    if (variantMap[key] != null) {
+      variantProps[key] = props[key];
+    } else {
+      otherProps[key] = props[key];
+    }
+  }
+  return [variantProps, otherProps];
+}

package/recipes/skeleton.css

@@ -0,0 +1,79 @@
+.seed-skeleton {
+    display: inline-block;
+    box-sizing: border-box;
+    overflow: hidden;
+    --seed-box-width-base: initial;
+    --seed-box-width-sm: var(--seed-box-width-base);
+    --seed-box-width-md: var(--seed-box-width-sm);
+    --seed-box-width-lg: var(--seed-box-width-md);
+    --seed-box-width-xl: var(--seed-box-width-lg);
+    --seed-box-width: var(--seed-box-width-base);
+    --seed-box-height-base: initial;
+    --seed-box-height-sm: var(--seed-box-height-base);
+    --seed-box-height-md: var(--seed-box-height-sm);
+    --seed-box-height-lg: var(--seed-box-height-md);
+    --seed-box-height-xl: var(--seed-box-height-lg);
+    --seed-box-height: var(--seed-box-height-base);
+    width: var(--seed-box-width);
+    height: var(--seed-box-height);
+}
+.seed-skeleton::after {
+    content: '';
+    display: block;
+    width: 100%;
+    height: 100%;
+    background-repeat: no-repeat;
+    animation-fill-mode: forwards;
+    animation-name: slide-x;
+    animation-duration: 1.5s;
+    animation-timing-function: var(--seed-timing-function-easing);
+    animation-iteration-count: infinite;
+}
+.seed-skeleton--radius_0 {
+    border-radius: 0px;
+}
+.seed-skeleton--radius_8 {
+    border-radius: 8px;
+}
+.seed-skeleton--radius_16 {
+    border-radius: 16px;
+}
+.seed-skeleton--radius_full {
+    border-radius: var(--seed-radius-full);
+}
+.seed-skeleton--tone_neutral {
+    background: var(--seed-color-palette-gray-200);
+}
+.seed-skeleton--tone_neutral::after {
+    background-image: linear-gradient(90deg, var(--seed-gradient-shimmer-neutral));
+}
+.seed-skeleton--tone_magic {
+    background: var(--seed-color-bg-magic-weak);
+}
+.seed-skeleton--tone_magic::after {
+    background-image: linear-gradient(90deg, var(--seed-gradient-shimmer-magic));
+}
+@media (min-width: 480px) {
+    .seed-skeleton {
+        --seed-box-width: var(--seed-box-width-sm);
+        --seed-box-height: var(--seed-box-height-sm);
+    }
+}
+@media (min-width: 768px) {
+    .seed-skeleton {
+        --seed-box-width: var(--seed-box-width-md);
+        --seed-box-height: var(--seed-box-height-md);
+    }
+}
+@media (min-width: 1280px) {
+    .seed-skeleton {
+        --seed-box-width: var(--seed-box-width-lg);
+        --seed-box-height: var(--seed-box-height-lg);
+    }
+}
+@media (min-width: 1440px) {
+    .seed-skeleton {
+        --seed-box-width: var(--seed-box-width-xl);
+        --seed-box-height: var(--seed-box-height-xl);
+    }
+}

package/recipes/skeleton.d.ts

@@ -0,0 +1,26 @@
+declare interface SkeletonVariant {
+  /**
+  * @default 8
+  */
+  radius: "0" | "8" | "16" | "full";
+/**
+  * @default "neutral"
+  */
+  tone: "neutral" | "magic";
+}
+
+declare type SkeletonVariantMap = {
+  [key in keyof SkeletonVariant]: Array<SkeletonVariant[key]>;
+};
+
+export declare type SkeletonVariantProps = Partial<SkeletonVariant>;
+
+export declare const skeletonVariantMap: SkeletonVariantMap;
+
+export declare const skeleton: ((
+  props?: SkeletonVariantProps,
+) => string) & {
+  splitVariantProps: <T extends SkeletonVariantProps>(
+    props: T,
+  ) => [SkeletonVariantProps, Omit<T, keyof SkeletonVariantProps>];
+}