@seed-design/css 0.0.1-rc.0

package/recipes/app-screen.mjs

@@ -0,0 +1,66 @@
+import { createClassName } from "./className.mjs";
+import { mergeVariants } from "./mergeVariants.mjs";
+import { splitVariantProps } from "./splitVariantProps.mjs";
+
+const appScreenSlotNames = [
+  [
+    "root",
+    "seed-app-screen__root"
+  ],
+  [
+    "layer",
+    "seed-app-screen__layer"
+  ],
+  [
+    "dim",
+    "seed-app-screen__dim"
+  ],
+  [
+    "edge",
+    "seed-app-screen__edge"
+  ]
+];
+
+const defaultVariant = {
+  "theme": "cupertino",
+  "transitionStyle": "slideFromRightIOS",
+  "layerOffsetTop": "appBar",
+  "layerOffsetBottom": "none"
+};
+
+const compoundVariants = [];
+
+export const appScreenVariantMap = {
+  "theme": [
+    "cupertino",
+    "android"
+  ],
+  "transitionStyle": [
+    "slideFromRightIOS",
+    "fadeFromBottomAndroid"
+  ],
+  "layerOffsetTop": [
+    "none",
+    "safeArea",
+    "appBar"
+  ],
+  "layerOffsetBottom": [
+    "none",
+    "safeArea"
+  ]
+};
+
+export const appScreenVariantKeys = Object.keys(appScreenVariantMap);
+
+export function appScreen(props) {
+  return Object.fromEntries(
+    appScreenSlotNames.map(([slot, className]) => {
+      return [
+        slot,
+        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
+      ];
+    }),
+  );
+}
+
+Object.assign(appScreen, { splitVariantProps: (props) => splitVariantProps(props, appScreenVariantMap) });

package/recipes/avatar-stack.d.ts

@@ -0,0 +1,24 @@
+declare interface AvatarStackVariant {
+  /**
+  * @default 48
+  */
+  size: "20" | "24" | "36" | "48" | "64";
+}
+
+declare type AvatarStackVariantMap = {
+  [key in keyof AvatarStackVariant]: Array<AvatarStackVariant[key]>;
+};
+
+export declare type AvatarStackVariantProps = Partial<AvatarStackVariant>;
+
+export declare type AvatarStackSlotName = "root" | "item";
+
+export declare const avatarStackVariantMap: AvatarStackVariantMap;
+
+export declare const avatarStack: ((
+  props?: AvatarStackVariantProps,
+) => Record<AvatarStackSlotName, string>) & {
+  splitVariantProps: <T extends AvatarStackVariantProps>(
+    props: T,
+  ) => [AvatarStackVariantProps, Omit<T, keyof AvatarStackVariantProps>];
+}

package/recipes/avatar-stack.mjs

@@ -0,0 +1,45 @@
+import { createClassName } from "./className.mjs";
+import { mergeVariants } from "./mergeVariants.mjs";
+import { splitVariantProps } from "./splitVariantProps.mjs";
+
+const avatarStackSlotNames = [
+  [
+    "root",
+    "seed-avatar-stack__root"
+  ],
+  [
+    "item",
+    "seed-avatar-stack__item"
+  ]
+];
+
+const defaultVariant = {
+  "size": 48
+};
+
+const compoundVariants = [];
+
+export const avatarStackVariantMap = {
+  "size": [
+    "20",
+    "24",
+    "36",
+    "48",
+    "64"
+  ]
+};
+
+export const avatarStackVariantKeys = Object.keys(avatarStackVariantMap);
+
+export function avatarStack(props) {
+  return Object.fromEntries(
+    avatarStackSlotNames.map(([slot, className]) => {
+      return [
+        slot,
+        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
+      ];
+    }),
+  );
+}
+
+Object.assign(avatarStack, { splitVariantProps: (props) => splitVariantProps(props, avatarStackVariantMap) });

package/recipes/avatar.d.ts

@@ -0,0 +1,24 @@
+declare interface AvatarVariant {
+  /**
+  * @default 48
+  */
+  size: "20" | "24" | "36" | "48" | "64" | "80" | "96";
+}
+
+declare type AvatarVariantMap = {
+  [key in keyof AvatarVariant]: Array<AvatarVariant[key]>;
+};
+
+export declare type AvatarVariantProps = Partial<AvatarVariant>;
+
+export declare type AvatarSlotName = "root" | "image" | "fallback" | "badge";
+
+export declare const avatarVariantMap: AvatarVariantMap;
+
+export declare const avatar: ((
+  props?: AvatarVariantProps,
+) => Record<AvatarSlotName, string>) & {
+  splitVariantProps: <T extends AvatarVariantProps>(
+    props: T,
+  ) => [AvatarVariantProps, Omit<T, keyof AvatarVariantProps>];
+}

package/recipes/avatar.mjs

@@ -0,0 +1,55 @@
+import { createClassName } from "./className.mjs";
+import { mergeVariants } from "./mergeVariants.mjs";
+import { splitVariantProps } from "./splitVariantProps.mjs";
+
+const avatarSlotNames = [
+  [
+    "root",
+    "seed-avatar__root"
+  ],
+  [
+    "image",
+    "seed-avatar__image"
+  ],
+  [
+    "fallback",
+    "seed-avatar__fallback"
+  ],
+  [
+    "badge",
+    "seed-avatar__badge"
+  ]
+];
+
+const defaultVariant = {
+  "size": 48
+};
+
+const compoundVariants = [];
+
+export const avatarVariantMap = {
+  "size": [
+    "20",
+    "24",
+    "36",
+    "48",
+    "64",
+    "80",
+    "96"
+  ]
+};
+
+export const avatarVariantKeys = Object.keys(avatarVariantMap);
+
+export function avatar(props) {
+  return Object.fromEntries(
+    avatarSlotNames.map(([slot, className]) => {
+      return [
+        slot,
+        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
+      ];
+    }),
+  );
+}
+
+Object.assign(avatar, { splitVariantProps: (props) => splitVariantProps(props, avatarVariantMap) });

package/recipes/badge.d.ts

@@ -0,0 +1,36 @@
+declare interface BadgeVariant {
+  /**
+  * @default medium
+  */
+  size: "medium" | "large";
+/**
+  * @default rectangle
+  */
+  shape: "rectangle" | "pill";
+/**
+  * @default solid
+  */
+  variant: "weak" | "solid" | "outline";
+/**
+  * @default neutral
+  */
+  tone: "neutral" | "brand" | "informative" | "positive" | "critical";
+}
+
+declare type BadgeVariantMap = {
+  [key in keyof BadgeVariant]: Array<BadgeVariant[key]>;
+};
+
+export declare type BadgeVariantProps = Partial<BadgeVariant>;
+
+export declare type BadgeSlotName = "root";
+
+export declare const badgeVariantMap: BadgeVariantMap;
+
+export declare const badge: ((
+  props?: BadgeVariantProps,
+) => Record<BadgeSlotName, string>) & {
+  splitVariantProps: <T extends BadgeVariantProps>(
+    props: T,
+  ) => [BadgeVariantProps, Omit<T, keyof BadgeVariantProps>];
+}

package/recipes/badge.mjs

@@ -0,0 +1,126 @@
+import { createClassName } from "./className.mjs";
+import { mergeVariants } from "./mergeVariants.mjs";
+import { splitVariantProps } from "./splitVariantProps.mjs";
+
+const badgeSlotNames = [
+  [
+    "root",
+    "seed-badge__root"
+  ]
+];
+
+const defaultVariant = {
+  "size": "medium",
+  "shape": "rectangle",
+  "variant": "solid",
+  "tone": "neutral"
+};
+
+const compoundVariants = [
+  {
+    "shape": "rectangle",
+    "size": "medium"
+  },
+  {
+    "shape": "rectangle",
+    "size": "large"
+  },
+  {
+    "tone": "neutral",
+    "variant": "weak"
+  },
+  {
+    "tone": "neutral",
+    "variant": "solid"
+  },
+  {
+    "tone": "neutral",
+    "variant": "outline"
+  },
+  {
+    "tone": "brand",
+    "variant": "weak"
+  },
+  {
+    "tone": "brand",
+    "variant": "solid"
+  },
+  {
+    "tone": "brand",
+    "variant": "outline"
+  },
+  {
+    "tone": "informative",
+    "variant": "weak"
+  },
+  {
+    "tone": "informative",
+    "variant": "solid"
+  },
+  {
+    "tone": "informative",
+    "variant": "outline"
+  },
+  {
+    "tone": "positive",
+    "variant": "weak"
+  },
+  {
+    "tone": "positive",
+    "variant": "solid"
+  },
+  {
+    "tone": "positive",
+    "variant": "outline"
+  },
+  {
+    "tone": "critical",
+    "variant": "weak"
+  },
+  {
+    "tone": "critical",
+    "variant": "solid"
+  },
+  {
+    "tone": "critical",
+    "variant": "outline"
+  }
+];
+
+export const badgeVariantMap = {
+  "size": [
+    "medium",
+    "large"
+  ],
+  "shape": [
+    "rectangle",
+    "pill"
+  ],
+  "variant": [
+    "weak",
+    "solid",
+    "outline"
+  ],
+  "tone": [
+    "neutral",
+    "brand",
+    "informative",
+    "positive",
+    "critical"
+  ]
+};
+
+export const badgeVariantKeys = Object.keys(badgeVariantMap);
+
+export function badge(props) {
+  return Object.fromEntries(
+    badgeSlotNames.map(([slot, className]) => {
+      return [
+        slot,
+        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
+      ];
+    }),
+  );
+}
+
+Object.assign(badge, { splitVariantProps: (props) => splitVariantProps(props, badgeVariantMap) });

package/recipes/bottom-sheet.d.ts

@@ -0,0 +1,21 @@
+declare interface BottomSheetVariant {
+  
+}
+
+declare type BottomSheetVariantMap = {
+  [key in keyof BottomSheetVariant]: Array<BottomSheetVariant[key]>;
+};
+
+export declare type BottomSheetVariantProps = Partial<BottomSheetVariant>;
+
+export declare type BottomSheetSlotName = "positioner" | "backdrop" | "content" | "header" | "body" | "footer" | "title" | "description" | "closeButton";
+
+export declare const bottomSheetVariantMap: BottomSheetVariantMap;
+
+export declare const bottomSheet: ((
+  props?: BottomSheetVariantProps,
+) => Record<BottomSheetSlotName, string>) & {
+  splitVariantProps: <T extends BottomSheetVariantProps>(
+    props: T,
+  ) => [BottomSheetVariantProps, Omit<T, keyof BottomSheetVariantProps>];
+}

package/recipes/bottom-sheet.mjs

@@ -0,0 +1,63 @@
+import { createClassName } from "./className.mjs";
+import { mergeVariants } from "./mergeVariants.mjs";
+import { splitVariantProps } from "./splitVariantProps.mjs";
+
+const bottomSheetSlotNames = [
+  [
+    "positioner",
+    "seed-bottom-sheet__positioner"
+  ],
+  [
+    "backdrop",
+    "seed-bottom-sheet__backdrop"
+  ],
+  [
+    "content",
+    "seed-bottom-sheet__content"
+  ],
+  [
+    "header",
+    "seed-bottom-sheet__header"
+  ],
+  [
+    "body",
+    "seed-bottom-sheet__body"
+  ],
+  [
+    "footer",
+    "seed-bottom-sheet__footer"
+  ],
+  [
+    "title",
+    "seed-bottom-sheet__title"
+  ],
+  [
+    "description",
+    "seed-bottom-sheet__description"
+  ],
+  [
+    "closeButton",
+    "seed-bottom-sheet__closeButton"
+  ]
+];
+
+const defaultVariant = {};
+
+const compoundVariants = [];
+
+export const bottomSheetVariantMap = {};
+
+export const bottomSheetVariantKeys = Object.keys(bottomSheetVariantMap);
+
+export function bottomSheet(props) {
+  return Object.fromEntries(
+    bottomSheetSlotNames.map(([slot, className]) => {
+      return [
+        slot,
+        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
+      ];
+    }),
+  );
+}
+
+Object.assign(bottomSheet, { splitVariantProps: (props) => splitVariantProps(props, bottomSheetVariantMap) });

package/recipes/callout.d.ts

@@ -0,0 +1,24 @@
+declare interface CalloutVariant {
+  /**
+  * @default neutral
+  */
+  tone: "neutral" | "informative" | "warning" | "critical" | "magic";
+}
+
+declare type CalloutVariantMap = {
+  [key in keyof CalloutVariant]: Array<CalloutVariant[key]>;
+};
+
+export declare type CalloutVariantProps = Partial<CalloutVariant>;
+
+export declare type CalloutSlotName = "root" | "content" | "title" | "description" | "link" | "closeButton";
+
+export declare const calloutVariantMap: CalloutVariantMap;
+
+export declare const callout: ((
+  props?: CalloutVariantProps,
+) => Record<CalloutSlotName, string>) & {
+  splitVariantProps: <T extends CalloutVariantProps>(
+    props: T,
+  ) => [CalloutVariantProps, Omit<T, keyof CalloutVariantProps>];
+}

package/recipes/callout.mjs

@@ -0,0 +1,61 @@
+import { createClassName } from "./className.mjs";
+import { mergeVariants } from "./mergeVariants.mjs";
+import { splitVariantProps } from "./splitVariantProps.mjs";
+
+const calloutSlotNames = [
+  [
+    "root",
+    "seed-callout__root"
+  ],
+  [
+    "content",
+    "seed-callout__content"
+  ],
+  [
+    "title",
+    "seed-callout__title"
+  ],
+  [
+    "description",
+    "seed-callout__description"
+  ],
+  [
+    "link",
+    "seed-callout__link"
+  ],
+  [
+    "closeButton",
+    "seed-callout__closeButton"
+  ]
+];
+
+const defaultVariant = {
+  "tone": "neutral"
+};
+
+const compoundVariants = [];
+
+export const calloutVariantMap = {
+  "tone": [
+    "neutral",
+    "informative",
+    "warning",
+    "critical",
+    "magic"
+  ]
+};
+
+export const calloutVariantKeys = Object.keys(calloutVariantMap);
+
+export function callout(props) {
+  return Object.fromEntries(
+    calloutSlotNames.map(([slot, className]) => {
+      return [
+        slot,
+        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
+      ];
+    }),
+  );
+}
+
+Object.assign(callout, { splitVariantProps: (props) => splitVariantProps(props, calloutVariantMap) });

package/recipes/checkbox.d.ts

@@ -0,0 +1,32 @@
+declare interface CheckboxVariant {
+  /**
+  * @default default
+  */
+  weight: "default" | "stronger";
+/**
+  * @default square
+  */
+  variant: "square" | "ghost";
+/**
+  * @default medium
+  */
+  size: "large" | "medium";
+}
+
+declare type CheckboxVariantMap = {
+  [key in keyof CheckboxVariant]: Array<CheckboxVariant[key]>;
+};
+
+export declare type CheckboxVariantProps = Partial<CheckboxVariant>;
+
+export declare type CheckboxSlotName = "root" | "control" | "icon" | "label";
+
+export declare const checkboxVariantMap: CheckboxVariantMap;
+
+export declare const checkbox: ((
+  props?: CheckboxVariantProps,
+) => Record<CheckboxSlotName, string>) & {
+  splitVariantProps: <T extends CheckboxVariantProps>(
+    props: T,
+  ) => [CheckboxVariantProps, Omit<T, keyof CheckboxVariantProps>];
+}

package/recipes/checkbox.mjs

@@ -0,0 +1,77 @@
+import { createClassName } from "./className.mjs";
+import { mergeVariants } from "./mergeVariants.mjs";
+import { splitVariantProps } from "./splitVariantProps.mjs";
+
+const checkboxSlotNames = [
+  [
+    "root",
+    "seed-checkbox__root"
+  ],
+  [
+    "control",
+    "seed-checkbox__control"
+  ],
+  [
+    "icon",
+    "seed-checkbox__icon"
+  ],
+  [
+    "label",
+    "seed-checkbox__label"
+  ]
+];
+
+const defaultVariant = {
+  "size": "medium",
+  "variant": "square",
+  "weight": "default"
+};
+
+const compoundVariants = [
+  {
+    "size": "medium",
+    "variant": "ghost"
+  },
+  {
+    "size": "large",
+    "variant": "ghost"
+  },
+  {
+    "size": "medium",
+    "variant": "square"
+  },
+  {
+    "size": "large",
+    "variant": "square"
+  }
+];
+
+export const checkboxVariantMap = {
+  "weight": [
+    "default",
+    "stronger"
+  ],
+  "variant": [
+    "square",
+    "ghost"
+  ],
+  "size": [
+    "large",
+    "medium"
+  ]
+};
+
+export const checkboxVariantKeys = Object.keys(checkboxVariantMap);
+
+export function checkbox(props) {
+  return Object.fromEntries(
+    checkboxSlotNames.map(([slot, className]) => {
+      return [
+        slot,
+        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
+      ];
+    }),
+  );
+}
+
+Object.assign(checkbox, { splitVariantProps: (props) => splitVariantProps(props, checkboxVariantMap) });

package/recipes/chip-tabs.d.ts

@@ -0,0 +1,32 @@
+declare interface ChipTabsVariant {
+  /**
+  * @default neutralSolid
+  */
+  variant: "neutralSolid" | "brandSolid";
+/**
+  * @default hug
+  */
+  contentLayout: "fill" | "hug";
+/**
+  * @default false
+  */
+  stickyList: boolean;
+}
+
+declare type ChipTabsVariantMap = {
+  [key in keyof ChipTabsVariant]: Array<ChipTabsVariant[key]>;
+};
+
+export declare type ChipTabsVariantProps = Partial<ChipTabsVariant>;
+
+export declare type ChipTabsSlotName = "root" | "list" | "carousel" | "carouselCamera" | "content" | "trigger";
+
+export declare const chipTabsVariantMap: ChipTabsVariantMap;
+
+export declare const chipTabs: ((
+  props?: ChipTabsVariantProps,
+) => Record<ChipTabsSlotName, string>) & {
+  splitVariantProps: <T extends ChipTabsVariantProps>(
+    props: T,
+  ) => [ChipTabsVariantProps, Omit<T, keyof ChipTabsVariantProps>];
+}