@seed-design/css 0.0.1-rc.0

package/README.md

@@ -0,0 +1 @@
+# @seed-design/css

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@seed-design/css",
+  "version": "0.0.1-rc.0",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/daangn/seed-design.git",
+    "directory": "packages/css"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "sideEffects": [
+    "*.css"
+  ],
+  "scripts": {
+    "generate": "bun rootage:generate && qvism:generate",
+    "rootage:generate": "bun rootage token-ts ./vars && rootage component-spec ./vars/component",
+    "qvism:generate": "bun qvism css && bun qvism js ./recipes"
+  },
+  "exports": {
+    "./*.css": "./*.css",
+    "./recipes/*": {
+      "types": "./recipes/*.d.ts",
+      "import": "./recipes/*.mjs"
+    },
+    "./vars": {
+      "types": "./vars/index.d.ts",
+      "import": "./vars/index.mjs"
+    },
+    "./vars/component": {
+      "types": "./vars/component/index.d.ts",
+      "import": "./vars/component/index.mjs"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "package.json",
+    "recipes",
+    "vars",
+    "*.css"
+  ]
+}

package/recipes/action-button.d.ts

@@ -0,0 +1,32 @@
+declare interface ActionButtonVariant {
+  /**
+  * @default brandSolid
+  */
+  variant: "brandSolid" | "neutralSolid" | "neutralWeak" | "criticalSolid" | "brandOutline" | "neutralOutline";
+/**
+  * @default medium
+  */
+  size: "xsmall" | "small" | "medium" | "large";
+/**
+  * @default withText
+  */
+  layout: "withText" | "iconOnly";
+}
+
+declare type ActionButtonVariantMap = {
+  [key in keyof ActionButtonVariant]: Array<ActionButtonVariant[key]>;
+};
+
+export declare type ActionButtonVariantProps = Partial<ActionButtonVariant>;
+
+export declare type ActionButtonSlotName = "root";
+
+export declare const actionButtonVariantMap: ActionButtonVariantMap;
+
+export declare const actionButton: ((
+  props?: ActionButtonVariantProps,
+) => Record<ActionButtonSlotName, string>) & {
+  splitVariantProps: <T extends ActionButtonVariantProps>(
+    props: T,
+  ) => [ActionButtonVariantProps, Omit<T, keyof ActionButtonVariantProps>];
+}

package/recipes/action-button.mjs

@@ -0,0 +1,87 @@
+import { createClassName } from "./className.mjs";
+import { mergeVariants } from "./mergeVariants.mjs";
+import { splitVariantProps } from "./splitVariantProps.mjs";
+
+const actionButtonSlotNames = [
+  [
+    "root",
+    "seed-action-button__root"
+  ]
+];
+
+const defaultVariant = {
+  "variant": "brandSolid",
+  "size": "medium",
+  "layout": "withText"
+};
+
+const compoundVariants = [
+  {
+    "size": "xsmall",
+    "layout": "withText"
+  },
+  {
+    "size": "xsmall",
+    "layout": "iconOnly"
+  },
+  {
+    "size": "small",
+    "layout": "withText"
+  },
+  {
+    "size": "small",
+    "layout": "iconOnly"
+  },
+  {
+    "size": "medium",
+    "layout": "withText"
+  },
+  {
+    "size": "medium",
+    "layout": "iconOnly"
+  },
+  {
+    "size": "large",
+    "layout": "withText"
+  },
+  {
+    "size": "large",
+    "layout": "iconOnly"
+  }
+];
+
+export const actionButtonVariantMap = {
+  "variant": [
+    "brandSolid",
+    "neutralSolid",
+    "neutralWeak",
+    "criticalSolid",
+    "brandOutline",
+    "neutralOutline"
+  ],
+  "size": [
+    "xsmall",
+    "small",
+    "medium",
+    "large"
+  ],
+  "layout": [
+    "withText",
+    "iconOnly"
+  ]
+};
+
+export const actionButtonVariantKeys = Object.keys(actionButtonVariantMap);
+
+export function actionButton(props) {
+  return Object.fromEntries(
+    actionButtonSlotNames.map(([slot, className]) => {
+      return [
+        slot,
+        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
+      ];
+    }),
+  );
+}
+
+Object.assign(actionButton, { splitVariantProps: (props) => splitVariantProps(props, actionButtonVariantMap) });

package/recipes/action-chip.d.ts

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

package/recipes/action-chip.mjs

@@ -0,0 +1,60 @@
+import { createClassName } from "./className.mjs";
+import { mergeVariants } from "./mergeVariants.mjs";
+import { splitVariantProps } from "./splitVariantProps.mjs";
+
+const actionChipSlotNames = [
+  [
+    "root",
+    "seed-action-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 actionChipVariantMap = {
+  "size": [
+    "medium",
+    "small"
+  ],
+  "layout": [
+    "withText",
+    "iconOnly"
+  ]
+};
+
+export const actionChipVariantKeys = Object.keys(actionChipVariantMap);
+
+export function actionChip(props) {
+  return Object.fromEntries(
+    actionChipSlotNames.map(([slot, className]) => {
+      return [
+        slot,
+        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
+      ];
+    }),
+  );
+}
+
+Object.assign(actionChip, { splitVariantProps: (props) => splitVariantProps(props, actionChipVariantMap) });

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

@@ -0,0 +1,24 @@
+declare interface ActionSheetItemVariant {
+  /**
+  * @default neutral
+  */
+  tone: "neutral" | "critical";
+}
+
+declare type ActionSheetItemVariantMap = {
+  [key in keyof ActionSheetItemVariant]: Array<ActionSheetItemVariant[key]>;
+};
+
+export declare type ActionSheetItemVariantProps = Partial<ActionSheetItemVariant>;
+
+export declare type ActionSheetItemSlotName = "root";
+
+export declare const actionSheetItemVariantMap: ActionSheetItemVariantMap;
+
+export declare const actionSheetItem: ((
+  props?: ActionSheetItemVariantProps,
+) => Record<ActionSheetItemSlotName, string>) & {
+  splitVariantProps: <T extends ActionSheetItemVariantProps>(
+    props: T,
+  ) => [ActionSheetItemVariantProps, Omit<T, keyof ActionSheetItemVariantProps>];
+}

package/recipes/action-sheet-item.mjs

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

package/recipes/action-sheet.d.ts

@@ -0,0 +1,21 @@
+declare interface ActionSheetVariant {
+  
+}
+
+declare type ActionSheetVariantMap = {
+  [key in keyof ActionSheetVariant]: Array<ActionSheetVariant[key]>;
+};
+
+export declare type ActionSheetVariantProps = Partial<ActionSheetVariant>;
+
+export declare type ActionSheetSlotName = "backdrop" | "positioner" | "content" | "header" | "title" | "description" | "list" | "closeButton";
+
+export declare const actionSheetVariantMap: ActionSheetVariantMap;
+
+export declare const actionSheet: ((
+  props?: ActionSheetVariantProps,
+) => Record<ActionSheetSlotName, string>) & {
+  splitVariantProps: <T extends ActionSheetVariantProps>(
+    props: T,
+  ) => [ActionSheetVariantProps, Omit<T, keyof ActionSheetVariantProps>];
+}

package/recipes/action-sheet.mjs

@@ -0,0 +1,59 @@
+import { createClassName } from "./className.mjs";
+import { mergeVariants } from "./mergeVariants.mjs";
+import { splitVariantProps } from "./splitVariantProps.mjs";
+
+const actionSheetSlotNames = [
+  [
+    "backdrop",
+    "seed-action-sheet__backdrop"
+  ],
+  [
+    "positioner",
+    "seed-action-sheet__positioner"
+  ],
+  [
+    "content",
+    "seed-action-sheet__content"
+  ],
+  [
+    "header",
+    "seed-action-sheet__header"
+  ],
+  [
+    "title",
+    "seed-action-sheet__title"
+  ],
+  [
+    "description",
+    "seed-action-sheet__description"
+  ],
+  [
+    "list",
+    "seed-action-sheet__list"
+  ],
+  [
+    "closeButton",
+    "seed-action-sheet__closeButton"
+  ]
+];
+
+const defaultVariant = {};
+
+const compoundVariants = [];
+
+export const actionSheetVariantMap = {};
+
+export const actionSheetVariantKeys = Object.keys(actionSheetVariantMap);
+
+export function actionSheet(props) {
+  return Object.fromEntries(
+    actionSheetSlotNames.map(([slot, className]) => {
+      return [
+        slot,
+        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
+      ];
+    }),
+  );
+}
+
+Object.assign(actionSheet, { splitVariantProps: (props) => splitVariantProps(props, actionSheetVariantMap) });

package/recipes/app-bar-main.d.ts

@@ -0,0 +1,36 @@
+declare interface AppBarMainVariant {
+  /**
+  * @default titleOnly
+  */
+  layout: "titleOnly" | "withSubtitle";
+/**
+  * @default cupertino
+  */
+  theme: "cupertino" | "android";
+/**
+  * @default slideFromRightIOS
+  */
+  transitionStyle: "slideFromRightIOS" | "fadeFromBottomAndroid";
+/**
+  * @default layer
+  */
+  tone: "layer" | "transparent";
+}
+
+declare type AppBarMainVariantMap = {
+  [key in keyof AppBarMainVariant]: Array<AppBarMainVariant[key]>;
+};
+
+export declare type AppBarMainVariantProps = Partial<AppBarMainVariant>;
+
+export declare type AppBarMainSlotName = "root" | "title" | "subtitle";
+
+export declare const appBarMainVariantMap: AppBarMainVariantMap;
+
+export declare const appBarMain: ((
+  props?: AppBarMainVariantProps,
+) => Record<AppBarMainSlotName, string>) & {
+  splitVariantProps: <T extends AppBarMainVariantProps>(
+    props: T,
+  ) => [AppBarMainVariantProps, Omit<T, keyof AppBarMainVariantProps>];
+}

package/recipes/app-bar-main.mjs

@@ -0,0 +1,61 @@
+import { createClassName } from "./className.mjs";
+import { mergeVariants } from "./mergeVariants.mjs";
+import { splitVariantProps } from "./splitVariantProps.mjs";
+
+const appBarMainSlotNames = [
+  [
+    "root",
+    "seed-app-bar-main__root"
+  ],
+  [
+    "title",
+    "seed-app-bar-main__title"
+  ],
+  [
+    "subtitle",
+    "seed-app-bar-main__subtitle"
+  ]
+];
+
+const defaultVariant = {
+  "layout": "titleOnly",
+  "theme": "cupertino",
+  "transitionStyle": "slideFromRightIOS",
+  "tone": "layer"
+};
+
+const compoundVariants = [];
+
+export const appBarMainVariantMap = {
+  "layout": [
+    "titleOnly",
+    "withSubtitle"
+  ],
+  "theme": [
+    "cupertino",
+    "android"
+  ],
+  "transitionStyle": [
+    "slideFromRightIOS",
+    "fadeFromBottomAndroid"
+  ],
+  "tone": [
+    "layer",
+    "transparent"
+  ]
+};
+
+export const appBarMainVariantKeys = Object.keys(appBarMainVariantMap);
+
+export function appBarMain(props) {
+  return Object.fromEntries(
+    appBarMainSlotNames.map(([slot, className]) => {
+      return [
+        slot,
+        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
+      ];
+    }),
+  );
+}
+
+Object.assign(appBarMain, { splitVariantProps: (props) => splitVariantProps(props, appBarMainVariantMap) });

package/recipes/app-bar.d.ts

@@ -0,0 +1,36 @@
+declare interface AppBarVariant {
+  /**
+  * @default cupertino
+  */
+  theme: "cupertino" | "android";
+/**
+  * @default slideFromRightIOS
+  */
+  transitionStyle: "slideFromRightIOS" | "fadeFromBottomAndroid";
+/**
+  * @default layer
+  */
+  tone: "layer" | "transparent";
+/**
+  * @default false
+  */
+  divider: boolean;
+}
+
+declare type AppBarVariantMap = {
+  [key in keyof AppBarVariant]: Array<AppBarVariant[key]>;
+};
+
+export declare type AppBarVariantProps = Partial<AppBarVariant>;
+
+export declare type AppBarSlotName = "root" | "left" | "right" | "iconButton" | "icon";
+
+export declare const appBarVariantMap: AppBarVariantMap;
+
+export declare const appBar: ((
+  props?: AppBarVariantProps,
+) => Record<AppBarSlotName, string>) & {
+  splitVariantProps: <T extends AppBarVariantProps>(
+    props: T,
+  ) => [AppBarVariantProps, Omit<T, keyof AppBarVariantProps>];
+}

package/recipes/app-bar.mjs

@@ -0,0 +1,68 @@
+import { createClassName } from "./className.mjs";
+import { mergeVariants } from "./mergeVariants.mjs";
+import { splitVariantProps } from "./splitVariantProps.mjs";
+
+const appBarSlotNames = [
+  [
+    "root",
+    "seed-app-bar__root"
+  ],
+  [
+    "left",
+    "seed-app-bar__left"
+  ],
+  [
+    "right",
+    "seed-app-bar__right"
+  ],
+  [
+    "iconButton",
+    "seed-app-bar__iconButton"
+  ],
+  [
+    "icon",
+    "seed-app-bar__icon"
+  ]
+];
+
+const defaultVariant = {
+  "theme": "cupertino",
+  "transitionStyle": "slideFromRightIOS",
+  "tone": "layer",
+  "divider": false
+};
+
+const compoundVariants = [];
+
+export const appBarVariantMap = {
+  "theme": [
+    "cupertino",
+    "android"
+  ],
+  "transitionStyle": [
+    "slideFromRightIOS",
+    "fadeFromBottomAndroid"
+  ],
+  "tone": [
+    "layer",
+    "transparent"
+  ],
+  "divider": [
+    true
+  ]
+};
+
+export const appBarVariantKeys = Object.keys(appBarVariantMap);
+
+export function appBar(props) {
+  return Object.fromEntries(
+    appBarSlotNames.map(([slot, className]) => {
+      return [
+        slot,
+        createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
+      ];
+    }),
+  );
+}
+
+Object.assign(appBar, { splitVariantProps: (props) => splitVariantProps(props, appBarVariantMap) });

package/recipes/app-screen.d.ts

@@ -0,0 +1,36 @@
+declare interface AppScreenVariant {
+  /**
+  * @default cupertino
+  */
+  theme: "cupertino" | "android";
+/**
+  * @default slideFromRightIOS
+  */
+  transitionStyle: "slideFromRightIOS" | "fadeFromBottomAndroid";
+/**
+  * @default appBar
+  */
+  layerOffsetTop: "none" | "safeArea" | "appBar";
+/**
+  * @default none
+  */
+  layerOffsetBottom: "none" | "safeArea";
+}
+
+declare type AppScreenVariantMap = {
+  [key in keyof AppScreenVariant]: Array<AppScreenVariant[key]>;
+};
+
+export declare type AppScreenVariantProps = Partial<AppScreenVariant>;
+
+export declare type AppScreenSlotName = "root" | "layer" | "dim" | "edge";
+
+export declare const appScreenVariantMap: AppScreenVariantMap;
+
+export declare const appScreen: ((
+  props?: AppScreenVariantProps,
+) => Record<AppScreenSlotName, string>) & {
+  splitVariantProps: <T extends AppScreenVariantProps>(
+    props: T,
+  ) => [AppScreenVariantProps, Omit<T, keyof AppScreenVariantProps>];
+}