@seed-design/lynx-css 0.14.1 → 1.0.0

package/recipes/{input-button.mjs → field-button.mjs}

@@ -1,54 +1,54 @@
-import './input-button.css';
+import './field-button.css';
 import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
 
-const inputButtonSlotNames = [
+const fieldButtonSlotNames = [
   [
     "root",
-    "seed-input-button__root"
+    "seed-field-button__root"
   ],
   [
     "button",
-    "seed-input-button__button"
+    "seed-field-button__button"
   ],
   [
     "content",
-    "seed-input-button__content"
+    "seed-field-button__content"
   ],
   [
     "baseStroke",
-    "seed-input-button__baseStroke"
+    "seed-field-button__baseStroke"
   ],
   [
     "stroke",
-    "seed-input-button__stroke"
+    "seed-field-button__stroke"
   ],
   [
     "value",
-    "seed-input-button__value"
+    "seed-field-button__value"
   ],
   [
     "placeholder",
-    "seed-input-button__placeholder"
+    "seed-field-button__placeholder"
   ],
   [
     "prefixText",
-    "seed-input-button__prefixText"
+    "seed-field-button__prefixText"
   ],
   [
     "prefixIcon",
-    "seed-input-button__prefixIcon"
+    "seed-field-button__prefixIcon"
   ],
   [
     "suffixText",
-    "seed-input-button__suffixText"
+    "seed-field-button__suffixText"
   ],
   [
     "suffixIcon",
-    "seed-input-button__suffixIcon"
+    "seed-field-button__suffixIcon"
   ],
   [
     "clearButton",
-    "seed-input-button__clearButton"
+    "seed-field-button__clearButton"
   ]
 ];
 
@@ -67,7 +67,7 @@ const compoundVariants = [
   }
 ];
 
-export const inputButtonVariantMap = {
+export const fieldButtonVariantMap = {
   "size": [
     "large",
     "medium"
@@ -90,11 +90,11 @@ export const inputButtonVariantMap = {
   ]
 };
 
-export const inputButtonVariantKeys = Object.keys(inputButtonVariantMap);
+export const fieldButtonVariantKeys = Object.keys(fieldButtonVariantMap);
 
-export function inputButton(props) {
+export function fieldButton(props) {
   return Object.fromEntries(
-    inputButtonSlotNames.map(([slot, className]) => {
+    fieldButtonSlotNames.map(([slot, className]) => {
       return [
         slot,
         createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
@@ -103,6 +103,6 @@ export function inputButton(props) {
   );
 }
 
-Object.assign(inputButton, { splitVariantProps: (props) => splitVariantProps(props, inputButtonVariantMap) });
+Object.assign(fieldButton, { splitVariantProps: (props) => splitVariantProps(props, fieldButtonVariantMap) });
 
-// @recipe(seed): input-button
+// @recipe(seed): field-button

package/recipes/floating-action-button.css

@@ -3,14 +3,15 @@
     display: flex;
     flex-direction: row;
     align-items: center;
-    justify-content: center;
+    justify-content: flex-start;
     flex-shrink: 0;
     max-width: 100%;
     overflow: hidden;
+    gap: var(--seed-dimension-x1);
     background-color: var(--seed-color-bg-brand-solid);
     border-radius: var(--seed-radius-full);
     box-shadow: var(--seed-shadow-s3);
-    transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), width var(--seed-duration-d4) var(--seed-timing-function-easing), height var(--seed-duration-d4) var(--seed-timing-function-easing), padding-left var(--seed-duration-d4) var(--seed-timing-function-easing), padding-right var(--seed-duration-d4) var(--seed-timing-function-easing), gap var(--seed-duration-d4) var(--seed-timing-function-easing)
+    transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), width var(--seed-duration-d4) var(--seed-timing-function-easing), height var(--seed-duration-d4) var(--seed-timing-function-easing), padding-left var(--seed-duration-d4) var(--seed-timing-function-easing), padding-right var(--seed-duration-d4) var(--seed-timing-function-easing)
 }
 .seed-floating-action-button__icon {
     flex-shrink: 0;
@@ -20,17 +21,18 @@
 .seed-floating-action-button__label {
     width: max-content;
     flex-shrink: 0;
+    white-space: nowrap;
     color: var(--seed-color-fg-on-brand-solid);
     font-size: var(--seed-font-size-t5);
     line-height: var(--seed-line-height-t5);
-    font-weight: var(--seed-font-weight-bold)
+    font-weight: var(--seed-font-weight-bold);
+    transition: opacity var(--seed-duration-d4) var(--seed-timing-function-easing)
 }
 .seed-floating-action-button__root--extended_true {
     width: fit-content;
     height: 48px;
     padding-left: var(--seed-dimension-x4_5);
-    padding-right: var(--seed-dimension-x4_5);
-    gap: var(--seed-dimension-x1)
+    padding-right: var(--seed-dimension-x4_5)
 }
 .seed-floating-action-button__icon--extended_true {
     width: var(--seed-dimension-x4);
@@ -39,14 +41,16 @@
 .seed-floating-action-button__root--extended_false {
     width: 56px;
     height: 56px;
-    padding-left: 0;
-    padding-right: 0;
-    gap: 0
+    padding-left: calc((56px - var(--seed-dimension-x6)) / 2);
+    padding-right: 0
 }
 .seed-floating-action-button__icon--extended_false {
     width: var(--seed-dimension-x6);
     height: var(--seed-dimension-x6)
 }
+.seed-floating-action-button__label--extended_false {
+    opacity: 0
+}
 .seed-floating-action-button__root--pressed_true {
     background-color: var(--seed-color-bg-brand-solid-pressed)
 }
@@ -56,6 +60,9 @@
 .seed-floating-action-button__icon--transitionEnabled_false {
     transition-duration: 0s
 }
+.seed-floating-action-button__label--transitionEnabled_false {
+    transition-duration: 0s
+}
 .seed-floating-action-button__root--extended_true-transitionEnabled_true {
     width: calc(var(--fab-label-width) + var(--seed-dimension-x4) + var(--seed-dimension-x1) + 2 * var(--seed-dimension-x4_5))
 }

package/recipes/image-frame-icon.css

@@ -0,0 +1,8 @@
+.seed-image-frame-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--seed-color-palette-static-white);
+    width: 24px;
+    height: 24px
+}

package/recipes/image-frame-icon.d.ts

@@ -0,0 +1,19 @@
+declare interface ImageFrameIconVariant {
+  
+}
+
+declare type ImageFrameIconVariantMap = {
+  [key in keyof ImageFrameIconVariant]: Array<ImageFrameIconVariant[key]>;
+};
+
+export declare type ImageFrameIconVariantProps = Partial<ImageFrameIconVariant>;
+
+export declare const imageFrameIconVariantMap: ImageFrameIconVariantMap;
+
+export declare const imageFrameIcon: ((
+  props?: ImageFrameIconVariantProps,
+) => string) & {
+  splitVariantProps: <T extends ImageFrameIconVariantProps>(
+    props: T,
+  ) => [ImageFrameIconVariantProps, Omit<T, keyof ImageFrameIconVariantProps>];
+}

package/recipes/image-frame-icon.mjs

@@ -0,0 +1,22 @@
+import './image-frame-icon.css';
+import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
+
+const defaultVariant = {};
+
+const compoundVariants = [];
+
+export const imageFrameIconVariantMap = {};
+
+export const imageFrameIconVariantKeys = Object.keys(imageFrameIconVariantMap);
+
+export function imageFrameIcon(props) {
+  return createClassName(
+    "seed-image-frame-icon",
+    mergeVariants(defaultVariant, props),
+    compoundVariants,
+  );
+}
+
+Object.assign(imageFrameIcon, { splitVariantProps: (props) => splitVariantProps(props, imageFrameIconVariantMap) });
+
+// @recipe(seed): image-frame-icon

package/recipes/image-frame-indicator.css

@@ -0,0 +1,17 @@
+.seed-image-frame-indicator__root {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: var(--seed-color-palette-static-black-alpha-800);
+    border-radius: var(--seed-radius-full);
+    padding-left: var(--seed-dimension-x1_5);
+    padding-right: var(--seed-dimension-x1_5);
+    padding-top: var(--seed-dimension-x0_5);
+    padding-bottom: var(--seed-dimension-x0_5)
+}
+.seed-image-frame-indicator__label {
+    color: var(--seed-color-palette-static-white);
+    font-size: var(--seed-font-size-t1);
+    line-height: var(--seed-line-height-t1);
+    font-weight: var(--seed-font-weight-medium)
+}

package/recipes/image-frame-indicator.d.ts

@@ -0,0 +1,21 @@
+declare interface ImageFrameIndicatorVariant {
+  
+}
+
+declare type ImageFrameIndicatorVariantMap = {
+  [key in keyof ImageFrameIndicatorVariant]: Array<ImageFrameIndicatorVariant[key]>;
+};
+
+export declare type ImageFrameIndicatorVariantProps = Partial<ImageFrameIndicatorVariant>;
+
+export declare type ImageFrameIndicatorSlotName = "root" | "label";
+
+export declare const imageFrameIndicatorVariantMap: ImageFrameIndicatorVariantMap;
+
+export declare const imageFrameIndicator: ((
+  props?: ImageFrameIndicatorVariantProps,
+) => Record<ImageFrameIndicatorSlotName, string>) & {
+  splitVariantProps: <T extends ImageFrameIndicatorVariantProps>(
+    props: T,
+  ) => [ImageFrameIndicatorVariantProps, Omit<T, keyof ImageFrameIndicatorVariantProps>];
+}

package/recipes/image-frame-indicator.mjs

@@ -0,0 +1,36 @@
+import './image-frame-indicator.css';
+import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
+
+const imageFrameIndicatorSlotNames = [
+  [
+    "root",
+    "seed-image-frame-indicator__root"
+  ],
+  [
+    "label",
+    "seed-image-frame-indicator__label"
+  ]
+];
+
+const defaultVariant = {};
+
+const compoundVariants = [];
+
+export const imageFrameIndicatorVariantMap = {};
+
+export const imageFrameIndicatorVariantKeys = Object.keys(imageFrameIndicatorVariantMap);
+
+export function imageFrameIndicator(props) {
+  return Object.fromEntries(
+    imageFrameIndicatorSlotNames.map(([slot, className]) => {
+      return [
+        slot,
+        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
+      ];
+    }),
+  );
+}
+
+Object.assign(imageFrameIndicator, { splitVariantProps: (props) => splitVariantProps(props, imageFrameIndicatorVariantMap) });
+
+// @recipe(seed): image-frame-indicator

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

@@ -0,0 +1,20 @@
+.seed-image-frame-reaction-button__root {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    position: relative;
+    width: var(--seed-dimension-x6);
+    height: var(--seed-dimension-x6);
+    background-color: transparent
+}
+.seed-image-frame-reaction-button__fillIcon {
+    width: var(--seed-dimension-x6);
+    height: var(--seed-dimension-x6);
+    pointer-events: none
+}
+.seed-image-frame-reaction-button__lineIcon {
+    width: var(--seed-dimension-x6);
+    height: var(--seed-dimension-x6);
+    pointer-events: none
+}

package/recipes/image-frame-reaction-button.d.ts

@@ -0,0 +1,21 @@
+declare interface ImageFrameReactionButtonVariant {
+  
+}
+
+declare type ImageFrameReactionButtonVariantMap = {
+  [key in keyof ImageFrameReactionButtonVariant]: Array<ImageFrameReactionButtonVariant[key]>;
+};
+
+export declare type ImageFrameReactionButtonVariantProps = Partial<ImageFrameReactionButtonVariant>;
+
+export declare type ImageFrameReactionButtonSlotName = "root" | "fillIcon" | "lineIcon";
+
+export declare const imageFrameReactionButtonVariantMap: ImageFrameReactionButtonVariantMap;
+
+export declare const imageFrameReactionButton: ((
+  props?: ImageFrameReactionButtonVariantProps,
+) => Record<ImageFrameReactionButtonSlotName, string>) & {
+  splitVariantProps: <T extends ImageFrameReactionButtonVariantProps>(
+    props: T,
+  ) => [ImageFrameReactionButtonVariantProps, Omit<T, keyof ImageFrameReactionButtonVariantProps>];
+}

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"