@seed-design/lynx-css 0.11.1 → 0.12.0

package/recipes/scroll-fog.mjs

@@ -0,0 +1,78 @@
+import './scroll-fog.css';
+import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
+
+const scrollFogSlotNames = [
+  [
+    "root",
+    "seed-scroll-fog__root"
+  ],
+  [
+    "topMask",
+    "seed-scroll-fog__topMask"
+  ],
+  [
+    "bottomMask",
+    "seed-scroll-fog__bottomMask"
+  ],
+  [
+    "leftMask",
+    "seed-scroll-fog__leftMask"
+  ],
+  [
+    "rightMask",
+    "seed-scroll-fog__rightMask"
+  ],
+  [
+    "verticalScroll",
+    "seed-scroll-fog__verticalScroll"
+  ],
+  [
+    "horizontalScroll",
+    "seed-scroll-fog__horizontalScroll"
+  ]
+];
+
+const defaultVariant = {
+  "top": false,
+  "bottom": false,
+  "left": false,
+  "right": false
+};
+
+const compoundVariants = [];
+
+export const scrollFogVariantMap = {
+  "top": [
+    true,
+    false
+  ],
+  "bottom": [
+    true,
+    false
+  ],
+  "left": [
+    true,
+    false
+  ],
+  "right": [
+    true,
+    false
+  ]
+};
+
+export const scrollFogVariantKeys = Object.keys(scrollFogVariantMap);
+
+export function scrollFog(props) {
+  return Object.fromEntries(
+    scrollFogSlotNames.map(([slot, className]) => {
+      return [
+        slot,
+        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
+      ];
+    }),
+  );
+}
+
+Object.assign(scrollFog, { splitVariantProps: (props) => splitVariantProps(props, scrollFogVariantMap) });
+
+// @recipe(seed): scroll-fog

package/recipes/select-item.css

@@ -0,0 +1,105 @@
+.seed-select-item__root {
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    flex-shrink: 0
+}
+.seed-select-item__pressedOverlay {
+    position: absolute;
+    top: 0;
+    right: var(--seed-dimension-x2);
+    bottom: 0;
+    left: var(--seed-dimension-x2);
+    border-radius: var(--seed-radius-r3);
+    background-color: var(--seed-color-bg-transparent-pressed);
+    opacity: 0;
+    transition-property: opacity;
+    transition-duration: var(--seed-duration-color-transition);
+    transition-timing-function: var(--seed-timing-function-easing);
+    pointer-events: none
+}
+.seed-select-item__body {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    min-width: 0;
+    gap: var(--seed-dimension-x0_5)
+}
+.seed-select-item__label {
+    color: var(--seed-color-fg-neutral);
+    font-weight: var(--seed-font-weight-regular)
+}
+.seed-select-item__description {
+    color: var(--seed-color-fg-neutral-subtle);
+    font-weight: var(--seed-font-weight-regular)
+}
+.seed-select-item__prefixIcon {
+    flex-shrink: 0;
+    color: var(--seed-color-fg-neutral)
+}
+.seed-select-item__indicator {
+    flex-shrink: 0;
+    color: var(--seed-color-fg-neutral)
+}
+.seed-select-item__root--size_large {
+    padding-top: var(--seed-dimension-x3);
+    padding-bottom: var(--seed-dimension-x3);
+    padding-left: var(--seed-dimension-x4);
+    padding-right: var(--seed-dimension-x4);
+    gap: var(--seed-dimension-x3)
+}
+.seed-select-item__prefixIcon--size_large {
+    width: 22px;
+    height: 22px
+}
+.seed-select-item__label--size_large {
+    font-size: var(--seed-font-size-t5);
+    line-height: var(--seed-line-height-t5)
+}
+.seed-select-item__description--size_large {
+    font-size: var(--seed-font-size-t3);
+    line-height: var(--seed-line-height-t3)
+}
+.seed-select-item__indicator--size_large {
+    width: var(--seed-dimension-x3_5);
+    height: var(--seed-dimension-x3_5)
+}
+.seed-select-item__root--size_medium {
+    padding-top: var(--seed-dimension-x2_5);
+    padding-bottom: var(--seed-dimension-x2_5);
+    padding-left: var(--seed-dimension-x4);
+    padding-right: var(--seed-dimension-x4);
+    gap: var(--seed-dimension-x2)
+}
+.seed-select-item__prefixIcon--size_medium {
+    width: var(--seed-dimension-x4_5);
+    height: var(--seed-dimension-x4_5)
+}
+.seed-select-item__label--size_medium {
+    font-size: var(--seed-font-size-t4);
+    line-height: var(--seed-line-height-t4)
+}
+.seed-select-item__description--size_medium {
+    font-size: var(--seed-font-size-t2);
+    line-height: var(--seed-line-height-t2)
+}
+.seed-select-item__indicator--size_medium {
+    width: var(--seed-dimension-x3);
+    height: var(--seed-dimension-x3)
+}
+.seed-select-item__prefixIcon--disabled_true {
+    color: var(--seed-color-fg-disabled)
+}
+.seed-select-item__label--disabled_true {
+    color: var(--seed-color-fg-disabled)
+}
+.seed-select-item__description--disabled_true {
+    color: var(--seed-color-fg-disabled)
+}
+.seed-select-item__indicator--disabled_true {
+    color: var(--seed-color-fg-disabled)
+}
+.seed-select-item__pressedOverlay--pressed_true-disabled_false {
+    opacity: 1
+}

package/recipes/select-item.d.ts

@@ -0,0 +1,36 @@
+declare interface SelectItemVariant {
+  /**
+  * @default "large"
+  */
+  size: "large" | "medium";
+/**
+  * @default false
+  */
+  disabled: boolean;
+/**
+  * @default false
+  */
+  selected: boolean;
+/**
+  * @default false
+  */
+  pressed: boolean;
+}
+
+declare type SelectItemVariantMap = {
+  [key in keyof SelectItemVariant]: Array<SelectItemVariant[key]>;
+};
+
+export declare type SelectItemVariantProps = Partial<SelectItemVariant>;
+
+export declare type SelectItemSlotName = "root" | "pressedOverlay" | "body" | "label" | "description" | "prefixIcon" | "indicator";
+
+export declare const selectItemVariantMap: SelectItemVariantMap;
+
+export declare const selectItem: ((
+  props?: SelectItemVariantProps,
+) => Record<SelectItemSlotName, string>) & {
+  splitVariantProps: <T extends SelectItemVariantProps>(
+    props: T,
+  ) => [SelectItemVariantProps, Omit<T, keyof SelectItemVariantProps>];
+}

package/recipes/select-item.mjs

@@ -0,0 +1,83 @@
+import './select-item.css';
+import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
+
+const selectItemSlotNames = [
+  [
+    "root",
+    "seed-select-item__root"
+  ],
+  [
+    "pressedOverlay",
+    "seed-select-item__pressedOverlay"
+  ],
+  [
+    "body",
+    "seed-select-item__body"
+  ],
+  [
+    "label",
+    "seed-select-item__label"
+  ],
+  [
+    "description",
+    "seed-select-item__description"
+  ],
+  [
+    "prefixIcon",
+    "seed-select-item__prefixIcon"
+  ],
+  [
+    "indicator",
+    "seed-select-item__indicator"
+  ]
+];
+
+const defaultVariant = {
+  "size": "large",
+  "disabled": false,
+  "selected": false,
+  "pressed": false
+};
+
+const compoundVariants = [
+  {
+    "pressed": true,
+    "disabled": false
+  }
+];
+
+export const selectItemVariantMap = {
+  "size": [
+    "large",
+    "medium"
+  ],
+  "disabled": [
+    true,
+    false
+  ],
+  "selected": [
+    true,
+    false
+  ],
+  "pressed": [
+    true,
+    false
+  ]
+};
+
+export const selectItemVariantKeys = Object.keys(selectItemVariantMap);
+
+export function selectItem(props) {
+  return Object.fromEntries(
+    selectItemSlotNames.map(([slot, className]) => {
+      return [
+        slot,
+        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
+      ];
+    }),
+  );
+}
+
+Object.assign(selectItem, { splitVariantProps: (props) => splitVariantProps(props, selectItemVariantMap) });
+
+// @recipe(seed): select-item

package/recipes/select-trigger.css

@@ -0,0 +1,147 @@
+.seed-select-trigger__root {
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    width: 100%;
+    overflow: hidden;
+    background-color: var(--seed-color-bg-transparent);
+    border-style: solid;
+    border-width: 1px;
+    border-color: var(--seed-color-stroke-neutral-weak)
+}
+.seed-select-trigger__pressedOverlay {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    opacity: 0;
+    background-color: var(--seed-color-bg-transparent-pressed);
+    transition-property: opacity;
+    transition-duration: var(--seed-duration-color-transition);
+    transition-timing-function: var(--seed-timing-function-easing);
+    pointer-events: none
+}
+.seed-select-trigger__value {
+    flex-grow: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    color: var(--seed-color-fg-neutral);
+    font-weight: var(--seed-font-weight-regular);
+    pointer-events: none
+}
+.seed-select-trigger__placeholder {
+    flex-grow: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    color: var(--seed-color-fg-placeholder);
+    font-weight: var(--seed-font-weight-regular);
+    pointer-events: none
+}
+.seed-select-trigger__prefixIcon {
+    flex-shrink: 0;
+    color: var(--seed-color-fg-neutral-muted);
+    pointer-events: none
+}
+.seed-select-trigger__suffixIcon {
+    flex-shrink: 0;
+    color: var(--seed-color-fg-neutral-muted);
+    transform: rotate(0deg);
+    transition-property: transform;
+    transition-duration: var(--seed-duration-d2);
+    transition-timing-function: var(--seed-timing-function-easing);
+    pointer-events: none
+}
+.seed-select-trigger__root--size_large {
+    height: var(--seed-dimension-x13);
+    gap: var(--seed-dimension-x2_5);
+    padding-left: var(--seed-dimension-x4);
+    padding-right: var(--seed-dimension-x4);
+    border-radius: var(--seed-radius-r3)
+}
+.seed-select-trigger__pressedOverlay--size_large {
+    border-radius: var(--seed-radius-r3)
+}
+.seed-select-trigger__value--size_large {
+    font-size: var(--seed-font-size-t5);
+    line-height: var(--seed-line-height-t5)
+}
+.seed-select-trigger__placeholder--size_large {
+    font-size: var(--seed-font-size-t5);
+    line-height: var(--seed-line-height-t5)
+}
+.seed-select-trigger__prefixIcon--size_large {
+    width: var(--seed-dimension-x5);
+    height: var(--seed-dimension-x5)
+}
+.seed-select-trigger__suffixIcon--size_large {
+    width: var(--seed-dimension-x5);
+    height: var(--seed-dimension-x5)
+}
+.seed-select-trigger__root--size_medium {
+    height: var(--seed-dimension-x10);
+    gap: var(--seed-dimension-x2);
+    padding-left: var(--seed-dimension-x3_5);
+    padding-right: var(--seed-dimension-x3_5);
+    border-radius: var(--seed-radius-r2)
+}
+.seed-select-trigger__pressedOverlay--size_medium {
+    border-radius: var(--seed-radius-r2)
+}
+.seed-select-trigger__value--size_medium {
+    font-size: var(--seed-font-size-t4);
+    line-height: var(--seed-line-height-t4)
+}
+.seed-select-trigger__placeholder--size_medium {
+    font-size: var(--seed-font-size-t4);
+    line-height: var(--seed-line-height-t4)
+}
+.seed-select-trigger__prefixIcon--size_medium {
+    width: var(--seed-dimension-x4);
+    height: var(--seed-dimension-x4)
+}
+.seed-select-trigger__suffixIcon--size_medium {
+    width: var(--seed-dimension-x4);
+    height: var(--seed-dimension-x4)
+}
+.seed-select-trigger__root--disabled_true {
+    background-color: var(--seed-color-bg-disabled)
+}
+.seed-select-trigger__value--disabled_true {
+    color: var(--seed-color-fg-disabled)
+}
+.seed-select-trigger__placeholder--disabled_true {
+    color: var(--seed-color-fg-disabled)
+}
+.seed-select-trigger__prefixIcon--disabled_true {
+    color: var(--seed-color-fg-disabled)
+}
+.seed-select-trigger__suffixIcon--disabled_true {
+    color: var(--seed-color-fg-disabled)
+}
+.seed-select-trigger__root--readOnly_true {
+    background-color: var(--seed-color-bg-disabled)
+}
+.seed-select-trigger__value--readOnly_true {
+    color: var(--seed-color-fg-neutral)
+}
+.seed-select-trigger__placeholder--readOnly_true {
+    color: var(--seed-color-fg-placeholder)
+}
+.seed-select-trigger__root--invalid_true {
+    border-width: 2px;
+    border-color: var(--seed-color-stroke-critical-solid)
+}
+.seed-select-trigger__suffixIcon--open_true {
+    transform: rotate(180deg);
+    transition-duration: var(--seed-duration-d3);
+    transition-timing-function: var(--seed-timing-function-easing)
+}
+.seed-select-trigger__pressedOverlay--pressed_true-disabled_false-readOnly_false {
+    opacity: 1
+}

package/recipes/select-trigger.d.ts

@@ -0,0 +1,44 @@
+declare interface SelectTriggerVariant {
+  /**
+  * @default "large"
+  */
+  size: "large" | "medium";
+/**
+  * @default false
+  */
+  disabled: boolean;
+/**
+  * @default false
+  */
+  readOnly: boolean;
+/**
+  * @default false
+  */
+  invalid: boolean;
+/**
+  * @default false
+  */
+  open: boolean;
+/**
+  * @default false
+  */
+  pressed: boolean;
+}
+
+declare type SelectTriggerVariantMap = {
+  [key in keyof SelectTriggerVariant]: Array<SelectTriggerVariant[key]>;
+};
+
+export declare type SelectTriggerVariantProps = Partial<SelectTriggerVariant>;
+
+export declare type SelectTriggerSlotName = "root" | "pressedOverlay" | "value" | "placeholder" | "prefixIcon" | "suffixIcon";
+
+export declare const selectTriggerVariantMap: SelectTriggerVariantMap;
+
+export declare const selectTrigger: ((
+  props?: SelectTriggerVariantProps,
+) => Record<SelectTriggerSlotName, string>) & {
+  splitVariantProps: <T extends SelectTriggerVariantProps>(
+    props: T,
+  ) => [SelectTriggerVariantProps, Omit<T, keyof SelectTriggerVariantProps>];
+}

package/recipes/select-trigger.mjs

@@ -0,0 +1,90 @@
+import './select-trigger.css';
+import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
+
+const selectTriggerSlotNames = [
+  [
+    "root",
+    "seed-select-trigger__root"
+  ],
+  [
+    "pressedOverlay",
+    "seed-select-trigger__pressedOverlay"
+  ],
+  [
+    "value",
+    "seed-select-trigger__value"
+  ],
+  [
+    "placeholder",
+    "seed-select-trigger__placeholder"
+  ],
+  [
+    "prefixIcon",
+    "seed-select-trigger__prefixIcon"
+  ],
+  [
+    "suffixIcon",
+    "seed-select-trigger__suffixIcon"
+  ]
+];
+
+const defaultVariant = {
+  "size": "large",
+  "disabled": false,
+  "readOnly": false,
+  "invalid": false,
+  "open": false,
+  "pressed": false
+};
+
+const compoundVariants = [
+  {
+    "pressed": true,
+    "disabled": false,
+    "readOnly": false
+  }
+];
+
+export const selectTriggerVariantMap = {
+  "size": [
+    "large",
+    "medium"
+  ],
+  "disabled": [
+    true,
+    false
+  ],
+  "readOnly": [
+    true,
+    false
+  ],
+  "invalid": [
+    true,
+    false
+  ],
+  "open": [
+    true,
+    false
+  ],
+  "pressed": [
+    true,
+    false
+  ]
+};
+
+export const selectTriggerVariantKeys = Object.keys(selectTriggerVariantMap);
+
+export function selectTrigger(props) {
+  return Object.fromEntries(
+    selectTriggerSlotNames.map(([slot, className]) => {
+      return [
+        slot,
+        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
+      ];
+    }),
+  );
+}
+
+Object.assign(selectTrigger, { splitVariantProps: (props) => splitVariantProps(props, selectTriggerVariantMap) });
+
+// @recipe(seed): select-trigger

package/recipes/select.css

@@ -0,0 +1,88 @@
+.seed-select__positioner {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 0
+}
+.seed-select__backdrop {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0
+}
+.seed-select__content {
+    position: absolute;
+    display: flex;
+    flex-direction: column;
+    border-radius: var(--seed-radius-r5);
+    background-color: var(--seed-color-bg-layer-floating);
+    box-shadow: var(--seed-shadow-s3);
+    overflow: hidden;
+    transition-property: opacity, transform
+}
+.seed-select__scrollArea {
+    width: 100%;
+    max-height: 480px
+}
+.seed-select__scrollContent {
+    display: flex;
+    flex-direction: column;
+    padding-top: var(--seed-dimension-x2);
+    padding-bottom: var(--seed-dimension-x2);
+    gap: var(--seed-dimension-x2)
+}
+.seed-select__group {
+    display: flex;
+    flex-direction: column;
+    flex-shrink: 0
+}
+.seed-select__groupLabel {
+    color: var(--seed-color-fg-neutral-subtle);
+    flex-shrink: 0
+}
+.seed-select__separator {
+    height: 1px;
+    flex-shrink: 0;
+    margin-left: var(--seed-dimension-x4);
+    margin-right: var(--seed-dimension-x4);
+    margin-bottom: var(--seed-dimension-x2);
+    background-color: var(--seed-color-stroke-neutral-muted)
+}
+.seed-select__groupLabel--size_large {
+    padding-top: var(--seed-dimension-x2_5);
+    padding-bottom: var(--seed-dimension-x2_5);
+    padding-left: var(--seed-dimension-x4);
+    padding-right: var(--seed-dimension-x4);
+    font-size: var(--seed-font-size-t4);
+    line-height: var(--seed-line-height-t4);
+    font-weight: var(--seed-font-weight-medium)
+}
+.seed-select__groupLabel--size_medium {
+    padding-top: var(--seed-dimension-x2);
+    padding-bottom: var(--seed-dimension-x2);
+    padding-left: var(--seed-dimension-x4);
+    padding-right: var(--seed-dimension-x4);
+    font-size: var(--seed-font-size-t3);
+    line-height: var(--seed-line-height-t3);
+    font-weight: var(--seed-font-weight-regular)
+}
+.seed-select__content--open_true {
+    opacity: 1;
+    transform: scale(1);
+    transition-duration: var(--seed-duration-d3);
+    transition-timing-function: var(--seed-timing-function-enter)
+}
+.seed-select__content--open_false {
+    opacity: 0;
+    transform: scale(0.95);
+    transition-duration: var(--seed-duration-d2);
+    transition-timing-function: var(--seed-timing-function-exit)
+}
+.seed-select__content--positioned_false {
+    opacity: 0;
+    transform: scale(0.95);
+    transition-duration: 0s
+}

package/recipes/select.d.ts

@@ -0,0 +1,32 @@
+declare interface SelectVariant {
+  /**
+  * @default "large"
+  */
+  size: "large" | "medium";
+/**
+  * @default false
+  */
+  open: boolean;
+/**
+  * @default false
+  */
+  positioned: boolean;
+}
+
+declare type SelectVariantMap = {
+  [key in keyof SelectVariant]: Array<SelectVariant[key]>;
+};
+
+export declare type SelectVariantProps = Partial<SelectVariant>;
+
+export declare type SelectSlotName = "positioner" | "backdrop" | "content" | "scrollArea" | "scrollContent" | "group" | "groupLabel" | "separator";
+
+export declare const selectVariantMap: SelectVariantMap;
+
+export declare const select: ((
+  props?: SelectVariantProps,
+) => Record<SelectSlotName, string>) & {
+  splitVariantProps: <T extends SelectVariantProps>(
+    props: T,
+  ) => [SelectVariantProps, Omit<T, keyof SelectVariantProps>];
+}