@seed-design/css 0.0.0-alpha-20260324091316

package/recipes/identity-placeholder.css

@@ -0,0 +1,19 @@
+.seed-identity-placeholder__root {
+    box-sizing: border-box;
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    vertical-align: top;
+    width: 100%;
+    height: 100%;
+    background-color: var(--seed-color-palette-gray-500)
+}
+.seed-identity-placeholder__image {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    overflow: hidden;
+    fill: var(--seed-color-palette-static-white-alpha-800)
+}

package/recipes/identity-placeholder.d.ts

@@ -0,0 +1,24 @@
+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

@@ -0,0 +1,22 @@
+@layer seed-components {
+  .seed-identity-placeholder__root {
+    box-sizing: border-box;
+    vertical-align: top;
+    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 {
+    object-fit: cover;
+    width: 100%;
+    height: 100%;
+    fill: var(--seed-color-palette-static-white-alpha-800);
+    display: block;
+    overflow: hidden;
+  }
+}

package/recipes/identity-placeholder.layered.mjs

@@ -0,0 +1,43 @@
+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

@@ -0,0 +1,43 @@
+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

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

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.layered.css

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

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

@@ -0,0 +1,22 @@
+import './image-frame-icon.layered.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-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,16 @@
+.seed-image-frame-indicator {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    background-color: var(--seed-color-palette-static-black-alpha-800);
+    color: var(--seed-color-palette-static-white);
+    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);
+    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,19 @@
+declare interface ImageFrameIndicatorVariant {
+  
+}
+
+declare type ImageFrameIndicatorVariantMap = {
+  [key in keyof ImageFrameIndicatorVariant]: Array<ImageFrameIndicatorVariant[key]>;
+};
+
+export declare type ImageFrameIndicatorVariantProps = Partial<ImageFrameIndicatorVariant>;
+
+export declare const imageFrameIndicatorVariantMap: ImageFrameIndicatorVariantMap;
+
+export declare const imageFrameIndicator: ((
+  props?: ImageFrameIndicatorVariantProps,
+) => string) & {
+  splitVariantProps: <T extends ImageFrameIndicatorVariantProps>(
+    props: T,
+  ) => [ImageFrameIndicatorVariantProps, Omit<T, keyof ImageFrameIndicatorVariantProps>];
+}

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

@@ -0,0 +1,18 @@
+@layer seed-components {
+  .seed-image-frame-indicator {
+    box-sizing: border-box;
+    background-color: var(--seed-color-palette-static-black-alpha-800);
+    color: var(--seed-color-palette-static-white);
+    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);
+    font-size: var(--seed-font-size-t1);
+    line-height: var(--seed-line-height-t1);
+    font-weight: var(--seed-font-weight-medium);
+    justify-content: center;
+    align-items: center;
+    display: inline-flex;
+  }
+}

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

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

package/recipes/image-frame-indicator.mjs

@@ -0,0 +1,22 @@
+import './image-frame-indicator.css';
+import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
+
+const defaultVariant = {};
+
+const compoundVariants = [];
+
+export const imageFrameIndicatorVariantMap = {};
+
+export const imageFrameIndicatorVariantKeys = Object.keys(imageFrameIndicatorVariantMap);
+
+export function imageFrameIndicator(props) {
+  return createClassName(
+    "seed-image-frame-indicator",
+    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,52 @@
+.seed-image-frame-reaction-button__root {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    cursor: pointer;
+    border: none;
+    padding: 0;
+    position: relative;
+    width: var(--seed-dimension-x6);
+    height: var(--seed-dimension-x6);
+    background: transparent;
+}
+.seed-image-frame-reaction-button__root::before {
+    content: '';
+    position: absolute;
+    top: calc((var(--seed-dimension-x10) - var(--seed-dimension-x6)) / 2 * -1);
+    right: calc((var(--seed-dimension-x10) - var(--seed-dimension-x6)) / 2 * -1);
+    bottom: calc((var(--seed-dimension-x10) - var(--seed-dimension-x6)) / 2 * -1);
+    left: calc((var(--seed-dimension-x10) - var(--seed-dimension-x6)) / 2 * -1);
+    outline: var(--seed-dimension-x0_5) solid transparent;
+    outline-offset: calc(var(--seed-dimension-x0_5) * -1);
+    transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
+}
+.seed-image-frame-reaction-button__root:is(:focus, [data-focus]) {
+    outline: none;
+}
+.seed-image-frame-reaction-button__root:is(:focus-visible, [data-focus-visible]):before {
+    border-radius: var(--seed-radius-r1);
+    outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
+    outline-offset: calc(var(--seed-dimension-x0_5) * -1);
+}
+.seed-image-frame-reaction-button__fillIcon {
+    position: absolute;
+    inset: 0;
+    margin: auto;
+    width: var(--seed-dimension-x6);
+    height: var(--seed-dimension-x6);
+    pointer-events: none;
+}
+.seed-image-frame-reaction-button__lineIcon {
+    position: absolute;
+    inset: 0;
+    margin: auto;
+    width: var(--seed-dimension-x6);
+    height: var(--seed-dimension-x6);
+    color: var(--seed-color-palette-static-white);
+    pointer-events: none;
+}
+.seed-image-frame-reaction-button__lineIcon:is([aria-pressed=true], [data-pressed]) {
+    color: var(--seed-color-bg-transparent);
+}

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.layered.css

@@ -0,0 +1,60 @@
+@layer seed-components {
+  .seed-image-frame-reaction-button__root {
+    box-sizing: border-box;
+    cursor: pointer;
+    width: var(--seed-dimension-x6);
+    height: var(--seed-dimension-x6);
+    background: none;
+    border: none;
+    justify-content: center;
+    align-items: center;
+    padding: 0;
+    display: inline-flex;
+    position: relative;
+  }
+
+  .seed-image-frame-reaction-button__root:before {
+    content: "";
+    top: calc((var(--seed-dimension-x10)  - var(--seed-dimension-x6)) / 2 * -1);
+    right: calc((var(--seed-dimension-x10)  - var(--seed-dimension-x6)) / 2 * -1);
+    bottom: calc((var(--seed-dimension-x10)  - var(--seed-dimension-x6)) / 2 * -1);
+    left: calc((var(--seed-dimension-x10)  - var(--seed-dimension-x6)) / 2 * -1);
+    outline: var(--seed-dimension-x0_5) solid transparent;
+    outline-offset: calc(var(--seed-dimension-x0_5) * -1);
+    transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
+    position: absolute;
+  }
+
+  .seed-image-frame-reaction-button__root:is(:focus, [data-focus]) {
+    outline: none;
+  }
+
+  .seed-image-frame-reaction-button__root:is(:focus-visible, [data-focus-visible]):before {
+    border-radius: var(--seed-radius-r1);
+    outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
+    outline-offset: calc(var(--seed-dimension-x0_5) * -1);
+  }
+
+  .seed-image-frame-reaction-button__fillIcon {
+    width: var(--seed-dimension-x6);
+    height: var(--seed-dimension-x6);
+    pointer-events: none;
+    margin: auto;
+    position: absolute;
+    inset: 0;
+  }
+
+  .seed-image-frame-reaction-button__lineIcon {
+    width: var(--seed-dimension-x6);
+    height: var(--seed-dimension-x6);
+    color: var(--seed-color-palette-static-white);
+    pointer-events: none;
+    margin: auto;
+    position: absolute;
+    inset: 0;
+  }
+
+  .seed-image-frame-reaction-button__lineIcon:is([aria-pressed="true"], [data-pressed]) {
+    color: var(--seed-color-bg-transparent);
+  }
+}

package/recipes/image-frame-reaction-button.layered.mjs

@@ -0,0 +1,40 @@
+import './image-frame-reaction-button.layered.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-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,30 @@
+.seed-image-frame__root {
+    position: relative;
+    overflow: hidden;
+    border-radius: inherit
+}
+.seed-image-frame__content {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    border-radius: inherit
+}
+.seed-image-frame__fallback {
+    width: 100%;
+    height: 100%
+}
+.seed-image-frame__root--stroke_true::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    pointer-events: none;
+    border-radius: inherit;
+    box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-subtle)
+}
+.seed-image-frame__root--rounded_true {
+    border-radius: var(--seed-radius-r2)
+}

package/recipes/image-frame.d.ts

@@ -0,0 +1,28 @@
+declare interface ImageFrameVariant {
+  /**
+  * @default false
+  */
+  stroke: boolean;
+/**
+  * @default false
+  */
+  rounded: boolean;
+}
+
+declare type ImageFrameVariantMap = {
+  [key in keyof ImageFrameVariant]: Array<ImageFrameVariant[key]>;
+};
+
+export declare type ImageFrameVariantProps = Partial<ImageFrameVariant>;
+
+export declare type ImageFrameSlotName = "root" | "content" | "fallback";
+
+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.layered.css

@@ -0,0 +1,33 @@
+@layer seed-components {
+  .seed-image-frame__root {
+    border-radius: inherit;
+    position: relative;
+    overflow: hidden;
+  }
+
+  .seed-image-frame__content {
+    object-fit: cover;
+    border-radius: inherit;
+    width: 100%;
+    height: 100%;
+    display: block;
+  }
+
+  .seed-image-frame__fallback {
+    width: 100%;
+    height: 100%;
+  }
+
+  .seed-image-frame__root--stroke_true:after {
+    content: "";
+    pointer-events: none;
+    border-radius: inherit;
+    box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-subtle);
+    position: absolute;
+    inset: 0;
+  }
+
+  .seed-image-frame__root--rounded_true {
+    border-radius: var(--seed-radius-r2);
+  }
+}