@thunderid/react 0.1.0 → 0.3.0

package/dist/components/primitives/DatePicker/DatePicker.styles.js

@@ -0,0 +1,84 @@
+import { useMemo } from "react";
+import { css } from "@emotion/css";
+
+//#region src/components/primitives/DatePicker/DatePicker.styles.ts
+/**
+* Creates styles for the DatePicker component using BEM methodology
+* @param theme - The theme object containing design tokens
+* @param colorScheme - The current color scheme (used for memoization)
+* @param hasError - Whether the date picker has an error state
+* @param disabled - Whether the date picker is disabled
+* @returns Object containing CSS class names for component styling
+*/
+const useStyles = (theme, colorScheme, hasError, disabled) => useMemo(() => {
+	const inputStyles = css`
+      width: 100%;
+      padding: ${theme.vars.spacing.unit} calc(${theme.vars.spacing.unit} * 1.5);
+      border: 1px solid ${theme.vars.colors.border};
+      border-radius: ${theme.vars.components?.Field?.root?.borderRadius || theme.vars.borderRadius.medium};
+      font-size: 1rem;
+      font-family: ${theme.vars.typography.fontFamily};
+      color: ${theme.vars.colors.text.primary};
+      background-color: ${theme.vars.colors.background.surface};
+      outline: none;
+      transition:
+        border-color 0.2s ease,
+        box-shadow 0.2s ease;
+
+      &:focus {
+        border-color: ${theme.vars.colors.primary.main};
+        box-shadow: 0 0 0 2px ${theme.vars.colors.primary.main}20;
+      }
+
+      &:hover:not(:disabled) {
+        border-color: ${theme.vars.colors.primary.main};
+      }
+
+      &::placeholder {
+        color: ${theme.vars.colors.text.secondary};
+      }
+    `;
+	const errorInputStyles = css`
+      border-color: ${theme.vars.colors.error.main};
+
+      &:focus {
+        border-color: ${theme.vars.colors.error.main};
+        box-shadow: 0 0 0 2px ${theme.vars.colors.error.main}20;
+      }
+
+      &:hover:not(:disabled) {
+        border-color: ${theme.vars.colors.error.main};
+      }
+    `;
+	const disabledInputStyles = css`
+      background-color: ${theme.vars.colors.background.disabled};
+      color: ${theme.vars.colors.text.secondary};
+      cursor: not-allowed;
+      opacity: 0.6;
+
+      &:hover,
+      &:focus {
+        border-color: ${theme.vars.colors.border};
+        box-shadow: none;
+      }
+    `;
+	const labelStyles = css`
+      /* Label styles will be handled by InputLabel component */
+    `;
+	return {
+		disabledInput: disabled ? disabledInputStyles : "",
+		errorInput: hasError ? errorInputStyles : "",
+		input: inputStyles,
+		label: labelStyles
+	};
+}, [
+	theme,
+	colorScheme,
+	hasError,
+	disabled
+]);
+var DatePicker_styles_default = useStyles;
+
+//#endregion
+export { DatePicker_styles_default as default };
+//# sourceMappingURL=DatePicker.styles.js.map

package/dist/components/primitives/DatePicker/DatePicker.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatePicker.styles.js","names":["inputStyles: string","errorInputStyles: string","disabledInputStyles: string","labelStyles: string"],"sources":["../../../../src/components/primitives/DatePicker/DatePicker.styles.ts"],"sourcesContent":["/**\n * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).\n *\n * WSO2 LLC. licenses this file to you under the Apache License,\n * Version 2.0 (the \"License\"); you may not use this file except\n * in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing,\n * software distributed under the License is distributed on an\n * \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY\n * KIND, either express or implied. See the License for the\n * specific language governing permissions and limitations\n * under the License.\n */\n\nimport {css} from '@emotion/css';\nimport {Theme} from '@thunderid/browser';\nimport {useMemo} from 'react';\n\n/**\n * Creates styles for the DatePicker component using BEM methodology\n * @param theme - The theme object containing design tokens\n * @param colorScheme - The current color scheme (used for memoization)\n * @param hasError - Whether the date picker has an error state\n * @param disabled - Whether the date picker is disabled\n * @returns Object containing CSS class names for component styling\n */\nconst useStyles = (theme: Theme, colorScheme: string, hasError: boolean, disabled: boolean): Record<string, string> =>\n  useMemo(() => {\n    const inputStyles: string = css`\n      width: 100%;\n      padding: ${theme.vars.spacing.unit} calc(${theme.vars.spacing.unit} * 1.5);\n      border: 1px solid ${theme.vars.colors.border};\n      border-radius: ${theme.vars.components?.Field?.root?.borderRadius || theme.vars.borderRadius.medium};\n      font-size: 1rem;\n      font-family: ${theme.vars.typography.fontFamily};\n      color: ${theme.vars.colors.text.primary};\n      background-color: ${theme.vars.colors.background.surface};\n      outline: none;\n      transition:\n        border-color 0.2s ease,\n        box-shadow 0.2s ease;\n\n      &:focus {\n        border-color: ${theme.vars.colors.primary.main};\n        box-shadow: 0 0 0 2px ${theme.vars.colors.primary.main}20;\n      }\n\n      &:hover:not(:disabled) {\n        border-color: ${theme.vars.colors.primary.main};\n      }\n\n      &::placeholder {\n        color: ${theme.vars.colors.text.secondary};\n      }\n    `;\n\n    const errorInputStyles: string = css`\n      border-color: ${theme.vars.colors.error.main};\n\n      &:focus {\n        border-color: ${theme.vars.colors.error.main};\n        box-shadow: 0 0 0 2px ${theme.vars.colors.error.main}20;\n      }\n\n      &:hover:not(:disabled) {\n        border-color: ${theme.vars.colors.error.main};\n      }\n    `;\n\n    const disabledInputStyles: string = css`\n      background-color: ${theme.vars.colors.background.disabled};\n      color: ${theme.vars.colors.text.secondary};\n      cursor: not-allowed;\n      opacity: 0.6;\n\n      &:hover,\n      &:focus {\n        border-color: ${theme.vars.colors.border};\n        box-shadow: none;\n      }\n    `;\n\n    const labelStyles: string = css`\n      /* Label styles will be handled by InputLabel component */\n    `;\n\n    return {\n      disabledInput: disabled ? disabledInputStyles : '',\n      errorInput: hasError ? errorInputStyles : '',\n      input: inputStyles,\n      label: labelStyles,\n    };\n  }, [theme, colorScheme, hasError, disabled]);\n\nexport default useStyles;\n"],"mappings":";;;;;;;;;;;;AA8BA,MAAM,aAAa,OAAc,aAAqB,UAAmB,aACvE,cAAc;CACZ,MAAMA,cAAsB,GAAG;;iBAElB,MAAM,KAAK,QAAQ,KAAK,QAAQ,MAAM,KAAK,QAAQ,KAAK;0BAC/C,MAAM,KAAK,OAAO,OAAO;uBAC5B,MAAM,KAAK,YAAY,OAAO,MAAM,gBAAgB,MAAM,KAAK,aAAa,OAAO;;qBAErF,MAAM,KAAK,WAAW,WAAW;eACvC,MAAM,KAAK,OAAO,KAAK,QAAQ;0BACpB,MAAM,KAAK,OAAO,WAAW,QAAQ;;;;;;;wBAOvC,MAAM,KAAK,OAAO,QAAQ,KAAK;gCACvB,MAAM,KAAK,OAAO,QAAQ,KAAK;;;;wBAIvC,MAAM,KAAK,OAAO,QAAQ,KAAK;;;;iBAItC,MAAM,KAAK,OAAO,KAAK,UAAU;;;CAI9C,MAAMC,mBAA2B,GAAG;sBAClB,MAAM,KAAK,OAAO,MAAM,KAAK;;;wBAG3B,MAAM,KAAK,OAAO,MAAM,KAAK;gCACrB,MAAM,KAAK,OAAO,MAAM,KAAK;;;;wBAIrC,MAAM,KAAK,OAAO,MAAM,KAAK;;;CAIjD,MAAMC,sBAA8B,GAAG;0BACjB,MAAM,KAAK,OAAO,WAAW,SAAS;eACjD,MAAM,KAAK,OAAO,KAAK,UAAU;;;;;;wBAMxB,MAAM,KAAK,OAAO,OAAO;;;;CAK7C,MAAMC,cAAsB,GAAG;;;AAI/B,QAAO;EACL,eAAe,WAAW,sBAAsB;EAChD,YAAY,WAAW,mBAAmB;EAC1C,OAAO;EACP,OAAO;EACR;GACA;CAAC;CAAO;CAAa;CAAU;CAAS,CAAC;AAE9C,gCAAe"}

package/dist/components/primitives/Dialog/Dialog.js

@@ -0,0 +1,194 @@
+import useTheme_default from "../../../contexts/Theme/useTheme.js";
+import Button_default from "../Button/Button.js";
+import Dialog_styles_default from "./Dialog.styles.js";
+import X_default from "../Icons/X.js";
+import { bem, withVendorCSSClassPrefix } from "@thunderid/browser";
+import { cloneElement, createContext, forwardRef, isValidElement, useContext, useLayoutEffect, useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "@emotion/css";
+import { FloatingFocusManager, FloatingOverlay, FloatingPortal, useClick, useDismiss, useFloating, useId, useInteractions, useMergeRefs, useRole } from "@floating-ui/react";
+
+//#region src/components/primitives/Dialog/Dialog.tsx
+function useDialog({ initialOpen = false, open: controlledOpen, onOpenChange: setControlledOpen } = {}) {
+	const [uncontrolledOpen, setUncontrolledOpen] = useState(initialOpen);
+	const [labelId, setLabelId] = useState();
+	const [descriptionId, setDescriptionId] = useState();
+	const open = controlledOpen ?? uncontrolledOpen;
+	const setOpen = setControlledOpen ?? setUncontrolledOpen;
+	const data = useFloating({
+		onOpenChange: setOpen,
+		open
+	});
+	const { context } = data;
+	const interactions = useInteractions([
+		useClick(context, { enabled: controlledOpen == null }),
+		useDismiss(context, { outsidePressEvent: "mousedown" }),
+		useRole(context)
+	]);
+	return useMemo(() => ({
+		open,
+		setOpen,
+		...interactions,
+		...data,
+		descriptionId,
+		labelId,
+		setDescriptionId,
+		setLabelId
+	}), [
+		open,
+		setOpen,
+		interactions,
+		data,
+		labelId,
+		descriptionId
+	]);
+}
+const DialogContext = createContext(null);
+const useDialogContext = () => {
+	const context = useContext(DialogContext);
+	if (context == null) throw new Error("Dialog components must be wrapped in <Dialog />");
+	return context;
+};
+function Dialog({ children,...options }) {
+	const dialog = useDialog(options);
+	return /* @__PURE__ */ jsx(DialogContext.Provider, {
+		value: dialog,
+		children
+	});
+}
+const DialogTrigger = forwardRef(({ children, asChild = false,...props }, propRef) => {
+	const context = useDialogContext();
+	const childrenRef = children.ref;
+	const ref = useMergeRefs([
+		context.refs.setReference,
+		propRef,
+		childrenRef
+	]);
+	if (asChild && isValidElement(children)) return cloneElement(children, context.getReferenceProps({
+		ref,
+		...props,
+		...children.props,
+		"data-state": context.open ? "open" : "closed"
+	}));
+	return /* @__PURE__ */ jsx("button", {
+		ref,
+		"data-state": context.open ? "open" : "closed",
+		...context.getReferenceProps(props),
+		children
+	});
+});
+const DialogContent = forwardRef((props, propRef) => {
+	const { context: floatingContext,...context } = useDialogContext();
+	const { theme, colorScheme } = useTheme_default();
+	const styles = Dialog_styles_default(theme, colorScheme);
+	const ref = useMergeRefs([context.refs.setFloating, propRef]);
+	if (!floatingContext.open) return null;
+	return /* @__PURE__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsx(FloatingOverlay, {
+		className: cx(withVendorCSSClassPrefix(bem("dialog", "overlay")), styles["overlay"]),
+		lockScroll: true,
+		children: /* @__PURE__ */ jsx(FloatingFocusManager, {
+			context: floatingContext,
+			initialFocus: -1,
+			children: /* @__PURE__ */ jsx("div", {
+				ref,
+				className: cx(withVendorCSSClassPrefix(bem("dialog", "content")), styles["content"], props.className),
+				"aria-labelledby": context.labelId,
+				"aria-describedby": context.descriptionId,
+				...context.getFloatingProps(props),
+				children: props.children
+			})
+		})
+	}) });
+});
+const DialogHeading = forwardRef(({ children,...props }, ref) => {
+	const context = useDialogContext();
+	const { theme, colorScheme } = useTheme_default();
+	const styles = Dialog_styles_default(theme, colorScheme);
+	const id = useId();
+	useLayoutEffect(() => {
+		context.setLabelId(id);
+		return () => {
+			context.setLabelId(void 0);
+		};
+	}, [id, context.setLabelId]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: cx(withVendorCSSClassPrefix(bem("dialog", "header")), styles["header"]),
+		children: [/* @__PURE__ */ jsx("h2", {
+			...props,
+			ref,
+			id,
+			className: cx(withVendorCSSClassPrefix(bem("dialog", "title")), styles["headerTitle"]),
+			children
+		}), /* @__PURE__ */ jsx(Button_default, {
+			color: "tertiary",
+			variant: "icon",
+			size: "small",
+			shape: "round",
+			onClick: () => {
+				context.setOpen(false);
+			},
+			"aria-label": "Close",
+			children: /* @__PURE__ */ jsx(X_default, {
+				width: 16,
+				height: 16
+			})
+		})]
+	});
+});
+const DialogDescription = forwardRef(({ children,...props }, ref) => {
+	const context = useDialogContext();
+	const { theme, colorScheme } = useTheme_default();
+	const styles = Dialog_styles_default(theme, colorScheme);
+	const id = useId();
+	useLayoutEffect(() => {
+		context.setDescriptionId(id);
+		return () => {
+			context.setDescriptionId(void 0);
+		};
+	}, [id, context.setDescriptionId]);
+	return /* @__PURE__ */ jsx("p", {
+		...props,
+		ref,
+		id,
+		className: cx(withVendorCSSClassPrefix(bem("dialog", "description")), styles["description"], props.className),
+		children
+	});
+});
+const DialogClose = forwardRef(({ children, asChild = false,...props }, propRef) => {
+	const context = useDialogContext();
+	const childrenRef = children?.ref;
+	const ref = useMergeRefs([propRef, childrenRef]);
+	const handleClick = (event) => {
+		context.setOpen(false);
+		props.onClick?.(event);
+	};
+	if (asChild && isValidElement(children)) return cloneElement(children, {
+		ref,
+		...props,
+		...children.props,
+		onClick: handleClick
+	});
+	return /* @__PURE__ */ jsx(Button_default, {
+		...props,
+		ref,
+		onClick: handleClick,
+		className: cx(withVendorCSSClassPrefix(bem("dialog", "close")), props.className),
+		variant: "text",
+		children
+	});
+});
+DialogTrigger.displayName = "DialogTrigger";
+DialogContent.displayName = "DialogContent";
+DialogHeading.displayName = "DialogHeading";
+DialogDescription.displayName = "DialogDescription";
+DialogClose.displayName = "DialogClose";
+Dialog.Trigger = DialogTrigger;
+Dialog.Content = DialogContent;
+Dialog.Heading = DialogHeading;
+Dialog.Description = DialogDescription;
+Dialog.Close = DialogClose;
+var Dialog_default = Dialog;
+
+//#endregion
+export { Dialog_default as default };
+//# sourceMappingURL=Dialog.js.map

package/dist/components/primitives/Dialog/Dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.js","names":["open: boolean","setOpen: (openVal: boolean) => void","data: UseFloatingReturn","interactions: UseInteractionsReturn","DialogContext: Context<DialogContextType>","context: DialogContextType","dialog: DialogHookReturn","DialogTrigger: ForwardRefExoticComponent<\n  HTMLProps<HTMLElement> & DialogTriggerProps & RefAttributes<HTMLElement>\n>","context: DialogHookReturn","childrenRef: Ref<HTMLElement>","ref: ReturnType<typeof useMergeRefs>","DialogContent: ForwardRefExoticComponent<HTMLProps<HTMLDivElement> & RefAttributes<HTMLDivElement>>","useTheme","styles: Record<string, string>","useStyles","DialogHeading: ForwardRefExoticComponent<\n  HTMLProps<HTMLHeadingElement> & RefAttributes<HTMLHeadingElement>\n>","id: string | undefined","Button","X","DialogDescription: ForwardRefExoticComponent<\n  HTMLProps<HTMLParagraphElement> & RefAttributes<HTMLParagraphElement>\n>","DialogClose: ForwardRefExoticComponent<\n  ButtonHTMLAttributes<HTMLButtonElement> & DialogCloseProps & RefAttributes<HTMLButtonElement>\n>","childrenRef: Ref<HTMLButtonElement>"],"sources":["../../../../src/components/primitives/Dialog/Dialog.tsx"],"sourcesContent":["/**\n * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).\n *\n * WSO2 LLC. licenses this file to you under the Apache License,\n * Version 2.0 (the \"License\"); you may not use this file except\n * in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing,\n * software distributed under the License is distributed on an\n * \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY\n * KIND, either express or implied. See the License for the\n * specific language governing permissions and limitations\n * under the License.\n */\n\nimport {cx} from '@emotion/css';\nimport {\n  useFloating,\n  useClick,\n  useDismiss,\n  useRole,\n  useInteractions,\n  useMergeRefs,\n  FloatingFocusManager,\n  FloatingOverlay,\n  FloatingPortal,\n  useId,\n  UseFloatingReturn,\n  UseInteractionsReturn,\n} from '@floating-ui/react';\nimport {withVendorCSSClassPrefix, bem} from '@thunderid/browser';\nimport {\n  type ButtonHTMLAttributes,\n  type Context,\n  type Dispatch,\n  type FC,\n  type ForwardRefExoticComponent,\n  type HTMLProps,\n  type JSX,\n  type MouseEvent,\n  type ReactNode,\n  type Ref,\n  type RefAttributes,\n  type SetStateAction,\n  cloneElement,\n  createContext,\n  forwardRef,\n  isValidElement,\n  useContext,\n  useLayoutEffect,\n  useMemo,\n  useState,\n} from 'react';\nimport useStyles from './Dialog.styles';\nimport useTheme from '../../../contexts/Theme/useTheme';\nimport Button from '../Button/Button';\nimport {X} from '../Icons';\n\ninterface DialogOptions {\n  initialOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  open?: boolean;\n}\n\ninterface DialogHookReturn extends UseFloatingReturn, UseInteractionsReturn {\n  descriptionId: string | undefined;\n  labelId: string | undefined;\n  open: boolean;\n  setDescriptionId: Dispatch<SetStateAction<string | undefined>>;\n  setLabelId: Dispatch<SetStateAction<string | undefined>>;\n  setOpen: (open: boolean) => void;\n}\n\nexport function useDialog({\n  initialOpen = false,\n  open: controlledOpen,\n  onOpenChange: setControlledOpen,\n}: DialogOptions = {}): DialogHookReturn {\n  const [uncontrolledOpen, setUncontrolledOpen] = useState(initialOpen);\n  const [labelId, setLabelId] = useState<string | undefined>();\n  const [descriptionId, setDescriptionId] = useState<string | undefined>();\n\n  const open: boolean = controlledOpen ?? uncontrolledOpen;\n  const setOpen: (openVal: boolean) => void = setControlledOpen ?? setUncontrolledOpen;\n\n  const data: UseFloatingReturn = useFloating({\n    onOpenChange: setOpen,\n    open,\n  });\n\n  const {context} = data;\n\n  const click: ReturnType<typeof useClick> = useClick(context, {\n    enabled: controlledOpen == null,\n  });\n  const dismiss: ReturnType<typeof useDismiss> = useDismiss(context, {outsidePressEvent: 'mousedown'});\n  const role: ReturnType<typeof useRole> = useRole(context);\n\n  const interactions: UseInteractionsReturn = useInteractions([click, dismiss, role]);\n\n  return useMemo(\n    () => ({\n      open,\n      setOpen,\n      ...interactions,\n      ...data,\n      descriptionId,\n      labelId,\n      setDescriptionId,\n      setLabelId,\n    }),\n    [open, setOpen, interactions, data, labelId, descriptionId],\n  );\n}\n\ntype DialogContextType =\n  | (DialogHookReturn & {\n      setDescriptionId: Dispatch<SetStateAction<string | undefined>>;\n      setLabelId: Dispatch<SetStateAction<string | undefined>>;\n    })\n  | null;\n\nconst DialogContext: Context<DialogContextType> = createContext<DialogContextType>(null);\n\nexport const useDialogContext = (): DialogHookReturn => {\n  const context: DialogContextType = useContext(DialogContext);\n  if (context == null) {\n    throw new Error('Dialog components must be wrapped in <Dialog />');\n  }\n  return context;\n};\n\n// Dialog Components (Modal)\nexport function Dialog({children, ...options}: {children: ReactNode} & DialogOptions): JSX.Element {\n  const dialog: DialogHookReturn = useDialog(options);\n  return <DialogContext.Provider value={dialog}>{children}</DialogContext.Provider>;\n}\n\ninterface DialogTriggerProps {\n  asChild?: boolean;\n  children: ReactNode;\n}\n\nexport const DialogTrigger: ForwardRefExoticComponent<\n  HTMLProps<HTMLElement> & DialogTriggerProps & RefAttributes<HTMLElement>\n> = forwardRef<HTMLElement, HTMLProps<HTMLElement> & DialogTriggerProps>(\n  ({children, asChild = false, ...props}: HTMLProps<HTMLElement> & DialogTriggerProps, propRef: Ref<HTMLElement>) => {\n    const context: DialogHookReturn = useDialogContext();\n    const childrenRef: Ref<HTMLElement> = (children as any).ref;\n    const ref: ReturnType<typeof useMergeRefs> = useMergeRefs([context.refs.setReference, propRef, childrenRef]);\n\n    if (asChild && isValidElement(children)) {\n      return cloneElement(\n        children,\n        context.getReferenceProps({\n          ref,\n          ...props,\n          ...(children.props as any),\n          'data-state': context.open ? 'open' : 'closed',\n        }),\n      );\n    }\n\n    return (\n      <button ref={ref} data-state={context.open ? 'open' : 'closed'} {...context.getReferenceProps(props)}>\n        {children}\n      </button>\n    );\n  },\n);\n\nexport const DialogContent: ForwardRefExoticComponent<HTMLProps<HTMLDivElement> & RefAttributes<HTMLDivElement>> =\n  forwardRef<HTMLDivElement, HTMLProps<HTMLDivElement>>(\n    (props: HTMLProps<HTMLDivElement>, propRef: Ref<HTMLDivElement>) => {\n      const {context: floatingContext, ...context} = useDialogContext();\n      const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n      const styles: Record<string, string> = useStyles(theme, colorScheme);\n      const ref: ReturnType<typeof useMergeRefs> = useMergeRefs([context.refs.setFloating, propRef]);\n\n      if (!floatingContext.open) return null;\n\n      return (\n        <FloatingPortal>\n          <FloatingOverlay\n            className={cx(withVendorCSSClassPrefix(bem('dialog', 'overlay')), styles['overlay'])}\n            lockScroll\n          >\n            <FloatingFocusManager context={floatingContext} initialFocus={-1}>\n              <div\n                ref={ref}\n                className={cx(withVendorCSSClassPrefix(bem('dialog', 'content')), styles['content'], props.className)}\n                aria-labelledby={context.labelId}\n                aria-describedby={context.descriptionId}\n                {...context.getFloatingProps(props)}\n              >\n                {props.children}\n              </div>\n            </FloatingFocusManager>\n          </FloatingOverlay>\n        </FloatingPortal>\n      );\n    },\n  );\n\nexport const DialogHeading: ForwardRefExoticComponent<\n  HTMLProps<HTMLHeadingElement> & RefAttributes<HTMLHeadingElement>\n> = forwardRef<HTMLHeadingElement, HTMLProps<HTMLHeadingElement>>(\n  ({children, ...props}: HTMLProps<HTMLHeadingElement>, ref: Ref<HTMLHeadingElement>) => {\n    const context: DialogHookReturn = useDialogContext();\n    const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n    const styles: Record<string, string> = useStyles(theme, colorScheme);\n    const id: string | undefined = useId();\n\n    useLayoutEffect((): (() => void) => {\n      context.setLabelId(id);\n      return (): void => {\n        context.setLabelId(undefined);\n      };\n    }, [id, context.setLabelId]);\n\n    return (\n      <div className={cx(withVendorCSSClassPrefix(bem('dialog', 'header')), styles['header'])}>\n        <h2\n          {...props}\n          ref={ref}\n          id={id}\n          className={cx(withVendorCSSClassPrefix(bem('dialog', 'title')), styles['headerTitle'])}\n        >\n          {children}\n        </h2>\n        <Button\n          color=\"tertiary\"\n          variant=\"icon\"\n          size=\"small\"\n          shape=\"round\"\n          onClick={(): void => {\n            context.setOpen(false);\n          }}\n          aria-label=\"Close\"\n        >\n          <X width={16} height={16} />\n        </Button>\n      </div>\n    );\n  },\n);\n\nexport const DialogDescription: ForwardRefExoticComponent<\n  HTMLProps<HTMLParagraphElement> & RefAttributes<HTMLParagraphElement>\n> = forwardRef<HTMLParagraphElement, HTMLProps<HTMLParagraphElement>>(\n  ({children, ...props}: HTMLProps<HTMLParagraphElement>, ref: Ref<HTMLParagraphElement>) => {\n    const context: DialogHookReturn = useDialogContext();\n    const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n    const styles: Record<string, string> = useStyles(theme, colorScheme);\n    const id: string | undefined = useId();\n\n    useLayoutEffect((): (() => void) => {\n      context.setDescriptionId(id);\n      return (): void => {\n        context.setDescriptionId(undefined);\n      };\n    }, [id, context.setDescriptionId]);\n\n    return (\n      <p\n        {...props}\n        ref={ref}\n        id={id}\n        className={cx(withVendorCSSClassPrefix(bem('dialog', 'description')), styles['description'], props.className)}\n      >\n        {children}\n      </p>\n    );\n  },\n);\n\ninterface DialogCloseProps {\n  asChild?: boolean;\n  children?: ReactNode;\n}\n\nexport const DialogClose: ForwardRefExoticComponent<\n  ButtonHTMLAttributes<HTMLButtonElement> & DialogCloseProps & RefAttributes<HTMLButtonElement>\n> = forwardRef<HTMLButtonElement, ButtonHTMLAttributes<HTMLButtonElement> & DialogCloseProps>(\n  (\n    {children, asChild = false, ...props}: ButtonHTMLAttributes<HTMLButtonElement> & DialogCloseProps,\n    propRef: Ref<HTMLButtonElement>,\n  ) => {\n    const context: DialogHookReturn = useDialogContext();\n    const childrenRef: Ref<HTMLButtonElement> = (children as any)?.ref;\n    const ref: ReturnType<typeof useMergeRefs> = useMergeRefs([propRef, childrenRef]);\n\n    const handleClick = (event: MouseEvent<HTMLButtonElement>): void => {\n      context.setOpen(false);\n      props.onClick?.(event);\n    };\n\n    if (asChild && isValidElement(children)) {\n      return cloneElement(children, {\n        ref,\n        ...props,\n        ...(children.props as any),\n        onClick: handleClick,\n      });\n    }\n\n    return (\n      <Button\n        {...props}\n        ref={ref}\n        onClick={handleClick}\n        className={cx(withVendorCSSClassPrefix(bem('dialog', 'close')), props.className)}\n        variant=\"text\"\n      >\n        {children}\n      </Button>\n    );\n  },\n);\n\nDialogTrigger.displayName = 'DialogTrigger';\nDialogContent.displayName = 'DialogContent';\nDialogHeading.displayName = 'DialogHeading';\nDialogDescription.displayName = 'DialogDescription';\nDialogClose.displayName = 'DialogClose';\n\n// Attach subcomponents to Dialog\n(Dialog as any).Trigger = DialogTrigger;\n(Dialog as any).Content = DialogContent;\n(Dialog as any).Heading = DialogHeading;\n(Dialog as any).Description = DialogDescription;\n(Dialog as any).Close = DialogClose;\n\nexport interface DialogComponent extends FC<{children: ReactNode} & DialogOptions> {\n  Close: typeof DialogClose;\n  Content: typeof DialogContent;\n  Description: typeof DialogDescription;\n  Heading: typeof DialogHeading;\n  Trigger: typeof DialogTrigger;\n}\n\nexport default Dialog as DialogComponent;\n"],"mappings":"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"}

package/dist/components/primitives/Dialog/Dialog.styles.js

@@ -0,0 +1,72 @@
+import { useMemo } from "react";
+import { css } from "@emotion/css";
+
+//#region src/components/primitives/Dialog/Dialog.styles.ts
+/**
+* Creates styles for the Dialog component using BEM methodology
+* @param theme - The theme object containing design tokens
+* @param colorScheme - The current color scheme (used for memoization)
+* @returns Object containing CSS class names for component styling
+*/
+const useStyles = (theme, colorScheme) => useMemo(() => {
+	const overlay = css`
+      background-color: rgba(0, 0, 0, 0.5);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      z-index: 9999;
+    `;
+	const content = css`
+      background: ${theme.vars.colors.background.surface};
+      border-radius: ${theme.vars.borderRadius.large};
+      box-shadow: 0 2px 8px ${colorScheme === "dark" ? "rgba(0, 0, 0, 0.3)" : "rgba(0, 0, 0, 0.15)"};
+      font-family: ${theme.vars.typography.fontFamily};
+      outline: none;
+      overflow-y: auto;
+      z-index: 10000;
+    `;
+	const dropdownContent = css`
+      background: ${theme.vars.colors.background.surface};
+      border-radius: ${theme.vars.borderRadius.large};
+      box-shadow: 0 2px 8px ${colorScheme === "dark" ? "rgba(0, 0, 0, 0.3)" : "rgba(0, 0, 0, 0.15)"};
+      outline: none;
+      max-width: 90vw;
+      max-height: 90vh;
+      overflow-y: auto;
+      z-index: 10000;
+    `;
+	const header = css`
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: calc(${theme.vars.spacing.unit} * 3) calc(${theme.vars.spacing.unit} * 4.5);
+      border-bottom: 1px solid ${theme.vars.colors.border};
+    `;
+	const headerTitle = css`
+      margin: 0;
+      font-size: 1.2rem;
+      font-weight: 600;
+      color: ${theme.vars.colors.text.primary};
+    `;
+	return {
+		content,
+		contentBody: css`
+      padding: calc(${theme.vars.spacing.unit} * 2);
+    `,
+		description: css`
+      margin: 0;
+      color: ${theme.vars.colors.text.secondary};
+      font-size: ${theme.vars.typography.fontSizes.sm};
+      line-height: 1.5;
+    `,
+		dropdownContent,
+		header,
+		headerTitle,
+		overlay
+	};
+}, [theme, colorScheme]);
+var Dialog_styles_default = useStyles;
+
+//#endregion
+export { Dialog_styles_default as default };
+//# sourceMappingURL=Dialog.styles.js.map

package/dist/components/primitives/Dialog/Dialog.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.styles.js","names":["overlay: string","content: string","dropdownContent: string","header: string","headerTitle: string"],"sources":["../../../../src/components/primitives/Dialog/Dialog.styles.ts"],"sourcesContent":["/**\n * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).\n *\n * WSO2 LLC. licenses this file to you under the Apache License,\n * Version 2.0 (the \"License\"); you may not use this file except\n * in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing,\n * software distributed under the License is distributed on an\n * \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY\n * KIND, either express or implied. See the License for the\n * specific language governing permissions and limitations\n * under the License.\n */\n\nimport {css} from '@emotion/css';\nimport {Theme} from '@thunderid/browser';\nimport {useMemo} from 'react';\n\n/**\n * Creates styles for the Dialog component using BEM methodology\n * @param theme - The theme object containing design tokens\n * @param colorScheme - The current color scheme (used for memoization)\n * @returns Object containing CSS class names for component styling\n */\nconst useStyles = (theme: Theme, colorScheme: string): Record<string, string> =>\n  useMemo(() => {\n    const overlay: string = css`\n      background-color: rgba(0, 0, 0, 0.5);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      z-index: 9999;\n    `;\n\n    const content: string = css`\n      background: ${theme.vars.colors.background.surface};\n      border-radius: ${theme.vars.borderRadius.large};\n      box-shadow: 0 2px 8px ${colorScheme === 'dark' ? 'rgba(0, 0, 0, 0.3)' : 'rgba(0, 0, 0, 0.15)'};\n      font-family: ${theme.vars.typography.fontFamily};\n      outline: none;\n      overflow-y: auto;\n      z-index: 10000;\n    `;\n\n    const dropdownContent: string = css`\n      background: ${theme.vars.colors.background.surface};\n      border-radius: ${theme.vars.borderRadius.large};\n      box-shadow: 0 2px 8px ${colorScheme === 'dark' ? 'rgba(0, 0, 0, 0.3)' : 'rgba(0, 0, 0, 0.15)'};\n      outline: none;\n      max-width: 90vw;\n      max-height: 90vh;\n      overflow-y: auto;\n      z-index: 10000;\n    `;\n\n    const header: string = css`\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      padding: calc(${theme.vars.spacing.unit} * 3) calc(${theme.vars.spacing.unit} * 4.5);\n      border-bottom: 1px solid ${theme.vars.colors.border};\n    `;\n\n    const headerTitle: string = css`\n      margin: 0;\n      font-size: 1.2rem;\n      font-weight: 600;\n      color: ${theme.vars.colors.text.primary};\n    `;\n\n    const contentBody: string = css`\n      padding: calc(${theme.vars.spacing.unit} * 2);\n    `;\n\n    const description: string = css`\n      margin: 0;\n      color: ${theme.vars.colors.text.secondary};\n      font-size: ${theme.vars.typography.fontSizes.sm};\n      line-height: 1.5;\n    `;\n\n    return {\n      content,\n      contentBody,\n      description,\n      dropdownContent,\n      header,\n      headerTitle,\n      overlay,\n    };\n  }, [theme, colorScheme]);\n\nexport default useStyles;\n"],"mappings":";;;;;;;;;;AA4BA,MAAM,aAAa,OAAc,gBAC/B,cAAc;CACZ,MAAMA,UAAkB,GAAG;;;;;;;CAQ3B,MAAMC,UAAkB,GAAG;oBACX,MAAM,KAAK,OAAO,WAAW,QAAQ;uBAClC,MAAM,KAAK,aAAa,MAAM;8BACvB,gBAAgB,SAAS,uBAAuB,sBAAsB;qBAC/E,MAAM,KAAK,WAAW,WAAW;;;;;CAMlD,MAAMC,kBAA0B,GAAG;oBACnB,MAAM,KAAK,OAAO,WAAW,QAAQ;uBAClC,MAAM,KAAK,aAAa,MAAM;8BACvB,gBAAgB,SAAS,uBAAuB,sBAAsB;;;;;;;CAQhG,MAAMC,SAAiB,GAAG;;;;sBAIR,MAAM,KAAK,QAAQ,KAAK,aAAa,MAAM,KAAK,QAAQ,KAAK;iCAClD,MAAM,KAAK,OAAO,OAAO;;CAGtD,MAAMC,cAAsB,GAAG;;;;eAIpB,MAAM,KAAK,OAAO,KAAK,QAAQ;;AAc1C,QAAO;EACL;EACA,aAb0B,GAAG;sBACb,MAAM,KAAK,QAAQ,KAAK;;EAaxC,aAV0B,GAAG;;eAEpB,MAAM,KAAK,OAAO,KAAK,UAAU;mBAC7B,MAAM,KAAK,WAAW,UAAU,GAAG;;;EAQhD;EACA;EACA;EACA;EACD;GACA,CAAC,OAAO,YAAY,CAAC;AAE1B,4BAAe"}

package/dist/components/primitives/Divider/Divider.js

@@ -0,0 +1,67 @@
+import useTheme_default from "../../../contexts/Theme/useTheme.js";
+import Typography_default from "../Typography/Typography.js";
+import Divider_styles_default from "./Divider.styles.js";
+import { bem, withVendorCSSClassPrefix } from "@thunderid/browser";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "@emotion/css";
+
+//#region src/components/primitives/Divider/Divider.tsx
+/**
+* Divider component for separating content sections.
+*
+* @example
+* ```tsx
+* // Basic horizontal divider
+* <Divider />
+*
+* // Divider with text
+* <Divider>OR</Divider>
+*
+* // Vertical divider
+* <Divider orientation="vertical" />
+*
+* // Custom styled divider
+* <Divider variant="dashed" color="#ccc">Continue with</Divider>
+* ```
+*/
+const Divider = ({ orientation = "horizontal", variant = "solid", children, color, className, style,...rest }) => {
+	const { theme, colorScheme } = useTheme_default();
+	const styles = Divider_styles_default(theme, colorScheme, orientation, variant, color, !!children);
+	if (orientation === "vertical") return /* @__PURE__ */ jsx("div", {
+		className: cx(withVendorCSSClassPrefix(bem("divider")), withVendorCSSClassPrefix(bem("divider", "vertical")), styles["divider"], styles["vertical"], className),
+		style,
+		role: "separator",
+		"aria-orientation": "vertical",
+		...rest
+	});
+	if (children) return /* @__PURE__ */ jsxs("div", {
+		className: cx(withVendorCSSClassPrefix(bem("divider")), withVendorCSSClassPrefix(bem("divider", "horizontal")), withVendorCSSClassPrefix(bem("divider", "with-text")), styles["divider"], styles["horizontal"], className),
+		style,
+		role: "separator",
+		"aria-orientation": "horizontal",
+		...rest,
+		children: [
+			/* @__PURE__ */ jsx("div", { className: cx(withVendorCSSClassPrefix(bem("divider", "line")), styles["line"]) }),
+			/* @__PURE__ */ jsx(Typography_default, {
+				variant: "body2",
+				color: "textSecondary",
+				className: cx(withVendorCSSClassPrefix(bem("divider", "text")), styles["text"]),
+				inline: true,
+				children
+			}),
+			/* @__PURE__ */ jsx("div", { className: cx(withVendorCSSClassPrefix(bem("divider", "line")), styles["line"]) })
+		]
+	});
+	return /* @__PURE__ */ jsx("div", {
+		className: cx(withVendorCSSClassPrefix(bem("divider")), withVendorCSSClassPrefix(bem("divider", "horizontal")), styles["divider"], styles["horizontal"], className),
+		style,
+		role: "separator",
+		"aria-orientation": "horizontal",
+		...rest
+	});
+};
+var Divider_default = Divider;
+
+//#endregion
+export { Divider_default as default };
+//# sourceMappingURL=Divider.js.map

package/dist/components/primitives/Divider/Divider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Divider.js","names":["Divider: FC<DividerProps>","useTheme","styles: Record<string, string>","useStyles","Typography"],"sources":["../../../../src/components/primitives/Divider/Divider.tsx"],"sourcesContent":["/**\n * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).\n *\n * WSO2 LLC. licenses this file to you under the Apache License,\n * Version 2.0 (the \"License\"); you may not use this file except\n * in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing,\n * software distributed under the License is distributed on an\n * \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY\n * KIND, either express or implied. See the License for the\n * specific language governing permissions and limitations\n * under the License.\n */\n\nimport {cx} from '@emotion/css';\nimport {withVendorCSSClassPrefix, bem} from '@thunderid/browser';\nimport {FC, HTMLAttributes, ReactNode} from 'react';\nimport useStyles from './Divider.styles';\nimport useTheme from '../../../contexts/Theme/useTheme';\nimport Typography from '../Typography/Typography';\n\nexport type DividerOrientation = 'horizontal' | 'vertical';\nexport type DividerVariant = 'solid' | 'dashed' | 'dotted';\n\nexport interface DividerProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Text to display in the center of the divider\n   */\n  children?: ReactNode;\n\n  /**\n   * Custom color for the divider\n   */\n  color?: string;\n\n  /**\n   * The orientation of the divider\n   */\n  orientation?: DividerOrientation;\n\n  /**\n   * The variant style of the divider\n   */\n  variant?: DividerVariant;\n}\n\n/**\n * Divider component for separating content sections.\n *\n * @example\n * ```tsx\n * // Basic horizontal divider\n * <Divider />\n *\n * // Divider with text\n * <Divider>OR</Divider>\n *\n * // Vertical divider\n * <Divider orientation=\"vertical\" />\n *\n * // Custom styled divider\n * <Divider variant=\"dashed\" color=\"#ccc\">Continue with</Divider>\n * ```\n */\nconst Divider: FC<DividerProps> = ({\n  orientation = 'horizontal',\n  variant = 'solid',\n  children,\n  color,\n  className,\n  style,\n  ...rest\n}: DividerProps) => {\n  const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n  const styles: Record<string, string> = useStyles(theme, colorScheme, orientation, variant, color, !!children);\n\n  if (orientation === 'vertical') {\n    return (\n      <div\n        className={cx(\n          withVendorCSSClassPrefix(bem('divider')),\n          withVendorCSSClassPrefix(bem('divider', 'vertical')),\n          styles['divider'],\n          styles['vertical'],\n          className,\n        )}\n        style={style}\n        role=\"separator\"\n        aria-orientation=\"vertical\"\n        {...rest}\n      />\n    );\n  }\n\n  if (children) {\n    return (\n      <div\n        className={cx(\n          withVendorCSSClassPrefix(bem('divider')),\n          withVendorCSSClassPrefix(bem('divider', 'horizontal')),\n          withVendorCSSClassPrefix(bem('divider', 'with-text')),\n          styles['divider'],\n          styles['horizontal'],\n          className,\n        )}\n        style={style}\n        role=\"separator\"\n        aria-orientation=\"horizontal\"\n        {...rest}\n      >\n        <div className={cx(withVendorCSSClassPrefix(bem('divider', 'line')), styles['line'])} />\n        <Typography\n          variant=\"body2\"\n          color=\"textSecondary\"\n          className={cx(withVendorCSSClassPrefix(bem('divider', 'text')), styles['text'])}\n          inline\n        >\n          {children}\n        </Typography>\n        <div className={cx(withVendorCSSClassPrefix(bem('divider', 'line')), styles['line'])} />\n      </div>\n    );\n  }\n\n  return (\n    <div\n      className={cx(\n        withVendorCSSClassPrefix(bem('divider')),\n        withVendorCSSClassPrefix(bem('divider', 'horizontal')),\n        styles['divider'],\n        styles['horizontal'],\n        className,\n      )}\n      style={style}\n      role=\"separator\"\n      aria-orientation=\"horizontal\"\n      {...rest}\n    />\n  );\n};\n\nexport default Divider;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAoEA,MAAMA,WAA6B,EACjC,cAAc,cACd,UAAU,SACV,UACA,OACA,WACA,MACA,GAAG,WACe;CAClB,MAAM,EAAC,OAAO,gBAA4CC,kBAAU;CACpE,MAAMC,SAAiCC,uBAAU,OAAO,aAAa,aAAa,SAAS,OAAO,CAAC,CAAC,SAAS;AAE7G,KAAI,gBAAgB,WAClB,QACE,oBAAC;EACC,WAAW,GACT,yBAAyB,IAAI,UAAU,CAAC,EACxC,yBAAyB,IAAI,WAAW,WAAW,CAAC,EACpD,OAAO,YACP,OAAO,aACP,UACD;EACM;EACP,MAAK;EACL,oBAAiB;EACjB,GAAI;GACJ;AAIN,KAAI,SACF,QACE,qBAAC;EACC,WAAW,GACT,yBAAyB,IAAI,UAAU,CAAC,EACxC,yBAAyB,IAAI,WAAW,aAAa,CAAC,EACtD,yBAAyB,IAAI,WAAW,YAAY,CAAC,EACrD,OAAO,YACP,OAAO,eACP,UACD;EACM;EACP,MAAK;EACL,oBAAiB;EACjB,GAAI;;GAEJ,oBAAC,SAAI,WAAW,GAAG,yBAAyB,IAAI,WAAW,OAAO,CAAC,EAAE,OAAO,QAAQ,GAAI;GACxF,oBAACC;IACC,SAAQ;IACR,OAAM;IACN,WAAW,GAAG,yBAAyB,IAAI,WAAW,OAAO,CAAC,EAAE,OAAO,QAAQ;IAC/E;IAEC;KACU;GACb,oBAAC,SAAI,WAAW,GAAG,yBAAyB,IAAI,WAAW,OAAO,CAAC,EAAE,OAAO,QAAQ,GAAI;;GACpF;AAIV,QACE,oBAAC;EACC,WAAW,GACT,yBAAyB,IAAI,UAAU,CAAC,EACxC,yBAAyB,IAAI,WAAW,aAAa,CAAC,EACtD,OAAO,YACP,OAAO,eACP,UACD;EACM;EACP,MAAK;EACL,oBAAiB;EACjB,GAAI;GACJ;;AAIN,sBAAe"}

package/dist/components/primitives/Divider/Divider.styles.js

@@ -0,0 +1,69 @@
+import { useMemo } from "react";
+import { css } from "@emotion/css";
+
+//#region src/components/primitives/Divider/Divider.styles.ts
+/**
+* Creates styles for the Divider component using BEM methodology
+* @param theme - The theme object containing design tokens
+* @param colorScheme - The current color scheme (used for memoization)
+* @param orientation - The divider orientation
+* @param variant - The divider variant
+* @param color - Custom color for the divider
+* @param hasChildren - Whether the divider has children (text)
+* @returns Object containing CSS class names for component styling
+*/
+const useStyles = (theme, colorScheme, orientation, variant, color, hasChildren) => useMemo(() => {
+	const baseColor = color || theme.colors.border;
+	let borderStyle;
+	if (variant === "solid") borderStyle = "solid";
+	else if (variant === "dashed") borderStyle = "dashed";
+	else borderStyle = "dotted";
+	const baseDivider = css`
+      margin: calc(${theme.vars.spacing.unit} * 2) 0;
+    `;
+	const verticalDivider = css`
+      display: inline-block;
+      height: 100%;
+      min-height: calc(${theme.vars.spacing.unit} * 2);
+      width: 1px;
+      border-inline-start: 1px ${borderStyle} ${baseColor};
+      margin-block: 0;
+      margin-inline: calc(${theme.vars.spacing.unit} * 1);
+    `;
+	return {
+		divider: baseDivider,
+		horizontal: css`
+      display: flex;
+      align-items: center;
+      width: 100%;
+      ${!hasChildren && css`
+        height: 1px;
+        border-top: 1px ${borderStyle} ${baseColor};
+      `}
+    `,
+		line: css`
+      flex: 1;
+      height: 1px;
+      border-top: 1px ${borderStyle} ${baseColor};
+    `,
+		text: css`
+      background-color: ${theme.vars.colors.background.surface};
+      font-family: ${theme.vars.typography.fontFamily};
+      padding: 0 calc(${theme.vars.spacing.unit} * 1);
+      white-space: nowrap;
+    `,
+		vertical: verticalDivider
+	};
+}, [
+	theme,
+	colorScheme,
+	orientation,
+	variant,
+	color,
+	hasChildren
+]);
+var Divider_styles_default = useStyles;
+
+//#endregion
+export { Divider_styles_default as default };
+//# sourceMappingURL=Divider.styles.js.map

package/dist/components/primitives/Divider/Divider.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Divider.styles.js","names":["baseColor: string","borderStyle: string","baseDivider: string","verticalDivider: string"],"sources":["../../../../src/components/primitives/Divider/Divider.styles.ts"],"sourcesContent":["/**\n * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).\n *\n * WSO2 LLC. licenses this file to you under the Apache License,\n * Version 2.0 (the \"License\"); you may not use this file except\n * in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing,\n * software distributed under the License is distributed on an\n * \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY\n * KIND, either express or implied. See the License for the\n * specific language governing permissions and limitations\n * under the License.\n */\n\nimport {css} from '@emotion/css';\nimport {Theme} from '@thunderid/browser';\nimport {useMemo} from 'react';\n\nexport type DividerOrientation = 'horizontal' | 'vertical';\nexport type DividerVariant = 'solid' | 'dashed' | 'dotted';\n\n/**\n * Creates styles for the Divider component using BEM methodology\n * @param theme - The theme object containing design tokens\n * @param colorScheme - The current color scheme (used for memoization)\n * @param orientation - The divider orientation\n * @param variant - The divider variant\n * @param color - Custom color for the divider\n * @param hasChildren - Whether the divider has children (text)\n * @returns Object containing CSS class names for component styling\n */\nconst useStyles = (\n  theme: Theme,\n  colorScheme: string,\n  orientation: DividerOrientation,\n  variant: DividerVariant,\n  color?: string,\n  hasChildren?: boolean,\n): Record<string, string> =>\n  useMemo(() => {\n    const baseColor: string = color || theme.colors.border;\n    let borderStyle: string;\n    if (variant === 'solid') {\n      borderStyle = 'solid';\n    } else if (variant === 'dashed') {\n      borderStyle = 'dashed';\n    } else {\n      borderStyle = 'dotted';\n    }\n\n    const baseDivider: string = css`\n      margin: calc(${theme.vars.spacing.unit} * 2) 0;\n    `;\n\n    const verticalDivider: string = css`\n      display: inline-block;\n      height: 100%;\n      min-height: calc(${theme.vars.spacing.unit} * 2);\n      width: 1px;\n      border-inline-start: 1px ${borderStyle} ${baseColor};\n      margin-block: 0;\n      margin-inline: calc(${theme.vars.spacing.unit} * 1);\n    `;\n\n    const horizontalDivider: string = css`\n      display: flex;\n      align-items: center;\n      width: 100%;\n      ${!hasChildren &&\n      css`\n        height: 1px;\n        border-top: 1px ${borderStyle} ${baseColor};\n      `}\n    `;\n\n    const dividerLine: string = css`\n      flex: 1;\n      height: 1px;\n      border-top: 1px ${borderStyle} ${baseColor};\n    `;\n\n    const dividerText: string = css`\n      background-color: ${theme.vars.colors.background.surface};\n      font-family: ${theme.vars.typography.fontFamily};\n      padding: 0 calc(${theme.vars.spacing.unit} * 1);\n      white-space: nowrap;\n    `;\n\n    return {\n      divider: baseDivider,\n      horizontal: horizontalDivider,\n      line: dividerLine,\n      text: dividerText,\n      vertical: verticalDivider,\n    };\n  }, [theme, colorScheme, orientation, variant, color, hasChildren]);\n\nexport default useStyles;\n"],"mappings":";;;;;;;;;;;;;;AAmCA,MAAM,aACJ,OACA,aACA,aACA,SACA,OACA,gBAEA,cAAc;CACZ,MAAMA,YAAoB,SAAS,MAAM,OAAO;CAChD,IAAIC;AACJ,KAAI,YAAY,QACd,eAAc;UACL,YAAY,SACrB,eAAc;KAEd,eAAc;CAGhB,MAAMC,cAAsB,GAAG;qBACd,MAAM,KAAK,QAAQ,KAAK;;CAGzC,MAAMC,kBAA0B,GAAG;;;yBAGd,MAAM,KAAK,QAAQ,KAAK;;iCAEhB,YAAY,GAAG,UAAU;;4BAE9B,MAAM,KAAK,QAAQ,KAAK;;AA2BhD,QAAO;EACL,SAAS;EACT,YA1BgC,GAAG;;;;QAIjC,CAAC,eACH,GAAG;;0BAEiB,YAAY,GAAG,UAAU;QAC3C;;EAmBF,MAhB0B,GAAG;;;wBAGX,YAAY,GAAG,UAAU;;EAc3C,MAX0B,GAAG;0BACT,MAAM,KAAK,OAAO,WAAW,QAAQ;qBAC1C,MAAM,KAAK,WAAW,WAAW;wBAC9B,MAAM,KAAK,QAAQ,KAAK;;;EAS1C,UAAU;EACX;GACA;CAAC;CAAO;CAAa;CAAa;CAAS;CAAO;CAAY,CAAC;AAEpE,6BAAe"}

package/dist/components/primitives/FormControl/FormControl.js

@@ -0,0 +1,29 @@
+import useTheme_default from "../../../contexts/Theme/useTheme.js";
+import FormControl_styles_default from "./FormControl.styles.js";
+import Typography_default from "../Typography/Typography.js";
+import { bem, withVendorCSSClassPrefix } from "@thunderid/browser";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "@emotion/css";
+
+//#region src/components/primitives/FormControl/FormControl.tsx
+const FormControl = ({ children, error, helperText, className, helperTextAlign = "left", helperTextMarginLeft }) => {
+	const { theme, colorScheme } = useTheme_default();
+	const styles = FormControl_styles_default(theme, colorScheme, helperTextAlign, helperTextMarginLeft, !!error);
+	return /* @__PURE__ */ jsxs("div", {
+		className: cx(withVendorCSSClassPrefix(bem("form-control")), styles["formControl"], className),
+		children: [children, (error || helperText) && /* @__PURE__ */ jsx(Typography_default, {
+			variant: "caption",
+			color: error ? "error" : "textSecondary",
+			className: cx(withVendorCSSClassPrefix(bem("form-control", "helper-text")), styles["helperText"], {
+				[withVendorCSSClassPrefix(bem("form-control", "helper-text", "error"))]: !!error,
+				[styles["helperTextError"]]: !!error
+			}),
+			children: error || helperText
+		})]
+	});
+};
+var FormControl_default = FormControl;
+
+//#endregion
+export { FormControl_default as default };
+//# sourceMappingURL=FormControl.js.map

package/dist/components/primitives/FormControl/FormControl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormControl.js","names":["FormControl: FC<FormControlProps>","useTheme","styles: Record<string, string>","useStyles","Typography"],"sources":["../../../../src/components/primitives/FormControl/FormControl.tsx"],"sourcesContent":["/**\n * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).\n *\n * WSO2 LLC. licenses this file to you under the Apache License,\n * Version 2.0 (the \"License\"); you may not use this file except\n * in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing,\n * software distributed under the License is distributed on an\n * \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY\n * KIND, either express or implied. See the License for the\n * specific language governing permissions and limitations\n * under the License.\n */\n\nimport {cx} from '@emotion/css';\nimport {bem, withVendorCSSClassPrefix} from '@thunderid/browser';\nimport {CSSProperties, FC, ReactNode} from 'react';\nimport useStyles from './FormControl.styles';\nimport useTheme from '../../../contexts/Theme/useTheme';\nimport Typography from '../Typography/Typography';\n\nexport type FormControlHelperTextAlign = 'left' | 'center';\n\nexport interface FormControlProps {\n  /**\n   * The content to be wrapped by the form control\n   */\n  children: ReactNode;\n  /**\n   * Additional CSS class names\n   */\n  className?: string;\n  /**\n   * Error message to display below the content\n   */\n  error?: string;\n  /**\n   * Helper text to display below the content\n   */\n  helperText?: string;\n  /**\n   * Custom alignment for helper text (default: left, center for OTP)\n   */\n  helperTextAlign?: FormControlHelperTextAlign;\n  /**\n   * Custom margin left for helper text (for components like Checkbox)\n   */\n  helperTextMarginLeft?: string;\n  /**\n   * Custom container style\n   */\n  style?: CSSProperties;\n}\n\nconst FormControl: FC<FormControlProps> = ({\n  children,\n  error,\n  helperText,\n  className,\n  helperTextAlign = 'left',\n  helperTextMarginLeft,\n}: FormControlProps) => {\n  const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n  const styles: Record<string, string> = useStyles(theme, colorScheme, helperTextAlign, helperTextMarginLeft, !!error);\n\n  return (\n    <div className={cx(withVendorCSSClassPrefix(bem('form-control')), styles['formControl'], className)}>\n      {children}\n      {(error || helperText) && (\n        <Typography\n          variant=\"caption\"\n          color={error ? 'error' : 'textSecondary'}\n          className={cx(withVendorCSSClassPrefix(bem('form-control', 'helper-text')), styles['helperText'], {\n            [withVendorCSSClassPrefix(bem('form-control', 'helper-text', 'error'))]: !!error,\n            [styles['helperTextError']]: !!error,\n          })}\n        >\n          {error || helperText}\n        </Typography>\n      )}\n    </div>\n  );\n};\n\nexport default FormControl;\n"],"mappings":";;;;;;;;AA0DA,MAAMA,eAAqC,EACzC,UACA,OACA,YACA,WACA,kBAAkB,QAClB,2BACsB;CACtB,MAAM,EAAC,OAAO,gBAA4CC,kBAAU;CACpE,MAAMC,SAAiCC,2BAAU,OAAO,aAAa,iBAAiB,sBAAsB,CAAC,CAAC,MAAM;AAEpH,QACE,qBAAC;EAAI,WAAW,GAAG,yBAAyB,IAAI,eAAe,CAAC,EAAE,OAAO,gBAAgB,UAAU;aAChG,WACC,SAAS,eACT,oBAACC;GACC,SAAQ;GACR,OAAO,QAAQ,UAAU;GACzB,WAAW,GAAG,yBAAyB,IAAI,gBAAgB,cAAc,CAAC,EAAE,OAAO,eAAe;KAC/F,yBAAyB,IAAI,gBAAgB,eAAe,QAAQ,CAAC,GAAG,CAAC,CAAC;KAC1E,OAAO,qBAAqB,CAAC,CAAC;IAChC,CAAC;aAED,SAAS;IACC;GAEX;;AAIV,0BAAe"}

package/dist/components/primitives/FormControl/FormControl.styles.js

@@ -0,0 +1,40 @@
+import { useMemo } from "react";
+import { css } from "@emotion/css";
+
+//#region src/components/primitives/FormControl/FormControl.styles.ts
+/**
+* Creates styles for the FormControl component using BEM methodology
+* @param theme - The theme object containing design tokens
+* @param colorScheme - The current color scheme (used for memoization)
+* @param helperTextAlign - The alignment for helper text
+* @param helperTextMarginLeft - Custom margin left for helper text
+* @param hasError - Whether the form control has an error
+* @returns Object containing CSS class names for component styling
+*/
+const useStyles = (theme, colorScheme, helperTextAlign, helperTextMarginLeft, hasError) => useMemo(() => {
+	return {
+		formControl: css`
+      text-align: start;
+      font-family: ${theme.vars.typography.fontFamily};
+    `,
+		helperText: css`
+      margin-top: calc(${theme.vars.spacing.unit} / 2);
+      text-align: ${helperTextAlign === "left" ? "start" : helperTextAlign};
+      ${helperTextMarginLeft && `margin-inline-start: ${helperTextMarginLeft};`}
+    `,
+		helperTextError: css`
+      color: ${theme.vars.colors.error.main};
+    `
+	};
+}, [
+	theme,
+	colorScheme,
+	helperTextAlign,
+	helperTextMarginLeft,
+	hasError
+]);
+var FormControl_styles_default = useStyles;
+
+//#endregion
+export { FormControl_styles_default as default };
+//# sourceMappingURL=FormControl.styles.js.map