@seed-design/lynx-css 0.1.1-alpha.0 → 0.2.0-alpha.3

package/recipes/floating-action-button.layered.mjs

@@ -1,47 +0,0 @@
-import './floating-action-button.layered.css';
-import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
-
-const floatingActionButtonSlotNames = [
-  [
-    "root",
-    "seed-floating-action-button__root"
-  ],
-  [
-    "icon",
-    "seed-floating-action-button__icon"
-  ],
-  [
-    "label",
-    "seed-floating-action-button__label"
-  ]
-];
-
-const defaultVariant = {
-  "extended": true
-};
-
-const compoundVariants = [];
-
-export const floatingActionButtonVariantMap = {
-  "extended": [
-    true,
-    false
-  ]
-};
-
-export const floatingActionButtonVariantKeys = Object.keys(floatingActionButtonVariantMap);
-
-export function floatingActionButton(props) {
-  return Object.fromEntries(
-    floatingActionButtonSlotNames.map(([slot, className]) => {
-      return [
-        slot,
-        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
-      ];
-    }),
-  );
-}
-
-Object.assign(floatingActionButton, { splitVariantProps: (props) => splitVariantProps(props, floatingActionButtonVariantMap) });
-
-// @recipe(seed): floating-action-button

package/recipes/floating-action-button.mjs

@@ -1,47 +0,0 @@
-import './floating-action-button.css';
-import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
-
-const floatingActionButtonSlotNames = [
-  [
-    "root",
-    "seed-floating-action-button__root"
-  ],
-  [
-    "icon",
-    "seed-floating-action-button__icon"
-  ],
-  [
-    "label",
-    "seed-floating-action-button__label"
-  ]
-];
-
-const defaultVariant = {
-  "extended": true
-};
-
-const compoundVariants = [];
-
-export const floatingActionButtonVariantMap = {
-  "extended": [
-    true,
-    false
-  ]
-};
-
-export const floatingActionButtonVariantKeys = Object.keys(floatingActionButtonVariantMap);
-
-export function floatingActionButton(props) {
-  return Object.fromEntries(
-    floatingActionButtonSlotNames.map(([slot, className]) => {
-      return [
-        slot,
-        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
-      ];
-    }),
-  );
-}
-
-Object.assign(floatingActionButton, { splitVariantProps: (props) => splitVariantProps(props, floatingActionButtonVariantMap) });
-
-// @recipe(seed): floating-action-button

package/recipes/help-bubble.css

@@ -1,80 +0,0 @@
-.seed-help-bubble__positioner {
-    --popover-z-index: 99;
-    z-index: calc(var(--popover-z-index) + var(--z-index-offset, 0));
-}
-.seed-help-bubble__content {
-    display: flex;
-    align-items: flex-start;
-    background: var(--seed-color-bg-neutral-inverted);
-    padding-left: var(--seed-dimension-x3);
-    padding-right: var(--seed-dimension-x3);
-    padding-top: var(--seed-dimension-x2_5);
-    padding-bottom: var(--seed-dimension-x2_5);
-    border-radius: var(--seed-radius-r3);
-    --seed-box-max-width: none;
-    max-width: var(--seed-box-max-width);
-}
-.seed-help-bubble__content.seed-help-bubble__content--state_open, .seed-help-bubble__content.seed-help-bubble__content--open_true {
-    animation: seed-enter;
-    animation-timing-function: var(--seed-timing-function-enter);
-    animation-duration: var(--seed-duration-d4);
-    --seed-enter-translate-x: 0;
-    --seed-enter-translate-y: 0;
-    --seed-enter-opacity: 0;
-    --seed-enter-scale: 0.9;
-}
-.seed-help-bubble__content:not([data-state="open"]):not([data-open]) {
-    animation: seed-exit;
-    animation-timing-function: var(--seed-timing-function-easing);
-    animation-duration: var(--seed-duration-d4);
-    animation-fill-mode: forwards;
-    --seed-exit-translate-x: 0;
-    --seed-exit-translate-y: 0;
-    --seed-exit-opacity: 0;
-    --seed-exit-scale: 1;
-}
-.seed-help-bubble__content[hidden], .seed-help-bubble__content.seed-help-bubble__content--hidden_true {
-    display: none !important;
-}
-.seed-help-bubble__arrow {
-    width: 12px;
-    height: 12px;
-}
-.seed-help-bubble__arrowTip {
-    display: block;
-    width: 12px;
-    height: 8px;
-}
-.seed-help-bubble__body {
-    display: flex;
-    flex-direction: column;
-    gap: var(--seed-dimension-x0_5);
-}
-.seed-help-bubble__title {
-    color: var(--seed-color-fg-neutral-inverted);
-    font-size: var(--seed-font-size-t3);
-    font-weight: var(--seed-font-weight-bold);
-    line-height: var(--seed-line-height-t3);
-}
-.seed-help-bubble__description {
-    color: var(--seed-color-fg-neutral-inverted);
-    font-size: var(--seed-font-size-t3);
-    font-weight: var(--seed-font-weight-regular);
-    line-height: var(--seed-line-height-t3);
-}
-.seed-help-bubble__closeButton {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border: none;
-    background: transparent;
-    padding: calc((38px - var(--seed-dimension-x3_5)) / 2);
-    margin-left: calc(var(--seed-dimension-x1) - ((38px - var(--seed-dimension-x3_5)) / 2));
-    margin-right: calc(-1 * ((38px - var(--seed-dimension-x3_5)) / 2));
-    margin-top: calc(-1 * ((38px - var(--seed-dimension-x3_5)) / 2) + var(--seed-dimension-x0_5));
-    margin-bottom: calc(-1 * ((38px - var(--seed-dimension-x3_5)) / 2) + var(--seed-dimension-x0_5));
-    color: var(--seed-color-fg-neutral-inverted);
-    --seed-icon-size: var(--seed-dimension-x3_5);
-    --seed-icon-color: var(--seed-color-fg-neutral-inverted);
-    border-radius: var(--seed-radius-r3);
-}

package/recipes/help-bubble.d.ts

@@ -1,21 +0,0 @@
-declare interface HelpBubbleVariant {
-  
-}
-
-declare type HelpBubbleVariantMap = {
-  [key in keyof HelpBubbleVariant]: Array<HelpBubbleVariant[key]>;
-};
-
-export declare type HelpBubbleVariantProps = Partial<HelpBubbleVariant>;
-
-export declare type HelpBubbleSlotName = "positioner" | "content" | "arrow" | "arrowTip" | "body" | "title" | "description" | "closeButton";
-
-export declare const helpBubbleVariantMap: HelpBubbleVariantMap;
-
-export declare const helpBubble: ((
-  props?: HelpBubbleVariantProps,
-) => Record<HelpBubbleSlotName, string>) & {
-  splitVariantProps: <T extends HelpBubbleVariantProps>(
-    props: T,
-  ) => [HelpBubbleVariantProps, Omit<T, keyof HelpBubbleVariantProps>];
-}

package/recipes/help-bubble.layered.css

@@ -1,92 +0,0 @@
-@layer seed-components {
-  .seed-help-bubble__positioner {
-    --popover-z-index: 99;
-    z-index: calc(var(--popover-z-index)  + var(--z-index-offset, 0));
-  }
-
-  .seed-help-bubble__content {
-    background: var(--seed-color-bg-neutral-inverted);
-    padding-left: var(--seed-dimension-x3);
-    padding-right: var(--seed-dimension-x3);
-    padding-top: var(--seed-dimension-x2_5);
-    padding-bottom: var(--seed-dimension-x2_5);
-    border-radius: var(--seed-radius-r3);
-    --seed-box-max-width: none;
-    max-width: var(--seed-box-max-width);
-    align-items: flex-start;
-    display: flex;
-  }
-
-  .seed-help-bubble__content.seed-help-bubble__content--state_open, .seed-help-bubble__content.seed-help-bubble__content--open_true {
-    animation: seed-enter;
-    animation-timing-function: var(--seed-timing-function-enter);
-    animation-duration: var(--seed-duration-d4);
-    --seed-enter-translate-x: 0;
-    --seed-enter-translate-y: 0;
-    --seed-enter-opacity: 0;
-    --seed-enter-scale: .9;
-  }
-
-  .seed-help-bubble__content:not([data-state="open"]):not([data-open]) {
-    animation: seed-exit;
-    animation-timing-function: var(--seed-timing-function-easing);
-    animation-duration: var(--seed-duration-d4);
-    --seed-exit-translate-x: 0;
-    --seed-exit-translate-y: 0;
-    --seed-exit-opacity: 0;
-    --seed-exit-scale: 1;
-    animation-fill-mode: forwards;
-  }
-
-  .seed-help-bubble__content[hidden], .seed-help-bubble__content.seed-help-bubble__content--hidden_true {
-    display: none !important;
-  }
-
-  .seed-help-bubble__arrow {
-    width: 12px;
-    height: 12px;
-  }
-
-  .seed-help-bubble__arrowTip {
-    width: 12px;
-    height: 8px;
-    display: block;
-  }
-
-  .seed-help-bubble__body {
-    gap: var(--seed-dimension-x0_5);
-    flex-direction: column;
-    display: flex;
-  }
-
-  .seed-help-bubble__title {
-    color: var(--seed-color-fg-neutral-inverted);
-    font-size: var(--seed-font-size-t3);
-    font-weight: var(--seed-font-weight-bold);
-    line-height: var(--seed-line-height-t3);
-  }
-
-  .seed-help-bubble__description {
-    color: var(--seed-color-fg-neutral-inverted);
-    font-size: var(--seed-font-size-t3);
-    font-weight: var(--seed-font-weight-regular);
-    line-height: var(--seed-line-height-t3);
-  }
-
-  .seed-help-bubble__closeButton {
-    padding: calc((38px - var(--seed-dimension-x3_5)) / 2);
-    margin-left: calc(var(--seed-dimension-x1)  - ((38px - var(--seed-dimension-x3_5)) / 2));
-    margin-right: calc(-1 * ((38px - var(--seed-dimension-x3_5)) / 2));
-    margin-top: calc(-1 * ((38px - var(--seed-dimension-x3_5)) / 2)  + var(--seed-dimension-x0_5));
-    margin-bottom: calc(-1 * ((38px - var(--seed-dimension-x3_5)) / 2)  + var(--seed-dimension-x0_5));
-    color: var(--seed-color-fg-neutral-inverted);
-    --seed-icon-size: var(--seed-dimension-x3_5);
-    --seed-icon-color: var(--seed-color-fg-neutral-inverted);
-    border-radius: var(--seed-radius-r3);
-    background: none;
-    border: none;
-    justify-content: center;
-    align-items: center;
-    display: flex;
-  }
-}

package/recipes/help-bubble.layered.mjs

@@ -1,60 +0,0 @@
-import './help-bubble.layered.css';
-import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
-
-const helpBubbleSlotNames = [
-  [
-    "positioner",
-    "seed-help-bubble__positioner"
-  ],
-  [
-    "content",
-    "seed-help-bubble__content"
-  ],
-  [
-    "arrow",
-    "seed-help-bubble__arrow"
-  ],
-  [
-    "arrowTip",
-    "seed-help-bubble__arrowTip"
-  ],
-  [
-    "body",
-    "seed-help-bubble__body"
-  ],
-  [
-    "title",
-    "seed-help-bubble__title"
-  ],
-  [
-    "description",
-    "seed-help-bubble__description"
-  ],
-  [
-    "closeButton",
-    "seed-help-bubble__closeButton"
-  ]
-];
-
-const defaultVariant = {};
-
-const compoundVariants = [];
-
-export const helpBubbleVariantMap = {};
-
-export const helpBubbleVariantKeys = Object.keys(helpBubbleVariantMap);
-
-export function helpBubble(props) {
-  return Object.fromEntries(
-    helpBubbleSlotNames.map(([slot, className]) => {
-      return [
-        slot,
-        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
-      ];
-    }),
-  );
-}
-
-Object.assign(helpBubble, { splitVariantProps: (props) => splitVariantProps(props, helpBubbleVariantMap) });
-
-// @recipe(seed): help-bubble

package/recipes/help-bubble.mjs

@@ -1,60 +0,0 @@
-import './help-bubble.css';
-import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
-
-const helpBubbleSlotNames = [
-  [
-    "positioner",
-    "seed-help-bubble__positioner"
-  ],
-  [
-    "content",
-    "seed-help-bubble__content"
-  ],
-  [
-    "arrow",
-    "seed-help-bubble__arrow"
-  ],
-  [
-    "arrowTip",
-    "seed-help-bubble__arrowTip"
-  ],
-  [
-    "body",
-    "seed-help-bubble__body"
-  ],
-  [
-    "title",
-    "seed-help-bubble__title"
-  ],
-  [
-    "description",
-    "seed-help-bubble__description"
-  ],
-  [
-    "closeButton",
-    "seed-help-bubble__closeButton"
-  ]
-];
-
-const defaultVariant = {};
-
-const compoundVariants = [];
-
-export const helpBubbleVariantMap = {};
-
-export const helpBubbleVariantKeys = Object.keys(helpBubbleVariantMap);
-
-export function helpBubble(props) {
-  return Object.fromEntries(
-    helpBubbleSlotNames.map(([slot, className]) => {
-      return [
-        slot,
-        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
-      ];
-    }),
-  );
-}
-
-Object.assign(helpBubble, { splitVariantProps: (props) => splitVariantProps(props, helpBubbleVariantMap) });
-
-// @recipe(seed): help-bubble

package/recipes/identity-placeholder.css

@@ -1,15 +0,0 @@
-.seed-identity-placeholder__root {
-    position: relative;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    height: 100%;
-    background-color: var(--seed-color-palette-gray-500)
-}
-.seed-identity-placeholder__image {
-    display: block;
-    width: 100%;
-    height: 100%;
-    overflow: hidden
-}

package/recipes/identity-placeholder.d.ts

@@ -1,24 +0,0 @@
-declare interface IdentityPlaceholderVariant {
-  /**
-  * @default "person"
-  */
-  identity: "person" | "business";
-}
-
-declare type IdentityPlaceholderVariantMap = {
-  [key in keyof IdentityPlaceholderVariant]: Array<IdentityPlaceholderVariant[key]>;
-};
-
-export declare type IdentityPlaceholderVariantProps = Partial<IdentityPlaceholderVariant>;
-
-export declare type IdentityPlaceholderSlotName = "root" | "image";
-
-export declare const identityPlaceholderVariantMap: IdentityPlaceholderVariantMap;
-
-export declare const identityPlaceholder: ((
-  props?: IdentityPlaceholderVariantProps,
-) => Record<IdentityPlaceholderSlotName, string>) & {
-  splitVariantProps: <T extends IdentityPlaceholderVariantProps>(
-    props: T,
-  ) => [IdentityPlaceholderVariantProps, Omit<T, keyof IdentityPlaceholderVariantProps>];
-}

package/recipes/identity-placeholder.layered.css

@@ -1,18 +0,0 @@
-@layer seed-components {
-  .seed-identity-placeholder__root {
-    background-color: var(--seed-color-palette-gray-500);
-    justify-content: center;
-    align-items: center;
-    width: 100%;
-    height: 100%;
-    display: inline-flex;
-    position: relative;
-  }
-
-  .seed-identity-placeholder__image {
-    width: 100%;
-    height: 100%;
-    display: block;
-    overflow: hidden;
-  }
-}

package/recipes/identity-placeholder.layered.mjs

@@ -1,43 +0,0 @@
-import './identity-placeholder.layered.css';
-import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
-
-const identityPlaceholderSlotNames = [
-  [
-    "root",
-    "seed-identity-placeholder__root"
-  ],
-  [
-    "image",
-    "seed-identity-placeholder__image"
-  ]
-];
-
-const defaultVariant = {
-  "identity": "person"
-};
-
-const compoundVariants = [];
-
-export const identityPlaceholderVariantMap = {
-  "identity": [
-    "person",
-    "business"
-  ]
-};
-
-export const identityPlaceholderVariantKeys = Object.keys(identityPlaceholderVariantMap);
-
-export function identityPlaceholder(props) {
-  return Object.fromEntries(
-    identityPlaceholderSlotNames.map(([slot, className]) => {
-      return [
-        slot,
-        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
-      ];
-    }),
-  );
-}
-
-Object.assign(identityPlaceholder, { splitVariantProps: (props) => splitVariantProps(props, identityPlaceholderVariantMap) });
-
-// @recipe(seed): identity-placeholder

package/recipes/identity-placeholder.mjs

@@ -1,43 +0,0 @@
-import './identity-placeholder.css';
-import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
-
-const identityPlaceholderSlotNames = [
-  [
-    "root",
-    "seed-identity-placeholder__root"
-  ],
-  [
-    "image",
-    "seed-identity-placeholder__image"
-  ]
-];
-
-const defaultVariant = {
-  "identity": "person"
-};
-
-const compoundVariants = [];
-
-export const identityPlaceholderVariantMap = {
-  "identity": [
-    "person",
-    "business"
-  ]
-};
-
-export const identityPlaceholderVariantKeys = Object.keys(identityPlaceholderVariantMap);
-
-export function identityPlaceholder(props) {
-  return Object.fromEntries(
-    identityPlaceholderSlotNames.map(([slot, className]) => {
-      return [
-        slot,
-        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
-      ];
-    }),
-  );
-}
-
-Object.assign(identityPlaceholder, { splitVariantProps: (props) => splitVariantProps(props, identityPlaceholderVariantMap) });
-
-// @recipe(seed): identity-placeholder

package/recipes/image-frame-icon.css

@@ -1,7 +0,0 @@
-.seed-image-frame-icon {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center
-}.seed-image-frame-icon__text {
-    color: var(--seed-color-palette-static-white)
-}

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

@@ -1,22 +0,0 @@
-declare interface ImageFrameIconVariant {
-  
-  disabled?: boolean;
-  loading?: boolean;}
-
-declare type ImageFrameIconVariantMap = {
-  [key in keyof ImageFrameIconVariant]: Array<ImageFrameIconVariant[key]>;
-};
-
-export declare type ImageFrameIconVariantProps = Partial<ImageFrameIconVariant>;
-
-export declare type ImageFrameIconSlotName = "root" | "text";
-
-export declare const imageFrameIconVariantMap: ImageFrameIconVariantMap;
-
-export declare const imageFrameIcon: ((
-  props?: ImageFrameIconVariantProps,
-) => Record<ImageFrameIconSlotName, string>) & {
-  splitVariantProps: <T extends ImageFrameIconVariantProps>(
-    props: T,
-  ) => [ImageFrameIconVariantProps, Omit<T, keyof ImageFrameIconVariantProps>];
-}

package/recipes/image-frame-icon.layered.css

@@ -1,11 +0,0 @@
-@layer seed-components {
-  .seed-image-frame-icon {
-    justify-content: center;
-    align-items: center;
-    display: inline-flex;
-  }
-
-  .seed-image-frame-icon__text {
-    color: var(--seed-color-palette-static-white);
-  }
-}

package/recipes/image-frame-icon.layered.mjs

@@ -1,43 +0,0 @@
-import './image-frame-icon.layered.css';
-import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
-
-const imageFrameIconSlotNames = [
-  [
-    "root",
-    "seed-image-frame-icon"
-  ],
-  [
-    "text",
-    "seed-image-frame-icon__text"
-  ]
-];
-
-const defaultVariant = {};
-
-const compoundVariants = [];
-
-export const imageFrameIconVariantMap = {
-  "disabled": [
-    true
-  ],
-  "loading": [
-    true
-  ]
-};
-
-export const imageFrameIconVariantKeys = Object.keys(imageFrameIconVariantMap);
-
-export function imageFrameIcon(props) {
-  return Object.fromEntries(
-    imageFrameIconSlotNames.map(([slot, className]) => {
-      return [
-        slot,
-        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
-      ];
-    }),
-  );
-}
-
-Object.assign(imageFrameIcon, { splitVariantProps: (props) => splitVariantProps(props, imageFrameIconVariantMap) });
-
-// @recipe(seed): image-frame-icon

package/recipes/image-frame-icon.mjs

@@ -1,43 +0,0 @@
-import './image-frame-icon.css';
-import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
-
-const imageFrameIconSlotNames = [
-  [
-    "root",
-    "seed-image-frame-icon"
-  ],
-  [
-    "text",
-    "seed-image-frame-icon__text"
-  ]
-];
-
-const defaultVariant = {};
-
-const compoundVariants = [];
-
-export const imageFrameIconVariantMap = {
-  "disabled": [
-    true
-  ],
-  "loading": [
-    true
-  ]
-};
-
-export const imageFrameIconVariantKeys = Object.keys(imageFrameIconVariantMap);
-
-export function imageFrameIcon(props) {
-  return Object.fromEntries(
-    imageFrameIconSlotNames.map(([slot, className]) => {
-      return [
-        slot,
-        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
-      ];
-    }),
-  );
-}
-
-Object.assign(imageFrameIcon, { splitVariantProps: (props) => splitVariantProps(props, imageFrameIconVariantMap) });
-
-// @recipe(seed): image-frame-icon