@seed-design/css 0.0.1-rc.0

package/recipes/inline-banner.d.ts

@@ -0,0 +1,24 @@
+declare interface InlineBannerVariant {
+  /**
+  * @default neutralWeak
+  */
+  variant: "neutralWeak" | "positiveWeak" | "informativeWeak" | "warningWeak" | "warningSolid" | "criticalWeak" | "criticalSolid";
+}
+
+declare type InlineBannerVariantMap = {
+  [key in keyof InlineBannerVariant]: Array<InlineBannerVariant[key]>;
+};
+
+export declare type InlineBannerVariantProps = Partial<InlineBannerVariant>;
+
+export declare type InlineBannerSlotName = "root" | "content" | "title" | "description" | "link" | "closeButton";
+
+export declare const inlineBannerVariantMap: InlineBannerVariantMap;
+
+export declare const inlineBanner: ((
+  props?: InlineBannerVariantProps,
+) => Record<InlineBannerSlotName, string>) & {
+  splitVariantProps: <T extends InlineBannerVariantProps>(
+    props: T,
+  ) => [InlineBannerVariantProps, Omit<T, keyof InlineBannerVariantProps>];
+}

package/recipes/inline-banner.mjs

@@ -0,0 +1,63 @@
+import { createClassName } from "./className.mjs";
+import { mergeVariants } from "./mergeVariants.mjs";
+import { splitVariantProps } from "./splitVariantProps.mjs";
+
+const inlineBannerSlotNames = [
+  [
+    "root",
+    "seed-inline-banner__root"
+  ],
+  [
+    "content",
+    "seed-inline-banner__content"
+  ],
+  [
+    "title",
+    "seed-inline-banner__title"
+  ],
+  [
+    "description",
+    "seed-inline-banner__description"
+  ],
+  [
+    "link",
+    "seed-inline-banner__link"
+  ],
+  [
+    "closeButton",
+    "seed-inline-banner__closeButton"
+  ]
+];
+
+const defaultVariant = {
+  "variant": "neutralWeak"
+};
+
+const compoundVariants = [];
+
+export const inlineBannerVariantMap = {
+  "variant": [
+    "neutralWeak",
+    "positiveWeak",
+    "informativeWeak",
+    "warningWeak",
+    "warningSolid",
+    "criticalWeak",
+    "criticalSolid"
+  ]
+};
+
+export const inlineBannerVariantKeys = Object.keys(inlineBannerVariantMap);
+
+export function inlineBanner(props) {
+  return Object.fromEntries(
+    inlineBannerSlotNames.map(([slot, className]) => {
+      return [
+        slot,
+        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
+      ];
+    }),
+  );
+}
+
+Object.assign(inlineBanner, { splitVariantProps: (props) => splitVariantProps(props, inlineBannerVariantMap) });

package/recipes/link-with-icon.d.ts

@@ -0,0 +1,24 @@
+declare interface LinkWithIconVariant {
+  /**
+  * @default t6
+  */
+  size: "t6" | "t5" | "t4";
+}
+
+declare type LinkWithIconVariantMap = {
+  [key in keyof LinkWithIconVariant]: Array<LinkWithIconVariant[key]>;
+};
+
+export declare type LinkWithIconVariantProps = Partial<LinkWithIconVariant>;
+
+export declare type LinkWithIconSlotName = "root";
+
+export declare const linkWithIconVariantMap: LinkWithIconVariantMap;
+
+export declare const linkWithIcon: ((
+  props?: LinkWithIconVariantProps,
+) => Record<LinkWithIconSlotName, string>) & {
+  splitVariantProps: <T extends LinkWithIconVariantProps>(
+    props: T,
+  ) => [LinkWithIconVariantProps, Omit<T, keyof LinkWithIconVariantProps>];
+}

package/recipes/link-with-icon.mjs

@@ -0,0 +1,39 @@
+import { createClassName } from "./className.mjs";
+import { mergeVariants } from "./mergeVariants.mjs";
+import { splitVariantProps } from "./splitVariantProps.mjs";
+
+const linkWithIconSlotNames = [
+  [
+    "root",
+    "seed-link-with-icon__root"
+  ]
+];
+
+const defaultVariant = {
+  "size": "t6"
+};
+
+const compoundVariants = [];
+
+export const linkWithIconVariantMap = {
+  "size": [
+    "t6",
+    "t5",
+    "t4"
+  ]
+};
+
+export const linkWithIconVariantKeys = Object.keys(linkWithIconVariantMap);
+
+export function linkWithIcon(props) {
+  return Object.fromEntries(
+    linkWithIconSlotNames.map(([slot, className]) => {
+      return [
+        slot,
+        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
+      ];
+    }),
+  );
+}
+
+Object.assign(linkWithIcon, { splitVariantProps: (props) => splitVariantProps(props, linkWithIconVariantMap) });

package/recipes/manner-temp-badge.d.ts

@@ -0,0 +1,24 @@
+declare interface MannerTempBadgeVariant {
+  /**
+  * @default l1
+  */
+  level: "l1" | "l2" | "l3" | "l4" | "l5" | "l6";
+}
+
+declare type MannerTempBadgeVariantMap = {
+  [key in keyof MannerTempBadgeVariant]: Array<MannerTempBadgeVariant[key]>;
+};
+
+export declare type MannerTempBadgeVariantProps = Partial<MannerTempBadgeVariant>;
+
+export declare type MannerTempBadgeSlotName = "root";
+
+export declare const mannerTempBadgeVariantMap: MannerTempBadgeVariantMap;
+
+export declare const mannerTempBadge: ((
+  props?: MannerTempBadgeVariantProps,
+) => Record<MannerTempBadgeSlotName, string>) & {
+  splitVariantProps: <T extends MannerTempBadgeVariantProps>(
+    props: T,
+  ) => [MannerTempBadgeVariantProps, Omit<T, keyof MannerTempBadgeVariantProps>];
+}

package/recipes/manner-temp-badge.mjs

@@ -0,0 +1,42 @@
+import { createClassName } from "./className.mjs";
+import { mergeVariants } from "./mergeVariants.mjs";
+import { splitVariantProps } from "./splitVariantProps.mjs";
+
+const mannerTempBadgeSlotNames = [
+  [
+    "root",
+    "seed-manner-temp-badge__root"
+  ]
+];
+
+const defaultVariant = {
+  "level": "l1"
+};
+
+const compoundVariants = [];
+
+export const mannerTempBadgeVariantMap = {
+  "level": [
+    "l1",
+    "l2",
+    "l3",
+    "l4",
+    "l5",
+    "l6"
+  ]
+};
+
+export const mannerTempBadgeVariantKeys = Object.keys(mannerTempBadgeVariantMap);
+
+export function mannerTempBadge(props) {
+  return Object.fromEntries(
+    mannerTempBadgeSlotNames.map(([slot, className]) => {
+      return [
+        slot,
+        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
+      ];
+    }),
+  );
+}
+
+Object.assign(mannerTempBadge, { splitVariantProps: (props) => splitVariantProps(props, mannerTempBadgeVariantMap) });

package/recipes/mergeVariants.mjs

@@ -0,0 +1,9 @@
+export function mergeVariants(a, b) {
+  const result = { ...a };
+  for (const k in b) {
+    if (b[k]) {
+      result[k] = b[k];
+    }
+  }
+  return result;
+}

package/recipes/progress-circle.d.ts

@@ -0,0 +1,28 @@
+declare interface ProgressCircleVariant {
+  /**
+  * @default neutral
+  */
+  tone: "neutral" | "brand" | "staticWhite" | "inherit";
+/**
+  * @default 40
+  */
+  size: "24" | "40" | "inherit";
+}
+
+declare type ProgressCircleVariantMap = {
+  [key in keyof ProgressCircleVariant]: Array<ProgressCircleVariant[key]>;
+};
+
+export declare type ProgressCircleVariantProps = Partial<ProgressCircleVariant>;
+
+export declare type ProgressCircleSlotName = "root" | "track" | "range";
+
+export declare const progressCircleVariantMap: ProgressCircleVariantMap;
+
+export declare const progressCircle: ((
+  props?: ProgressCircleVariantProps,
+) => Record<ProgressCircleSlotName, string>) & {
+  splitVariantProps: <T extends ProgressCircleVariantProps>(
+    props: T,
+  ) => [ProgressCircleVariantProps, Omit<T, keyof ProgressCircleVariantProps>];
+}

package/recipes/progress-circle.mjs

@@ -0,0 +1,54 @@
+import { createClassName } from "./className.mjs";
+import { mergeVariants } from "./mergeVariants.mjs";
+import { splitVariantProps } from "./splitVariantProps.mjs";
+
+const progressCircleSlotNames = [
+  [
+    "root",
+    "seed-progress-circle__root"
+  ],
+  [
+    "track",
+    "seed-progress-circle__track"
+  ],
+  [
+    "range",
+    "seed-progress-circle__range"
+  ]
+];
+
+const defaultVariant = {
+  "tone": "neutral",
+  "size": 40
+};
+
+const compoundVariants = [];
+
+export const progressCircleVariantMap = {
+  "tone": [
+    "neutral",
+    "brand",
+    "staticWhite",
+    "inherit"
+  ],
+  "size": [
+    "24",
+    "40",
+    "inherit"
+  ]
+};
+
+export const progressCircleVariantKeys = Object.keys(progressCircleVariantMap);
+
+export function progressCircle(props) {
+  return Object.fromEntries(
+    progressCircleSlotNames.map(([slot, className]) => {
+      return [
+        slot,
+        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
+      ];
+    }),
+  );
+}
+
+Object.assign(progressCircle, { splitVariantProps: (props) => splitVariantProps(props, progressCircleVariantMap) });

package/recipes/pull-to-refresh.d.ts

@@ -0,0 +1,21 @@
+declare interface PullToRefreshVariant {
+  
+}
+
+declare type PullToRefreshVariantMap = {
+  [key in keyof PullToRefreshVariant]: Array<PullToRefreshVariant[key]>;
+};
+
+export declare type PullToRefreshVariantProps = Partial<PullToRefreshVariant>;
+
+export declare type PullToRefreshSlotName = "root" | "indicator";
+
+export declare const pullToRefreshVariantMap: PullToRefreshVariantMap;
+
+export declare const pullToRefresh: ((
+  props?: PullToRefreshVariantProps,
+) => Record<PullToRefreshSlotName, string>) & {
+  splitVariantProps: <T extends PullToRefreshVariantProps>(
+    props: T,
+  ) => [PullToRefreshVariantProps, Omit<T, keyof PullToRefreshVariantProps>];
+}

package/recipes/pull-to-refresh.mjs

@@ -0,0 +1,35 @@
+import { createClassName } from "./className.mjs";
+import { mergeVariants } from "./mergeVariants.mjs";
+import { splitVariantProps } from "./splitVariantProps.mjs";
+
+const pullToRefreshSlotNames = [
+  [
+    "root",
+    "seed-pull-to-refresh__root"
+  ],
+  [
+    "indicator",
+    "seed-pull-to-refresh__indicator"
+  ]
+];
+
+const defaultVariant = {};
+
+const compoundVariants = [];
+
+export const pullToRefreshVariantMap = {};
+
+export const pullToRefreshVariantKeys = Object.keys(pullToRefreshVariantMap);
+
+export function pullToRefresh(props) {
+  return Object.fromEntries(
+    pullToRefreshSlotNames.map(([slot, className]) => {
+      return [
+        slot,
+        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
+      ];
+    }),
+  );
+}
+
+Object.assign(pullToRefresh, { splitVariantProps: (props) => splitVariantProps(props, pullToRefreshVariantMap) });

package/recipes/radio.d.ts

@@ -0,0 +1,24 @@
+declare interface RadioVariant {
+  /**
+  * @default medium
+  */
+  size: "large" | "medium";
+}
+
+declare type RadioVariantMap = {
+  [key in keyof RadioVariant]: Array<RadioVariant[key]>;
+};
+
+export declare type RadioVariantProps = Partial<RadioVariant>;
+
+export declare type RadioSlotName = "root" | "icon";
+
+export declare const radioVariantMap: RadioVariantMap;
+
+export declare const radio: ((
+  props?: RadioVariantProps,
+) => Record<RadioSlotName, string>) & {
+  splitVariantProps: <T extends RadioVariantProps>(
+    props: T,
+  ) => [RadioVariantProps, Omit<T, keyof RadioVariantProps>];
+}

package/recipes/radio.mjs

@@ -0,0 +1,42 @@
+import { createClassName } from "./className.mjs";
+import { mergeVariants } from "./mergeVariants.mjs";
+import { splitVariantProps } from "./splitVariantProps.mjs";
+
+const radioSlotNames = [
+  [
+    "root",
+    "seed-radio__root"
+  ],
+  [
+    "icon",
+    "seed-radio__icon"
+  ]
+];
+
+const defaultVariant = {
+  "size": "medium"
+};
+
+const compoundVariants = [];
+
+export const radioVariantMap = {
+  "size": [
+    "large",
+    "medium"
+  ]
+};
+
+export const radioVariantKeys = Object.keys(radioVariantMap);
+
+export function radio(props) {
+  return Object.fromEntries(
+    radioSlotNames.map(([slot, className]) => {
+      return [
+        slot,
+        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
+      ];
+    }),
+  );
+}
+
+Object.assign(radio, { splitVariantProps: (props) => splitVariantProps(props, radioVariantMap) });

package/recipes/reaction-button.d.ts

@@ -0,0 +1,24 @@
+declare interface ReactionButtonVariant {
+  /**
+  * @default small
+  */
+  size: "xsmall" | "small";
+}
+
+declare type ReactionButtonVariantMap = {
+  [key in keyof ReactionButtonVariant]: Array<ReactionButtonVariant[key]>;
+};
+
+export declare type ReactionButtonVariantProps = Partial<ReactionButtonVariant>;
+
+export declare type ReactionButtonSlotName = "root";
+
+export declare const reactionButtonVariantMap: ReactionButtonVariantMap;
+
+export declare const reactionButton: ((
+  props?: ReactionButtonVariantProps,
+) => Record<ReactionButtonSlotName, string>) & {
+  splitVariantProps: <T extends ReactionButtonVariantProps>(
+    props: T,
+  ) => [ReactionButtonVariantProps, Omit<T, keyof ReactionButtonVariantProps>];
+}

package/recipes/reaction-button.mjs

@@ -0,0 +1,38 @@
+import { createClassName } from "./className.mjs";
+import { mergeVariants } from "./mergeVariants.mjs";
+import { splitVariantProps } from "./splitVariantProps.mjs";
+
+const reactionButtonSlotNames = [
+  [
+    "root",
+    "seed-reaction-button__root"
+  ]
+];
+
+const defaultVariant = {
+  "size": "small"
+};
+
+const compoundVariants = [];
+
+export const reactionButtonVariantMap = {
+  "size": [
+    "xsmall",
+    "small"
+  ]
+};
+
+export const reactionButtonVariantKeys = Object.keys(reactionButtonVariantMap);
+
+export function reactionButton(props) {
+  return Object.fromEntries(
+    reactionButtonSlotNames.map(([slot, className]) => {
+      return [
+        slot,
+        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
+      ];
+    }),
+  );
+}
+
+Object.assign(reactionButton, { splitVariantProps: (props) => splitVariantProps(props, reactionButtonVariantMap) });

package/recipes/segmented-control.d.ts

@@ -0,0 +1,21 @@
+declare interface SegmentedControlVariant {
+  
+}
+
+declare type SegmentedControlVariantMap = {
+  [key in keyof SegmentedControlVariant]: Array<SegmentedControlVariant[key]>;
+};
+
+export declare type SegmentedControlVariantProps = Partial<SegmentedControlVariant>;
+
+export declare type SegmentedControlSlotName = "root" | "indicator" | "item";
+
+export declare const segmentedControlVariantMap: SegmentedControlVariantMap;
+
+export declare const segmentedControl: ((
+  props?: SegmentedControlVariantProps,
+) => Record<SegmentedControlSlotName, string>) & {
+  splitVariantProps: <T extends SegmentedControlVariantProps>(
+    props: T,
+  ) => [SegmentedControlVariantProps, Omit<T, keyof SegmentedControlVariantProps>];
+}

package/recipes/segmented-control.mjs

@@ -0,0 +1,39 @@
+import { createClassName } from "./className.mjs";
+import { mergeVariants } from "./mergeVariants.mjs";
+import { splitVariantProps } from "./splitVariantProps.mjs";
+
+const segmentedControlSlotNames = [
+  [
+    "root",
+    "seed-segmented-control__root"
+  ],
+  [
+    "indicator",
+    "seed-segmented-control__indicator"
+  ],
+  [
+    "item",
+    "seed-segmented-control__item"
+  ]
+];
+
+const defaultVariant = {};
+
+const compoundVariants = [];
+
+export const segmentedControlVariantMap = {};
+
+export const segmentedControlVariantKeys = Object.keys(segmentedControlVariantMap);
+
+export function segmentedControl(props) {
+  return Object.fromEntries(
+    segmentedControlSlotNames.map(([slot, className]) => {
+      return [
+        slot,
+        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
+      ];
+    }),
+  );
+}
+
+Object.assign(segmentedControl, { splitVariantProps: (props) => splitVariantProps(props, segmentedControlVariantMap) });

package/recipes/select-box-group.d.ts

@@ -0,0 +1,21 @@
+declare interface SelectBoxGroupVariant {
+  
+}
+
+declare type SelectBoxGroupVariantMap = {
+  [key in keyof SelectBoxGroupVariant]: Array<SelectBoxGroupVariant[key]>;
+};
+
+export declare type SelectBoxGroupVariantProps = Partial<SelectBoxGroupVariant>;
+
+export declare type SelectBoxGroupSlotName = "root";
+
+export declare const selectBoxGroupVariantMap: SelectBoxGroupVariantMap;
+
+export declare const selectBoxGroup: ((
+  props?: SelectBoxGroupVariantProps,
+) => Record<SelectBoxGroupSlotName, string>) & {
+  splitVariantProps: <T extends SelectBoxGroupVariantProps>(
+    props: T,
+  ) => [SelectBoxGroupVariantProps, Omit<T, keyof SelectBoxGroupVariantProps>];
+}

package/recipes/select-box-group.mjs

@@ -0,0 +1,31 @@
+import { createClassName } from "./className.mjs";
+import { mergeVariants } from "./mergeVariants.mjs";
+import { splitVariantProps } from "./splitVariantProps.mjs";
+
+const selectBoxGroupSlotNames = [
+  [
+    "root",
+    "seed-select-box-group__root"
+  ]
+];
+
+const defaultVariant = {};
+
+const compoundVariants = [];
+
+export const selectBoxGroupVariantMap = {};
+
+export const selectBoxGroupVariantKeys = Object.keys(selectBoxGroupVariantMap);
+
+export function selectBoxGroup(props) {
+  return Object.fromEntries(
+    selectBoxGroupSlotNames.map(([slot, className]) => {
+      return [
+        slot,
+        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
+      ];
+    }),
+  );
+}
+
+Object.assign(selectBoxGroup, { splitVariantProps: (props) => splitVariantProps(props, selectBoxGroupVariantMap) });

package/recipes/select-box.d.ts

@@ -0,0 +1,21 @@
+declare interface SelectBoxVariant {
+  
+}
+
+declare type SelectBoxVariantMap = {
+  [key in keyof SelectBoxVariant]: Array<SelectBoxVariant[key]>;
+};
+
+export declare type SelectBoxVariantProps = Partial<SelectBoxVariant>;
+
+export declare type SelectBoxSlotName = "root" | "content" | "label" | "description" | "checkboxControl" | "checkboxIcon" | "radioControl" | "radioIcon";
+
+export declare const selectBoxVariantMap: SelectBoxVariantMap;
+
+export declare const selectBox: ((
+  props?: SelectBoxVariantProps,
+) => Record<SelectBoxSlotName, string>) & {
+  splitVariantProps: <T extends SelectBoxVariantProps>(
+    props: T,
+  ) => [SelectBoxVariantProps, Omit<T, keyof SelectBoxVariantProps>];
+}