@seed-design/lynx-css 0.9.3 → 0.10.0

package/recipes/segmented-control.d.ts

@@ -0,0 +1,36 @@
+declare interface SegmentedControlVariant {
+  /**
+  * @default false
+  */
+  selected: boolean;
+/**
+  * @default false
+  */
+  disabled: boolean;
+/**
+  * @default false
+  */
+  pressed: boolean;
+/**
+  * @default true
+  */
+  hasSelection: boolean;
+}
+
+declare type SegmentedControlVariantMap = {
+  [key in keyof SegmentedControlVariant]: Array<SegmentedControlVariant[key]>;
+};
+
+export declare type SegmentedControlVariantProps = Partial<SegmentedControlVariant>;
+
+export declare type SegmentedControlSlotName = "root" | "indicator" | "item" | "itemBackground" | "label";
+
+export declare const segmentedControlVariantMap: SegmentedControlVariantMap;
+
+export declare const segmentedControl: ((
+  props?: SegmentedControlVariantProps,
+) => Record<SegmentedControlSlotName, string>) & {
+  splitVariantProps: <T extends SegmentedControlVariantProps>(
+    props: T,
+  ) => [SegmentedControlVariantProps, Omit<T, keyof SegmentedControlVariantProps>];
+}

package/recipes/segmented-control.mjs

@@ -0,0 +1,75 @@
+import './segmented-control.css';
+import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
+
+const segmentedControlSlotNames = [
+  [
+    "root",
+    "seed-segmented-control__root"
+  ],
+  [
+    "indicator",
+    "seed-segmented-control__indicator"
+  ],
+  [
+    "item",
+    "seed-segmented-control__item"
+  ],
+  [
+    "itemBackground",
+    "seed-segmented-control__itemBackground"
+  ],
+  [
+    "label",
+    "seed-segmented-control__label"
+  ]
+];
+
+const defaultVariant = {
+  "selected": false,
+  "disabled": false,
+  "pressed": false,
+  "hasSelection": true
+};
+
+const compoundVariants = [
+  {
+    "selected": true,
+    "disabled": true
+  }
+];
+
+export const segmentedControlVariantMap = {
+  "selected": [
+    true,
+    false
+  ],
+  "disabled": [
+    true,
+    false
+  ],
+  "pressed": [
+    true,
+    false
+  ],
+  "hasSelection": [
+    true,
+    false
+  ]
+};
+
+export const segmentedControlVariantKeys = Object.keys(segmentedControlVariantMap);
+
+export function segmentedControl(props) {
+  return Object.fromEntries(
+    segmentedControlSlotNames.map(([slot, className]) => {
+      return [
+        slot,
+        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
+      ];
+    }),
+  );
+}
+
+Object.assign(segmentedControl, { splitVariantProps: (props) => splitVariantProps(props, segmentedControlVariantMap) });
+
+// @recipe(seed): segmented-control

package/recipes/select-box-checkmark.css

@@ -0,0 +1,33 @@
+.seed-select-box-checkmark__root {
+    position: relative;
+    flex-shrink: 0;
+    width: var(--seed-dimension-x5);
+    height: var(--seed-dimension-x5)
+}
+.seed-select-box-checkmark__icon {
+    display: flex;
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    width: 15px;
+    height: 15px;
+    margin: auto;
+    color: var(--seed-color-fg-placeholder)
+}
+.seed-select-box-checkmark__icon--selected_true {
+    color: var(--seed-color-fg-neutral)
+}
+.seed-select-box-checkmark__icon--pressed_true {
+    color: var(--seed-color-fg-neutral-subtle)
+}
+.seed-select-box-checkmark__icon--disabled_true {
+    color: var(--seed-color-fg-disabled)
+}
+.seed-select-box-checkmark__icon--selected_true-pressed_true-disabled_false {
+    color: var(--seed-color-fg-neutral)
+}
+.seed-select-box-checkmark__icon--selected_true-disabled_true {
+    color: var(--seed-color-fg-disabled)
+}

package/recipes/select-box-checkmark.d.ts

@@ -0,0 +1,32 @@
+declare interface SelectBoxCheckmarkVariant {
+  /**
+  * @default false
+  */
+  selected: boolean;
+/**
+  * @default false
+  */
+  pressed: boolean;
+/**
+  * @default false
+  */
+  disabled: boolean;
+}
+
+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/select-box-checkmark.mjs

@@ -0,0 +1,63 @@
+import './select-box-checkmark.css';
+import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
+
+const selectBoxCheckmarkSlotNames = [
+  [
+    "root",
+    "seed-select-box-checkmark__root"
+  ],
+  [
+    "icon",
+    "seed-select-box-checkmark__icon"
+  ]
+];
+
+const defaultVariant = {
+  "selected": false,
+  "pressed": false,
+  "disabled": false
+};
+
+const compoundVariants = [
+  {
+    "selected": true,
+    "pressed": true,
+    "disabled": false
+  },
+  {
+    "selected": true,
+    "disabled": true
+  }
+];
+
+export const selectBoxCheckmarkVariantMap = {
+  "selected": [
+    true,
+    false
+  ],
+  "pressed": [
+    true,
+    false
+  ],
+  "disabled": [
+    true,
+    false
+  ]
+};
+
+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): select-box-checkmark

package/recipes/select-box-group.css

@@ -0,0 +1,10 @@
+.seed-select-box-group {
+    display: grid;
+    width: 100%;
+    row-gap: var(--seed-dimension-spacing-y-component-default);
+    column-gap: var(--seed-dimension-x3)
+}
+.seed-select-box-group--multiColumn_true {
+    grid-auto-rows: 1fr
+}
+.seed-select-box-group--multiColumn_false {}

package/recipes/select-box-group.d.ts

@@ -0,0 +1,22 @@
+declare interface SelectBoxGroupVariant {
+  /**
+  * @default false
+  */
+  multiColumn: boolean;
+}
+
+declare type SelectBoxGroupVariantMap = {
+  [key in keyof SelectBoxGroupVariant]: Array<SelectBoxGroupVariant[key]>;
+};
+
+export declare type SelectBoxGroupVariantProps = Partial<SelectBoxGroupVariant>;
+
+export declare const selectBoxGroupVariantMap: SelectBoxGroupVariantMap;
+
+export declare const selectBoxGroup: ((
+  props?: SelectBoxGroupVariantProps,
+) => string) & {
+  splitVariantProps: <T extends SelectBoxGroupVariantProps>(
+    props: T,
+  ) => [SelectBoxGroupVariantProps, Omit<T, keyof SelectBoxGroupVariantProps>];
+}

package/recipes/select-box-group.mjs

@@ -0,0 +1,29 @@
+import './select-box-group.css';
+import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
+
+const defaultVariant = {
+  "multiColumn": false
+};
+
+const compoundVariants = [];
+
+export const selectBoxGroupVariantMap = {
+  "multiColumn": [
+    true,
+    false
+  ]
+};
+
+export const selectBoxGroupVariantKeys = Object.keys(selectBoxGroupVariantMap);
+
+export function selectBoxGroup(props) {
+  return createClassName(
+    "seed-select-box-group",
+    mergeVariants(defaultVariant, props),
+    compoundVariants,
+  );
+}
+
+Object.assign(selectBoxGroup, { splitVariantProps: (props) => splitVariantProps(props, selectBoxGroupVariantMap) });
+
+// @recipe(seed): select-box-group

package/recipes/select-box.css

@@ -0,0 +1,145 @@
+.seed-select-box__interactionRoot {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    width: 100%;
+    height: 100%;
+    min-height: 0;
+    gap: 0
+}
+.seed-select-box__root {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    width: 100%;
+    height: 100%;
+    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-weak);
+    overflow: hidden;
+    transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing)
+}
+.seed-select-box__selectedStroke {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    border-style: solid;
+    border-width: 2px;
+    border-color: transparent;
+    border-radius: var(--seed-radius-r3);
+    transition: border-color 0.1s var(--seed-timing-function-easing)
+}
+.seed-select-box__trigger {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    width: 100%;
+    gap: var(--seed-dimension-x1_5);
+    flex-grow: 1
+}
+.seed-select-box__content {
+    display: flex;
+    flex-direction: row;
+    min-width: 0
+}
+.seed-select-box__prefixIcon {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    flex-shrink: 0;
+    width: 22px;
+    height: 22px;
+    color: var(--seed-color-fg-neutral)
+}
+.seed-select-box__body {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    gap: var(--seed-dimension-x0_5);
+    margin-right: auto
+}
+.seed-select-box__label {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    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)
+}
+.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__footer {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 0;
+    opacity: 0;
+    overflow: hidden;
+    transition: height var(--seed-duration-d6) var(--seed-timing-function-easing), opacity 400ms var(--seed-timing-function-easing)
+}
+.seed-select-box__footerInner {
+    display: flex;
+    flex-direction: column;
+    flex-shrink: 0;
+    width: 100%;
+    height: max-content
+}
+.seed-select-box__trigger--layout_horizontal {
+    align-items: center;
+    padding-left: var(--seed-dimension-x5);
+    padding-right: var(--seed-dimension-x4);
+    padding-top: var(--seed-dimension-x4);
+    padding-bottom: var(--seed-dimension-x4)
+}
+.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 {
+    flex-direction: column;
+    gap: var(--seed-dimension-x2_5)
+}
+.seed-select-box__selectedStroke--selected_true {
+    border-color: var(--seed-color-stroke-neutral-contrast)
+}
+.seed-select-box__root--pressed_true {
+    background-color: var(--seed-color-bg-transparent-pressed)
+}
+.seed-select-box__root--disabled_true {
+    box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-weak)
+}
+.seed-select-box__prefixIcon--disabled_true {
+    color: var(--seed-color-fg-disabled)
+}
+.seed-select-box__label--disabled_true {
+    color: var(--seed-color-fg-disabled)
+}
+.seed-select-box__description--disabled_true {
+    color: var(--seed-color-fg-disabled)
+}
+.seed-select-box__footer--footerOpen_true {
+    opacity: 1;
+    transition: height 400ms var(--seed-timing-function-easing), opacity var(--seed-duration-d6) var(--seed-timing-function-easing)
+}
+.seed-select-box__selectedStroke--selected_true-disabled_true {
+    border-color: var(--seed-color-stroke-neutral-weak)
+}
+.seed-select-box__root--pressed_true-disabled_true {
+    background-color: var(--seed-color-bg-transparent)
+}

package/recipes/select-box.d.ts

@@ -0,0 +1,40 @@
+declare interface SelectBoxVariant {
+  /**
+  * @default "horizontal"
+  */
+  layout: "horizontal" | "vertical";
+/**
+  * @default false
+  */
+  selected: boolean;
+/**
+  * @default false
+  */
+  pressed: boolean;
+/**
+  * @default false
+  */
+  disabled: boolean;
+/**
+  * @default false
+  */
+  footerOpen: boolean;
+}
+
+declare type SelectBoxVariantMap = {
+  [key in keyof SelectBoxVariant]: Array<SelectBoxVariant[key]>;
+};
+
+export declare type SelectBoxVariantProps = Partial<SelectBoxVariant>;
+
+export declare type SelectBoxSlotName = "interactionRoot" | "root" | "selectedStroke" | "trigger" | "content" | "prefixIcon" | "body" | "label" | "description" | "footer" | "footerInner";
+
+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.mjs

@@ -0,0 +1,108 @@
+import './select-box.css';
+import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
+
+const selectBoxSlotNames = [
+  [
+    "interactionRoot",
+    "seed-select-box__interactionRoot"
+  ],
+  [
+    "root",
+    "seed-select-box__root"
+  ],
+  [
+    "selectedStroke",
+    "seed-select-box__selectedStroke"
+  ],
+  [
+    "trigger",
+    "seed-select-box__trigger"
+  ],
+  [
+    "content",
+    "seed-select-box__content"
+  ],
+  [
+    "prefixIcon",
+    "seed-select-box__prefixIcon"
+  ],
+  [
+    "body",
+    "seed-select-box__body"
+  ],
+  [
+    "label",
+    "seed-select-box__label"
+  ],
+  [
+    "description",
+    "seed-select-box__description"
+  ],
+  [
+    "footer",
+    "seed-select-box__footer"
+  ],
+  [
+    "footerInner",
+    "seed-select-box__footerInner"
+  ]
+];
+
+const defaultVariant = {
+  "layout": "horizontal",
+  "selected": false,
+  "pressed": false,
+  "disabled": false,
+  "footerOpen": false
+};
+
+const compoundVariants = [
+  {
+    "selected": true,
+    "disabled": true
+  },
+  {
+    "pressed": true,
+    "disabled": true
+  }
+];
+
+export const selectBoxVariantMap = {
+  "layout": [
+    "horizontal",
+    "vertical"
+  ],
+  "selected": [
+    true,
+    false
+  ],
+  "pressed": [
+    true,
+    false
+  ],
+  "disabled": [
+    true,
+    false
+  ],
+  "footerOpen": [
+    true,
+    false
+  ]
+};
+
+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/vars/component/callout.d.ts

@@ -199,7 +199,9 @@ export declare const vars: {
   "toneMagic": {
     "enabled": {
       "root": {
-        "gradient": "var(--seed-gradient-glow-magic)"
+        "gradient": {
+          "serialized": "var(--seed-gradient-glow-magic)"
+        }
       },
       /** 아이콘은 Fill 타입 사용을 권장합니다. */
       "prefixIcon": {
@@ -221,7 +223,9 @@ export declare const vars: {
     },
     "pressed": {
       "root": {
-        "gradient": "var(--seed-gradient-glow-magic-pressed)"
+        "gradient": {
+          "serialized": "var(--seed-gradient-glow-magic-pressed)"
+        }
       }
     }
   }

package/vars/component/callout.mjs

@@ -169,7 +169,9 @@ export const vars = {
   "toneMagic": {
     "enabled": {
       "root": {
-        "gradient": "var(--seed-gradient-glow-magic)"
+        "gradient": {
+          "serialized": "var(--seed-gradient-glow-magic)"
+        }
       },
       "prefixIcon": {
         "color": "var(--seed-color-fg-neutral)"
@@ -189,7 +191,9 @@ export const vars = {
     },
     "pressed": {
       "root": {
-        "gradient": "var(--seed-gradient-glow-magic-pressed)"
+        "gradient": {
+          "serialized": "var(--seed-gradient-glow-magic-pressed)"
+        }
       }
     }
   }

package/vars/component/image-frame-reaction-button.d.ts

@@ -10,7 +10,19 @@ export declare const vars: {
       },
       /** lineIcon 아래에 내려가는 하트 아이콘입니다. */
       "fillIcon": {
-        "gradient": "var(--seed-color-palette-static-black-alpha-600) 0%, var(--seed-color-palette-static-black-alpha-600) 100%",
+        "gradient": {
+          "serialized": "var(--seed-color-palette-static-black-alpha-600) 0%, var(--seed-color-palette-static-black-alpha-600) 100%",
+          "stops": [
+            {
+              "color": "var(--seed-color-palette-static-black-alpha-600)",
+              "position": 0
+            },
+            {
+              "color": "var(--seed-color-palette-static-black-alpha-600)",
+              "position": 1
+            }
+          ]
+        },
         /** 보이는 버튼 크기입니다. */
         "size": "var(--seed-dimension-x6)",
         "shadow": "0px 2px 4px 0px #00000026"
@@ -25,7 +37,19 @@ export declare const vars: {
     "selected": {
       /** lineIcon 아래에 내려가는 하트 아이콘입니다. */
       "fillIcon": {
-        "gradient": "#FF9A56 0%, #FF6600 100%"
+        "gradient": {
+          "serialized": "#FF9A56 0%, #FF6600 100%",
+          "stops": [
+            {
+              "color": "#FF9A56",
+              "position": 0
+            },
+            {
+              "color": "#FF6600",
+              "position": 1
+            }
+          ]
+        }
       },
       /** fillIcon 위로 올라가는 하트 아이콘입니다. */
       "lineIcon": {