@seed-design/lynx-css 0.11.0 → 0.12.0

package/recipes/attachment-input-item.css

@@ -0,0 +1,276 @@
+.seed-attachment-input-item__root {
+    position: relative;
+    display: flex;
+    width: 100%;
+    height: 80px;
+    border-radius: var(--seed-radius-r3);
+    background-color: transparent;
+    transform: scale(1);
+    transition: transform var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale);
+    overflow: visible
+}
+.seed-attachment-input-item__surface {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--seed-dimension-x2_5);
+    border-radius: var(--seed-radius-r3);
+    background-color: var(--seed-color-bg-transparent);
+    pointer-events: auto;
+    overflow: hidden
+}
+.seed-attachment-input-item__image {
+    width: 100%;
+    height: 100%;
+    border-radius: var(--seed-radius-r3)
+}
+.seed-attachment-input-item__thumbnail {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--seed-dimension-x12);
+    height: var(--seed-dimension-x12);
+    background-color: var(--seed-color-bg-neutral-weak);
+    border-radius: var(--seed-radius-r2);
+    flex-shrink: 0;
+    color: var(--seed-color-fg-neutral-subtle)
+}
+.seed-attachment-input-item__thumbnailIcon {
+    width: var(--seed-dimension-x6);
+    height: var(--seed-dimension-x6);
+    flex-shrink: 0;
+    color: var(--seed-color-fg-neutral-subtle)
+}
+.seed-attachment-input-item__metadata {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    min-width: 0;
+    flex-grow: 1
+}
+.seed-attachment-input-item__name {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    word-break: break-all;
+    font-size: var(--seed-font-size-t2);
+    line-height: var(--seed-line-height-t2);
+    font-weight: var(--seed-font-weight-medium);
+    color: var(--seed-color-fg-neutral)
+}
+.seed-attachment-input-item__size {
+    font-size: var(--seed-font-size-t1);
+    line-height: var(--seed-line-height-t1);
+    font-weight: var(--seed-font-weight-regular);
+    color: var(--seed-color-fg-neutral-subtle)
+}
+.seed-attachment-input-item__backdrop {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--seed-radius-r3)
+}
+.seed-attachment-input-item__actionButton {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    border-width: 0;
+    padding: 0;
+    background-color: transparent;
+    border-radius: var(--seed-radius-r3);
+    color: var(--seed-color-fg-neutral-subtle);
+    gap: var(--seed-dimension-x1);
+    transition: transform var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale)
+}
+.seed-attachment-input-item__actionIcon {
+    width: var(--seed-dimension-x6);
+    height: var(--seed-dimension-x6);
+    flex-shrink: 0;
+    color: var(--seed-color-fg-neutral-subtle)
+}
+.seed-attachment-input-item__actionLabel {
+    font-size: var(--seed-font-size-t2);
+    line-height: var(--seed-line-height-t2);
+    font-weight: var(--seed-font-weight-medium);
+    color: var(--seed-color-fg-neutral-subtle)
+}
+.seed-attachment-input-item__removeButton {
+    position: absolute;
+    top: calc(var(--seed-dimension-x1) * -1);
+    right: calc(var(--seed-dimension-x1) * -1);
+    width: var(--seed-dimension-x5);
+    height: var(--seed-dimension-x5);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-width: 0;
+    padding: 0;
+    background-color: var(--seed-color-bg-layer-default);
+    border-radius: var(--seed-radius-full);
+    box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-weak);
+    color: var(--seed-color-fg-neutral);
+    transition: background-color var(--seed-duration-color-transition), transform var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale)
+}
+.seed-attachment-input-item__removeIcon {
+    width: var(--seed-dimension-x2_5);
+    height: var(--seed-dimension-x2_5);
+    flex-shrink: 0;
+    color: var(--seed-color-fg-neutral)
+}
+.seed-attachment-input-item__badge {}
+.seed-attachment-input-item__badgeLabel {}
+.seed-attachment-input-item__root--type_general {
+    width: 160px
+}
+.seed-attachment-input-item__surface--type_general {
+    padding-left: var(--seed-dimension-x4);
+    padding-right: var(--seed-dimension-x4);
+    box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-weak);
+    clip-path: path("M0 0 H143.607695 A12 12 0 0 0 160 16.392305 V80 H0 Z")
+}
+.seed-attachment-input-item__thumbnail--type_general {
+    color: var(--seed-color-fg-neutral-subtle)
+}
+.seed-attachment-input-item__metadata--type_general {}
+.seed-attachment-input-item__actionButton--type_general {
+    color: var(--seed-color-fg-neutral-subtle)
+}
+.seed-attachment-input-item__actionIcon--type_general {
+    color: var(--seed-color-fg-neutral-subtle)
+}
+.seed-attachment-input-item__actionLabel--type_general {
+    color: var(--seed-color-fg-neutral-subtle)
+}
+.seed-attachment-input-item__root--type_image {
+    width: 80px;
+    transition: opacity var(--seed-duration-color-transition), transform var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale)
+}
+.seed-attachment-input-item__surface--type_image {
+    box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-subtle);
+    clip-path: path("M0 0 H63.607695 A12 12 0 0 0 80 16.392305 V80 H0 Z")
+}
+.seed-attachment-input-item__thumbnail--type_image {
+    display: none
+}
+.seed-attachment-input-item__metadata--type_image {
+    display: none
+}
+.seed-attachment-input-item__badge--type_image {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: var(--seed-dimension-x6);
+    padding-left: var(--seed-dimension-x1);
+    padding-right: var(--seed-dimension-x1);
+    background-color: var(--seed-color-bg-overlay);
+    border-radius: 0 0 var(--seed-radius-r3) var(--seed-radius-r3)
+}
+.seed-attachment-input-item__badgeLabel--type_image {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: var(--seed-font-size-t2);
+    line-height: var(--seed-line-height-t2);
+    font-weight: var(--seed-font-weight-medium);
+    color: var(--seed-color-palette-static-white)
+}
+.seed-attachment-input-item__backdrop--type_image {
+    background-color: var(--seed-color-bg-overlay)
+}
+.seed-attachment-input-item__actionButton--type_image {
+    color: var(--seed-color-palette-static-white)
+}
+.seed-attachment-input-item__actionIcon--type_image {
+    color: var(--seed-color-palette-static-white)
+}
+.seed-attachment-input-item__actionLabel--type_image {
+    color: var(--seed-color-palette-static-white)
+}
+.seed-attachment-input-item__root--pressed_true {
+    transform: scale(var(--seed-scale-s98))
+}
+.seed-attachment-input-item__thumbnail--readOnly_true {
+    color: var(--seed-color-fg-disabled)
+}
+.seed-attachment-input-item__thumbnailIcon--readOnly_true {
+    color: var(--seed-color-fg-disabled)
+}
+.seed-attachment-input-item__name--readOnly_true {
+    color: var(--seed-color-fg-disabled)
+}
+.seed-attachment-input-item__size--readOnly_true {
+    color: var(--seed-color-fg-disabled)
+}
+.seed-attachment-input-item__root--dragging_true {
+    transform: scale(var(--seed-scale-s98))
+}
+.seed-attachment-input-item__thumbnail--dragging_true {
+    color: var(--seed-color-fg-disabled)
+}
+.seed-attachment-input-item__thumbnailIcon--dragging_true {
+    color: var(--seed-color-fg-disabled)
+}
+.seed-attachment-input-item__name--dragging_true {
+    color: var(--seed-color-fg-disabled)
+}
+.seed-attachment-input-item__size--dragging_true {
+    color: var(--seed-color-fg-disabled)
+}
+.seed-attachment-input-item__surface--dragging_true {
+    clip-path: inset(0px)
+}
+.seed-attachment-input-item__removeButton--dragging_true {
+    display: none
+}
+.seed-attachment-input-item__thumbnail--disabled_true {
+    color: var(--seed-color-fg-disabled)
+}
+.seed-attachment-input-item__thumbnailIcon--disabled_true {
+    color: var(--seed-color-fg-disabled)
+}
+.seed-attachment-input-item__name--disabled_true {
+    color: var(--seed-color-fg-disabled)
+}
+.seed-attachment-input-item__size--disabled_true {
+    color: var(--seed-color-fg-disabled)
+}
+.seed-attachment-input-item__actionButton--disabled_true {
+    color: var(--seed-color-fg-disabled)
+}
+.seed-attachment-input-item__actionIcon--disabled_true {
+    color: var(--seed-color-fg-disabled)
+}
+.seed-attachment-input-item__actionLabel--disabled_true {
+    color: var(--seed-color-fg-disabled)
+}
+.seed-attachment-input-item__removeButton--disabled_true {
+    color: var(--seed-color-fg-disabled)
+}
+.seed-attachment-input-item__removeIcon--disabled_true {
+    color: var(--seed-color-fg-disabled)
+}
+.seed-attachment-input-item__root--type_image-readOnly_true {
+    opacity: 0.5
+}
+.seed-attachment-input-item__root--type_image-dragging_true {
+    opacity: 0.5
+}

package/recipes/attachment-input-item.d.ts

@@ -0,0 +1,40 @@
+declare interface AttachmentInputItemVariant {
+  /**
+  * @default "general"
+  */
+  type: "general" | "image";
+/**
+  * @default false
+  */
+  pressed: boolean;
+/**
+  * @default false
+  */
+  readOnly: boolean;
+/**
+  * @default false
+  */
+  dragging: boolean;
+/**
+  * @default false
+  */
+  disabled: boolean;
+}
+
+declare type AttachmentInputItemVariantMap = {
+  [key in keyof AttachmentInputItemVariant]: Array<AttachmentInputItemVariant[key]>;
+};
+
+export declare type AttachmentInputItemVariantProps = Partial<AttachmentInputItemVariant>;
+
+export declare type AttachmentInputItemSlotName = "root" | "surface" | "image" | "thumbnail" | "thumbnailIcon" | "metadata" | "name" | "size" | "badge" | "badgeLabel" | "backdrop" | "actionButton" | "actionIcon" | "actionLabel" | "removeButton" | "removeIcon";
+
+export declare const attachmentInputItemVariantMap: AttachmentInputItemVariantMap;
+
+export declare const attachmentInputItem: ((
+  props?: AttachmentInputItemVariantProps,
+) => Record<AttachmentInputItemSlotName, string>) & {
+  splitVariantProps: <T extends AttachmentInputItemVariantProps>(
+    props: T,
+  ) => [AttachmentInputItemVariantProps, Omit<T, keyof AttachmentInputItemVariantProps>];
+}

package/recipes/attachment-input-item.mjs

@@ -0,0 +1,128 @@
+import './attachment-input-item.css';
+import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
+
+const attachmentInputItemSlotNames = [
+  [
+    "root",
+    "seed-attachment-input-item__root"
+  ],
+  [
+    "surface",
+    "seed-attachment-input-item__surface"
+  ],
+  [
+    "image",
+    "seed-attachment-input-item__image"
+  ],
+  [
+    "thumbnail",
+    "seed-attachment-input-item__thumbnail"
+  ],
+  [
+    "thumbnailIcon",
+    "seed-attachment-input-item__thumbnailIcon"
+  ],
+  [
+    "metadata",
+    "seed-attachment-input-item__metadata"
+  ],
+  [
+    "name",
+    "seed-attachment-input-item__name"
+  ],
+  [
+    "size",
+    "seed-attachment-input-item__size"
+  ],
+  [
+    "badge",
+    "seed-attachment-input-item__badge"
+  ],
+  [
+    "badgeLabel",
+    "seed-attachment-input-item__badgeLabel"
+  ],
+  [
+    "backdrop",
+    "seed-attachment-input-item__backdrop"
+  ],
+  [
+    "actionButton",
+    "seed-attachment-input-item__actionButton"
+  ],
+  [
+    "actionIcon",
+    "seed-attachment-input-item__actionIcon"
+  ],
+  [
+    "actionLabel",
+    "seed-attachment-input-item__actionLabel"
+  ],
+  [
+    "removeButton",
+    "seed-attachment-input-item__removeButton"
+  ],
+  [
+    "removeIcon",
+    "seed-attachment-input-item__removeIcon"
+  ]
+];
+
+const defaultVariant = {
+  "type": "general",
+  "pressed": false,
+  "readOnly": false,
+  "dragging": false,
+  "disabled": false
+};
+
+const compoundVariants = [
+  {
+    "type": "image",
+    "readOnly": true
+  },
+  {
+    "type": "image",
+    "dragging": true
+  }
+];
+
+export const attachmentInputItemVariantMap = {
+  "type": [
+    "general",
+    "image"
+  ],
+  "pressed": [
+    true,
+    false
+  ],
+  "readOnly": [
+    true,
+    false
+  ],
+  "dragging": [
+    true,
+    false
+  ],
+  "disabled": [
+    true,
+    false
+  ]
+};
+
+export const attachmentInputItemVariantKeys = Object.keys(attachmentInputItemVariantMap);
+
+export function attachmentInputItem(props) {
+  return Object.fromEntries(
+    attachmentInputItemSlotNames.map(([slot, className]) => {
+      return [
+        slot,
+        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
+      ];
+    }),
+  );
+}
+
+Object.assign(attachmentInputItem, { splitVariantProps: (props) => splitVariantProps(props, attachmentInputItemVariantMap) });
+
+// @recipe(seed): attachment-input-item

package/recipes/attachment-input-trigger.css

@@ -0,0 +1,53 @@
+.seed-attachment-input-trigger__root {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 80px;
+    height: 80px;
+    gap: var(--seed-dimension-x1);
+    flex-shrink: 0;
+    border-radius: var(--seed-radius-r3);
+    box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-weak);
+    padding: 0;
+    background-color: transparent;
+    transition: background-color var(--seed-duration-color-transition), transform var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale)
+}
+.seed-attachment-input-trigger__icon {
+    width: var(--seed-dimension-x6);
+    height: var(--seed-dimension-x6);
+    color: var(--seed-color-fg-neutral-subtle);
+    flex-shrink: 0
+}
+.seed-attachment-input-trigger__itemCountArea {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    font-size: var(--seed-font-size-t2);
+    line-height: var(--seed-line-height-t2)
+}
+.seed-attachment-input-trigger__itemCount {
+    color: var(--seed-color-fg-neutral);
+    font-size: var(--seed-font-size-t2);
+    line-height: var(--seed-line-height-t2);
+    font-weight: var(--seed-font-weight-regular)
+}
+.seed-attachment-input-trigger__maxItemCount {
+    color: var(--seed-color-fg-neutral-subtle);
+    font-size: var(--seed-font-size-t2);
+    line-height: var(--seed-line-height-t2);
+    font-weight: var(--seed-font-weight-regular)
+}
+.seed-attachment-input-trigger__root--pressed_true {
+    background-color: var(--seed-color-bg-transparent-pressed);
+    transform: scale(var(--seed-scale-s98))
+}
+.seed-attachment-input-trigger__icon--disabled_true {
+    color: var(--seed-color-fg-disabled)
+}
+.seed-attachment-input-trigger__itemCount--disabled_true {
+    color: var(--seed-color-fg-disabled)
+}
+.seed-attachment-input-trigger__maxItemCount--disabled_true {
+    color: var(--seed-color-fg-disabled)
+}

package/recipes/attachment-input-trigger.d.ts

@@ -0,0 +1,28 @@
+declare interface AttachmentInputTriggerVariant {
+  /**
+  * @default false
+  */
+  pressed: boolean;
+/**
+  * @default false
+  */
+  disabled: boolean;
+}
+
+declare type AttachmentInputTriggerVariantMap = {
+  [key in keyof AttachmentInputTriggerVariant]: Array<AttachmentInputTriggerVariant[key]>;
+};
+
+export declare type AttachmentInputTriggerVariantProps = Partial<AttachmentInputTriggerVariant>;
+
+export declare type AttachmentInputTriggerSlotName = "root" | "icon" | "itemCountArea" | "itemCount" | "maxItemCount";
+
+export declare const attachmentInputTriggerVariantMap: AttachmentInputTriggerVariantMap;
+
+export declare const attachmentInputTrigger: ((
+  props?: AttachmentInputTriggerVariantProps,
+) => Record<AttachmentInputTriggerSlotName, string>) & {
+  splitVariantProps: <T extends AttachmentInputTriggerVariantProps>(
+    props: T,
+  ) => [AttachmentInputTriggerVariantProps, Omit<T, keyof AttachmentInputTriggerVariantProps>];
+}

package/recipes/attachment-input-trigger.mjs

@@ -0,0 +1,60 @@
+import './attachment-input-trigger.css';
+import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
+
+const attachmentInputTriggerSlotNames = [
+  [
+    "root",
+    "seed-attachment-input-trigger__root"
+  ],
+  [
+    "icon",
+    "seed-attachment-input-trigger__icon"
+  ],
+  [
+    "itemCountArea",
+    "seed-attachment-input-trigger__itemCountArea"
+  ],
+  [
+    "itemCount",
+    "seed-attachment-input-trigger__itemCount"
+  ],
+  [
+    "maxItemCount",
+    "seed-attachment-input-trigger__maxItemCount"
+  ]
+];
+
+const defaultVariant = {
+  "pressed": false,
+  "disabled": false
+};
+
+const compoundVariants = [];
+
+export const attachmentInputTriggerVariantMap = {
+  "pressed": [
+    true,
+    false
+  ],
+  "disabled": [
+    true,
+    false
+  ]
+};
+
+export const attachmentInputTriggerVariantKeys = Object.keys(attachmentInputTriggerVariantMap);
+
+export function attachmentInputTrigger(props) {
+  return Object.fromEntries(
+    attachmentInputTriggerSlotNames.map(([slot, className]) => {
+      return [
+        slot,
+        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
+      ];
+    }),
+  );
+}
+
+Object.assign(attachmentInputTrigger, { splitVariantProps: (props) => splitVariantProps(props, attachmentInputTriggerVariantMap) });
+
+// @recipe(seed): attachment-input-trigger

package/recipes/attachment-input.css

@@ -0,0 +1,31 @@
+.seed-attachment-input__root {
+    display: flex;
+    flex-direction: column;
+    gap: var(--seed-dimension-x2);
+    position: relative;
+    margin-left: calc(var(--seed-attachment-input-extend-x) * -1);
+    margin-right: calc(var(--seed-attachment-input-extend-x) * -1)
+}
+.seed-attachment-input__container {
+    padding-top: var(--seed-dimension-x1_5);
+    margin-top: calc(var(--seed-dimension-x1_5) * -1);
+    padding-left: var(--seed-attachment-input-extend-x);
+    padding-right: var(--seed-attachment-input-extend-x)
+}
+.seed-attachment-input__containerContent {
+    display: flex;
+    flex-direction: row;
+    gap: var(--seed-dimension-x2);
+    width: max-content;
+    min-width: 100%;
+    flex-shrink: 0
+}
+.seed-attachment-input__itemGroup {
+    display: flex;
+    flex-direction: row;
+    width: max-content;
+    gap: var(--seed-dimension-x2);
+    flex-shrink: 0;
+    padding: 0;
+    margin: 0
+}

package/recipes/attachment-input.d.ts

@@ -0,0 +1,21 @@
+declare interface AttachmentInputVariant {
+  
+}
+
+declare type AttachmentInputVariantMap = {
+  [key in keyof AttachmentInputVariant]: Array<AttachmentInputVariant[key]>;
+};
+
+export declare type AttachmentInputVariantProps = Partial<AttachmentInputVariant>;
+
+export declare type AttachmentInputSlotName = "root" | "container" | "containerContent" | "itemGroup";
+
+export declare const attachmentInputVariantMap: AttachmentInputVariantMap;
+
+export declare const attachmentInput: ((
+  props?: AttachmentInputVariantProps,
+) => Record<AttachmentInputSlotName, string>) & {
+  splitVariantProps: <T extends AttachmentInputVariantProps>(
+    props: T,
+  ) => [AttachmentInputVariantProps, Omit<T, keyof AttachmentInputVariantProps>];
+}

package/recipes/attachment-input.mjs

@@ -0,0 +1,44 @@
+import './attachment-input.css';
+import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
+
+const attachmentInputSlotNames = [
+  [
+    "root",
+    "seed-attachment-input__root"
+  ],
+  [
+    "container",
+    "seed-attachment-input__container"
+  ],
+  [
+    "containerContent",
+    "seed-attachment-input__containerContent"
+  ],
+  [
+    "itemGroup",
+    "seed-attachment-input__itemGroup"
+  ]
+];
+
+const defaultVariant = {};
+
+const compoundVariants = [];
+
+export const attachmentInputVariantMap = {};
+
+export const attachmentInputVariantKeys = Object.keys(attachmentInputVariantMap);
+
+export function attachmentInput(props) {
+  return Object.fromEntries(
+    attachmentInputSlotNames.map(([slot, className]) => {
+      return [
+        slot,
+        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
+      ];
+    }),
+  );
+}
+
+Object.assign(attachmentInput, { splitVariantProps: (props) => splitVariantProps(props, attachmentInputVariantMap) });
+
+// @recipe(seed): attachment-input