@seed-design/lynx-css 0.10.2 → 0.11.1

package/recipes/list-item.mjs

@@ -0,0 +1,93 @@
+import './list-item.css';
+import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
+
+const listItemSlotNames = [
+  [
+    "interactionRoot",
+    "seed-list-item__interactionRoot"
+  ],
+  [
+    "root",
+    "seed-list-item__root"
+  ],
+  [
+    "highlightedOverlay",
+    "seed-list-item__highlightedOverlay"
+  ],
+  [
+    "pressedOverlay",
+    "seed-list-item__pressedOverlay"
+  ],
+  [
+    "layout",
+    "seed-list-item__layout"
+  ],
+  [
+    "content",
+    "seed-list-item__content"
+  ],
+  [
+    "title",
+    "seed-list-item__title"
+  ],
+  [
+    "detail",
+    "seed-list-item__detail"
+  ],
+  [
+    "prefix",
+    "seed-list-item__prefix"
+  ],
+  [
+    "suffix",
+    "seed-list-item__suffix"
+  ],
+  [
+    "prefixIcon",
+    "seed-list-item__prefixIcon"
+  ],
+  [
+    "suffixIcon",
+    "seed-list-item__suffixIcon"
+  ]
+];
+
+const defaultVariant = {
+  "highlighted": false,
+  "pressed": false,
+  "disabled": false
+};
+
+const compoundVariants = [];
+
+export const listItemVariantMap = {
+  "highlighted": [
+    true,
+    false
+  ],
+  "pressed": [
+    true,
+    false
+  ],
+  "disabled": [
+    true,
+    false
+  ]
+};
+
+export const listItemVariantKeys = Object.keys(listItemVariantMap);
+
+export function listItem(props) {
+  return Object.fromEntries(
+    listItemSlotNames.map(([slot, className]) => {
+      return [
+        slot,
+        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
+      ];
+    }),
+  );
+}
+
+Object.assign(listItem, { splitVariantProps: (props) => splitVariantProps(props, listItemVariantMap) });
+
+// @recipe(seed): list-item

package/recipes/list.css

@@ -0,0 +1,5 @@
+.seed-list {
+    display: flex;
+    flex-direction: column;
+    width: 100%
+}

package/recipes/list.d.ts

@@ -0,0 +1,19 @@
+declare interface ListVariant {
+  
+}
+
+declare type ListVariantMap = {
+  [key in keyof ListVariant]: Array<ListVariant[key]>;
+};
+
+export declare type ListVariantProps = Partial<ListVariant>;
+
+export declare const listVariantMap: ListVariantMap;
+
+export declare const list: ((
+  props?: ListVariantProps,
+) => string) & {
+  splitVariantProps: <T extends ListVariantProps>(
+    props: T,
+  ) => [ListVariantProps, Omit<T, keyof ListVariantProps>];
+}

package/recipes/list.mjs

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

package/recipes/menu-item.css

@@ -0,0 +1,119 @@
+.seed-menu-item__root {
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    flex-shrink: 0
+}
+.seed-menu-item__pressedOverlay {
+    position: absolute;
+    top: 0;
+    right: var(--seed-dimension-x2);
+    bottom: 0;
+    left: var(--seed-dimension-x2);
+    border-radius: var(--seed-radius-r3);
+    background-color: var(--seed-color-bg-transparent-pressed);
+    opacity: 0;
+    transition-property: opacity;
+    transition-duration: var(--seed-duration-color-transition);
+    transition-timing-function: var(--seed-timing-function-easing)
+}
+.seed-menu-item__body {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    min-width: 0;
+    gap: var(--seed-dimension-x0_5)
+}
+.seed-menu-item__label {
+    font-weight: var(--seed-font-weight-regular)
+}
+.seed-menu-item__description {
+    font-weight: var(--seed-font-weight-regular);
+    color: var(--seed-color-fg-neutral-subtle)
+}
+.seed-menu-item__prefixIcon {
+    flex-shrink: 0
+}
+.seed-menu-item__suffixIcon {
+    flex-shrink: 0
+}
+.seed-menu-item__root--size_medium {
+    padding-top: var(--seed-dimension-x3);
+    padding-bottom: var(--seed-dimension-x3);
+    padding-left: var(--seed-dimension-x4);
+    padding-right: var(--seed-dimension-x4);
+    gap: var(--seed-dimension-x3)
+}
+.seed-menu-item__label--size_medium {
+    font-size: var(--seed-font-size-t5);
+    line-height: var(--seed-line-height-t5)
+}
+.seed-menu-item__description--size_medium {
+    font-size: var(--seed-font-size-t3);
+    line-height: var(--seed-line-height-t3)
+}
+.seed-menu-item__prefixIcon--size_medium {
+    width: 22px;
+    height: 22px
+}
+.seed-menu-item__suffixIcon--size_medium {
+    width: 18px;
+    height: 18px
+}
+.seed-menu-item__root--size_small {
+    padding-top: var(--seed-dimension-x2_5);
+    padding-bottom: var(--seed-dimension-x2_5);
+    padding-left: var(--seed-dimension-x4);
+    padding-right: var(--seed-dimension-x4);
+    gap: var(--seed-dimension-x2)
+}
+.seed-menu-item__label--size_small {
+    font-size: var(--seed-font-size-t4);
+    line-height: var(--seed-line-height-t4)
+}
+.seed-menu-item__description--size_small {
+    font-size: var(--seed-font-size-t2);
+    line-height: var(--seed-line-height-t2)
+}
+.seed-menu-item__prefixIcon--size_small {
+    width: 18px;
+    height: 18px
+}
+.seed-menu-item__suffixIcon--size_small {
+    width: 16px;
+    height: 16px
+}
+.seed-menu-item__label--disabled_true {
+    color: var(--seed-color-fg-disabled)
+}
+.seed-menu-item__description--disabled_true {
+    color: var(--seed-color-fg-disabled)
+}
+.seed-menu-item__prefixIcon--disabled_true {
+    color: var(--seed-color-fg-disabled)
+}
+.seed-menu-item__suffixIcon--disabled_true {
+    color: var(--seed-color-fg-disabled)
+}
+.seed-menu-item__label--tone_neutral-disabled_false {
+    color: var(--seed-color-fg-neutral)
+}
+.seed-menu-item__prefixIcon--tone_neutral-disabled_false {
+    color: var(--seed-color-fg-neutral)
+}
+.seed-menu-item__suffixIcon--tone_neutral-disabled_false {
+    color: var(--seed-color-fg-neutral)
+}
+.seed-menu-item__label--tone_critical-disabled_false {
+    color: var(--seed-color-fg-critical)
+}
+.seed-menu-item__prefixIcon--tone_critical-disabled_false {
+    color: var(--seed-color-fg-critical)
+}
+.seed-menu-item__suffixIcon--tone_critical-disabled_false {
+    color: var(--seed-color-fg-critical)
+}
+.seed-menu-item__pressedOverlay--pressed_true-disabled_false {
+    opacity: 1
+}

package/recipes/menu-item.d.ts

@@ -0,0 +1,36 @@
+declare interface MenuItemVariant {
+  /**
+  * @default "medium"
+  */
+  size: "medium" | "small";
+/**
+  * @default "neutral"
+  */
+  tone: "neutral" | "critical";
+/**
+  * @default false
+  */
+  disabled: boolean;
+/**
+  * @default false
+  */
+  pressed: boolean;
+}
+
+declare type MenuItemVariantMap = {
+  [key in keyof MenuItemVariant]: Array<MenuItemVariant[key]>;
+};
+
+export declare type MenuItemVariantProps = Partial<MenuItemVariant>;
+
+export declare type MenuItemSlotName = "root" | "pressedOverlay" | "body" | "label" | "description" | "prefixIcon" | "suffixIcon";
+
+export declare const menuItemVariantMap: MenuItemVariantMap;
+
+export declare const menuItem: ((
+  props?: MenuItemVariantProps,
+) => Record<MenuItemSlotName, string>) & {
+  splitVariantProps: <T extends MenuItemVariantProps>(
+    props: T,
+  ) => [MenuItemVariantProps, Omit<T, keyof MenuItemVariantProps>];
+}

package/recipes/menu-item.mjs

@@ -0,0 +1,91 @@
+import './menu-item.css';
+import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
+
+const menuItemSlotNames = [
+  [
+    "root",
+    "seed-menu-item__root"
+  ],
+  [
+    "pressedOverlay",
+    "seed-menu-item__pressedOverlay"
+  ],
+  [
+    "body",
+    "seed-menu-item__body"
+  ],
+  [
+    "label",
+    "seed-menu-item__label"
+  ],
+  [
+    "description",
+    "seed-menu-item__description"
+  ],
+  [
+    "prefixIcon",
+    "seed-menu-item__prefixIcon"
+  ],
+  [
+    "suffixIcon",
+    "seed-menu-item__suffixIcon"
+  ]
+];
+
+const defaultVariant = {
+  "size": "medium",
+  "tone": "neutral",
+  "disabled": false,
+  "pressed": false
+};
+
+const compoundVariants = [
+  {
+    "tone": "neutral",
+    "disabled": false
+  },
+  {
+    "tone": "critical",
+    "disabled": false
+  },
+  {
+    "pressed": true,
+    "disabled": false
+  }
+];
+
+export const menuItemVariantMap = {
+  "size": [
+    "medium",
+    "small"
+  ],
+  "tone": [
+    "neutral",
+    "critical"
+  ],
+  "disabled": [
+    true,
+    false
+  ],
+  "pressed": [
+    true,
+    false
+  ]
+};
+
+export const menuItemVariantKeys = Object.keys(menuItemVariantMap);
+
+export function menuItem(props) {
+  return Object.fromEntries(
+    menuItemSlotNames.map(([slot, className]) => {
+      return [
+        slot,
+        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
+      ];
+    }),
+  );
+}
+
+Object.assign(menuItem, { splitVariantProps: (props) => splitVariantProps(props, menuItemVariantMap) });
+
+// @recipe(seed): menu-item

package/recipes/menu-sheet-item.css

@@ -0,0 +1,69 @@
+.seed-menu-sheet-item__root {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    width: 100%;
+    min-height: 52px;
+    padding-top: var(--seed-dimension-x3_5);
+    padding-right: var(--seed-dimension-x4);
+    padding-bottom: var(--seed-dimension-x3_5);
+    padding-left: var(--seed-dimension-x4);
+    gap: var(--seed-dimension-x3_5);
+    background-color: var(--seed-color-bg-neutral-weak)
+}
+.seed-menu-sheet-item__content {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    flex-shrink: 1;
+    min-width: 0;
+    gap: var(--seed-dimension-x0_5)
+}
+.seed-menu-sheet-item__label {
+    font-size: var(--seed-font-size-t5);
+    line-height: var(--seed-line-height-t5);
+    font-weight: var(--seed-font-weight-regular)
+}
+.seed-menu-sheet-item__description {
+    color: var(--seed-color-fg-neutral-subtle);
+    font-size: var(--seed-font-size-t3);
+    line-height: var(--seed-line-height-t3);
+    font-weight: var(--seed-font-weight-medium)
+}
+.seed-menu-sheet-item__prefixIcon {
+    flex-shrink: 0;
+    width: 22px;
+    height: 22px
+}
+.seed-menu-sheet-item__divider {
+    width: 100%;
+    height: 1px;
+    background-color: var(--seed-color-stroke-neutral-muted)
+}
+.seed-menu-sheet-item__prefixIcon--tone_neutral {
+    color: var(--seed-color-fg-neutral)
+}
+.seed-menu-sheet-item__label--tone_neutral {
+    color: var(--seed-color-fg-neutral)
+}
+.seed-menu-sheet-item__prefixIcon--tone_critical {
+    color: var(--seed-color-fg-critical)
+}
+.seed-menu-sheet-item__label--tone_critical {
+    color: var(--seed-color-fg-critical)
+}
+.seed-menu-sheet-item__content--labelAlign_left {
+    align-items: flex-start;
+    text-align: start
+}
+.seed-menu-sheet-item__root--labelAlign_center {
+    justify-content: center
+}
+.seed-menu-sheet-item__content--labelAlign_center {
+    align-items: center;
+    text-align: center
+}
+.seed-menu-sheet-item__root--pressed_true {
+    background-color: var(--seed-color-bg-neutral-weak-pressed)
+}

package/recipes/menu-sheet-item.d.ts

@@ -0,0 +1,32 @@
+declare interface MenuSheetItemVariant {
+  /**
+  * @default "neutral"
+  */
+  tone: "neutral" | "critical";
+/**
+  * @default "left"
+  */
+  labelAlign: "left" | "center";
+/**
+  * @default false
+  */
+  pressed: boolean;
+}
+
+declare type MenuSheetItemVariantMap = {
+  [key in keyof MenuSheetItemVariant]: Array<MenuSheetItemVariant[key]>;
+};
+
+export declare type MenuSheetItemVariantProps = Partial<MenuSheetItemVariant>;
+
+export declare type MenuSheetItemSlotName = "root" | "content" | "label" | "description" | "prefixIcon" | "divider";
+
+export declare const menuSheetItemVariantMap: MenuSheetItemVariantMap;
+
+export declare const menuSheetItem: ((
+  props?: MenuSheetItemVariantProps,
+) => Record<MenuSheetItemSlotName, string>) & {
+  splitVariantProps: <T extends MenuSheetItemVariantProps>(
+    props: T,
+  ) => [MenuSheetItemVariantProps, Omit<T, keyof MenuSheetItemVariantProps>];
+}

package/recipes/menu-sheet-item.mjs

@@ -0,0 +1,69 @@
+import './menu-sheet-item.css';
+import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
+
+const menuSheetItemSlotNames = [
+  [
+    "root",
+    "seed-menu-sheet-item__root"
+  ],
+  [
+    "content",
+    "seed-menu-sheet-item__content"
+  ],
+  [
+    "label",
+    "seed-menu-sheet-item__label"
+  ],
+  [
+    "description",
+    "seed-menu-sheet-item__description"
+  ],
+  [
+    "prefixIcon",
+    "seed-menu-sheet-item__prefixIcon"
+  ],
+  [
+    "divider",
+    "seed-menu-sheet-item__divider"
+  ]
+];
+
+const defaultVariant = {
+  "tone": "neutral",
+  "labelAlign": "left",
+  "pressed": false
+};
+
+const compoundVariants = [];
+
+export const menuSheetItemVariantMap = {
+  "tone": [
+    "neutral",
+    "critical"
+  ],
+  "labelAlign": [
+    "left",
+    "center"
+  ],
+  "pressed": [
+    true,
+    false
+  ]
+};
+
+export const menuSheetItemVariantKeys = Object.keys(menuSheetItemVariantMap);
+
+export function menuSheetItem(props) {
+  return Object.fromEntries(
+    menuSheetItemSlotNames.map(([slot, className]) => {
+      return [
+        slot,
+        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
+      ];
+    }),
+  );
+}
+
+Object.assign(menuSheetItem, { splitVariantProps: (props) => splitVariantProps(props, menuSheetItemVariantMap) });
+
+// @recipe(seed): menu-sheet-item

package/recipes/menu-sheet.css

@@ -0,0 +1,104 @@
+.seed-menu-sheet__positioner {
+    position: fixed;
+    display: flex;
+    justify-content: center;
+    align-items: flex-end;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    --sheet-z-index: 20;
+    z-index: calc(var(--sheet-z-index) + var(--layer-index, 0))
+}
+.seed-menu-sheet__backdrop {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    opacity: 0;
+    background-color: var(--seed-color-bg-overlay);
+    z-index: calc(var(--sheet-z-index) + var(--layer-index, 0))
+}
+.seed-menu-sheet__content {
+    position: relative;
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
+    background-color: var(--seed-color-bg-layer-floating);
+    max-width: 480px;
+    border-top-left-radius: var(--seed-radius-r5);
+    border-top-right-radius: var(--seed-radius-r5);
+    transform: translate3d(0, 100%, 0)
+}
+.seed-menu-sheet__contentInner {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    padding-top: var(--seed-dimension-x6);
+    padding-right: var(--seed-dimension-spacing-x-global-gutter);
+    padding-left: var(--seed-dimension-spacing-x-global-gutter)
+}
+.seed-menu-sheet__header {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    gap: var(--seed-dimension-x1);
+    padding-bottom: var(--seed-dimension-x4)
+}
+.seed-menu-sheet__title {
+    color: var(--seed-color-fg-neutral);
+    font-size: var(--seed-font-size-t6);
+    line-height: var(--seed-line-height-t6);
+    font-weight: var(--seed-font-weight-bold);
+    margin: 0
+}
+.seed-menu-sheet__description {
+    color: var(--seed-color-fg-neutral-muted);
+    font-size: var(--seed-font-size-t4);
+    line-height: var(--seed-line-height-t4);
+    font-weight: var(--seed-font-weight-regular);
+    margin: 0
+}
+.seed-menu-sheet__list {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    gap: var(--seed-dimension-x2_5)
+}
+.seed-menu-sheet__group {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    overflow: hidden;
+    border-radius: var(--seed-radius-r4)
+}
+.seed-menu-sheet__footer {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    padding-top: var(--seed-dimension-x2_5)
+}
+.seed-menu-sheet__closeButton {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: var(--seed-color-bg-neutral-weak);
+    min-height: 52px;
+    padding-top: var(--seed-dimension-x3_5);
+    padding-right: var(--seed-dimension-x5);
+    padding-bottom: var(--seed-dimension-x3_5);
+    padding-left: var(--seed-dimension-x5);
+    border-radius: var(--seed-radius-r3)
+}
+.seed-menu-sheet__closeButtonLabel {
+    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-menu-sheet__closeButton--closeButtonPressed_true {
+    background-color: var(--seed-color-bg-neutral-weak-pressed)
+}

package/recipes/menu-sheet.d.ts

@@ -0,0 +1,28 @@
+declare interface MenuSheetVariant {
+  /**
+  * @default false
+  */
+  skipAnimation: boolean;
+/**
+  * @default false
+  */
+  closeButtonPressed: boolean;
+}
+
+declare type MenuSheetVariantMap = {
+  [key in keyof MenuSheetVariant]: Array<MenuSheetVariant[key]>;
+};
+
+export declare type MenuSheetVariantProps = Partial<MenuSheetVariant>;
+
+export declare type MenuSheetSlotName = "positioner" | "backdrop" | "content" | "contentInner" | "header" | "title" | "description" | "list" | "group" | "footer" | "closeButton" | "closeButtonLabel";
+
+export declare const menuSheetVariantMap: MenuSheetVariantMap;
+
+export declare const menuSheet: ((
+  props?: MenuSheetVariantProps,
+) => Record<MenuSheetSlotName, string>) & {
+  splitVariantProps: <T extends MenuSheetVariantProps>(
+    props: T,
+  ) => [MenuSheetVariantProps, Omit<T, keyof MenuSheetVariantProps>];
+}