@drivenets/design-system 0.0.1 → 0.0.3

package/dist/components/ds-grid/ds-grid.types.d.cts

@@ -0,0 +1,50 @@
+import { ReactNode } from "react";
+
+//#region src/components/ds-grid/ds-grid.types.d.ts
+interface DsGridProps {
+  /**
+   * The content to be rendered inside the grid
+   */
+  children: ReactNode;
+  /**
+   * Number of rows in the grid (defaults to 1)
+   */
+  rows?: 1 | 2 | 4 | 6 | 8;
+  /**
+   * Number of columns in the grid (defaults to 12)
+   */
+  columns?: 2 | 4 | 6 | 8 | 10 | 12;
+  /**
+   * Custom class names to apply to the grid
+   */
+  className?: string;
+}
+interface DsGridItemProps {
+  /**
+   * The content to be rendered inside the grid item
+   */
+  children: ReactNode;
+  /**
+   * Number of columns the item spans (1-12) or 'full'
+   */
+  colSpan?: number | 'full';
+  /**
+   * Starting column for the item (1-11)
+   */
+  colStart?: number;
+  /**
+   * Number of rows the item spans (1-8) or 'full'
+   */
+  rowSpan?: number | 'full';
+  /**
+   * Starting row for the item (1-7)
+   */
+  rowStart?: number;
+  /**
+   * Custom class names to apply to the grid item
+   */
+  className?: string;
+}
+//#endregion
+export { DsGridItemProps, DsGridProps };
+//# sourceMappingURL=ds-grid.types.d.cts.map

package/dist/components/ds-grid/ds-grid.types.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ds-grid.types.d.cts","names":[],"sources":["../../../src/components/ds-grid/ds-grid.types.ts"],"sourcesContent":[],"mappings":";;;UAEiB,WAAA;;AAAjB;AAsBA;YAlBW;;;;;;;;;;;;;;UAkBM,eAAA;;;;YAIN"}

package/dist/components/ds-grid/ds-grid.types.d.ts

@@ -0,0 +1,50 @@
+import { ReactNode } from "react";
+
+//#region src/components/ds-grid/ds-grid.types.d.ts
+interface DsGridProps {
+  /**
+   * The content to be rendered inside the grid
+   */
+  children: ReactNode;
+  /**
+   * Number of rows in the grid (defaults to 1)
+   */
+  rows?: 1 | 2 | 4 | 6 | 8;
+  /**
+   * Number of columns in the grid (defaults to 12)
+   */
+  columns?: 2 | 4 | 6 | 8 | 10 | 12;
+  /**
+   * Custom class names to apply to the grid
+   */
+  className?: string;
+}
+interface DsGridItemProps {
+  /**
+   * The content to be rendered inside the grid item
+   */
+  children: ReactNode;
+  /**
+   * Number of columns the item spans (1-12) or 'full'
+   */
+  colSpan?: number | 'full';
+  /**
+   * Starting column for the item (1-11)
+   */
+  colStart?: number;
+  /**
+   * Number of rows the item spans (1-8) or 'full'
+   */
+  rowSpan?: number | 'full';
+  /**
+   * Starting row for the item (1-7)
+   */
+  rowStart?: number;
+  /**
+   * Custom class names to apply to the grid item
+   */
+  className?: string;
+}
+//#endregion
+export { DsGridItemProps, DsGridProps };
+//# sourceMappingURL=ds-grid.types.d.ts.map

package/dist/components/ds-grid/ds-grid.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ds-grid.types.d.ts","names":[],"sources":["../../../src/components/ds-grid/ds-grid.types.ts"],"sourcesContent":[],"mappings":";;;UAEiB,WAAA;;AAAjB;AAsBA;YAlBW;;;;;;;;;;;;;;UAkBM,eAAA;;;;YAIN"}

package/dist/components/ds-grid/index.cjs

@@ -0,0 +1 @@
+const require_ds_grid = require('./ds-grid.cjs');

package/dist/components/ds-grid/index.d.ts

@@ -0,0 +1,2 @@
+import { DsGridItemProps, DsGridProps } from "./ds-grid.types.js";
+import { DsGrid, DsGridItem } from "./ds-grid.js";

package/dist/components/ds-grid/index.js

@@ -0,0 +1 @@
+import { DsGrid, DsGridItem } from "./ds-grid.js";

package/dist/components/ds-icon/ds-icon.cjs

@@ -0,0 +1,29 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_ds_icon_module = require('./ds-icon.module.cjs');
+let classnames = require("classnames");
+classnames = require_rolldown_runtime.__toESM(classnames);
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/components/ds-icon/ds-icon.tsx
+/**
+* Design system Icon component that renders Google Material Icons or inline SVGs
+*/
+const DsIcon = ({ icon, size = "medium", variant = "outlined", filled, className = "", style = {}, ...rest }) => {
+	const variantClass = `material-symbols-${variant}`;
+	const iconClass = (0, classnames.default)(require_ds_icon_module.default.icon, require_ds_icon_module.default[size], { [require_ds_icon_module.default.filled]: filled }, className);
+	if (typeof icon === "function") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(icon, {
+		className: iconClass,
+		style,
+		...rest
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		className: (0, classnames.default)(iconClass, variantClass),
+		style,
+		...rest,
+		children: icon
+	});
+};
+var ds_icon_default = DsIcon;
+
+//#endregion
+exports.default = ds_icon_default;

package/dist/components/ds-icon/ds-icon.d.cts

@@ -0,0 +1,12 @@
+import { DsIconProps } from "./ds-icon.types.cjs";
+import React from "react";
+
+//#region src/components/ds-icon/ds-icon.d.ts
+
+/**
+ * Design system Icon component that renders Google Material Icons or inline SVGs
+ */
+declare const DsIcon: React.FC<DsIconProps>;
+//#endregion
+export { DsIcon };
+//# sourceMappingURL=ds-icon.d.cts.map

package/dist/components/ds-icon/ds-icon.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ds-icon.d.cts","names":[],"sources":["../../../src/components/ds-icon/ds-icon.tsx"],"sourcesContent":[],"mappings":";;;;;;;AAGmD;cAK7C,QAAQ,KAAA,CAAM,GAAG"}

package/dist/components/ds-icon/ds-icon.d.ts

@@ -0,0 +1,12 @@
+import { DsIconProps } from "./ds-icon.types.js";
+import React from "react";
+
+//#region src/components/ds-icon/ds-icon.d.ts
+
+/**
+ * Design system Icon component that renders Google Material Icons or inline SVGs
+ */
+declare const DsIcon: React.FC<DsIconProps>;
+//#endregion
+export { DsIcon };
+//# sourceMappingURL=ds-icon.d.ts.map

package/dist/components/ds-icon/ds-icon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ds-icon.d.ts","names":[],"sources":["../../../src/components/ds-icon/ds-icon.tsx"],"sourcesContent":[],"mappings":";;;;;;;AAGmD;cAK7C,QAAQ,KAAA,CAAM,GAAG"}

package/dist/components/ds-icon/ds-icon.js

@@ -0,0 +1,28 @@
+import ds_icon_module_default from "./ds-icon.module.js";
+import classNames from "classnames";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/ds-icon/ds-icon.tsx
+/**
+* Design system Icon component that renders Google Material Icons or inline SVGs
+*/
+const DsIcon = ({ icon, size = "medium", variant = "outlined", filled, className = "", style = {}, ...rest }) => {
+	const variantClass = `material-symbols-${variant}`;
+	const iconClass = classNames(ds_icon_module_default.icon, ds_icon_module_default[size], { [ds_icon_module_default.filled]: filled }, className);
+	if (typeof icon === "function") return /* @__PURE__ */ jsx(icon, {
+		className: iconClass,
+		style,
+		...rest
+	});
+	return /* @__PURE__ */ jsx("span", {
+		className: classNames(iconClass, variantClass),
+		style,
+		...rest,
+		children: icon
+	});
+};
+var ds_icon_default = DsIcon;
+
+//#endregion
+export { ds_icon_default as default };
+//# sourceMappingURL=ds-icon.js.map

package/dist/components/ds-icon/ds-icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ds-icon.js","names":["DsIcon: React.FC<DsIconProps>","styles"],"sources":["../../../src/components/ds-icon/ds-icon.tsx"],"sourcesContent":["import type React from 'react';\nimport classNames from 'classnames';\nimport styles from './ds-icon.module.scss';\nimport type { DsIconProps } from './ds-icon.types';\n\n/**\n * Design system Icon component that renders Google Material Icons or inline SVGs\n */\nconst DsIcon: React.FC<DsIconProps> = ({\n\ticon,\n\tsize = 'medium',\n\tvariant = 'outlined',\n\tfilled,\n\tclassName = '',\n\tstyle = {},\n\t...rest\n}) => {\n\tconst variantClass = `material-symbols-${variant}`;\n\tconst iconClass = classNames(styles.icon, styles[size], { [styles.filled]: filled }, className);\n\n\tif (typeof icon === 'function') {\n\t\tconst SvgComponent = icon;\n\t\treturn <SvgComponent className={iconClass} style={style} {...rest} />;\n\t}\n\n\treturn (\n\t\t<span className={classNames(iconClass, variantClass)} style={style} {...rest}>\n\t\t\t{icon}\n\t\t</span>\n\t);\n};\n\nexport default DsIcon;\n"],"mappings":";;;;;;;;AAQA,MAAMA,UAAiC,EACtC,MACA,OAAO,UACP,UAAU,YACV,QACA,YAAY,IACZ,QAAQ,EAAE,EACV,GAAG,WACE;CACL,MAAM,eAAe,oBAAoB;CACzC,MAAM,YAAY,WAAWC,uBAAO,MAAMA,uBAAO,OAAO,GAAGA,uBAAO,SAAS,QAAQ,EAAE,UAAU;AAE/F,KAAI,OAAO,SAAS,WAEnB,QAAO,oBADc;EACA,WAAW;EAAkB;EAAO,GAAI;GAAQ;AAGtE,QACC,oBAAC;EAAK,WAAW,WAAW,WAAW,aAAa;EAAS;EAAO,GAAI;YACtE;GACK;;AAIT,sBAAe"}

package/dist/components/ds-icon/ds-icon.module.cjs

@@ -0,0 +1,14 @@
+
+//#region src/components/ds-icon/ds-icon.module.scss
+var ds_icon_module_default = {
+	"icon": "_icon_91b4d_1",
+	"extra-large": "_extra-large_91b4d_1",
+	"large": "_large_91b4d_1",
+	"medium": "_medium_91b4d_1",
+	"small": "_small_91b4d_1",
+	"tiny": "_tiny_91b4d_1",
+	"filled": "_filled_91b4d_1"
+};
+
+//#endregion
+exports.default = ds_icon_module_default;

package/dist/components/ds-icon/ds-icon.module.js

@@ -0,0 +1,14 @@
+//#region src/components/ds-icon/ds-icon.module.scss
+var ds_icon_module_default = {
+	"icon": "_icon_91b4d_1",
+	"extra-large": "_extra-large_91b4d_1",
+	"large": "_large_91b4d_1",
+	"medium": "_medium_91b4d_1",
+	"small": "_small_91b4d_1",
+	"tiny": "_tiny_91b4d_1",
+	"filled": "_filled_91b4d_1"
+};
+
+//#endregion
+export { ds_icon_module_default as default };
+//# sourceMappingURL=ds-icon.module.js.map

package/dist/components/ds-icon/ds-icon.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ds-icon.module.js","names":[],"sources":["../../../src/components/ds-icon/ds-icon.module.scss"],"sourcesContent":[".icon {\n\t&.extra-large {\n\t\tfont-size: var(--icon-width-extra-large);\n\t}\n\n\t&.large {\n\t\tfont-size: var(--icon-width-large);\n\t}\n\n\t&.medium {\n\t\tfont-size: var(--icon-width-medium);\n\t}\n\n\t&.small {\n\t\tfont-size: var(--icon-width-small);\n\t}\n\n\t&.tiny {\n\t\tfont-size: var(--icon-width-tiny);\n\t}\n}\n\n.filled {\n\tfont-variation-settings: 'FILL' 1;\n}\n"],"mappings":""}

package/dist/components/ds-icon/ds-icon.types.cjs

@@ -0,0 +1,14 @@
+
+//#region src/components/ds-icon/ds-icon.types.ts
+const iconSizes = [
+	"tiny",
+	"small",
+	"medium",
+	"large",
+	"extra-large"
+];
+const iconVariants = ["outlined", "rounded"];
+
+//#endregion
+exports.iconSizes = iconSizes;
+exports.iconVariants = iconVariants;

package/dist/components/ds-icon/ds-icon.types.d.cts

@@ -0,0 +1,46 @@
+import { IconPrefix, materialIcons } from "./material-icons.cjs";
+import React from "react";
+
+//#region src/components/ds-icon/ds-icon.types.d.ts
+declare const iconSizes: readonly ["tiny", "small", "medium", "large", "extra-large"];
+type IconSize = (typeof iconSizes)[number];
+declare const iconVariants: readonly ["outlined", "rounded"];
+type IconVariant = (typeof iconVariants)[number];
+type IconName = { [K in keyof typeof materialIcons]: K extends `${IconPrefix}::${infer Name}` ? Name : never }[keyof typeof materialIcons];
+type IconType = IconName | React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
+interface DsIconProps {
+  /**
+   * The icon to display. This can be a Material Icon name (e.g., 'home') or an SVG component.
+   */
+  icon: IconType;
+  /**
+   * The size of the icon
+   * @default 'medium'
+   */
+  size?: IconSize;
+  /**
+   * The variant of the Material Icon
+   * @default 'outlined'
+   */
+  variant?: IconVariant;
+  /**
+   * Whether the icon should be filled
+   * @default false
+   */
+  filled?: boolean;
+  /**
+   * Additional CSS class names
+   */
+  className?: string;
+  /**
+   * Additional styles to apply to the icon
+   */
+  style?: React.CSSProperties;
+  /**
+   * Optional click handler
+   */
+  onClick?: (event: React.MouseEvent<HTMLSpanElement | SVGSVGElement>) => void;
+}
+//#endregion
+export { DsIconProps, IconName, IconSize, IconType, IconVariant, iconSizes, iconVariants };
+//# sourceMappingURL=ds-icon.types.d.cts.map

package/dist/components/ds-icon/ds-icon.types.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ds-icon.types.d.cts","names":[],"sources":["../../../src/components/ds-icon/ds-icon.types.ts"],"sourcesContent":[],"mappings":";;;;cAGa;KACD,QAAA,WAAmB;AADlB,cAEA,YAFwE,EAAA,SAAA,CAAA,UAAA,EAAA,SAAA,CAAA;AACzE,KAEA,WAAA,GAFmB,CAAA,OAEG,YAFM,CAAA,CAAA,MAAA,CAAA;AAC3B,KAGD,QAAA,GAHgD,QAChD,MAAA,OAGQ,aAHc,GAGE,CAHF,SAAY,GAGG,UAHH,KAAA,KAAA,KAAA,EAAA,GAAA,IAAA,GAAA,KAAA,EAE9C,CAAA,MAAY,OAEG,aAFK,CAAA;AACA,KAGR,QAAA,GAAW,QAHH,GAGc,KAAA,CAAM,iBAHpB,CAGsC,KAAA,CAAM,QAH5C,CAGqD,aAHrD,CAAA,CAAA;AAAgB,UAKnB,WAAA,CALmB;EAAa;;;EAGrC,IAAA,EAML,QANa;EAAG;;;;EAAkC,IAAA,CAAA,EAYjD,QAZiD;EAExC;;;;EAgCR,OAAM,CAAA,EAhBJ,WAgBI;EAKqB;;;;;;;;;;;;UAL3B,KAAA,CAAM;;;;oBAKI,KAAA,CAAM,WAAW,kBAAkB"}

package/dist/components/ds-icon/ds-icon.types.d.ts

@@ -0,0 +1,46 @@
+import { IconPrefix, materialIcons } from "./material-icons.js";
+import React from "react";
+
+//#region src/components/ds-icon/ds-icon.types.d.ts
+declare const iconSizes: readonly ["tiny", "small", "medium", "large", "extra-large"];
+type IconSize = (typeof iconSizes)[number];
+declare const iconVariants: readonly ["outlined", "rounded"];
+type IconVariant = (typeof iconVariants)[number];
+type IconName = { [K in keyof typeof materialIcons]: K extends `${IconPrefix}::${infer Name}` ? Name : never }[keyof typeof materialIcons];
+type IconType = IconName | React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
+interface DsIconProps {
+  /**
+   * The icon to display. This can be a Material Icon name (e.g., 'home') or an SVG component.
+   */
+  icon: IconType;
+  /**
+   * The size of the icon
+   * @default 'medium'
+   */
+  size?: IconSize;
+  /**
+   * The variant of the Material Icon
+   * @default 'outlined'
+   */
+  variant?: IconVariant;
+  /**
+   * Whether the icon should be filled
+   * @default false
+   */
+  filled?: boolean;
+  /**
+   * Additional CSS class names
+   */
+  className?: string;
+  /**
+   * Additional styles to apply to the icon
+   */
+  style?: React.CSSProperties;
+  /**
+   * Optional click handler
+   */
+  onClick?: (event: React.MouseEvent<HTMLSpanElement | SVGSVGElement>) => void;
+}
+//#endregion
+export { DsIconProps, IconName, IconSize, IconType, IconVariant, iconSizes, iconVariants };
+//# sourceMappingURL=ds-icon.types.d.ts.map

package/dist/components/ds-icon/ds-icon.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ds-icon.types.d.ts","names":[],"sources":["../../../src/components/ds-icon/ds-icon.types.ts"],"sourcesContent":[],"mappings":";;;;cAGa;KACD,QAAA,WAAmB;AADlB,cAEA,YAFwE,EAAA,SAAA,CAAA,UAAA,EAAA,SAAA,CAAA;AACzE,KAEA,WAAA,GAFQ,CAAW,OAEG,YAFM,CAAA,CAAA,MAAA,CAAA;AAC3B,KAGD,QAAA,GAHgD,QAChD,MAAA,OAGQ,aAHc,GAGE,CAHF,SAAY,GAGG,UAHH,KAAA,KAAA,KAAA,EAAA,GAAA,IAAA,GAAA,KAAA,EAE9C,CAAA,MAAY,OAEG,aAFK,CAAA;AACA,KAGR,QAAA,GAAW,QAHH,GAGc,KAAA,CAAM,iBAHpB,CAGsC,KAAA,CAAM,QAH5C,CAGqD,aAHrD,CAAA,CAAA;AAAgB,UAKnB,WAAA,CALmB;EAAa;;;EAGrC,IAAA,EAML,QANa;EAAG;;;;EAAkC,IAAA,CAAA,EAYjD,QAZiD;EAExC;;;;EAgCR,OAAM,CAAA,EAhBJ,WAgBI;EAKqB;;;;;;;;;;;;UAL3B,KAAA,CAAM;;;;oBAKI,KAAA,CAAM,WAAW,kBAAkB"}

package/dist/components/ds-icon/ds-icon.types.js

@@ -0,0 +1,13 @@
+//#region src/components/ds-icon/ds-icon.types.ts
+const iconSizes = [
+	"tiny",
+	"small",
+	"medium",
+	"large",
+	"extra-large"
+];
+const iconVariants = ["outlined", "rounded"];
+
+//#endregion
+export { iconSizes, iconVariants };
+//# sourceMappingURL=ds-icon.types.js.map

package/dist/components/ds-icon/ds-icon.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ds-icon.types.js","names":[],"sources":["../../../src/components/ds-icon/ds-icon.types.ts"],"sourcesContent":["import type React from 'react';\nimport type { IconPrefix, materialIcons } from './material-icons';\n\nexport const iconSizes = ['tiny', 'small', 'medium', 'large', 'extra-large'] as const;\nexport type IconSize = (typeof iconSizes)[number];\nexport const iconVariants = ['outlined', 'rounded'] as const;\nexport type IconVariant = (typeof iconVariants)[number];\n\nexport type IconName = {\n\t[K in keyof typeof materialIcons]: K extends `${IconPrefix}::${infer Name}` ? Name : never;\n}[keyof typeof materialIcons];\n\nexport type IconType = IconName | React.FunctionComponent<React.SVGProps<SVGSVGElement>>;\n\nexport interface DsIconProps {\n\t/**\n\t * The icon to display. This can be a Material Icon name (e.g., 'home') or an SVG component.\n\t */\n\ticon: IconType;\n\n\t/**\n\t * The size of the icon\n\t * @default 'medium'\n\t */\n\tsize?: IconSize;\n\n\t/**\n\t * The variant of the Material Icon\n\t * @default 'outlined'\n\t */\n\tvariant?: IconVariant;\n\n\t/**\n\t * Whether the icon should be filled\n\t * @default false\n\t */\n\tfilled?: boolean;\n\n\t/**\n\t * Additional CSS class names\n\t */\n\tclassName?: string;\n\n\t/**\n\t * Additional styles to apply to the icon\n\t */\n\tstyle?: React.CSSProperties;\n\n\t/**\n\t * Optional click handler\n\t */\n\tonClick?: (event: React.MouseEvent<HTMLSpanElement | SVGSVGElement>) => void;\n}\n"],"mappings":";AAGA,MAAa,YAAY;CAAC;CAAQ;CAAS;CAAU;CAAS;CAAc;AAE5E,MAAa,eAAe,CAAC,YAAY,UAAU"}

package/dist/components/ds-icon/index.cjs

@@ -0,0 +1,2 @@
+const require_ds_icon = require('./ds-icon.cjs');
+const require_ds_icon_types = require('./ds-icon.types.cjs');

package/dist/components/ds-icon/index.d.ts

@@ -0,0 +1,2 @@
+import { DsIconProps, IconName, IconSize, IconType, IconVariant, iconSizes, iconVariants } from "./ds-icon.types.js";
+import { DsIcon } from "./ds-icon.js";

package/dist/components/ds-icon/index.js

@@ -0,0 +1,2 @@
+import ds_icon_default from "./ds-icon.js";
+import { iconSizes, iconVariants } from "./ds-icon.types.js";