@seed-design/lynx-css 0.14.2 → 1.0.1

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>];
-}