@mks2508/mks-ui 0.1.3 → 0.2.0

package/dist/react/ui/Combobox/Combobox.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Combobox.types.d.ts","sourceRoot":"","sources":["../../../../src/react/ui/Combobox/Combobox.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,IAAI,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACpE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAClD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAEtD,mCAAmC;AAEnC,KAAK,cAAc,GAAG,iBAAiB,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC;AAE7D,+BAA+B;AAC/B,KAAK,mBAAmB,GAAG,iBAAiB,CAAC,KAAK,CAAC,KAAK,CAAC;AAEzD,iCAAiC;AACjC,KAAK,qBAAqB,GAAG,iBAAiB,CAAC,OAAO,CAAC,KAAK,CAAC;AAE7D,+BAA+B;AAC/B,KAAK,mBAAmB,GAAG,iBAAiB,CAAC,KAAK,CAAC,KAAK,CAAC;AAEzD,+BAA+B;AAC/B,UAAU,mBAAoB,SAAQ,iBAAiB,CAAC,KAAK,CAAC,KAAK;IACjE,qCAAqC;IACrC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,oDAAoD;IACpD,KAAK,CAAC,EAAE,aAAa,CAAC,YAAY,CAAC,CAAC;CACrC;AAED,iCAAiC;AACjC,UAAU,qBACR,SAAQ,iBAAiB,CAAC,KAAK,CAAC,KAAK,EACnC,IAAI,CACF,iBAAiB,CAAC,UAAU,CAAC,KAAK,EAClC,MAAM,GAAG,OAAO,GAAG,YAAY,GAAG,aAAa,GAAG,QAAQ,CAC3D;IACH,KAAK,CAAC,EAAE,aAAa,CAAC,YAAY,CAAC,CAAC;CACrC;AAED,8BAA8B;AAC9B,KAAK,kBAAkB,GAAG,iBAAiB,CAAC,IAAI,CAAC,KAAK,CAAC;AAEvD,8BAA8B;AAC9B,KAAK,kBAAkB,GAAG,iBAAiB,CAAC,IAAI,CAAC,KAAK,CAAC;AAEvD,+BAA+B;AAC/B,KAAK,mBAAmB,GAAG,iBAAiB,CAAC,KAAK,CAAC,KAAK,CAAC;AAEzD,+BAA+B;AAC/B,KAAK,mBAAmB,GAAG,iBAAiB,CAAC,UAAU,CAAC,KAAK,CAAC;AAE9D,oCAAoC;AACpC,KAAK,wBAAwB,GAAG,iBAAiB,CAAC,UAAU,CAAC,KAAK,CAAC;AAEnE,+BAA+B;AAC/B,KAAK,mBAAmB,GAAG,iBAAiB,CAAC,KAAK,CAAC,KAAK,CAAC;AAEzD,mCAAmC;AACnC,KAAK,uBAAuB,GAAG,iBAAiB,CAAC,SAAS,CAAC,KAAK,CAAC;AAEjE,+BAA+B;AAC/B,KAAK,mBAAmB,GAAG,KAAK,CAAC,qBAAqB,CAAC,OAAO,iBAAiB,CAAC,KAAK,CAAC,GACpF,iBAAiB,CAAC,KAAK,CAAC,KAAK,CAAC;AAEhC,8BAA8B;AAC9B,UAAU,kBAAmB,SAAQ,iBAAiB,CAAC,IAAI,CAAC,KAAK;IAC/D,0CAA0C;IAC1C,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,oCAAoC;AACpC,KAAK,wBAAwB,GAAG,iBAAiB,CAAC,KAAK,CAAC,KAAK,CAAC;AAE9D,YAAY,EACV,cAAc,EACd,mBAAmB,EACnB,qBAAqB,EACrB,mBAAmB,EACnB,mBAAmB,EACnB,qBAAqB,EACrB,kBAAkB,EAClB,kBAAkB,EAClB,mBAAmB,EACnB,mBAAmB,EACnB,wBAAwB,EACxB,mBAAmB,EACnB,uBAAuB,EACvB,mBAAmB,EACnB,kBAAkB,EAClB,wBAAwB,GACzB,CAAC"}

package/dist/react/ui/Combobox/index.d.ts

@@ -0,0 +1,60 @@
+import * as React from '../../../react';
+import { Combobox as ComboboxPrimitive } from '@base-ui/react';
+import type { IComboboxTriggerProps, IComboboxInputProps, IComboboxContentProps, IComboboxListProps, IComboboxItemProps, IComboboxGroupProps, IComboboxLabelProps, IComboboxCollectionProps, IComboboxEmptyProps, IComboboxSeparatorProps, IComboboxChipsProps, IComboboxChipProps, IComboboxChipsInputProps, IComboboxValueProps } from './Combobox.types';
+/** Combobox — root component wrapping Base UI Combobox. */
+declare const Combobox: typeof ComboboxPrimitive.Root;
+/** ComboboxValue — displays the selected value. */
+declare function ComboboxValue({ ...props }: IComboboxValueProps): import("react/jsx-runtime").JSX.Element;
+/** ComboboxTrigger — trigger button with arrow icon. */
+declare function ComboboxTrigger({ className, children, ...props }: IComboboxTriggerProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * ComboboxInput — text input with optional trigger and clear buttons.
+ *
+ * @param showTrigger - Show dropdown arrow button
+ * @param showClear - Show clear button
+ *
+ * @example
+ * ```tsx
+ * <Combobox>
+ *   <ComboboxInput showClear placeholder="Search..." />
+ *   <ComboboxContent>
+ *     <ComboboxList>
+ *       <ComboboxItem>Option 1</ComboboxItem>
+ *     </ComboboxList>
+ *   </ComboboxContent>
+ * </Combobox>
+ * ```
+ */
+declare function ComboboxInput({ className, children, disabled, showTrigger, showClear, ...props }: IComboboxInputProps): import("react/jsx-runtime").JSX.Element;
+/** ComboboxContent — popup content area for the combobox. */
+declare function ComboboxContent({ className, side, sideOffset, align, alignOffset, anchor, slots, ...props }: IComboboxContentProps): import("react/jsx-runtime").JSX.Element;
+/** ComboboxList — scrollable list of combobox items. */
+declare function ComboboxList({ className, ...props }: IComboboxListProps): import("react/jsx-runtime").JSX.Element;
+/** ComboboxItem — a single selectable item with check indicator. */
+declare function ComboboxItem({ className, children, ...props }: IComboboxItemProps): import("react/jsx-runtime").JSX.Element;
+/** ComboboxGroup — groups related combobox items. */
+declare function ComboboxGroup({ className, ...props }: IComboboxGroupProps): import("react/jsx-runtime").JSX.Element;
+/** ComboboxLabel — label for a group of combobox items. */
+declare function ComboboxLabel({ className, ...props }: IComboboxLabelProps): import("react/jsx-runtime").JSX.Element;
+/** ComboboxCollection — collection for combobox items. */
+declare function ComboboxCollection({ ...props }: IComboboxCollectionProps): import("react/jsx-runtime").JSX.Element;
+/** ComboboxEmpty — displayed when no items match the query. */
+declare function ComboboxEmpty({ className, ...props }: IComboboxEmptyProps): import("react/jsx-runtime").JSX.Element;
+/** ComboboxSeparator — visual divider between combobox items. */
+declare function ComboboxSeparator({ className, ...props }: IComboboxSeparatorProps): import("react/jsx-runtime").JSX.Element;
+/** ComboboxChips — container for multi-select chips. */
+declare function ComboboxChips({ className, ...props }: IComboboxChipsProps): import("react/jsx-runtime").JSX.Element;
+/** ComboboxChip — individual chip with optional remove button. */
+declare function ComboboxChip({ className, children, showRemove, ...props }: IComboboxChipProps): import("react/jsx-runtime").JSX.Element;
+/** ComboboxChipsInput — input within the chips container for multi-select. */
+declare function ComboboxChipsInput({ className, ...props }: IComboboxChipsInputProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Hook to create an anchor ref for the combobox chips.
+ *
+ * @returns A ref to be used as the anchor for ComboboxContent
+ */
+declare function useComboboxAnchor(): React.RefObject<HTMLDivElement | null>;
+export { Combobox, ComboboxInput, ComboboxContent, ComboboxList, ComboboxItem, ComboboxGroup, ComboboxLabel, ComboboxCollection, ComboboxEmpty, ComboboxSeparator, ComboboxChips, ComboboxChip, ComboboxChipsInput, ComboboxTrigger, ComboboxValue, useComboboxAnchor, };
+export type { IComboboxProps, IComboboxValueProps, IComboboxTriggerProps, IComboboxClearProps, IComboboxInputProps, IComboboxContentProps, IComboboxListProps, IComboboxItemProps, IComboboxGroupProps, IComboboxLabelProps, IComboboxCollectionProps, IComboboxEmptyProps, IComboboxSeparatorProps, IComboboxChipsProps, IComboboxChipProps, IComboboxChipsInputProps, } from './Combobox.types';
+export type { ComboboxSlot } from './Combobox.styles';
+//# sourceMappingURL=index.d.ts.map

package/dist/react/ui/Combobox/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/react/ui/Combobox/index.tsx"],"names":[],"mappings":"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"}

package/dist/{components/ui/combobox.js → react/ui/Combobox/index.js}

@@ -1,25 +1,28 @@
 import { cn } from "../../lib/utils.js";
-import { Button } from "./button/button.js";
-import "./button/index.js";
-import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput } from "./input-group.js";
-import * as React from "react";
+import { Button } from "../Button/index.js";
+import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput } from "../InputGroup/index.js";
+import { comboboxStyles } from "./Combobox.styles.js";
+import * as React from "../../../react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Combobox } from "@base-ui/react";
 import { HugeiconsIcon } from "@hugeicons/react";
 import { ArrowDown01Icon, Cancel01Icon, Tick02Icon } from "@hugeicons/core-free-icons";
 
-//#region src/components/ui/combobox.tsx
+//#region src/react/ui/Combobox/index.tsx
+/** Combobox — root component wrapping Base UI Combobox. */
 const Combobox$1 = Combobox.Root;
+/** ComboboxValue — displays the selected value. */
 function ComboboxValue({ ...props }) {
 	return /* @__PURE__ */ jsx(Combobox.Value, {
 		"data-slot": "combobox-value",
 		...props
 	});
 }
+/** ComboboxTrigger — trigger button with arrow icon. */
 function ComboboxTrigger({ className, children, ...props }) {
 	return /* @__PURE__ */ jsxs(Combobox.Trigger, {
 		"data-slot": "combobox-trigger",
-		className: cn("[&_svg:not([class*='size-'])]:size-4", className),
+		className: cn(comboboxStyles.trigger, className),
 		...props,
 		children: [children, /* @__PURE__ */ jsx(HugeiconsIcon, {
 			icon: ArrowDown01Icon,
@@ -28,6 +31,7 @@ function ComboboxTrigger({ className, children, ...props }) {
 		})]
 	});
 }
+/** ComboboxClear — clears the combobox selection. */
 function ComboboxClear({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Combobox.Clear, {
 		"data-slot": "combobox-clear",
@@ -41,6 +45,24 @@ function ComboboxClear({ className, ...props }) {
 		})
 	});
 }
+/**
+* ComboboxInput — text input with optional trigger and clear buttons.
+*
+* @param showTrigger - Show dropdown arrow button
+* @param showClear - Show clear button
+*
+* @example
+* ```tsx
+* <Combobox>
+*   <ComboboxInput showClear placeholder="Search..." />
+*   <ComboboxContent>
+*     <ComboboxList>
+*       <ComboboxItem>Option 1</ComboboxItem>
+*     </ComboboxList>
+*   </ComboboxContent>
+* </Combobox>
+* ```
+*/
 function ComboboxInput({ className, children, disabled = false, showTrigger = true, showClear = false, ...props }) {
 	return /* @__PURE__ */ jsxs(InputGroup, {
 		className: cn("w-auto", className),
@@ -63,7 +85,8 @@ function ComboboxInput({ className, children, disabled = false, showTrigger = tr
 		]
 	});
 }
-function ComboboxContent({ className, side = "bottom", sideOffset = 6, align = "start", alignOffset = 0, anchor, ...props }) {
+/** ComboboxContent — popup content area for the combobox. */
+function ComboboxContent({ className, side = "bottom", sideOffset = 6, align = "start", alignOffset = 0, anchor, slots, ...props }) {
 	return /* @__PURE__ */ jsx(Combobox.Portal, { children: /* @__PURE__ */ jsx(Combobox.Positioner, {
 		side,
 		sideOffset,
@@ -74,22 +97,24 @@ function ComboboxContent({ className, side = "bottom", sideOffset = 6, align = "
 		children: /* @__PURE__ */ jsx(Combobox.Popup, {
 			"data-slot": "combobox-content",
 			"data-chips": !!anchor,
-			className: cn("bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:border-input/30 overflow-hidden rounded-lg shadow-md ring-1 duration-100 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:shadow-none data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 group/combobox-content relative max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) data-[chips=true]:min-w-(--anchor-width)", className),
+			className: cn(comboboxStyles.content, slots?.content, className),
 			...props
 		})
 	}) });
 }
+/** ComboboxList — scrollable list of combobox items. */
 function ComboboxList({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Combobox.List, {
 		"data-slot": "combobox-list",
-		className: cn("no-scrollbar max-h-[min(calc(--spacing(72)---spacing(9)),calc(var(--available-height)---spacing(9)))] scroll-py-1 p-1 data-empty:p-0 overflow-y-auto overscroll-contain", className),
+		className: cn(comboboxStyles.list, className),
 		...props
 	});
 }
+/** ComboboxItem — a single selectable item with check indicator. */
 function ComboboxItem({ className, children, ...props }) {
 	return /* @__PURE__ */ jsxs(Combobox.Item, {
 		"data-slot": "combobox-item",
-		className: cn("data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground gap-2 rounded-md py-1 pr-8 pl-1.5 text-sm [&_svg:not([class*='size-'])]:size-4 relative flex w-full cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0", className),
+		className: cn(comboboxStyles.item, className),
 		...props,
 		children: [children, /* @__PURE__ */ jsx(Combobox.ItemIndicator, {
 			render: /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute right-2 flex size-4 items-center justify-center" }),
@@ -101,6 +126,7 @@ function ComboboxItem({ className, children, ...props }) {
 		})]
 	});
 }
+/** ComboboxGroup — groups related combobox items. */
 function ComboboxGroup({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Combobox.Group, {
 		"data-slot": "combobox-group",
@@ -108,44 +134,50 @@ function ComboboxGroup({ className, ...props }) {
 		...props
 	});
 }
+/** ComboboxLabel — label for a group of combobox items. */
 function ComboboxLabel({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Combobox.GroupLabel, {
 		"data-slot": "combobox-label",
-		className: cn("text-muted-foreground px-2 py-1.5 text-xs", className),
+		className: cn(comboboxStyles.label, className),
 		...props
 	});
 }
+/** ComboboxCollection — collection for combobox items. */
 function ComboboxCollection({ ...props }) {
 	return /* @__PURE__ */ jsx(Combobox.Collection, {
 		"data-slot": "combobox-collection",
 		...props
 	});
 }
+/** ComboboxEmpty — displayed when no items match the query. */
 function ComboboxEmpty({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Combobox.Empty, {
 		"data-slot": "combobox-empty",
-		className: cn("text-muted-foreground hidden w-full justify-center py-2 text-center text-sm group-data-empty/combobox-content:flex", className),
+		className: cn(comboboxStyles.empty, className),
 		...props
 	});
 }
+/** ComboboxSeparator — visual divider between combobox items. */
 function ComboboxSeparator({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Combobox.Separator, {
 		"data-slot": "combobox-separator",
-		className: cn("bg-border -mx-1 my-1 h-px", className),
+		className: cn(comboboxStyles.separator, className),
 		...props
 	});
 }
+/** ComboboxChips — container for multi-select chips. */
 function ComboboxChips({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Combobox.Chips, {
 		"data-slot": "combobox-chips",
-		className: cn("dark:bg-input/30 border-input focus-within:border-ring focus-within:ring-ring/50 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive dark:has-aria-invalid:border-destructive/50 flex min-h-8 flex-wrap items-center gap-1 rounded-lg border bg-transparent bg-clip-padding px-2.5 py-1 text-sm transition-colors focus-within:ring-3 has-aria-invalid:ring-3 has-data-[slot=combobox-chip]:px-1", className),
+		className: cn(comboboxStyles.chips, className),
 		...props
 	});
 }
+/** ComboboxChip — individual chip with optional remove button. */
 function ComboboxChip({ className, children, showRemove = true, ...props }) {
 	return /* @__PURE__ */ jsxs(Combobox.Chip, {
 		"data-slot": "combobox-chip",
-		className: cn("bg-muted text-foreground flex h-[calc(--spacing(5.25))] w-fit items-center justify-center gap-1 rounded-sm px-1.5 text-xs font-medium whitespace-nowrap has-data-[slot=combobox-chip-remove]:pr-0 has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50", className),
+		className: cn(comboboxStyles.chip, className),
 		...props,
 		children: [children, showRemove && /* @__PURE__ */ jsx(Combobox.ChipRemove, {
 			render: /* @__PURE__ */ jsx(Button, {
@@ -163,13 +195,19 @@ function ComboboxChip({ className, children, showRemove = true, ...props }) {
 		})]
 	});
 }
+/** ComboboxChipsInput — input within the chips container for multi-select. */
 function ComboboxChipsInput({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Combobox.Input, {
 		"data-slot": "combobox-chip-input",
-		className: cn("min-w-16 flex-1 outline-none", className),
+		className: cn(comboboxStyles.chipInput, className),
 		...props
 	});
 }
+/**
+* Hook to create an anchor ref for the combobox chips.
+*
+* @returns A ref to be used as the anchor for ComboboxContent
+*/
 function useComboboxAnchor() {
 	return React.useRef(null);
 }

package/dist/react/ui/CornerBracket/CornerBracket.styles.d.ts

@@ -0,0 +1,18 @@
+import type { StyleSlots } from '../../../core/types';
+type CornerBracketSlot = 'root';
+declare const cornerBracketStyles: StyleSlots<CornerBracketSlot>;
+/** CVA variants for CornerBracket positioning and color. */
+declare const bracketVariants: (props?: ({
+    position?: "br" | "tr" | "tl" | "bl" | null | undefined;
+    variant?: "default" | "accent" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/** SVG path data for each corner position. */
+declare const BRACKET_PATHS: {
+    readonly tl: "M 0 20 L 0 5 A 5 5 0 0 1 5 0 L 20 0";
+    readonly tr: "M 0 0 L 15 0 A 5 5 0 0 1 20 5 L 20 20";
+    readonly bl: "M 0 0 L 0 15 A 5 5 0 0 0 5 20 L 20 20";
+    readonly br: "M 20 0 L 5 0 A 5 5 0 0 0 0 5 L 0 20";
+};
+export { cornerBracketStyles, bracketVariants, BRACKET_PATHS };
+export type { CornerBracketSlot };
+//# sourceMappingURL=CornerBracket.styles.d.ts.map

package/dist/react/ui/CornerBracket/CornerBracket.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CornerBracket.styles.d.ts","sourceRoot":"","sources":["../../../../src/react/ui/CornerBracket/CornerBracket.styles.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE/C,KAAK,iBAAiB,GAAG,MAAM,CAAC;AAEhC,QAAA,MAAM,mBAAmB,EAAE,UAAU,CAAC,iBAAiB,CAEtD,CAAC;AAEF,4DAA4D;AAC5D,QAAA,MAAM,eAAe;;;8EAgBnB,CAAC;AAEH,8CAA8C;AAC9C,QAAA,MAAM,aAAa;;;;;CAKT,CAAC;AAEX,OAAO,EAAE,mBAAmB,EAAE,eAAe,EAAE,aAAa,EAAE,CAAC;AAC/D,YAAY,EAAE,iBAAiB,EAAE,CAAC"}

package/dist/react/ui/CornerBracket/CornerBracket.styles.js

@@ -0,0 +1,30 @@
+import { cva } from "class-variance-authority";
+
+//#region src/react/ui/CornerBracket/CornerBracket.styles.ts
+const cornerBracketStyles = { root: "absolute pointer-events-none" };
+/** CVA variants for CornerBracket positioning and color. */
+const bracketVariants = cva(cornerBracketStyles.root, {
+	variants: {
+		position: {
+			tl: "top-0 left-0",
+			tr: "top-0 right-0",
+			bl: "bottom-0 left-0",
+			br: "bottom-0 right-0"
+		},
+		variant: {
+			default: "stroke-primary/50",
+			accent: "stroke-primary/66"
+		}
+	},
+	defaultVariants: { variant: "default" }
+});
+/** SVG path data for each corner position. */
+const BRACKET_PATHS = {
+	tl: "M 0 20 L 0 5 A 5 5 0 0 1 5 0 L 20 0",
+	tr: "M 0 0 L 15 0 A 5 5 0 0 1 20 5 L 20 20",
+	bl: "M 0 0 L 0 15 A 5 5 0 0 0 5 20 L 20 20",
+	br: "M 20 0 L 5 0 A 5 5 0 0 0 0 5 L 0 20"
+};
+
+//#endregion
+export { BRACKET_PATHS, bracketVariants };

package/dist/react/ui/CornerBracket/CornerBracket.types.d.ts

@@ -0,0 +1,12 @@
+import type { VariantProps } from 'class-variance-authority';
+import type { SlotOverrides } from '../../../core/types';
+import type { bracketVariants, CornerBracketSlot } from './CornerBracket.styles';
+/** Props for the CornerBracket component. */
+interface ICornerBracketProps extends Omit<React.SVGProps<SVGSVGElement>, 'variant'>, VariantProps<typeof bracketVariants> {
+    /** Bracket size in pixels. */
+    size?: number;
+    /** Override classes for bracket visual regions. */
+    slots?: SlotOverrides<CornerBracketSlot>;
+}
+export type { ICornerBracketProps };
+//# sourceMappingURL=CornerBracket.types.d.ts.map

package/dist/react/ui/CornerBracket/CornerBracket.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CornerBracket.types.d.ts","sourceRoot":"","sources":["../../../../src/react/ui/CornerBracket/CornerBracket.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAC7D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAClD,OAAO,KAAK,EAAE,eAAe,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAEjF,6CAA6C;AAC7C,UAAU,mBACR,SAAQ,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC,EAAE,SAAS,CAAC,EACpD,YAAY,CAAC,OAAO,eAAe,CAAC;IACtC,8BAA8B;IAC9B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,mDAAmD;IACnD,KAAK,CAAC,EAAE,aAAa,CAAC,iBAAiB,CAAC,CAAC;CAC1C;AAED,YAAY,EAAE,mBAAmB,EAAE,CAAC"}

package/dist/react/ui/CornerBracket/index.d.ts

@@ -0,0 +1,23 @@
+import { bracketVariants } from './CornerBracket.styles';
+import type { ICornerBracketProps } from './CornerBracket.types';
+/**
+ * CornerBracket — SVG corner bracket decoration for industrial/technical UI styling.
+ *
+ * @param position - Corner position: 'tl', 'tr', 'bl', 'br'
+ * @param variant - Visual style: 'default' or 'accent'
+ * @param size - Bracket size in pixels (default: 20)
+ *
+ * @example
+ * ```tsx
+ * <div className="relative p-4">
+ *   <CornerBracket position="tl" />
+ *   <CornerBracket position="br" variant="accent" />
+ *   Content here
+ * </div>
+ * ```
+ */
+declare function CornerBracket({ className, position, variant, size, slots, ...props }: ICornerBracketProps): import("react/jsx-runtime").JSX.Element;
+export { CornerBracket, bracketVariants };
+export type { ICornerBracketProps } from './CornerBracket.types';
+export type { CornerBracketSlot } from './CornerBracket.styles';
+//# sourceMappingURL=index.d.ts.map

package/dist/react/ui/CornerBracket/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/react/ui/CornerBracket/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAiB,MAAM,wBAAwB,CAAC;AACxE,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAEjE;;;;;;;;;;;;;;;GAeG;AACH,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,QAAQ,EACR,OAAO,EACP,IAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EAAE,mBAAmB,2CAiBrB;AAED,OAAO,EAAE,aAAa,EAAE,eAAe,EAAE,CAAC;AAC1C,YAAY,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AACjE,YAAY,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC"}

package/dist/react/ui/CornerBracket/index.js

@@ -0,0 +1,42 @@
+import { cn } from "../../lib/utils.js";
+import { BRACKET_PATHS, bracketVariants } from "./CornerBracket.styles.js";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/react/ui/CornerBracket/index.tsx
+/**
+* CornerBracket — SVG corner bracket decoration for industrial/technical UI styling.
+*
+* @param position - Corner position: 'tl', 'tr', 'bl', 'br'
+* @param variant - Visual style: 'default' or 'accent'
+* @param size - Bracket size in pixels (default: 20)
+*
+* @example
+* ```tsx
+* <div className="relative p-4">
+*   <CornerBracket position="tl" />
+*   <CornerBracket position="br" variant="accent" />
+*   Content here
+* </div>
+* ```
+*/
+function CornerBracket({ className, position, variant, size = 20, slots, ...props }) {
+	return /* @__PURE__ */ jsx("svg", {
+		width: size,
+		height: size,
+		viewBox: "0 0 20 20",
+		fill: "none",
+		className: cn(bracketVariants({
+			position,
+			variant
+		}), slots?.root, className),
+		...props,
+		children: /* @__PURE__ */ jsx("path", {
+			d: BRACKET_PATHS[position || "tl"],
+			strokeWidth: 1.5,
+			strokeLinecap: "round"
+		})
+	});
+}
+
+//#endregion
+export { CornerBracket };

package/dist/react/ui/Dialog/Dialog.styles.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Style definitions for the Dialog component.
+ *
+ * Provides StyleSlots for each visual region and CVA variants
+ * for sub-component styling. Uses only CSS variable utilities;
+ * never hard-coded color values.
+ *
+ * @module @mks2508/mks-ui/react/ui/Dialog/Dialog.styles
+ */
+import type { StyleSlots } from '../../../core/types';
+import type { DialogSlot } from './Dialog.types';
+/**
+ * Default Tailwind classes for each Dialog visual region.
+ * Consumers override via the `slots` prop; the merge order is:
+ * `base -> slots -> className`.
+ *
+ * @example
+ * ```typescript
+ * import { dialogStyles } from './Dialog.styles';
+ * // dialogStyles.backdrop => 'fixed inset-0 z-50 bg-black/80'
+ * ```
+ */
+export declare const dialogStyles: StyleSlots<DialogSlot>;
+//# sourceMappingURL=Dialog.styles.d.ts.map

package/dist/react/ui/Dialog/Dialog.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.styles.d.ts","sourceRoot":"","sources":["../../../../src/react/ui/Dialog/Dialog.styles.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC/C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAEjD;;;;;;;;;;GAUG;AACH,eAAO,MAAM,YAAY,EAAE,UAAU,CAAC,UAAU,CAkC/C,CAAC"}

package/dist/react/ui/Dialog/Dialog.styles.js

@@ -0,0 +1,29 @@
+//#region src/react/ui/Dialog/Dialog.styles.ts
+/**
+* Default Tailwind classes for each Dialog visual region.
+* Consumers override via the `slots` prop; the merge order is:
+* `base -> slots -> className`.
+*
+* @example
+* ```typescript
+* import { dialogStyles } from './Dialog.styles';
+* // dialogStyles.backdrop => 'fixed inset-0 z-50 bg-black/80'
+* ```
+*/
+const dialogStyles = {
+	root: "",
+	backdrop: "fixed inset-0 z-50 bg-black/80",
+	popup: [
+		"fixed top-1/2 left-1/2 z-50 -translate-x-1/2 -translate-y-1/2",
+		"w-full max-w-lg",
+		"rounded-lg border border-border bg-background p-6 shadow-lg"
+	].join(" "),
+	header: "flex flex-col gap-2 text-center sm:text-left",
+	footer: "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+	title: "text-lg font-semibold leading-none tracking-tight text-foreground",
+	description: "text-sm text-muted-foreground",
+	close: "absolute top-4 right-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none"
+};
+
+//#endregion
+export { dialogStyles };