@seed-design/css 0.0.1-rc.0

package/recipes/select-box.mjs

@@ -0,0 +1,59 @@
+import { createClassName } from "./className.mjs";
+import { mergeVariants } from "./mergeVariants.mjs";
+import { splitVariantProps } from "./splitVariantProps.mjs";
+
+const selectBoxSlotNames = [
+  [
+    "root",
+    "seed-select-box__root"
+  ],
+  [
+    "content",
+    "seed-select-box__content"
+  ],
+  [
+    "label",
+    "seed-select-box__label"
+  ],
+  [
+    "description",
+    "seed-select-box__description"
+  ],
+  [
+    "checkboxControl",
+    "seed-select-box__checkboxControl"
+  ],
+  [
+    "checkboxIcon",
+    "seed-select-box__checkboxIcon"
+  ],
+  [
+    "radioControl",
+    "seed-select-box__radioControl"
+  ],
+  [
+    "radioIcon",
+    "seed-select-box__radioIcon"
+  ]
+];
+
+const defaultVariant = {};
+
+const compoundVariants = [];
+
+export const selectBoxVariantMap = {};
+
+export const selectBoxVariantKeys = Object.keys(selectBoxVariantMap);
+
+export function selectBox(props) {
+  return Object.fromEntries(
+    selectBoxSlotNames.map(([slot, className]) => {
+      return [
+        slot,
+        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
+      ];
+    }),
+  );
+}
+
+Object.assign(selectBox, { splitVariantProps: (props) => splitVariantProps(props, selectBoxVariantMap) });

package/recipes/skeleton.d.ts

@@ -0,0 +1,24 @@
+declare interface SkeletonVariant {
+  /**
+  * @default 8
+  */
+  radius: "0" | "8" | "16" | "full";
+}
+
+declare type SkeletonVariantMap = {
+  [key in keyof SkeletonVariant]: Array<SkeletonVariant[key]>;
+};
+
+export declare type SkeletonVariantProps = Partial<SkeletonVariant>;
+
+export declare type SkeletonSlotName = "root";
+
+export declare const skeletonVariantMap: SkeletonVariantMap;
+
+export declare const skeleton: ((
+  props?: SkeletonVariantProps,
+) => Record<SkeletonSlotName, string>) & {
+  splitVariantProps: <T extends SkeletonVariantProps>(
+    props: T,
+  ) => [SkeletonVariantProps, Omit<T, keyof SkeletonVariantProps>];
+}

package/recipes/skeleton.mjs

@@ -0,0 +1,40 @@
+import { createClassName } from "./className.mjs";
+import { mergeVariants } from "./mergeVariants.mjs";
+import { splitVariantProps } from "./splitVariantProps.mjs";
+
+const skeletonSlotNames = [
+  [
+    "root",
+    "seed-skeleton__root"
+  ]
+];
+
+const defaultVariant = {
+  "radius": 8
+};
+
+const compoundVariants = [];
+
+export const skeletonVariantMap = {
+  "radius": [
+    "0",
+    "8",
+    "16",
+    "full"
+  ]
+};
+
+export const skeletonVariantKeys = Object.keys(skeletonVariantMap);
+
+export function skeleton(props) {
+  return Object.fromEntries(
+    skeletonSlotNames.map(([slot, className]) => {
+      return [
+        slot,
+        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
+      ];
+    }),
+  );
+}
+
+Object.assign(skeleton, { splitVariantProps: (props) => splitVariantProps(props, skeletonVariantMap) });

package/recipes/snackbar-region.d.ts

@@ -0,0 +1,21 @@
+declare interface SnackbarRegionVariant {
+  
+}
+
+declare type SnackbarRegionVariantMap = {
+  [key in keyof SnackbarRegionVariant]: Array<SnackbarRegionVariant[key]>;
+};
+
+export declare type SnackbarRegionVariantProps = Partial<SnackbarRegionVariant>;
+
+export declare type SnackbarRegionSlotName = "root";
+
+export declare const snackbarRegionVariantMap: SnackbarRegionVariantMap;
+
+export declare const snackbarRegion: ((
+  props?: SnackbarRegionVariantProps,
+) => Record<SnackbarRegionSlotName, string>) & {
+  splitVariantProps: <T extends SnackbarRegionVariantProps>(
+    props: T,
+  ) => [SnackbarRegionVariantProps, Omit<T, keyof SnackbarRegionVariantProps>];
+}

package/recipes/snackbar-region.mjs

@@ -0,0 +1,31 @@
+import { createClassName } from "./className.mjs";
+import { mergeVariants } from "./mergeVariants.mjs";
+import { splitVariantProps } from "./splitVariantProps.mjs";
+
+const snackbarRegionSlotNames = [
+  [
+    "root",
+    "seed-snackbar-region__root"
+  ]
+];
+
+const defaultVariant = {};
+
+const compoundVariants = [];
+
+export const snackbarRegionVariantMap = {};
+
+export const snackbarRegionVariantKeys = Object.keys(snackbarRegionVariantMap);
+
+export function snackbarRegion(props) {
+  return Object.fromEntries(
+    snackbarRegionSlotNames.map(([slot, className]) => {
+      return [
+        slot,
+        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
+      ];
+    }),
+  );
+}
+
+Object.assign(snackbarRegion, { splitVariantProps: (props) => splitVariantProps(props, snackbarRegionVariantMap) });

package/recipes/snackbar.d.ts

@@ -0,0 +1,24 @@
+declare interface SnackbarVariant {
+  /**
+  * @default default
+  */
+  variant: "default" | "positive" | "critical";
+}
+
+declare type SnackbarVariantMap = {
+  [key in keyof SnackbarVariant]: Array<SnackbarVariant[key]>;
+};
+
+export declare type SnackbarVariantProps = Partial<SnackbarVariant>;
+
+export declare type SnackbarSlotName = "root" | "message" | "prefixIcon" | "actionButton";
+
+export declare const snackbarVariantMap: SnackbarVariantMap;
+
+export declare const snackbar: ((
+  props?: SnackbarVariantProps,
+) => Record<SnackbarSlotName, string>) & {
+  splitVariantProps: <T extends SnackbarVariantProps>(
+    props: T,
+  ) => [SnackbarVariantProps, Omit<T, keyof SnackbarVariantProps>];
+}

package/recipes/snackbar.mjs

@@ -0,0 +1,51 @@
+import { createClassName } from "./className.mjs";
+import { mergeVariants } from "./mergeVariants.mjs";
+import { splitVariantProps } from "./splitVariantProps.mjs";
+
+const snackbarSlotNames = [
+  [
+    "root",
+    "seed-snackbar__root"
+  ],
+  [
+    "message",
+    "seed-snackbar__message"
+  ],
+  [
+    "prefixIcon",
+    "seed-snackbar__prefixIcon"
+  ],
+  [
+    "actionButton",
+    "seed-snackbar__actionButton"
+  ]
+];
+
+const defaultVariant = {
+  "variant": "default"
+};
+
+const compoundVariants = [];
+
+export const snackbarVariantMap = {
+  "variant": [
+    "default",
+    "positive",
+    "critical"
+  ]
+};
+
+export const snackbarVariantKeys = Object.keys(snackbarVariantMap);
+
+export function snackbar(props) {
+  return Object.fromEntries(
+    snackbarSlotNames.map(([slot, className]) => {
+      return [
+        slot,
+        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
+      ];
+    }),
+  );
+}
+
+Object.assign(snackbar, { splitVariantProps: (props) => splitVariantProps(props, snackbarVariantMap) });

package/recipes/splitVariantProps.mjs

@@ -0,0 +1,12 @@
+export function splitVariantProps(props, variantMap) {
+  const variantProps = {};
+  const otherProps = {};
+  for (const key in props) {
+    if (variantMap[key] != null) {
+      variantProps[key] = props[key];
+    } else {
+      otherProps[key] = props[key];
+    }
+  }
+  return [variantProps, otherProps];
+}

package/recipes/switch.d.ts

@@ -0,0 +1,24 @@
+declare interface SwitchVariant {
+  /**
+  * @default medium
+  */
+  size: "medium" | "small";
+}
+
+declare type SwitchVariantMap = {
+  [key in keyof SwitchVariant]: Array<SwitchVariant[key]>;
+};
+
+export declare type SwitchVariantProps = Partial<SwitchVariant>;
+
+export declare type SwitchSlotName = "root" | "control" | "thumb" | "label";
+
+export declare const switchVariantMap: SwitchVariantMap;
+
+export declare const switchStyle: ((
+  props?: SwitchVariantProps,
+) => Record<SwitchSlotName, string>) & {
+  splitVariantProps: <T extends SwitchVariantProps>(
+    props: T,
+  ) => [SwitchVariantProps, Omit<T, keyof SwitchVariantProps>];
+}

package/recipes/switch.mjs

@@ -0,0 +1,50 @@
+import { createClassName } from "./className.mjs";
+import { mergeVariants } from "./mergeVariants.mjs";
+import { splitVariantProps } from "./splitVariantProps.mjs";
+
+const switchSlotNames = [
+  [
+    "root",
+    "seed-switch__root"
+  ],
+  [
+    "control",
+    "seed-switch__control"
+  ],
+  [
+    "thumb",
+    "seed-switch__thumb"
+  ],
+  [
+    "label",
+    "seed-switch__label"
+  ]
+];
+
+const defaultVariant = {
+  "size": "medium"
+};
+
+const compoundVariants = [];
+
+export const switchVariantMap = {
+  "size": [
+    "medium",
+    "small"
+  ]
+};
+
+export const switchVariantKeys = Object.keys(switchVariantMap);
+
+export function switchStyle(props) {
+  return Object.fromEntries(
+    switchSlotNames.map(([slot, className]) => {
+      return [
+        slot,
+        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
+      ];
+    }),
+  );
+}
+
+Object.assign(switchStyle, { splitVariantProps: (props) => splitVariantProps(props, switchVariantMap) });

package/recipes/tabs.d.ts

@@ -0,0 +1,36 @@
+declare interface TabsVariant {
+  /**
+  * @default fill
+  */
+  triggerLayout: "fill" | "hug";
+/**
+  * @default hug
+  */
+  contentLayout: "fill" | "hug";
+/**
+  * @default small
+  */
+  size: "small" | "medium";
+/**
+  * @default false
+  */
+  stickyList: boolean;
+}
+
+declare type TabsVariantMap = {
+  [key in keyof TabsVariant]: Array<TabsVariant[key]>;
+};
+
+export declare type TabsVariantProps = Partial<TabsVariant>;
+
+export declare type TabsSlotName = "root" | "list" | "carousel" | "carouselCamera" | "content" | "indicator" | "trigger" | "triggerNotification";
+
+export declare const tabsVariantMap: TabsVariantMap;
+
+export declare const tabs: ((
+  props?: TabsVariantProps,
+) => Record<TabsSlotName, string>) & {
+  splitVariantProps: <T extends TabsVariantProps>(
+    props: T,
+  ) => [TabsVariantProps, Omit<T, keyof TabsVariantProps>];
+}

package/recipes/tabs.mjs

@@ -0,0 +1,81 @@
+import { createClassName } from "./className.mjs";
+import { mergeVariants } from "./mergeVariants.mjs";
+import { splitVariantProps } from "./splitVariantProps.mjs";
+
+const tabsSlotNames = [
+  [
+    "root",
+    "seed-tabs__root"
+  ],
+  [
+    "list",
+    "seed-tabs__list"
+  ],
+  [
+    "carousel",
+    "seed-tabs__carousel"
+  ],
+  [
+    "carouselCamera",
+    "seed-tabs__carouselCamera"
+  ],
+  [
+    "content",
+    "seed-tabs__content"
+  ],
+  [
+    "indicator",
+    "seed-tabs__indicator"
+  ],
+  [
+    "trigger",
+    "seed-tabs__trigger"
+  ],
+  [
+    "triggerNotification",
+    "seed-tabs__triggerNotification"
+  ]
+];
+
+const defaultVariant = {
+  "triggerLayout": "fill",
+  "contentLayout": "hug",
+  "size": "small",
+  "stickyList": false
+};
+
+const compoundVariants = [];
+
+export const tabsVariantMap = {
+  "triggerLayout": [
+    "fill",
+    "hug"
+  ],
+  "contentLayout": [
+    "fill",
+    "hug"
+  ],
+  "size": [
+    "small",
+    "medium"
+  ],
+  "stickyList": [
+    true,
+    false
+  ]
+};
+
+export const tabsVariantKeys = Object.keys(tabsVariantMap);
+
+export function tabs(props) {
+  return Object.fromEntries(
+    tabsSlotNames.map(([slot, className]) => {
+      return [
+        slot,
+        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
+      ];
+    }),
+  );
+}
+
+Object.assign(tabs, { splitVariantProps: (props) => splitVariantProps(props, tabsVariantMap) });

package/recipes/text-field.d.ts

@@ -0,0 +1,24 @@
+declare interface TextFieldVariant {
+  /**
+  * @default medium
+  */
+  size: "xlarge" | "large" | "medium";
+}
+
+declare type TextFieldVariantMap = {
+  [key in keyof TextFieldVariant]: Array<TextFieldVariant[key]>;
+};
+
+export declare type TextFieldVariantProps = Partial<TextFieldVariant>;
+
+export declare type TextFieldSlotName = "root" | "header" | "label" | "indicator" | "field" | "value" | "prefixText" | "prefixIcon" | "suffixText" | "suffixIcon" | "footer" | "description" | "errorMessage" | "errorIcon" | "characterCountArea" | "characterCount" | "maxCharacterCount";
+
+export declare const textFieldVariantMap: TextFieldVariantMap;
+
+export declare const textField: ((
+  props?: TextFieldVariantProps,
+) => Record<TextFieldSlotName, string>) & {
+  splitVariantProps: <T extends TextFieldVariantProps>(
+    props: T,
+  ) => [TextFieldVariantProps, Omit<T, keyof TextFieldVariantProps>];
+}

package/recipes/text-field.mjs

@@ -0,0 +1,103 @@
+import { createClassName } from "./className.mjs";
+import { mergeVariants } from "./mergeVariants.mjs";
+import { splitVariantProps } from "./splitVariantProps.mjs";
+
+const textFieldSlotNames = [
+  [
+    "root",
+    "seed-text-field__root"
+  ],
+  [
+    "header",
+    "seed-text-field__header"
+  ],
+  [
+    "label",
+    "seed-text-field__label"
+  ],
+  [
+    "indicator",
+    "seed-text-field__indicator"
+  ],
+  [
+    "field",
+    "seed-text-field__field"
+  ],
+  [
+    "value",
+    "seed-text-field__value"
+  ],
+  [
+    "prefixText",
+    "seed-text-field__prefixText"
+  ],
+  [
+    "prefixIcon",
+    "seed-text-field__prefixIcon"
+  ],
+  [
+    "suffixText",
+    "seed-text-field__suffixText"
+  ],
+  [
+    "suffixIcon",
+    "seed-text-field__suffixIcon"
+  ],
+  [
+    "footer",
+    "seed-text-field__footer"
+  ],
+  [
+    "description",
+    "seed-text-field__description"
+  ],
+  [
+    "errorMessage",
+    "seed-text-field__errorMessage"
+  ],
+  [
+    "errorIcon",
+    "seed-text-field__errorIcon"
+  ],
+  [
+    "characterCountArea",
+    "seed-text-field__characterCountArea"
+  ],
+  [
+    "characterCount",
+    "seed-text-field__characterCount"
+  ],
+  [
+    "maxCharacterCount",
+    "seed-text-field__maxCharacterCount"
+  ]
+];
+
+const defaultVariant = {
+  "size": "medium"
+};
+
+const compoundVariants = [];
+
+export const textFieldVariantMap = {
+  "size": [
+    "xlarge",
+    "large",
+    "medium"
+  ]
+};
+
+export const textFieldVariantKeys = Object.keys(textFieldVariantMap);
+
+export function textField(props) {
+  return Object.fromEntries(
+    textFieldSlotNames.map(([slot, className]) => {
+      return [
+        slot,
+        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
+      ];
+    }),
+  );
+}
+
+Object.assign(textField, { splitVariantProps: (props) => splitVariantProps(props, textFieldVariantMap) });

package/recipes/text.d.ts

@@ -0,0 +1,28 @@
+declare interface TextVariant {
+  /**
+  * @default t5Regular
+  */
+  textStyle: "screenTitle" | "articleBody" | "t1Regular" | "t1Medium" | "t1Bold" | "t2Regular" | "t2Medium" | "t2Bold" | "t3Regular" | "t3Medium" | "t3Bold" | "t4Regular" | "t4Medium" | "t4Bold" | "t5Regular" | "t5Medium" | "t5Bold" | "t6Bold" | "t7Bold" | "t8Bold" | "t9Bold" | "t10Bold";
+/**
+  * @default none
+  */
+  maxLines: "none" | "single" | "multi";
+}
+
+declare type TextVariantMap = {
+  [key in keyof TextVariant]: Array<TextVariant[key]>;
+};
+
+export declare type TextVariantProps = Partial<TextVariant>;
+
+export declare type TextSlotName = "root";
+
+export declare const textVariantMap: TextVariantMap;
+
+export declare const text: ((
+  props?: TextVariantProps,
+) => Record<TextSlotName, string>) & {
+  splitVariantProps: <T extends TextVariantProps>(
+    props: T,
+  ) => [TextVariantProps, Omit<T, keyof TextVariantProps>];
+}

package/recipes/text.mjs

@@ -0,0 +1,64 @@
+import { createClassName } from "./className.mjs";
+import { mergeVariants } from "./mergeVariants.mjs";
+import { splitVariantProps } from "./splitVariantProps.mjs";
+
+const textSlotNames = [
+  [
+    "root",
+    "seed-text__root"
+  ]
+];
+
+const defaultVariant = {
+  "textStyle": "t5Regular",
+  "maxLines": "none"
+};
+
+const compoundVariants = [];
+
+export const textVariantMap = {
+  "textStyle": [
+    "screenTitle",
+    "articleBody",
+    "t1Regular",
+    "t1Medium",
+    "t1Bold",
+    "t2Regular",
+    "t2Medium",
+    "t2Bold",
+    "t3Regular",
+    "t3Medium",
+    "t3Bold",
+    "t4Regular",
+    "t4Medium",
+    "t4Bold",
+    "t5Regular",
+    "t5Medium",
+    "t5Bold",
+    "t6Bold",
+    "t7Bold",
+    "t8Bold",
+    "t9Bold",
+    "t10Bold"
+  ],
+  "maxLines": [
+    "none",
+    "single",
+    "multi"
+  ]
+};
+
+export const textVariantKeys = Object.keys(textVariantMap);
+
+export function text(props) {
+  return Object.fromEntries(
+    textSlotNames.map(([slot, className]) => {
+      return [
+        slot,
+        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
+      ];
+    }),
+  );
+}
+
+Object.assign(text, { splitVariantProps: (props) => splitVariantProps(props, textVariantMap) });