@seed-design/lynx-css 0.14.2 → 1.0.0

package/recipes/select-trigger.d.ts

@@ -31,7 +31,7 @@ declare type SelectTriggerVariantMap = {
 
 export declare type SelectTriggerVariantProps = Partial<SelectTriggerVariant>;
 
-export declare type SelectTriggerSlotName = "root" | "pressedOverlay" | "value" | "placeholder" | "prefixIcon" | "suffixIcon";
+export declare type SelectTriggerSlotName = "root" | "scaleContent" | "pressedOverlay" | "value" | "placeholder" | "prefixIcon" | "suffixIcon";
 
 export declare const selectTriggerVariantMap: SelectTriggerVariantMap;
 

package/recipes/select-trigger.mjs

@@ -6,6 +6,10 @@ const selectTriggerSlotNames = [
     "root",
     "seed-select-trigger__root"
   ],
+  [
+    "scaleContent",
+    "seed-select-trigger__scaleContent"
+  ],
   [
     "pressedOverlay",
     "seed-select-trigger__pressedOverlay"

package/recipes/select.css

@@ -1,17 +1,5 @@
 .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
+    z-index: 99
 }
 .seed-select__content {
     position: absolute;

package/recipes/select.d.ts

@@ -19,7 +19,7 @@ declare type SelectVariantMap = {
 
 export declare type SelectVariantProps = Partial<SelectVariant>;
 
-export declare type SelectSlotName = "positioner" | "backdrop" | "content" | "scrollArea" | "scrollContent" | "group" | "groupLabel" | "separator";
+export declare type SelectSlotName = "positioner" | "content" | "scrollArea" | "scrollContent" | "group" | "groupLabel" | "separator";
 
 export declare const selectVariantMap: SelectVariantMap;
 

package/recipes/select.mjs

@@ -6,10 +6,6 @@ const selectSlotNames = [
     "positioner",
     "seed-select__positioner"
   ],
-  [
-    "backdrop",
-    "seed-select__backdrop"
-  ],
   [
     "content",
     "seed-select__content"

package/recipes/slider-marker.css

@@ -3,8 +3,8 @@
     top: 0;
     bottom: 0;
     width: max-content;
-    left: calc(var(--slider-marker-left, 0%) + var(--slider-marker-offset, 0px));
-    color: var(--slider-marker-color, var(--seed-color-fg-neutral-muted));
+    left: calc(var(--slider-marker-left, 0%) + var(--seed-dimension-x5) * var(--slider-marker-offset-ratio, 0));
+    color: var(--seed-color-fg-neutral-muted);
     font-weight: var(--seed-font-weight-regular);
     font-size: var(--seed-font-size-t3);
     line-height: var(--seed-line-height-t3)

package/recipes/slider-tick.css

@@ -2,7 +2,7 @@
     position: absolute;
     top: 50%;
     height: 100%;
-    left: calc(var(--slider-tick-left, 0%) + var(--slider-tick-offset, 0px));
+    left: calc(var(--slider-tick-left, 0%) + var(--seed-dimension-x5) * var(--slider-tick-offset-ratio, 0));
     background-color: var(--seed-color-fg-on-neutral-solid);
     transform: translate(-50%, -50%)
 }

package/recipes/slider.css

@@ -32,7 +32,7 @@
 .seed-slider__thumb {
     position: absolute;
     top: 50%;
-    left: calc(var(--slider-thumb-left, 0%) + var(--slider-thumb-offset, 0px));
+    left: calc(var(--slider-thumb-left, 0%) + var(--seed-dimension-x5) * var(--slider-thumb-offset-ratio, 0));
     width: var(--seed-dimension-x5);
     height: var(--seed-dimension-x5);
     background-color: var(--seed-color-bg-neutral-solid);
@@ -51,6 +51,7 @@
     top: 50%;
     left: calc(var(--slider-value-indicator-left, 0%) + var(--slider-value-indicator-offset, 0px));
     width: max-content;
+    height: max-content;
     padding-top: 8px;
     padding-right: 8px;
     padding-bottom: 8px;
@@ -99,7 +100,6 @@
     line-height: var(--seed-line-height-t3);
     font-weight: var(--seed-font-weight-medium);
     flex-shrink: 0;
-    white-space: nowrap;
     text-align: center
 }
 .seed-slider__track--disabled_true {
@@ -111,9 +111,6 @@
 .seed-slider__thumb--disabled_true {
     background-color: var(--seed-color-fg-disabled)
 }
-.seed-slider__markers--disabled_true {
-    --slider-marker-color: var(--seed-color-fg-disabled)
-}
 .seed-slider__range--dragging_true {
     transition: none
 }

package/recipes/tabs.css

@@ -3,10 +3,7 @@
 }
 .seed-tabs__list {
     position: relative;
-    background-color: var(--seed-color-bg-layer-default);
-    border-bottom-width: 1px;
-    border-bottom-style: solid;
-    border-bottom-color: var(--seed-color-stroke-neutral-muted)
+    background-color: var(--seed-color-bg-layer-default)
 }
 .seed-tabs__listContent {
     display: flex;
@@ -15,7 +12,9 @@
     flex-wrap: nowrap;
     align-items: stretch;
     width: max-content;
-    min-width: 100%
+    min-width: 100%;
+    padding-bottom: 1px;
+    box-shadow: inset 0 -1px 0 0 var(--seed-color-stroke-neutral-muted)
 }
 .seed-tabs__carousel {
     display: flex;
@@ -34,9 +33,9 @@
     left: 0px;
     bottom: 0px;
     height: 2px;
-    width: var(--tabs-indicator-width, 0px);
     background-color: var(--seed-color-fg-neutral);
-    transform: translateX(var(--tabs-indicator-x, 0px));
+    box-sizing: border-box;
+    background-clip: content-box;
     transition-property: transform, width;
     transition-duration: var(--seed-duration-d4);
     transition-timing-function: var(--seed-timing-function-easing)
@@ -62,8 +61,8 @@
     padding-right: 0px
 }
 .seed-tabs__indicator--triggerLayout_fill {
-    transform: translateX(calc(var(--tabs-indicator-x, 0px) + var(--seed-dimension-spacing-x-global-gutter)));
-    width: calc(var(--tabs-indicator-width, 0px) - 2 * var(--seed-dimension-spacing-x-global-gutter))
+    padding-left: var(--seed-dimension-spacing-x-global-gutter);
+    padding-right: var(--seed-dimension-spacing-x-global-gutter)
 }
 .seed-tabs__trigger--triggerLayout_fill {
     flex: 1
@@ -73,8 +72,9 @@
     padding-right: var(--seed-dimension-spacing-x-global-gutter)
 }
 .seed-tabs__indicator--triggerLayout_hug {
-    transform: translateX(calc(var(--tabs-indicator-x, 0px) + var(--seed-dimension-spacing-x-global-gutter) + 0px));
-    width: calc(var(--tabs-indicator-width, 0px) - 2 * 0px)
+    left: var(--seed-dimension-spacing-x-global-gutter);
+    padding-left: 0px;
+    padding-right: 0px
 }
 .seed-tabs__root--contentLayout_fill {
     display: flex;

package/recipes/wheel-picker.css

@@ -0,0 +1,151 @@
+.seed-wheel-picker__root {
+    position: relative;
+    width: 100%;
+    z-index: 0;
+    overflow: hidden;
+    background-color: var(--seed-color-bg-layer-floating);
+}
+.seed-wheel-picker__scrollFog {
+    position: relative;
+    z-index: 1;
+    height: 100%;
+    overflow: hidden;
+}
+.seed-wheel-picker__columns {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    height: 100%;
+    justify-content: center;
+}
+.seed-wheel-picker__column {
+    position: relative;
+    flex-shrink: 0;
+    width: max-content;
+    height: 100%;
+}
+.seed-wheel-picker__track {
+    color: var(--seed-color-fg-disabled);
+}
+.seed-wheel-picker__sizingContent {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: max-content;
+    height: 0;
+    overflow: hidden;
+    opacity: 0;
+    pointer-events: none;
+}
+.seed-wheel-picker__item {
+    display: flex;
+    flex-direction: row;
+    height: 100%;
+    align-items: center;
+    justify-content: center;
+    color: var(--seed-color-fg-disabled);
+}
+.seed-wheel-picker__item text {
+    color: var(--seed-color-fg-disabled);
+}
+.seed-wheel-picker__itemLabel {
+    display: flex;
+    flex-direction: row;
+    flex-shrink: 0;
+    width: max-content;
+    height: 100%;
+    align-items: center;
+    justify-content: center;
+    padding-left: var(--seed-dimension-x4);
+    padding-right: var(--seed-dimension-x4);
+    font-weight: var(--seed-font-weight-medium);
+    color: var(--seed-color-fg-disabled);
+}
+.seed-wheel-picker__itemText {
+    font-weight: var(--seed-font-weight-medium);
+    color: var(--seed-color-fg-disabled);
+}
+.seed-wheel-picker__selectionIndicator {
+    position: absolute;
+    z-index: 0;
+    left: var(--seed-dimension-x4);
+    right: var(--seed-dimension-x4);
+    top: 50%;
+    transform: translateY(-50%);
+    border-radius: var(--seed-radius-r2);
+    background-color: var(--seed-color-bg-neutral-weak);
+    pointer-events: none;
+}
+.seed-wheel-picker__root--size_small {
+    height: var(--seed-wheel-picker-viewport-size, 180px);
+}
+.seed-wheel-picker__selectionIndicator--size_small {
+    height: var(--seed-wheel-picker-item-size, 36px);
+}
+.seed-wheel-picker__itemLabel--size_small {
+    font-size: var(--seed-font-size-t7-static);
+    line-height: var(--seed-line-height-t7-static);
+}
+.seed-wheel-picker__itemText--size_small {
+    font-size: var(--seed-font-size-t7-static);
+    line-height: var(--seed-line-height-t7-static);
+}
+.seed-wheel-picker__root--size_medium {
+    height: var(--seed-wheel-picker-viewport-size, 220px);
+}
+.seed-wheel-picker__selectionIndicator--size_medium {
+    height: var(--seed-wheel-picker-item-size, 44px);
+}
+.seed-wheel-picker__itemLabel--size_medium {
+    font-size: var(--seed-font-size-t10-static);
+    line-height: var(--seed-line-height-t10-static);
+}
+.seed-wheel-picker__itemText--size_medium {
+    font-size: var(--seed-font-size-t10-static);
+    line-height: var(--seed-line-height-t10-static);
+}
+.seed-wheel-picker__track--selected_true {
+    color: var(--seed-color-fg-neutral);
+}
+.seed-wheel-picker__item--selected_true {
+    color: var(--seed-color-fg-neutral);
+}
+.seed-wheel-picker__item--selected_true text {
+    color: var(--seed-color-fg-neutral);
+}
+.seed-wheel-picker__itemLabel--selected_true {
+    color: var(--seed-color-fg-neutral);
+}
+.seed-wheel-picker__itemText--selected_true {
+    color: var(--seed-color-fg-neutral);
+}
+.seed-wheel-picker__track--disabled_true {
+    color: var(--seed-color-fg-disabled);
+}
+.seed-wheel-picker__item--disabled_true {
+    color: var(--seed-color-fg-disabled);
+}
+.seed-wheel-picker__item--disabled_true text {
+    color: var(--seed-color-fg-disabled);
+}
+.seed-wheel-picker__itemLabel--disabled_true {
+    color: var(--seed-color-fg-disabled);
+}
+.seed-wheel-picker__itemText--disabled_true {
+    color: var(--seed-color-fg-disabled);
+}
+.seed-wheel-picker__track--selected_true-disabled_true {
+    color: var(--seed-color-fg-disabled);
+}
+.seed-wheel-picker__item--selected_true-disabled_true {
+    color: var(--seed-color-fg-disabled);
+}
+.seed-wheel-picker__item--selected_true-disabled_true text {
+    color: var(--seed-color-fg-disabled);
+}
+.seed-wheel-picker__itemLabel--selected_true-disabled_true {
+    color: var(--seed-color-fg-disabled);
+}
+.seed-wheel-picker__itemText--selected_true-disabled_true {
+    color: var(--seed-color-fg-disabled);
+}

package/recipes/wheel-picker.d.ts

@@ -0,0 +1,32 @@
+declare interface WheelPickerVariant {
+  /**
+  * @default "medium"
+  */
+  size: "small" | "medium";
+/**
+  * @default false
+  */
+  selected: boolean;
+/**
+  * @default false
+  */
+  disabled: boolean;
+}
+
+declare type WheelPickerVariantMap = {
+  [key in keyof WheelPickerVariant]: Array<WheelPickerVariant[key]>;
+};
+
+export declare type WheelPickerVariantProps = Partial<WheelPickerVariant>;
+
+export declare type WheelPickerSlotName = "root" | "scrollFog" | "columns" | "column" | "track" | "sizingContent" | "item" | "itemLabel" | "itemText" | "selectionIndicator";
+
+export declare const wheelPickerVariantMap: WheelPickerVariantMap;
+
+export declare const wheelPicker: ((
+  props?: WheelPickerVariantProps,
+) => Record<WheelPickerSlotName, string>) & {
+  splitVariantProps: <T extends WheelPickerVariantProps>(
+    props: T,
+  ) => [WheelPickerVariantProps, Omit<T, keyof WheelPickerVariantProps>];
+}

package/recipes/wheel-picker.mjs

@@ -0,0 +1,90 @@
+import './wheel-picker.css';
+import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
+
+const wheelPickerSlotNames = [
+  [
+    "root",
+    "seed-wheel-picker__root"
+  ],
+  [
+    "scrollFog",
+    "seed-wheel-picker__scrollFog"
+  ],
+  [
+    "columns",
+    "seed-wheel-picker__columns"
+  ],
+  [
+    "column",
+    "seed-wheel-picker__column"
+  ],
+  [
+    "track",
+    "seed-wheel-picker__track"
+  ],
+  [
+    "sizingContent",
+    "seed-wheel-picker__sizingContent"
+  ],
+  [
+    "item",
+    "seed-wheel-picker__item"
+  ],
+  [
+    "itemLabel",
+    "seed-wheel-picker__itemLabel"
+  ],
+  [
+    "itemText",
+    "seed-wheel-picker__itemText"
+  ],
+  [
+    "selectionIndicator",
+    "seed-wheel-picker__selectionIndicator"
+  ]
+];
+
+const defaultVariant = {
+  "size": "medium",
+  "selected": false,
+  "disabled": false
+};
+
+const compoundVariants = [
+  {
+    "selected": true,
+    "disabled": true
+  }
+];
+
+export const wheelPickerVariantMap = {
+  "size": [
+    "small",
+    "medium"
+  ],
+  "selected": [
+    true,
+    false
+  ],
+  "disabled": [
+    true,
+    false
+  ]
+};
+
+export const wheelPickerVariantKeys = Object.keys(wheelPickerVariantMap);
+
+export function wheelPicker(props) {
+  return Object.fromEntries(
+    wheelPickerSlotNames.map(([slot, className]) => {
+      return [
+        slot,
+        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
+      ];
+    }),
+  );
+}
+
+Object.assign(wheelPicker, { splitVariantProps: (props) => splitVariantProps(props, wheelPickerVariantMap) });
+
+// @recipe(seed): wheel-picker

package/recipes/input-button.d.ts

@@ -1,40 +0,0 @@
-declare interface InputButtonVariant {
-  /**
-  * @default "large"
-  */
-  size: "large" | "medium";
-/**
-  * @default false
-  */
-  pressed: boolean;
-/**
-  * @default false
-  */
-  invalid: boolean;
-/**
-  * @default false
-  */
-  disabled: boolean;
-/**
-  * @default false
-  */
-  readOnly: boolean;
-}
-
-declare type InputButtonVariantMap = {
-  [key in keyof InputButtonVariant]: Array<InputButtonVariant[key]>;
-};
-
-export declare type InputButtonVariantProps = Partial<InputButtonVariant>;
-
-export declare type InputButtonSlotName = "root" | "button" | "content" | "baseStroke" | "stroke" | "value" | "placeholder" | "prefixText" | "prefixIcon" | "suffixText" | "suffixIcon" | "clearButton";
-
-export declare const inputButtonVariantMap: InputButtonVariantMap;
-
-export declare const inputButton: ((
-  props?: InputButtonVariantProps,
-) => Record<InputButtonSlotName, string>) & {
-  splitVariantProps: <T extends InputButtonVariantProps>(
-    props: T,
-  ) => [InputButtonVariantProps, Omit<T, keyof InputButtonVariantProps>];
-}