@seed-design/lynx-css 0.14.2 → 1.0.1

package/recipes/image-frame-reaction-button.mjs

@@ -0,0 +1,40 @@
+import './image-frame-reaction-button.css';
+import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
+
+const imageFrameReactionButtonSlotNames = [
+  [
+    "root",
+    "seed-image-frame-reaction-button__root"
+  ],
+  [
+    "fillIcon",
+    "seed-image-frame-reaction-button__fillIcon"
+  ],
+  [
+    "lineIcon",
+    "seed-image-frame-reaction-button__lineIcon"
+  ]
+];
+
+const defaultVariant = {};
+
+const compoundVariants = [];
+
+export const imageFrameReactionButtonVariantMap = {};
+
+export const imageFrameReactionButtonVariantKeys = Object.keys(imageFrameReactionButtonVariantMap);
+
+export function imageFrameReactionButton(props) {
+  return Object.fromEntries(
+    imageFrameReactionButtonSlotNames.map(([slot, className]) => {
+      return [
+        slot,
+        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
+      ];
+    }),
+  );
+}
+
+Object.assign(imageFrameReactionButton, { splitVariantProps: (props) => splitVariantProps(props, imageFrameReactionButtonVariantMap) });
+
+// @recipe(seed): image-frame-reaction-button

package/recipes/image-frame.css

@@ -0,0 +1,87 @@
+.seed-image-frame__root {
+    position: relative;
+    overflow: hidden;
+    flex-shrink: 0;
+    aspect-ratio: var(--seed-image-frame-ratio)
+}
+.seed-image-frame__content {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    pointer-events: none
+}
+.seed-image-frame__fallback {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0
+}
+.seed-image-frame__stroke {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    border-radius: var(--seed-image-frame-radius);
+    pointer-events: none
+}
+.seed-image-frame__floater {
+    position: absolute;
+    display: flex
+}
+.seed-image-frame__stroke--stroke_true {
+    border-width: 1px;
+    border-style: solid;
+    border-color: var(--seed-color-stroke-neutral-subtle)
+}
+.seed-image-frame__content--loaded_true {
+    opacity: 1;
+    pointer-events: auto
+}
+.seed-image-frame__floater--placement_top-start {
+    top: var(--seed-image-frame-offset-y);
+    left: var(--seed-image-frame-offset-x)
+}
+.seed-image-frame__floater--placement_top-center {
+    top: var(--seed-image-frame-offset-y);
+    left: calc(50% + var(--seed-image-frame-offset-x));
+    transform: translateX(-50%)
+}
+.seed-image-frame__floater--placement_top-end {
+    top: var(--seed-image-frame-offset-y);
+    right: var(--seed-image-frame-offset-x)
+}
+.seed-image-frame__floater--placement_middle-start {
+    top: calc(50% + var(--seed-image-frame-offset-y));
+    left: var(--seed-image-frame-offset-x);
+    transform: translateY(-50%)
+}
+.seed-image-frame__floater--placement_middle-center {
+    top: calc(50% + var(--seed-image-frame-offset-y));
+    left: calc(50% + var(--seed-image-frame-offset-x));
+    transform: translate(-50%, -50%)
+}
+.seed-image-frame__floater--placement_middle-end {
+    top: calc(50% + var(--seed-image-frame-offset-y));
+    right: var(--seed-image-frame-offset-x);
+    transform: translateY(-50%)
+}
+.seed-image-frame__floater--placement_bottom-start {
+    bottom: var(--seed-image-frame-offset-y);
+    left: var(--seed-image-frame-offset-x)
+}
+.seed-image-frame__floater--placement_bottom-center {
+    bottom: var(--seed-image-frame-offset-y);
+    left: calc(50% + var(--seed-image-frame-offset-x));
+    transform: translateX(-50%)
+}
+.seed-image-frame__floater--placement_bottom-end {
+    bottom: var(--seed-image-frame-offset-y);
+    right: var(--seed-image-frame-offset-x)
+}

package/recipes/image-frame.d.ts

@@ -0,0 +1,32 @@
+declare interface ImageFrameVariant {
+  /**
+  * @default false
+  */
+  stroke: boolean;
+/**
+  * @default false
+  */
+  loaded: boolean;
+/**
+  * @default "bottom-end"
+  */
+  placement: "top-start" | "top-center" | "top-end" | "middle-start" | "middle-center" | "middle-end" | "bottom-start" | "bottom-center" | "bottom-end";
+}
+
+declare type ImageFrameVariantMap = {
+  [key in keyof ImageFrameVariant]: Array<ImageFrameVariant[key]>;
+};
+
+export declare type ImageFrameVariantProps = Partial<ImageFrameVariant>;
+
+export declare type ImageFrameSlotName = "root" | "content" | "fallback" | "stroke" | "floater";
+
+export declare const imageFrameVariantMap: ImageFrameVariantMap;
+
+export declare const imageFrame: ((
+  props?: ImageFrameVariantProps,
+) => Record<ImageFrameSlotName, string>) & {
+  splitVariantProps: <T extends ImageFrameVariantProps>(
+    props: T,
+  ) => [ImageFrameVariantProps, Omit<T, keyof ImageFrameVariantProps>];
+}

package/recipes/image-frame.mjs

@@ -0,0 +1,72 @@
+import './image-frame.css';
+import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
+
+const imageFrameSlotNames = [
+  [
+    "root",
+    "seed-image-frame__root"
+  ],
+  [
+    "content",
+    "seed-image-frame__content"
+  ],
+  [
+    "fallback",
+    "seed-image-frame__fallback"
+  ],
+  [
+    "stroke",
+    "seed-image-frame__stroke"
+  ],
+  [
+    "floater",
+    "seed-image-frame__floater"
+  ]
+];
+
+const defaultVariant = {
+  "stroke": false,
+  "loaded": false,
+  "placement": "bottom-end"
+};
+
+const compoundVariants = [];
+
+export const imageFrameVariantMap = {
+  "stroke": [
+    true,
+    false
+  ],
+  "loaded": [
+    true,
+    false
+  ],
+  "placement": [
+    "top-start",
+    "top-center",
+    "top-end",
+    "middle-start",
+    "middle-center",
+    "middle-end",
+    "bottom-start",
+    "bottom-center",
+    "bottom-end"
+  ]
+};
+
+export const imageFrameVariantKeys = Object.keys(imageFrameVariantMap);
+
+export function imageFrame(props) {
+  return Object.fromEntries(
+    imageFrameSlotNames.map(([slot, className]) => {
+      return [
+        slot,
+        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
+      ];
+    }),
+  );
+}
+
+Object.assign(imageFrame, { splitVariantProps: (props) => splitVariantProps(props, imageFrameVariantMap) });
+
+// @recipe(seed): image-frame

package/recipes/list-item.css

@@ -1,7 +1,3 @@
-.seed-list-item__interactionRoot {
-    display: flex;
-    width: 100%
-}
 .seed-list-item__root {
     position: relative;
     display: flex;

package/recipes/list-item.d.ts

@@ -23,7 +23,7 @@ declare type ListItemVariantMap = {
 
 export declare type ListItemVariantProps = Partial<ListItemVariant>;
 
-export declare type ListItemSlotName = "interactionRoot" | "root" | "highlightedOverlay" | "pressedOverlay" | "layout" | "content" | "title" | "detail" | "prefix" | "suffix" | "prefixIcon" | "suffixIcon";
+export declare type ListItemSlotName = "root" | "highlightedOverlay" | "pressedOverlay" | "layout" | "content" | "title" | "detail" | "prefix" | "suffix" | "prefixIcon" | "suffixIcon";
 
 export declare const listItemVariantMap: ListItemVariantMap;
 

package/recipes/list-item.mjs

@@ -2,10 +2,6 @@ import './list-item.css';
 import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
 
 const listItemSlotNames = [
-  [
-    "interactionRoot",
-    "seed-list-item__interactionRoot"
-  ],
   [
     "root",
     "seed-list-item__root"

package/recipes/menu-sheet-item.css

@@ -3,6 +3,7 @@
     flex-direction: row;
     align-items: center;
     justify-content: flex-start;
+    position: relative;
     width: 100%;
     min-height: 52px;
     padding-top: var(--seed-dimension-x3_5);
@@ -48,7 +49,10 @@
     height: 22px;
 }
 .seed-menu-sheet-item__divider {
-    width: 100%;
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    left: 0;
     height: 1px;
     background-color: var(--seed-color-stroke-neutral-muted);
 }

package/recipes/menu-sheet.css

@@ -45,6 +45,7 @@
     flex-direction: column;
     align-items: center;
     text-align: center;
+    flex-shrink: 0;
     gap: var(--seed-dimension-x1);
     padding-bottom: var(--seed-dimension-x4);
 }
@@ -63,6 +64,9 @@
     margin: 0;
 }
 .seed-menu-sheet__list {
+    flex-shrink: 1;
+}
+.seed-menu-sheet__listContent {
     display: flex;
     flex-direction: column;
     align-items: stretch;
@@ -79,6 +83,7 @@
     display: flex;
     flex-direction: column;
     align-items: stretch;
+    flex-shrink: 0;
     padding-top: var(--seed-dimension-x2_5);
 }
 .seed-menu-sheet__closeButton {

package/recipes/menu-sheet.d.ts

@@ -15,7 +15,7 @@ declare type MenuSheetVariantMap = {
 
 export declare type MenuSheetVariantProps = Partial<MenuSheetVariant>;
 
-export declare type MenuSheetSlotName = "positioner" | "backdrop" | "content" | "contentInner" | "header" | "title" | "description" | "list" | "group" | "footer" | "closeButton" | "closeButtonLabel";
+export declare type MenuSheetSlotName = "positioner" | "backdrop" | "content" | "contentInner" | "header" | "title" | "description" | "list" | "listContent" | "group" | "footer" | "closeButton" | "closeButtonLabel";
 
 export declare const menuSheetVariantMap: MenuSheetVariantMap;
 

package/recipes/menu-sheet.mjs

@@ -34,6 +34,10 @@ const menuSheetSlotNames = [
     "list",
     "seed-menu-sheet__list"
   ],
+  [
+    "listContent",
+    "seed-menu-sheet__listContent"
+  ],
   [
     "group",
     "seed-menu-sheet__group"

package/recipes/menu.css

@@ -1,17 +1,5 @@
 .seed-menu__positioner {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    z-index: 0
-}
-.seed-menu__backdrop {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0
+    z-index: 99
 }
 .seed-menu__content {
     position: absolute;

package/recipes/menu.d.ts

@@ -19,7 +19,7 @@ declare type MenuVariantMap = {
 
 export declare type MenuVariantProps = Partial<MenuVariant>;
 
-export declare type MenuSlotName = "positioner" | "backdrop" | "content" | "scrollArea" | "scrollContent" | "group" | "groupLabel" | "separator";
+export declare type MenuSlotName = "positioner" | "content" | "scrollArea" | "scrollContent" | "group" | "groupLabel" | "separator";
 
 export declare const menuVariantMap: MenuVariantMap;
 

package/recipes/menu.mjs

@@ -6,10 +6,6 @@ const menuSlotNames = [
     "positioner",
     "seed-menu__positioner"
   ],
-  [
-    "backdrop",
-    "seed-menu__backdrop"
-  ],
   [
     "content",
     "seed-menu__content"

package/recipes/progress-circle.css

@@ -36,21 +36,78 @@
   clip-path: path("M7 0 A7 7 0 1 1 7 14 A7 7 0 1 1 7 0 Z M7 2 A5 5 0 1 0 7 12 A5 5 0 1 0 7 2 Z");
 }
 
+.seed-progress-circle__track {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
 .seed-progress-circle__cap {
   position: absolute;
   border-radius: 50%;
   z-index: 1;
 }
 
-.seed-progress-circle__root--tone_neutral {
+.seed-progress-circle__spinner,
+.seed-progress-circle__indeterminate-range {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.seed-progress-circle__range.seed-progress-circle__indeterminate-range {
+  background-color: transparent;
+}
+
+/* Android는 clip-path를 가진 부모가 transform 애니메이션 중인 자식을 자르지 않는다.
+   반쪽 영역은 폭 50% 박스의 overflow로 자르고, 반원은 그 안에서 링 크기로 둔다. */
+.seed-progress-circle__half {
+  position: absolute;
+  top: 0;
+  width: 50%;
+  height: 100%;
+  overflow: hidden;
+}
+
+.seed-progress-circle__half--first {
+  left: 50%;
+}
+
+.seed-progress-circle__half--second {
+  left: 0;
+}
+
+.seed-progress-circle__semicircle--first,
+.seed-progress-circle__semicircle--second {
+  position: absolute;
+  top: 0;
+  width: 200%;
+  height: 100%;
+}
+
+.seed-progress-circle__semicircle--first {
+  left: -100%;
+  clip-path: inset(0 50% 0 0);
+}
+
+.seed-progress-circle__semicircle--second {
+  left: 0;
+  clip-path: inset(0 0 0 50%);
+}
+
+.seed-progress-circle__track--tone_neutral {
   background-color: var(--seed-color-palette-gray-200);
 }
 
-.seed-progress-circle__root--tone_brand {
+.seed-progress-circle__track--tone_brand {
   background-color: var(--seed-color-palette-carrot-200);
 }
 
-.seed-progress-circle__root--tone_staticWhite {
+.seed-progress-circle__track--tone_staticWhite {
   background-color: var(--seed-color-palette-static-white-alpha-300);
 }
 
@@ -70,7 +127,7 @@
 }
 
 /* inherit: inherits --track-color / --range-color from parent (e.g. action-button) */
-.seed-progress-circle__root--tone_inherit {
+.seed-progress-circle__track--tone_inherit {
   background-color: var(--track-color);
 }
 

package/recipes/progress-circle.d.ts

@@ -17,7 +17,7 @@ declare type ProgressCircleVariantMap = {
 
 export declare type ProgressCircleVariantProps = Partial<ProgressCircleVariant>;
 
-export declare type ProgressCircleSlotName = "root" | "range" | "cap";
+export declare type ProgressCircleSlotName = "root" | "track" | "range" | "cap";
 
 export declare const progressCircleVariantMap: ProgressCircleVariantMap;
 

package/recipes/progress-circle.mjs

@@ -4,6 +4,7 @@ import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs"
 
 const progressCircleSlotNames = [
   ["root", "seed-progress-circle__root"],
+  ["track", "seed-progress-circle__track"],
   ["range", "seed-progress-circle__range"],
   ["cap", "seed-progress-circle__cap"],
 ];

package/recipes/pull-to-refresh.css

@@ -0,0 +1,14 @@
+.seed-pull-to-refresh__root {
+    height: 100%
+}
+.seed-pull-to-refresh__indicator {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding-top: var(--seed-dimension-x8);
+    padding-bottom: var(--seed-dimension-x8)
+}
+.seed-pull-to-refresh__content {
+    height: 100%;
+    width: 100%
+}

package/recipes/pull-to-refresh.d.ts

@@ -0,0 +1,21 @@
+declare interface PullToRefreshVariant {
+  
+}
+
+declare type PullToRefreshVariantMap = {
+  [key in keyof PullToRefreshVariant]: Array<PullToRefreshVariant[key]>;
+};
+
+export declare type PullToRefreshVariantProps = Partial<PullToRefreshVariant>;
+
+export declare type PullToRefreshSlotName = "root" | "indicator" | "content";
+
+export declare const pullToRefreshVariantMap: PullToRefreshVariantMap;
+
+export declare const pullToRefresh: ((
+  props?: PullToRefreshVariantProps,
+) => Record<PullToRefreshSlotName, string>) & {
+  splitVariantProps: <T extends PullToRefreshVariantProps>(
+    props: T,
+  ) => [PullToRefreshVariantProps, Omit<T, keyof PullToRefreshVariantProps>];
+}

package/recipes/pull-to-refresh.mjs

@@ -0,0 +1,40 @@
+import './pull-to-refresh.css';
+import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
+
+const pullToRefreshSlotNames = [
+  [
+    "root",
+    "seed-pull-to-refresh__root"
+  ],
+  [
+    "indicator",
+    "seed-pull-to-refresh__indicator"
+  ],
+  [
+    "content",
+    "seed-pull-to-refresh__content"
+  ]
+];
+
+const defaultVariant = {};
+
+const compoundVariants = [];
+
+export const pullToRefreshVariantMap = {};
+
+export const pullToRefreshVariantKeys = Object.keys(pullToRefreshVariantMap);
+
+export function pullToRefresh(props) {
+  return Object.fromEntries(
+    pullToRefreshSlotNames.map(([slot, className]) => {
+      return [
+        slot,
+        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
+      ];
+    }),
+  );
+}
+
+Object.assign(pullToRefresh, { splitVariantProps: (props) => splitVariantProps(props, pullToRefreshVariantMap) });
+
+// @recipe(seed): pull-to-refresh

package/recipes/reaction-button.css

@@ -6,10 +6,13 @@
     justify-content: center;
     flex-shrink: 0;
     background: var(--seed-color-bg-transparent);
-    box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
+    border-width: var(--seed-reaction-button-stroke-width);
+    border-style: solid;
+    --seed-reaction-button-stroke-width: 1px;
+    border-color: var(--seed-color-stroke-neutral-muted);
     --track-color: var(--seed-color-palette-gray-500);
     --range-color: var(--seed-color-fg-neutral);
-    transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), box-shadow var(--seed-duration-color-transition) var(--seed-timing-function-easing)
+    transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), border-color var(--seed-duration-color-transition) var(--seed-timing-function-easing)
 }
 .seed-reaction-button__content {
     display: flex;
@@ -43,10 +46,10 @@
 .seed-reaction-button__root--size_xsmall {
     height: var(--seed-dimension-x8);
     border-radius: var(--seed-radius-full);
-    padding-left: var(--seed-dimension-x3);
-    padding-right: var(--seed-dimension-x3);
-    padding-top: var(--seed-dimension-x1_5);
-    padding-bottom: var(--seed-dimension-x1_5)
+    padding-left: calc(var(--seed-dimension-x3) - var(--seed-reaction-button-stroke-width));
+    padding-right: calc(var(--seed-dimension-x3) - var(--seed-reaction-button-stroke-width));
+    padding-top: calc(var(--seed-dimension-x1_5) - var(--seed-reaction-button-stroke-width));
+    padding-bottom: calc(var(--seed-dimension-x1_5) - var(--seed-reaction-button-stroke-width))
 }
 .seed-reaction-button__content--size_xsmall {
     gap: var(--seed-dimension-x1)
@@ -66,10 +69,10 @@
 .seed-reaction-button__root--size_small {
     height: var(--seed-dimension-x9);
     border-radius: var(--seed-radius-full);
-    padding-left: var(--seed-dimension-x3_5);
-    padding-right: var(--seed-dimension-x3_5);
-    padding-top: var(--seed-dimension-x2);
-    padding-bottom: var(--seed-dimension-x2)
+    padding-left: calc(var(--seed-dimension-x3_5) - var(--seed-reaction-button-stroke-width));
+    padding-right: calc(var(--seed-dimension-x3_5) - var(--seed-reaction-button-stroke-width));
+    padding-top: calc(var(--seed-dimension-x2) - var(--seed-reaction-button-stroke-width));
+    padding-bottom: calc(var(--seed-dimension-x2) - var(--seed-reaction-button-stroke-width))
 }
 .seed-reaction-button__content--size_small {
     gap: var(--seed-dimension-x1)
@@ -88,7 +91,8 @@
 }
 .seed-reaction-button__root--selected_true {
     background: var(--seed-color-bg-transparent);
-    box-shadow: inset 0 0 0 1px var(--seed-color-stroke-brand-weak);
+    --seed-reaction-button-stroke-width: 1px;
+    border-color: var(--seed-color-stroke-brand-weak);
     --track-color: var(--seed-color-palette-carrot-200);
     --range-color: var(--seed-color-fg-brand)
 }
@@ -101,12 +105,10 @@
 .seed-reaction-button__prefixIcon--selected_true {
     color: var(--seed-color-fg-brand)
 }
-.seed-reaction-button__root--pressed_true {
-    background: var(--seed-color-bg-transparent-pressed)
-}
 .seed-reaction-button__root--disabled_true {
     background: var(--seed-color-bg-disabled);
-    box-shadow: inset 0 0 0 0px var(--seed-color-stroke-neutral-muted)
+    --seed-reaction-button-stroke-width: 0px;
+    border-color: var(--seed-color-stroke-neutral-muted)
 }
 .seed-reaction-button__label--disabled_true {
     color: var(--seed-color-fg-disabled)
@@ -123,9 +125,6 @@
 .seed-reaction-button__content--loading_true {
     opacity: 0
 }
-.seed-reaction-button__root--selected_true-pressed_true-disabled_false-loading_false {
-    background: var(--seed-color-bg-transparent-pressed)
-}
 .seed-reaction-button__root--selected_false-disabled_false-loading_false:active {
     background: var(--seed-color-bg-transparent-pressed)
 }
@@ -134,7 +133,8 @@
 }
 .seed-reaction-button__root--selected_true-loading_true {
     background: var(--seed-color-bg-transparent-pressed);
-    box-shadow: inset 0 0 0 1px var(--seed-color-stroke-brand-weak);
+    --seed-reaction-button-stroke-width: 1px;
+    border-color: var(--seed-color-stroke-brand-weak);
     --track-color: var(--seed-color-palette-carrot-200);
     --range-color: var(--seed-color-fg-brand)
 }

package/recipes/reaction-button.d.ts

@@ -7,10 +7,6 @@ declare interface ReactionButtonVariant {
   * @default false
   */
   selected: boolean;
-/**
-  * @default false
-  */
-  pressed: boolean;
 /**
   * @default false
   */