@ds-gn/ui 0.0.0-stage → 0.5.0

package/dist/playground-manifest.js

@@ -0,0 +1,556 @@
+// AUTO-GENERATED by build/generate-playground-manifest.ts. Do not edit.
+export const playgroundManifest = [
+  {
+    "tag": "dsgn-badge",
+    "module": "@ds-gn/ui/badge",
+    "props": [
+      {
+        "name": "surface",
+        "attribute": "surface",
+        "control": "select",
+        "default": "dark",
+        "label": "Surface",
+        "options": [
+          "dark",
+          "light"
+        ],
+        "includeDefault": true
+      },
+      {
+        "name": "variant",
+        "attribute": "variant",
+        "control": "select",
+        "default": "default",
+        "label": "Variant",
+        "options": [
+          "default",
+          "brand",
+          "accent",
+          "success",
+          "warning",
+          "error"
+        ]
+      },
+      {
+        "name": "size",
+        "attribute": "size",
+        "control": "select",
+        "default": "md",
+        "label": "Size",
+        "options": [
+          "sm",
+          "md"
+        ]
+      }
+    ],
+    "slots": [
+      {
+        "default": "New",
+        "label": "Content"
+      }
+    ]
+  },
+  {
+    "tag": "dsgn-button",
+    "module": "@ds-gn/ui/button",
+    "props": [
+      {
+        "name": "surface",
+        "attribute": "surface",
+        "control": "select",
+        "default": "dark",
+        "label": "Surface",
+        "options": [
+          "dark",
+          "light"
+        ],
+        "includeDefault": true
+      },
+      {
+        "name": "appearance",
+        "attribute": "appearance",
+        "control": "select",
+        "default": "solid",
+        "label": "Appearance",
+        "options": [
+          "solid",
+          "outline",
+          "ghost",
+          "link",
+          "inline",
+          "mono-solid",
+          "mono-outline",
+          "gradient"
+        ]
+      },
+      {
+        "name": "buttonWeight",
+        "attribute": "button-weight",
+        "control": "select",
+        "default": "semibold",
+        "label": "Weight",
+        "options": [
+          "normal",
+          "medium",
+          "semibold",
+          "bold"
+        ]
+      },
+      {
+        "name": "size",
+        "attribute": "size",
+        "control": "select",
+        "default": "md",
+        "label": "Size",
+        "options": [
+          "sm",
+          "md",
+          "lg"
+        ]
+      },
+      {
+        "name": "type",
+        "attribute": "type",
+        "control": "select",
+        "default": "button",
+        "label": "Type",
+        "options": [
+          "button",
+          "submit",
+          "reset"
+        ]
+      },
+      {
+        "name": "iconName",
+        "attribute": "icon-name",
+        "control": "select",
+        "default": "",
+        "label": "Icon",
+        "options": [
+          "",
+          "arrowLeft",
+          "arrowRight",
+          "calendar",
+          "check",
+          "chevronDown",
+          "chevronLeft",
+          "chevronRight",
+          "chevronUp",
+          "circleAlert",
+          "circleCheck",
+          "circleX",
+          "copy",
+          "download",
+          "ellipsis",
+          "ellipsisVertical",
+          "externalLink",
+          "eye",
+          "eyeOff",
+          "info",
+          "loader",
+          "mail",
+          "menu",
+          "minus",
+          "pencil",
+          "plus",
+          "search",
+          "settings",
+          "trash2",
+          "triangleAlert",
+          "upload",
+          "user",
+          "x"
+        ]
+      },
+      {
+        "name": "iconPosition",
+        "attribute": "icon-position",
+        "control": "select",
+        "default": "leading",
+        "label": "Icon Position",
+        "options": [
+          "leading",
+          "trailing",
+          "only"
+        ]
+      },
+      {
+        "name": "disabled",
+        "attribute": "disabled",
+        "control": "boolean",
+        "default": false,
+        "label": "Disabled"
+      },
+      {
+        "name": "loading",
+        "attribute": "loading",
+        "control": "boolean",
+        "default": false,
+        "label": "Loading"
+      },
+      {
+        "name": "href",
+        "attribute": "href",
+        "control": "text",
+        "default": "",
+        "label": "Link URL"
+      },
+      {
+        "name": "target",
+        "attribute": "target",
+        "control": "select",
+        "default": "_self",
+        "label": "Target",
+        "options": [
+          "_self",
+          "_blank"
+        ]
+      }
+    ],
+    "slots": [
+      {
+        "default": "Get started",
+        "label": "Content"
+      }
+    ]
+  },
+  {
+    "tag": "dsgn-card",
+    "module": "@ds-gn/ui/card",
+    "props": [
+      {
+        "name": "surface",
+        "attribute": "surface",
+        "control": "select",
+        "default": "dark",
+        "label": "Surface",
+        "options": [
+          "dark",
+          "light"
+        ],
+        "includeDefault": true
+      },
+      {
+        "name": "variant",
+        "attribute": "variant",
+        "control": "select",
+        "default": "outlined",
+        "label": "Variant",
+        "options": [
+          "elevated",
+          "outlined"
+        ]
+      },
+      {
+        "name": "padding",
+        "attribute": "padding",
+        "control": "select",
+        "default": "md",
+        "label": "Padding",
+        "options": [
+          "none",
+          "sm",
+          "md",
+          "lg"
+        ]
+      }
+    ],
+    "slots": [
+      {
+        "name": "footer",
+        "default": "Built with DS-GN",
+        "label": "Footer"
+      }
+    ],
+    "nested": [
+      {
+        "tag": "dsgn-badge",
+        "slot": "badge",
+        "label": "Badge"
+      },
+      {
+        "tag": "dsgn-heading",
+        "slot": "heading",
+        "label": "Heading"
+      }
+    ]
+  },
+  {
+    "tag": "dsgn-heading",
+    "module": "@ds-gn/ui/heading",
+    "props": [
+      {
+        "name": "surface",
+        "attribute": "surface",
+        "control": "select",
+        "default": "dark",
+        "label": "Surface",
+        "options": [
+          "dark",
+          "light"
+        ],
+        "includeDefault": true
+      },
+      {
+        "name": "headingSize",
+        "attribute": "heading-size",
+        "control": "select",
+        "default": "h3",
+        "label": "Size",
+        "options": [
+          "h1",
+          "h2",
+          "h3",
+          "h4",
+          "h5",
+          "h6",
+          "hero"
+        ]
+      },
+      {
+        "name": "headingWeight",
+        "attribute": "heading-weight",
+        "control": "select",
+        "default": "semibold",
+        "label": "Weight",
+        "options": [
+          "normal",
+          "semibold",
+          "bold",
+          "extrabold"
+        ]
+      }
+    ],
+    "slots": [
+      {
+        "default": "A flexible card",
+        "label": "Content"
+      }
+    ]
+  },
+  {
+    "tag": "dsgn-heading-block",
+    "module": "@ds-gn/ui/heading-block",
+    "props": [
+      {
+        "name": "surface",
+        "attribute": "surface",
+        "control": "select",
+        "default": "dark",
+        "label": "Surface",
+        "options": [
+          "dark",
+          "light"
+        ],
+        "includeDefault": true
+      },
+      {
+        "name": "alignment",
+        "attribute": "alignment",
+        "control": "select",
+        "default": "start",
+        "label": "Alignment",
+        "options": [
+          "start",
+          "center"
+        ]
+      }
+    ],
+    "slots": [
+      {
+        "name": "eyebrow",
+        "default": "Featured",
+        "label": "Eyebrow"
+      },
+      {
+        "name": "description",
+        "default": "Compose nested components with their own controls.",
+        "label": "Description"
+      }
+    ],
+    "nested": [
+      {
+        "tag": "dsgn-heading",
+        "slot": "heading",
+        "label": "Heading"
+      }
+    ]
+  },
+  {
+    "tag": "dsgn-input",
+    "module": "@ds-gn/ui/input",
+    "props": [
+      {
+        "name": "surface",
+        "attribute": "surface",
+        "control": "select",
+        "default": "dark",
+        "label": "Surface",
+        "options": [
+          "dark",
+          "light"
+        ],
+        "includeDefault": true
+      },
+      {
+        "name": "type",
+        "attribute": "type",
+        "control": "select",
+        "default": "text",
+        "label": "Type",
+        "options": [
+          "text",
+          "email"
+        ]
+      },
+      {
+        "name": "size",
+        "attribute": "size",
+        "control": "select",
+        "default": "md",
+        "label": "Size",
+        "options": [
+          "sm",
+          "md",
+          "lg"
+        ]
+      },
+      {
+        "name": "label",
+        "attribute": "label",
+        "control": "text",
+        "default": "Email address",
+        "label": "Label"
+      },
+      {
+        "name": "placeholder",
+        "attribute": "placeholder",
+        "control": "text",
+        "default": "you@example.com",
+        "label": "Placeholder"
+      },
+      {
+        "name": "value",
+        "attribute": "value",
+        "control": "text",
+        "default": "",
+        "label": "Value"
+      },
+      {
+        "name": "disabled",
+        "attribute": "disabled",
+        "control": "boolean",
+        "default": false,
+        "label": "Disabled"
+      },
+      {
+        "name": "required",
+        "attribute": "required",
+        "control": "boolean",
+        "default": false,
+        "label": "Required"
+      }
+    ],
+    "slots": []
+  },
+  {
+    "tag": "dsgn-modal",
+    "module": "@ds-gn/ui/modal",
+    "props": [
+      {
+        "name": "surface",
+        "attribute": "surface",
+        "control": "select",
+        "default": "dark",
+        "label": "Surface",
+        "options": [
+          "dark",
+          "light"
+        ],
+        "includeDefault": true
+      },
+      {
+        "name": "open",
+        "attribute": "open",
+        "control": "boolean",
+        "default": false,
+        "label": "Open"
+      },
+      {
+        "name": "placement",
+        "attribute": "placement",
+        "control": "select",
+        "default": "center",
+        "label": "Placement",
+        "options": [
+          "center",
+          "left",
+          "right",
+          "top",
+          "bottom"
+        ]
+      },
+      {
+        "name": "motion",
+        "attribute": "motion",
+        "control": "select",
+        "default": "inherit",
+        "label": "Motion",
+        "options": [
+          "inherit",
+          "none",
+          "center",
+          "left",
+          "right",
+          "top",
+          "bottom"
+        ]
+      },
+      {
+        "name": "size",
+        "attribute": "size",
+        "control": "select",
+        "default": "md",
+        "label": "Size",
+        "options": [
+          "sm",
+          "md",
+          "lg",
+          "xl",
+          "full"
+        ]
+      },
+      {
+        "name": "noBackdropDismiss",
+        "attribute": "no-backdrop-dismiss",
+        "control": "boolean",
+        "default": false,
+        "label": "Block backdrop dismiss"
+      },
+      {
+        "name": "noEscapeDismiss",
+        "attribute": "no-escape-dismiss",
+        "control": "boolean",
+        "default": false,
+        "label": "Block Escape dismiss"
+      }
+    ],
+    "slots": [
+      {
+        "name": "heading",
+        "default": "Delete project",
+        "label": "Heading"
+      },
+      {
+        "name": "description",
+        "default": "This removes the project and everything in it.",
+        "label": "Description"
+      },
+      {
+        "default": "Members lose access immediately. This cannot be undone.",
+        "label": "Content"
+      }
+    ]
+  }
+];
+export default playgroundManifest;

package/dist/react/Background.d.ts

@@ -0,0 +1,6 @@
+import { Background as BackgroundElement } from '@ds-gn/ui/background';
+/**
+ * React wrapper for the `<dsgn-background>` element. Import-safe under Node SSR: emits an
+ * inert `<dsgn-background>` tag on the server and upgrades on the client.
+ */
+export declare const Background: import("@lit/react").ReactWebComponent<BackgroundElement, {}>;

package/dist/react/Background.js

@@ -0,0 +1,13 @@
+// frameworks/react/Background.ts
+import { Background as BackgroundElement } from "@ds-gn/ui/background";
+import { createComponent } from "@lit/react";
+import * as React from "react";
+var Background = createComponent({
+  react: React,
+  tagName: "dsgn-background",
+  elementClass: BackgroundElement,
+  events: {}
+});
+export {
+  Background
+};

package/dist/react/Badge.d.ts

@@ -0,0 +1,6 @@
+import { Badge as BadgeElement } from '@ds-gn/ui/badge';
+/**
+ * React wrapper for the `<dsgn-badge>` element. Import-safe under Node SSR: emits an
+ * inert `<dsgn-badge>` tag on the server and upgrades on the client.
+ */
+export declare const Badge: import("@lit/react").ReactWebComponent<BadgeElement, {}>;

package/dist/react/Badge.js

@@ -0,0 +1,13 @@
+// frameworks/react/Badge.ts
+import { Badge as BadgeElement } from "@ds-gn/ui/badge";
+import { createComponent } from "@lit/react";
+import * as React from "react";
+var Badge = createComponent({
+  react: React,
+  tagName: "dsgn-badge",
+  elementClass: BadgeElement,
+  events: {}
+});
+export {
+  Badge
+};

package/dist/react/Button.d.ts

@@ -0,0 +1,6 @@
+import { Button as ButtonElement } from '@ds-gn/ui/button';
+/**
+ * React wrapper for the `<dsgn-button>` element. Import-safe under Node SSR: emits an
+ * inert `<dsgn-button>` tag on the server and upgrades on the client.
+ */
+export declare const Button: import("@lit/react").ReactWebComponent<ButtonElement, {}>;

package/dist/react/Button.js

@@ -0,0 +1,13 @@
+// frameworks/react/Button.ts
+import { Button as ButtonElement } from "@ds-gn/ui/button";
+import { createComponent } from "@lit/react";
+import * as React from "react";
+var Button = createComponent({
+  react: React,
+  tagName: "dsgn-button",
+  elementClass: ButtonElement,
+  events: {}
+});
+export {
+  Button
+};

package/dist/react/Card.d.ts

@@ -0,0 +1,6 @@
+import { Card as CardElement } from '@ds-gn/ui/card';
+/**
+ * React wrapper for the `<dsgn-card>` element. Import-safe under Node SSR: emits an
+ * inert `<dsgn-card>` tag on the server and upgrades on the client.
+ */
+export declare const Card: import("@lit/react").ReactWebComponent<CardElement, {}>;

package/dist/react/Card.js

@@ -0,0 +1,13 @@
+// frameworks/react/Card.ts
+import { Card as CardElement } from "@ds-gn/ui/card";
+import { createComponent } from "@lit/react";
+import * as React from "react";
+var Card = createComponent({
+  react: React,
+  tagName: "dsgn-card",
+  elementClass: CardElement,
+  events: {}
+});
+export {
+  Card
+};

package/dist/react/CodeBlock.d.ts

@@ -0,0 +1,6 @@
+import { CodeBlock as CodeBlockElement } from '@ds-gn/ui/code-block';
+/**
+ * React wrapper for the `<dsgn-code-block>` element. Import-safe under Node SSR: emits an
+ * inert `<dsgn-code-block>` tag on the server and upgrades on the client.
+ */
+export declare const CodeBlock: import("@lit/react").ReactWebComponent<CodeBlockElement, {}>;

package/dist/react/CodeBlock.js

@@ -0,0 +1,13 @@
+// frameworks/react/CodeBlock.ts
+import { CodeBlock as CodeBlockElement } from "@ds-gn/ui/code-block";
+import { createComponent } from "@lit/react";
+import * as React from "react";
+var CodeBlock = createComponent({
+  react: React,
+  tagName: "dsgn-code-block",
+  elementClass: CodeBlockElement,
+  events: {}
+});
+export {
+  CodeBlock
+};

package/dist/react/Container.d.ts

@@ -0,0 +1,6 @@
+import { Container as ContainerElement } from '@ds-gn/ui/container';
+/**
+ * React wrapper for the `<dsgn-container>` element. Import-safe under Node SSR: emits an
+ * inert `<dsgn-container>` tag on the server and upgrades on the client.
+ */
+export declare const Container: import("@lit/react").ReactWebComponent<ContainerElement, {}>;

package/dist/react/Container.js

@@ -0,0 +1,13 @@
+// frameworks/react/Container.ts
+import { Container as ContainerElement } from "@ds-gn/ui/container";
+import { createComponent } from "@lit/react";
+import * as React from "react";
+var Container = createComponent({
+  react: React,
+  tagName: "dsgn-container",
+  elementClass: ContainerElement,
+  events: {}
+});
+export {
+  Container
+};

package/dist/react/Divider.d.ts

@@ -0,0 +1,6 @@
+import { Divider as DividerElement } from '@ds-gn/ui/divider';
+/**
+ * React wrapper for the `<dsgn-divider>` element. Import-safe under Node SSR: emits an
+ * inert `<dsgn-divider>` tag on the server and upgrades on the client.
+ */
+export declare const Divider: import("@lit/react").ReactWebComponent<DividerElement, {}>;