@seed-design/lynx-css 0.10.2 → 0.11.1

package/recipes/menu-sheet.mjs

@@ -0,0 +1,88 @@
+import './menu-sheet.css';
+import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
+
+const menuSheetSlotNames = [
+  [
+    "positioner",
+    "seed-menu-sheet__positioner"
+  ],
+  [
+    "backdrop",
+    "seed-menu-sheet__backdrop"
+  ],
+  [
+    "content",
+    "seed-menu-sheet__content"
+  ],
+  [
+    "contentInner",
+    "seed-menu-sheet__contentInner"
+  ],
+  [
+    "header",
+    "seed-menu-sheet__header"
+  ],
+  [
+    "title",
+    "seed-menu-sheet__title"
+  ],
+  [
+    "description",
+    "seed-menu-sheet__description"
+  ],
+  [
+    "list",
+    "seed-menu-sheet__list"
+  ],
+  [
+    "group",
+    "seed-menu-sheet__group"
+  ],
+  [
+    "footer",
+    "seed-menu-sheet__footer"
+  ],
+  [
+    "closeButton",
+    "seed-menu-sheet__closeButton"
+  ],
+  [
+    "closeButtonLabel",
+    "seed-menu-sheet__closeButtonLabel"
+  ]
+];
+
+const defaultVariant = {
+  "skipAnimation": false,
+  "closeButtonPressed": false
+};
+
+const compoundVariants = [];
+
+export const menuSheetVariantMap = {
+  "skipAnimation": [
+    true,
+    false
+  ],
+  "closeButtonPressed": [
+    true,
+    false
+  ]
+};
+
+export const menuSheetVariantKeys = Object.keys(menuSheetVariantMap);
+
+export function menuSheet(props) {
+  return Object.fromEntries(
+    menuSheetSlotNames.map(([slot, className]) => {
+      return [
+        slot,
+        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
+      ];
+    }),
+  );
+}
+
+Object.assign(menuSheet, { splitVariantProps: (props) => splitVariantProps(props, menuSheetVariantMap) });
+
+// @recipe(seed): menu-sheet

package/recipes/menu.css

@@ -0,0 +1,101 @@
+.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
+}
+.seed-menu__content {
+    position: absolute;
+    display: flex;
+    flex-direction: column;
+    border-radius: var(--seed-radius-r5);
+    background-color: var(--seed-color-bg-layer-floating);
+    box-shadow: var(--seed-shadow-s3);
+    overflow: hidden;
+    transition-property: opacity, transform
+}
+.seed-menu__scrollArea {
+    width: 100%;
+    max-height: 480px
+}
+.seed-menu__scrollContent {
+    display: flex;
+    flex-direction: column;
+    padding-top: var(--seed-dimension-x2);
+    padding-bottom: var(--seed-dimension-x2);
+    gap: var(--seed-dimension-x2)
+}
+.seed-menu__group {
+    display: flex;
+    flex-direction: column;
+    flex-shrink: 0
+}
+.seed-menu__groupLabel {
+    color: var(--seed-color-fg-neutral-subtle);
+    flex-shrink: 0
+}
+.seed-menu__separator {
+    height: 1px;
+    flex-shrink: 0;
+    margin-left: var(--seed-dimension-x4);
+    margin-right: var(--seed-dimension-x4);
+    margin-bottom: var(--seed-dimension-x2);
+    background-color: var(--seed-color-stroke-neutral-muted)
+}
+.seed-menu__content--size_medium {
+    width: 240px
+}
+.seed-menu__groupLabel--size_medium {
+    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);
+    font-size: var(--seed-font-size-t4);
+    line-height: var(--seed-line-height-t4);
+    font-weight: var(--seed-font-weight-medium)
+}
+.seed-menu__content--size_small {
+    width: 200px
+}
+.seed-menu__groupLabel--size_small {
+    padding-top: var(--seed-dimension-x2);
+    padding-bottom: var(--seed-dimension-x2);
+    padding-left: var(--seed-dimension-x4);
+    padding-right: var(--seed-dimension-x4);
+    font-size: var(--seed-font-size-t3);
+    line-height: var(--seed-line-height-t3);
+    font-weight: var(--seed-font-weight-regular)
+}
+.seed-menu__content--open_true {
+    opacity: 1;
+    transform: scale(1);
+    transition-duration: var(--seed-duration-d3);
+    transition-timing-function: var(--seed-timing-function-enter)
+}
+.seed-menu__content--open_false {
+    opacity: 0;
+    transform: scale(0.95);
+    transition-duration: var(--seed-duration-d2);
+    transition-timing-function: var(--seed-timing-function-exit)
+}
+.seed-menu__content--positioned_false {
+    opacity: 0;
+    transform: scale(1);
+    transition-duration: 0s
+}
+.seed-menu__content--open_true-positioned_true {
+    animation-name: seed-enter;
+    animation-duration: var(--seed-duration-d3);
+    animation-timing-function: var(--seed-timing-function-enter);
+    --seed-enter-opacity: 0;
+    --seed-enter-scale: 0.95
+}

package/recipes/menu.d.ts

@@ -0,0 +1,32 @@
+declare interface MenuVariant {
+  /**
+  * @default "medium"
+  */
+  size: "medium" | "small";
+/**
+  * @default false
+  */
+  open: boolean;
+/**
+  * @default false
+  */
+  positioned: boolean;
+}
+
+declare type MenuVariantMap = {
+  [key in keyof MenuVariant]: Array<MenuVariant[key]>;
+};
+
+export declare type MenuVariantProps = Partial<MenuVariant>;
+
+export declare type MenuSlotName = "positioner" | "backdrop" | "content" | "scrollArea" | "scrollContent" | "group" | "groupLabel" | "separator";
+
+export declare const menuVariantMap: MenuVariantMap;
+
+export declare const menu: ((
+  props?: MenuVariantProps,
+) => Record<MenuSlotName, string>) & {
+  splitVariantProps: <T extends MenuVariantProps>(
+    props: T,
+  ) => [MenuVariantProps, Omit<T, keyof MenuVariantProps>];
+}

package/recipes/menu.mjs

@@ -0,0 +1,85 @@
+import './menu.css';
+import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
+
+const menuSlotNames = [
+  [
+    "positioner",
+    "seed-menu__positioner"
+  ],
+  [
+    "backdrop",
+    "seed-menu__backdrop"
+  ],
+  [
+    "content",
+    "seed-menu__content"
+  ],
+  [
+    "scrollArea",
+    "seed-menu__scrollArea"
+  ],
+  [
+    "scrollContent",
+    "seed-menu__scrollContent"
+  ],
+  [
+    "group",
+    "seed-menu__group"
+  ],
+  [
+    "groupLabel",
+    "seed-menu__groupLabel"
+  ],
+  [
+    "separator",
+    "seed-menu__separator"
+  ]
+];
+
+const defaultVariant = {
+  "size": "medium",
+  "open": false,
+  "positioned": false
+};
+
+const compoundVariants = [
+  {
+    "positioned": false
+  },
+  {
+    "open": true,
+    "positioned": true
+  }
+];
+
+export const menuVariantMap = {
+  "size": [
+    "medium",
+    "small"
+  ],
+  "open": [
+    true,
+    false
+  ],
+  "positioned": [
+    true,
+    false
+  ]
+};
+
+export const menuVariantKeys = Object.keys(menuVariantMap);
+
+export function menu(props) {
+  return Object.fromEntries(
+    menuSlotNames.map(([slot, className]) => {
+      return [
+        slot,
+        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
+      ];
+    }),
+  );
+}
+
+Object.assign(menu, { splitVariantProps: (props) => splitVariantProps(props, menuVariantMap) });
+
+// @recipe(seed): menu