@seed-design/css 0.0.1-rc.0

package/recipes/chip-tabs.mjs

@@ -0,0 +1,68 @@
+import { createClassName } from "./className.mjs";
+import { mergeVariants } from "./mergeVariants.mjs";
+import { splitVariantProps } from "./splitVariantProps.mjs";
+
+const chipTabsSlotNames = [
+  [
+    "root",
+    "seed-chip-tabs__root"
+  ],
+  [
+    "list",
+    "seed-chip-tabs__list"
+  ],
+  [
+    "carousel",
+    "seed-chip-tabs__carousel"
+  ],
+  [
+    "carouselCamera",
+    "seed-chip-tabs__carouselCamera"
+  ],
+  [
+    "content",
+    "seed-chip-tabs__content"
+  ],
+  [
+    "trigger",
+    "seed-chip-tabs__trigger"
+  ]
+];
+
+const defaultVariant = {
+  "variant": "neutralSolid",
+  "contentLayout": "hug",
+  "stickyList": false
+};
+
+const compoundVariants = [];
+
+export const chipTabsVariantMap = {
+  "variant": [
+    "neutralSolid",
+    "brandSolid"
+  ],
+  "contentLayout": [
+    "fill",
+    "hug"
+  ],
+  "stickyList": [
+    true,
+    false
+  ]
+};
+
+export const chipTabsVariantKeys = Object.keys(chipTabsVariantMap);
+
+export function chipTabs(props) {
+  return Object.fromEntries(
+    chipTabsSlotNames.map(([slot, className]) => {
+      return [
+        slot,
+        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
+      ];
+    }),
+  );
+}
+
+Object.assign(chipTabs, { splitVariantProps: (props) => splitVariantProps(props, chipTabsVariantMap) });

package/recipes/className.mjs

@@ -0,0 +1,25 @@
+export const createClassName = (className, variants, compoundVariants = []) => {
+  const variantKeys = Object.keys(variants)
+
+  const variantValues = variantKeys.map((key) => variants[key]);
+
+  const variantClassName = variantKeys
+    .map((key, index) => `${className}--${key}_${variantValues[index]}`)
+    .join(" ");
+
+  const compountVariantClassName = compoundVariants
+    .filter((compoundVariant) =>
+      Object.keys(compoundVariant).every((key) => compoundVariant[key] === variants[key]),
+    )
+    .map(
+      (compoundVariant) =>
+        `${className}--${Object.keys(compoundVariant)
+          .map((key) => {
+            return `${key}_${compoundVariant[key]}`;
+          })
+          .join("-")}`,
+    )
+    .join(" ");
+
+  return [className, variantClassName, compountVariantClassName].filter(Boolean).join(" ");
+};

package/recipes/control-chip.d.ts

@@ -0,0 +1,28 @@
+declare interface ControlChipVariant {
+  /**
+  * @default medium
+  */
+  size: "medium" | "small";
+/**
+  * @default withText
+  */
+  layout: "withText" | "iconOnly";
+}
+
+declare type ControlChipVariantMap = {
+  [key in keyof ControlChipVariant]: Array<ControlChipVariant[key]>;
+};
+
+export declare type ControlChipVariantProps = Partial<ControlChipVariant>;
+
+export declare type ControlChipSlotName = "root";
+
+export declare const controlChipVariantMap: ControlChipVariantMap;
+
+export declare const controlChip: ((
+  props?: ControlChipVariantProps,
+) => Record<ControlChipSlotName, string>) & {
+  splitVariantProps: <T extends ControlChipVariantProps>(
+    props: T,
+  ) => [ControlChipVariantProps, Omit<T, keyof ControlChipVariantProps>];
+}

package/recipes/control-chip.mjs

@@ -0,0 +1,60 @@
+import { createClassName } from "./className.mjs";
+import { mergeVariants } from "./mergeVariants.mjs";
+import { splitVariantProps } from "./splitVariantProps.mjs";
+
+const controlChipSlotNames = [
+  [
+    "root",
+    "seed-control-chip__root"
+  ]
+];
+
+const defaultVariant = {
+  "size": "medium",
+  "layout": "withText"
+};
+
+const compoundVariants = [
+  {
+    "size": "medium",
+    "layout": "withText"
+  },
+  {
+    "size": "medium",
+    "layout": "iconOnly"
+  },
+  {
+    "size": "small",
+    "layout": "withText"
+  },
+  {
+    "size": "small",
+    "layout": "iconOnly"
+  }
+];
+
+export const controlChipVariantMap = {
+  "size": [
+    "medium",
+    "small"
+  ],
+  "layout": [
+    "withText",
+    "iconOnly"
+  ]
+};
+
+export const controlChipVariantKeys = Object.keys(controlChipVariantMap);
+
+export function controlChip(props) {
+  return Object.fromEntries(
+    controlChipSlotNames.map(([slot, className]) => {
+      return [
+        slot,
+        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
+      ];
+    }),
+  );
+}
+
+Object.assign(controlChip, { splitVariantProps: (props) => splitVariantProps(props, controlChipVariantMap) });

package/recipes/dialog.d.ts

@@ -0,0 +1,21 @@
+declare interface DialogVariant {
+  
+}
+
+declare type DialogVariantMap = {
+  [key in keyof DialogVariant]: Array<DialogVariant[key]>;
+};
+
+export declare type DialogVariantProps = Partial<DialogVariant>;
+
+export declare type DialogSlotName = "positioner" | "backdrop" | "content" | "header" | "footer" | "action" | "title" | "description";
+
+export declare const dialogVariantMap: DialogVariantMap;
+
+export declare const dialog: ((
+  props?: DialogVariantProps,
+) => Record<DialogSlotName, string>) & {
+  splitVariantProps: <T extends DialogVariantProps>(
+    props: T,
+  ) => [DialogVariantProps, Omit<T, keyof DialogVariantProps>];
+}

package/recipes/dialog.mjs

@@ -0,0 +1,59 @@
+import { createClassName } from "./className.mjs";
+import { mergeVariants } from "./mergeVariants.mjs";
+import { splitVariantProps } from "./splitVariantProps.mjs";
+
+const dialogSlotNames = [
+  [
+    "positioner",
+    "seed-dialog__positioner"
+  ],
+  [
+    "backdrop",
+    "seed-dialog__backdrop"
+  ],
+  [
+    "content",
+    "seed-dialog__content"
+  ],
+  [
+    "header",
+    "seed-dialog__header"
+  ],
+  [
+    "footer",
+    "seed-dialog__footer"
+  ],
+  [
+    "action",
+    "seed-dialog__action"
+  ],
+  [
+    "title",
+    "seed-dialog__title"
+  ],
+  [
+    "description",
+    "seed-dialog__description"
+  ]
+];
+
+const defaultVariant = {};
+
+const compoundVariants = [];
+
+export const dialogVariantMap = {};
+
+export const dialogVariantKeys = Object.keys(dialogVariantMap);
+
+export function dialog(props) {
+  return Object.fromEntries(
+    dialogSlotNames.map(([slot, className]) => {
+      return [
+        slot,
+        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
+      ];
+    }),
+  );
+}
+
+Object.assign(dialog, { splitVariantProps: (props) => splitVariantProps(props, dialogVariantMap) });

package/recipes/extended-action-sheet-item.d.ts

@@ -0,0 +1,24 @@
+declare interface ExtendedActionSheetItemVariant {
+  /**
+  * @default neutral
+  */
+  tone: "neutral" | "critical";
+}
+
+declare type ExtendedActionSheetItemVariantMap = {
+  [key in keyof ExtendedActionSheetItemVariant]: Array<ExtendedActionSheetItemVariant[key]>;
+};
+
+export declare type ExtendedActionSheetItemVariantProps = Partial<ExtendedActionSheetItemVariant>;
+
+export declare type ExtendedActionSheetItemSlotName = "root";
+
+export declare const extendedActionSheetItemVariantMap: ExtendedActionSheetItemVariantMap;
+
+export declare const extendedActionSheetItem: ((
+  props?: ExtendedActionSheetItemVariantProps,
+) => Record<ExtendedActionSheetItemSlotName, string>) & {
+  splitVariantProps: <T extends ExtendedActionSheetItemVariantProps>(
+    props: T,
+  ) => [ExtendedActionSheetItemVariantProps, Omit<T, keyof ExtendedActionSheetItemVariantProps>];
+}

package/recipes/extended-action-sheet-item.mjs

@@ -0,0 +1,38 @@
+import { createClassName } from "./className.mjs";
+import { mergeVariants } from "./mergeVariants.mjs";
+import { splitVariantProps } from "./splitVariantProps.mjs";
+
+const extendedActionSheetItemSlotNames = [
+  [
+    "root",
+    "seed-extended-action-sheet-item__root"
+  ]
+];
+
+const defaultVariant = {
+  "tone": "neutral"
+};
+
+const compoundVariants = [];
+
+export const extendedActionSheetItemVariantMap = {
+  "tone": [
+    "neutral",
+    "critical"
+  ]
+};
+
+export const extendedActionSheetItemVariantKeys = Object.keys(extendedActionSheetItemVariantMap);
+
+export function extendedActionSheetItem(props) {
+  return Object.fromEntries(
+    extendedActionSheetItemSlotNames.map(([slot, className]) => {
+      return [
+        slot,
+        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
+      ];
+    }),
+  );
+}
+
+Object.assign(extendedActionSheetItem, { splitVariantProps: (props) => splitVariantProps(props, extendedActionSheetItemVariantMap) });

package/recipes/extended-action-sheet.d.ts

@@ -0,0 +1,21 @@
+declare interface ExtendedActionSheetVariant {
+  
+}
+
+declare type ExtendedActionSheetVariantMap = {
+  [key in keyof ExtendedActionSheetVariant]: Array<ExtendedActionSheetVariant[key]>;
+};
+
+export declare type ExtendedActionSheetVariantProps = Partial<ExtendedActionSheetVariant>;
+
+export declare type ExtendedActionSheetSlotName = "backdrop" | "positioner" | "content" | "header" | "title" | "list" | "group" | "footer" | "closeButton";
+
+export declare const extendedActionSheetVariantMap: ExtendedActionSheetVariantMap;
+
+export declare const extendedActionSheet: ((
+  props?: ExtendedActionSheetVariantProps,
+) => Record<ExtendedActionSheetSlotName, string>) & {
+  splitVariantProps: <T extends ExtendedActionSheetVariantProps>(
+    props: T,
+  ) => [ExtendedActionSheetVariantProps, Omit<T, keyof ExtendedActionSheetVariantProps>];
+}

package/recipes/extended-action-sheet.mjs

@@ -0,0 +1,63 @@
+import { createClassName } from "./className.mjs";
+import { mergeVariants } from "./mergeVariants.mjs";
+import { splitVariantProps } from "./splitVariantProps.mjs";
+
+const extendedActionSheetSlotNames = [
+  [
+    "backdrop",
+    "seed-extended-action-sheet__backdrop"
+  ],
+  [
+    "positioner",
+    "seed-extended-action-sheet__positioner"
+  ],
+  [
+    "content",
+    "seed-extended-action-sheet__content"
+  ],
+  [
+    "header",
+    "seed-extended-action-sheet__header"
+  ],
+  [
+    "title",
+    "seed-extended-action-sheet__title"
+  ],
+  [
+    "list",
+    "seed-extended-action-sheet__list"
+  ],
+  [
+    "group",
+    "seed-extended-action-sheet__group"
+  ],
+  [
+    "footer",
+    "seed-extended-action-sheet__footer"
+  ],
+  [
+    "closeButton",
+    "seed-extended-action-sheet__closeButton"
+  ]
+];
+
+const defaultVariant = {};
+
+const compoundVariants = [];
+
+export const extendedActionSheetVariantMap = {};
+
+export const extendedActionSheetVariantKeys = Object.keys(extendedActionSheetVariantMap);
+
+export function extendedActionSheet(props) {
+  return Object.fromEntries(
+    extendedActionSheetSlotNames.map(([slot, className]) => {
+      return [
+        slot,
+        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
+      ];
+    }),
+  );
+}
+
+Object.assign(extendedActionSheet, { splitVariantProps: (props) => splitVariantProps(props, extendedActionSheetVariantMap) });

package/recipes/extended-fab.d.ts

@@ -0,0 +1,28 @@
+declare interface ExtendedFabVariant {
+  /**
+  * @default neutralSolid
+  */
+  variant: "neutralSolid" | "layerFloating";
+/**
+  * @default medium
+  */
+  size: "small" | "medium";
+}
+
+declare type ExtendedFabVariantMap = {
+  [key in keyof ExtendedFabVariant]: Array<ExtendedFabVariant[key]>;
+};
+
+export declare type ExtendedFabVariantProps = Partial<ExtendedFabVariant>;
+
+export declare type ExtendedFabSlotName = "root";
+
+export declare const extendedFabVariantMap: ExtendedFabVariantMap;
+
+export declare const extendedFab: ((
+  props?: ExtendedFabVariantProps,
+) => Record<ExtendedFabSlotName, string>) & {
+  splitVariantProps: <T extends ExtendedFabVariantProps>(
+    props: T,
+  ) => [ExtendedFabVariantProps, Omit<T, keyof ExtendedFabVariantProps>];
+}

package/recipes/extended-fab.mjs

@@ -0,0 +1,43 @@
+import { createClassName } from "./className.mjs";
+import { mergeVariants } from "./mergeVariants.mjs";
+import { splitVariantProps } from "./splitVariantProps.mjs";
+
+const extendedFabSlotNames = [
+  [
+    "root",
+    "seed-extended-fab__root"
+  ]
+];
+
+const defaultVariant = {
+  "variant": "neutralSolid",
+  "size": "medium"
+};
+
+const compoundVariants = [];
+
+export const extendedFabVariantMap = {
+  "variant": [
+    "neutralSolid",
+    "layerFloating"
+  ],
+  "size": [
+    "small",
+    "medium"
+  ]
+};
+
+export const extendedFabVariantKeys = Object.keys(extendedFabVariantMap);
+
+export function extendedFab(props) {
+  return Object.fromEntries(
+    extendedFabSlotNames.map(([slot, className]) => {
+      return [
+        slot,
+        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
+      ];
+    }),
+  );
+}
+
+Object.assign(extendedFab, { splitVariantProps: (props) => splitVariantProps(props, extendedFabVariantMap) });

package/recipes/fab.d.ts

@@ -0,0 +1,21 @@
+declare interface FabVariant {
+  
+}
+
+declare type FabVariantMap = {
+  [key in keyof FabVariant]: Array<FabVariant[key]>;
+};
+
+export declare type FabVariantProps = Partial<FabVariant>;
+
+export declare type FabSlotName = "root";
+
+export declare const fabVariantMap: FabVariantMap;
+
+export declare const fab: ((
+  props?: FabVariantProps,
+) => Record<FabSlotName, string>) & {
+  splitVariantProps: <T extends FabVariantProps>(
+    props: T,
+  ) => [FabVariantProps, Omit<T, keyof FabVariantProps>];
+}

package/recipes/fab.mjs

@@ -0,0 +1,31 @@
+import { createClassName } from "./className.mjs";
+import { mergeVariants } from "./mergeVariants.mjs";
+import { splitVariantProps } from "./splitVariantProps.mjs";
+
+const fabSlotNames = [
+  [
+    "root",
+    "seed-fab__root"
+  ]
+];
+
+const defaultVariant = {};
+
+const compoundVariants = [];
+
+export const fabVariantMap = {};
+
+export const fabVariantKeys = Object.keys(fabVariantMap);
+
+export function fab(props) {
+  return Object.fromEntries(
+    fabSlotNames.map(([slot, className]) => {
+      return [
+        slot,
+        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
+      ];
+    }),
+  );
+}
+
+Object.assign(fab, { splitVariantProps: (props) => splitVariantProps(props, fabVariantMap) });

package/recipes/help-bubble.d.ts

@@ -0,0 +1,21 @@
+declare interface HelpBubbleVariant {
+  
+}
+
+declare type HelpBubbleVariantMap = {
+  [key in keyof HelpBubbleVariant]: Array<HelpBubbleVariant[key]>;
+};
+
+export declare type HelpBubbleVariantProps = Partial<HelpBubbleVariant>;
+
+export declare type HelpBubbleSlotName = "positioner" | "backdrop" | "content" | "arrow" | "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.mjs

@@ -0,0 +1,55 @@
+import { createClassName } from "./className.mjs";
+import { mergeVariants } from "./mergeVariants.mjs";
+import { splitVariantProps } from "./splitVariantProps.mjs";
+
+const helpBubbleSlotNames = [
+  [
+    "positioner",
+    "seed-help-bubble__positioner"
+  ],
+  [
+    "backdrop",
+    "seed-help-bubble__backdrop"
+  ],
+  [
+    "content",
+    "seed-help-bubble__content"
+  ],
+  [
+    "arrow",
+    "seed-help-bubble__arrow"
+  ],
+  [
+    "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) });

package/recipes/identity-placeholder.d.ts

@@ -0,0 +1,24 @@
+declare interface IdentityPlaceholderVariant {
+  /**
+  * @default person
+  */
+  identity: "person";
+}
+
+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.mjs

@@ -0,0 +1,41 @@
+import { createClassName } from "./className.mjs";
+import { mergeVariants } from "./mergeVariants.mjs";
+import { splitVariantProps } from "./splitVariantProps.mjs";
+
+const identityPlaceholderSlotNames = [
+  [
+    "root",
+    "seed-identity-placeholder__root"
+  ],
+  [
+    "image",
+    "seed-identity-placeholder__image"
+  ]
+];
+
+const defaultVariant = {
+  "identity": "person"
+};
+
+const compoundVariants = [];
+
+export const identityPlaceholderVariantMap = {
+  "identity": [
+    "person"
+  ]
+};
+
+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) });