@yahoo/uds-v5-wip 0.0.1

package/dist/components/dist/switch.d.ts

@@ -0,0 +1,371 @@
+import { ComponentConfig } from "../../config/dist/createConfig.js";
+import * as _$react from "react";
+import * as _$_uds_types0 from "@uds/types";
+
+//#region ../components/dist/switch.d.ts
+//#region src/switch.d.ts
+/**
+ * @description A toggle control for switching between on and off states
+ */
+declare const Switch: _$react.FC<_$_uds_types0.CreateComponentProps<ComponentConfig<{
+  Switch: {
+    readonly base: {
+      readonly root: {
+        readonly display: "flex";
+        readonly alignItems: "center";
+        readonly gap: string;
+        readonly cursor: "pointer";
+        readonly backgroundColor: "transparent";
+        readonly padding: "0";
+      };
+      readonly track: {
+        readonly width: "2.75rem";
+        readonly height: "1.5rem";
+        readonly borderRadius: string;
+        readonly padding: string;
+        readonly display: "flex";
+        readonly alignItems: "center";
+        readonly backgroundColor: string;
+        readonly transition: "background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1)";
+        readonly _dataStateOpen: {
+          readonly backgroundColor: string;
+        };
+      };
+      readonly thumb: {
+        readonly width: "1.25rem";
+        readonly height: "1.25rem";
+        readonly borderRadius: string;
+        readonly backgroundColor: string;
+        readonly boxShadow: "0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px -1px rgba(0,0,0,0.1)";
+        readonly transition: "transform 0.15s cubic-bezier(0.4, 0, 0.2, 1)";
+        readonly _dataStateOpen: {
+          readonly transform: "translateX(20px)";
+        };
+      };
+      readonly label: {
+        readonly color: string;
+        readonly display: "flex";
+        readonly flexDirection: "column";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: "1";
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly display: "flex";
+        readonly flexDirection: "column";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly display: "flex";
+        readonly flexDirection: "column";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly display: "flex";
+        readonly flexDirection: "column";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly display: "flex";
+        readonly flexDirection: "column";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly display: "flex";
+        readonly flexDirection: "column";
+        readonly fontSize: string;
+        readonly fontWeight: "450";
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly display: "flex";
+        readonly flexDirection: "column";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly display: "flex";
+        readonly flexDirection: "column";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly display: "flex";
+        readonly flexDirection: "column";
+        readonly fontSize: string;
+        readonly fontWeight: "450";
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly display: "flex";
+        readonly flexDirection: "column";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly display: "flex";
+        readonly flexDirection: "column";
+        readonly fontSize: string;
+        readonly fontWeight: "450";
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly display: "flex";
+        readonly flexDirection: "column";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly display: "flex";
+        readonly flexDirection: "column";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly display: "flex";
+        readonly flexDirection: "column";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly display: "flex";
+        readonly flexDirection: "column";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly display: "flex";
+        readonly flexDirection: "column";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly display: "flex";
+        readonly flexDirection: "column";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly display: "flex";
+        readonly flexDirection: "column";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly display: "flex";
+        readonly flexDirection: "column";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly display: "flex";
+        readonly flexDirection: "column";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly display: "flex";
+        readonly flexDirection: "column";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly display: "flex";
+        readonly flexDirection: "column";
+        readonly fontSize: string;
+        readonly fontWeight: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      };
+      readonly description: {
+        readonly color: string;
+        readonly fontWeight: string;
+        readonly fontSize: string;
+        readonly lineHeight: "1";
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontWeight: string;
+        readonly fontSize: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontWeight: string;
+        readonly fontSize: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontWeight: string;
+        readonly fontSize: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontWeight: string;
+        readonly fontSize: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontWeight: string;
+        readonly fontSize: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontWeight: string;
+        readonly fontSize: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontWeight: string;
+        readonly fontSize: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontWeight: string;
+        readonly fontSize: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontWeight: string;
+        readonly fontSize: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontWeight: string;
+        readonly fontSize: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontWeight: string;
+        readonly fontSize: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontWeight: string;
+        readonly fontSize: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontWeight: string;
+        readonly fontSize: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontWeight: string;
+        readonly fontSize: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontWeight: string;
+        readonly fontSize: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontWeight: string;
+        readonly fontSize: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontWeight: string;
+        readonly fontSize: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontWeight: string;
+        readonly fontSize: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontWeight: string;
+        readonly fontSize: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontWeight: string;
+        readonly fontSize: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      } | {
+        readonly color: string;
+        readonly fontWeight: string;
+        readonly fontSize: string;
+        readonly lineHeight: string;
+        readonly fontFamily: string;
+      };
+    };
+  };
+}, {}>, {
+  checked: boolean;
+  onToggle: () => void;
+  label?: string;
+  description?: string;
+}, {
+  root: "button";
+  track: "div";
+  thumb: "div";
+  label: "span";
+  description: "span";
+}>>;
+type SwitchProps = React.ComponentProps<typeof Switch>; //#endregion
+//#endregion
+export { Switch, SwitchProps };

package/dist/components/dist/switch.js

@@ -0,0 +1,32 @@
+"use client";
+import { createComponent } from "../../core/dist/createComponent.js";
+import "../../core/dist/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region ../components/dist/switch.js
+/**
+* @description A toggle control for switching between on and off states
+*/
+const Switch = createComponent(({ props, checked, onToggle, label, description }) => {
+	const state = checked ? "open" : "closed";
+	return /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		onClick: onToggle,
+		...props.root,
+		children: [/* @__PURE__ */ jsx("div", {
+			"data-state": state,
+			...props.track,
+			children: /* @__PURE__ */ jsx("div", {
+				"data-state": state,
+				...props.thumb
+			})
+		}), (label || description) && /* @__PURE__ */ jsxs("span", {
+			...props.label,
+			children: [label, description && /* @__PURE__ */ jsx("span", {
+				...props.description,
+				children: description
+			})]
+		})]
+	});
+});
+//#endregion
+export { Switch };

package/dist/components/dist/table.d.ts

@@ -0,0 +1,37 @@
+import * as _$react from "react";
+import { HtmlTableBodyProps, HtmlTableCellProps, HtmlTableHeadCellProps, HtmlTableHeadProps, HtmlTableProps, HtmlTableRowProps, StyleAndModifierProps } from "@uds/types";
+
+//#region ../components/dist/table.d.ts
+//#region src/table.d.ts
+interface TableProps extends HtmlTableProps, StyleAndModifierProps {}
+interface TableHeadProps extends HtmlTableHeadProps, StyleAndModifierProps {}
+interface TableHeadCellProps extends HtmlTableHeadCellProps, StyleAndModifierProps {}
+interface TableBodyProps extends HtmlTableBodyProps, StyleAndModifierProps {}
+interface TableCellProps extends HtmlTableCellProps, StyleAndModifierProps {}
+interface TableRowProps extends HtmlTableRowProps, StyleAndModifierProps {}
+/**
+ * @description A primitive for tables
+ */
+declare const Table: _$react.FC<TableProps>;
+/**
+ * @description A primitive for table headers
+ */
+declare const TableHead: _$react.FC<TableHeadProps>;
+/**
+ * @description A primitive for table headers cells
+ */
+declare const TableHeadCell: _$react.FC<TableHeadCellProps>;
+/**
+ * @description A primitive for table bodies
+ */
+declare const TableBody: _$react.FC<TableBodyProps>;
+/**
+ * @description A primitive for table cells
+ */
+declare const TableCell: _$react.FC<TableCellProps>;
+/**
+ * @description A primitive for table rows
+ */
+declare const TableRow: _$react.FC<TableRowProps>; //#endregion
+//#endregion
+export { Table, TableBody, TableBodyProps, TableCell, TableCellProps, TableHead, TableHeadCell, TableHeadCellProps, TableHeadProps, TableProps, TableRow, TableRowProps };

package/dist/components/dist/table.js

@@ -0,0 +1,29 @@
+import { createComponent } from "../../core/dist/createComponent.js";
+import "../../core/dist/index.js";
+//#region ../components/dist/table.js
+/**
+* @description A primitive for tables
+*/
+const Table = createComponent("table");
+/**
+* @description A primitive for table headers
+*/
+const TableHead = createComponent("thead");
+/**
+* @description A primitive for table headers cells
+*/
+const TableHeadCell = createComponent("th");
+/**
+* @description A primitive for table bodies
+*/
+const TableBody = createComponent("tbody");
+/**
+* @description A primitive for table cells
+*/
+const TableCell = createComponent("td");
+/**
+* @description A primitive for table rows
+*/
+const TableRow = createComponent("tr");
+//#endregion
+export { Table, TableBody, TableCell, TableHead, TableHeadCell, TableRow };