@candy.thieves/ui-kit-lumos 0.0.1

package/dist/index.js

@@ -0,0 +1,307 @@
+import e, { clsx as t } from "clsx";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { forwardRef as i, useId as a, useState as o } from "react";
+import * as s from "@radix-ui/react-radio-group";
+var c = {
+	typography: "_typography_1hhu5_1",
+	"align-left": "_align-left_1hhu5_5",
+	"align-center": "_align-center_1hhu5_9",
+	"align-right": "_align-right_1hhu5_13",
+	"align-justify": "_align-justify_1hhu5_17",
+	noWrap: "_noWrap_1hhu5_21",
+	gutterBottom: "_gutterBottom_1hhu5_27"
+}, l = {
+	large: "h1",
+	h1: "h1",
+	h2: "h2",
+	h3: "h3",
+	subtitle1: "h4",
+	subtitle2: "h5",
+	body1: "p",
+	body2: "p",
+	body3: "p",
+	caption1: "span",
+	caption2: "span",
+	link: "a",
+	"subtitle-link": "a",
+	caution: "div",
+	"caution-error": "div",
+	signature: "span",
+	"signature-legal": "span"
+}, u = (t) => {
+	let { ref: r, children: i, variant: a = "body1", color: o, className: s, style: u, noWrap: d, mb: f, ml: p, mr: m, mt: h, mx: g, my: _, gutterBottom: v, align: y, href: b, target: x, rel: S, ...C } = t, w = l[a] || "div", T = e(c.typography, `typography-${a}`, y && c[`align-${y}`], d && c.noWrap, v && c.gutterBottom, s), E = a === "link" || a === "subtitle-link" || w === "a" ? {
+		href: b,
+		target: x,
+		rel: S
+	} : {};
+	return /* @__PURE__ */ n(w, {
+		ref: r,
+		className: T,
+		style: {
+			marginLeft: g ?? p ?? 0,
+			marginRight: g ?? m ?? 0,
+			marginTop: _ ?? h ?? 0,
+			marginBottom: _ ?? f ?? 0,
+			color: o ?? "inherit",
+			...u
+		},
+		...E,
+		...C,
+		children: i
+	});
+}, d = {
+	"typography-large": "_typography-large_q4wf2_82",
+	"typography-h1": "_typography-h1_q4wf2_90",
+	"typography-h2": "_typography-h2_q4wf2_98",
+	"typography-h3": "_typography-h3_q4wf2_106",
+	"typography-subtitle1": "_typography-subtitle1_q4wf2_114",
+	"typography-subtitle2": "_typography-subtitle2_q4wf2_122",
+	"typography-body1": "_typography-body1_q4wf2_130",
+	"typography-body2": "_typography-body2_q4wf2_146",
+	"typography-body3": "_typography-body3_q4wf2_154",
+	"typography-caption1": "_typography-caption1_q4wf2_162",
+	"typography-caption2": "_typography-caption2_q4wf2_170",
+	"typography-link": "_typography-link_q4wf2_178",
+	"typography-subtitle-link": "_typography-subtitle-link_q4wf2_188",
+	"typography-caution": "_typography-caution_q4wf2_198",
+	"typography-caution-error": "_typography-caution-error_q4wf2_206",
+	"typography-signature": "_typography-signature_q4wf2_215",
+	"typography-signature-legal": "_typography-signature-legal_q4wf2_223",
+	testContainer: "_testContainer_q4wf2_231",
+	header: "_header_q4wf2_236",
+	container: "_container_q4wf2_23",
+	main: "_main_q4wf2_270",
+	content: "_content_q4wf2_274",
+	testSection: "_testSection_q4wf2_279",
+	breakpointIndicators: "_breakpointIndicators_q4wf2_293",
+	desktopIndicator: "_desktopIndicator_q4wf2_307",
+	tabletIndicator: "_tabletIndicator_q4wf2_321",
+	mobileIndicator: "_mobileIndicator_q4wf2_335",
+	modalSizes: "_modalSizes_q4wf2_349",
+	modalXs: "_modalXs_q4wf2_363",
+	modalS: "_modalS_q4wf2_349",
+	modalM: "_modalM_q4wf2_375",
+	modalL: "_modalL_q4wf2_381",
+	modalXl: "_modalXl_q4wf2_387",
+	openModalBtn: "_openModalBtn_q4wf2_393",
+	hoverTest: "_hoverTest_q4wf2_406",
+	hoverButton: "_hoverButton_q4wf2_413",
+	hoverCard: "_hoverCard_q4wf2_439",
+	modalOverlay: "_modalOverlay_q4wf2_462",
+	modal: "_modal_q4wf2_349",
+	closeBtn: "_closeBtn_q4wf2_508",
+	utilityGrid: "_utilityGrid_q4wf2_551",
+	flexBox: "_flexBox_q4wf2_556",
+	square: "_square_q4wf2_570",
+	positionWrapper: "_positionWrapper_q4wf2_580",
+	topLeft: "_topLeft_q4wf2_586",
+	topRight: "_topRight_q4wf2_595",
+	typographyExample: "_typographyExample_q4wf2_604",
+	transitionBox: "_transitionBox_q4wf2_612",
+	prefixBox: "_prefixBox_q4wf2_622"
+}, f = () => {
+	let [e, t] = o(!1);
+	return /* @__PURE__ */ r("div", {
+		className: d.testContainer,
+		children: [
+			/* @__PURE__ */ n("header", {
+				className: d.header,
+				children: /* @__PURE__ */ r("div", {
+					className: d.container,
+					children: [/* @__PURE__ */ n("h1", { children: "Testing All Mixins" }), /* @__PURE__ */ n("p", { children: "Resize your browser to see responsive behavior" })]
+				})
+			}),
+			/* @__PURE__ */ n("main", {
+				className: d.main,
+				children: /* @__PURE__ */ r("div", {
+					className: d.content,
+					children: [
+						/* @__PURE__ */ r("section", {
+							className: d.testSection,
+							children: [/* @__PURE__ */ n("h2", { children: "Responsive Breakpoints" }), /* @__PURE__ */ r("div", {
+								className: d.breakpointIndicators,
+								children: [
+									/* @__PURE__ */ n("div", {
+										className: d.desktopIndicator,
+										children: "Desktop (≥1280px)"
+									}),
+									/* @__PURE__ */ n("div", {
+										className: d.tabletIndicator,
+										children: "Tablet (768-1279px)"
+									}),
+									/* @__PURE__ */ n("div", {
+										className: d.mobileIndicator,
+										children: "Mobile (≤360px)"
+									})
+								]
+							})]
+						}),
+						/* @__PURE__ */ r("section", {
+							className: d.testSection,
+							children: [
+								/* @__PURE__ */ n("h2", { children: "Modal Widths" }),
+								/* @__PURE__ */ r("div", {
+									className: d.modalSizes,
+									children: [
+										/* @__PURE__ */ n("div", {
+											className: d.modalXs,
+											children: "XS (366px)"
+										}),
+										/* @__PURE__ */ n("div", {
+											className: d.modalS,
+											children: "S (378px)"
+										}),
+										/* @__PURE__ */ n("div", {
+											className: d.modalM,
+											children: "M (492px)"
+										}),
+										/* @__PURE__ */ n("div", {
+											className: d.modalL,
+											children: "L (644px)"
+										}),
+										/* @__PURE__ */ n("div", {
+											className: d.modalXl,
+											children: "XL (972px)"
+										})
+									]
+								}),
+								/* @__PURE__ */ n("button", {
+									type: "button",
+									className: d.openModalBtn,
+									onClick: () => t(!0),
+									children: "Open Modal"
+								})
+							]
+						}),
+						/* @__PURE__ */ r("section", {
+							className: d.testSection,
+							children: [/* @__PURE__ */ n("h2", { children: "Hover & Touch Testing" }), /* @__PURE__ */ r("div", {
+								className: d.hoverTest,
+								children: [/* @__PURE__ */ n("button", {
+									type: "button",
+									className: d.hoverButton,
+									children: "Hover me (desktop) / Tap me (mobile)"
+								}), /* @__PURE__ */ n("div", {
+									className: d.hoverCard,
+									children: /* @__PURE__ */ n("p", { children: "Hover effects change on touch devices" })
+								})]
+							})]
+						}),
+						/* @__PURE__ */ r("section", {
+							className: d.testSection,
+							children: [/* @__PURE__ */ n("h2", { children: "Utility Mixins" }), /* @__PURE__ */ r("div", {
+								className: d.utilityGrid,
+								children: [
+									/* @__PURE__ */ r("div", {
+										className: d.flexBox,
+										children: [
+											/* @__PURE__ */ n("div", { children: "Flexbox" }),
+											/* @__PURE__ */ n("div", { children: "1" }),
+											/* @__PURE__ */ n("div", { children: "2" }),
+											/* @__PURE__ */ n("div", { children: "3" })
+										]
+									}),
+									/* @__PURE__ */ n("div", {
+										className: d.square,
+										children: "width-height"
+									}),
+									/* @__PURE__ */ r("div", {
+										className: d.positionWrapper,
+										children: [/* @__PURE__ */ n("div", {
+											className: d.topLeft,
+											children: "Top Left"
+										}), /* @__PURE__ */ n("div", {
+											className: d.topRight,
+											children: "Top Right"
+										})]
+									}),
+									/* @__PURE__ */ n("p", {
+										className: d.typographyExample,
+										children: "Typography mixin example"
+									}),
+									/* @__PURE__ */ n("div", {
+										className: d.transitionBox,
+										children: "Hover me (transition-basic mixin)"
+									}),
+									/* @__PURE__ */ n("div", {
+										className: d.prefixBox,
+										children: "Prefix mixin"
+									})
+								]
+							})]
+						})
+					]
+				})
+			}),
+			e && /* @__PURE__ */ n("div", {
+				className: d.modalOverlay,
+				onClick: () => t(!1),
+				children: /* @__PURE__ */ r("div", {
+					className: d.modal,
+					onClick: (e) => e.stopPropagation(),
+					children: [
+						/* @__PURE__ */ n("button", {
+							type: "button",
+							className: d.closeBtn,
+							onClick: () => t(!1),
+							children: "×"
+						}),
+						/* @__PURE__ */ n("h2", { children: "Responsive Modal" }),
+						/* @__PURE__ */ n("p", { children: "Modal width changes based on screen size" }),
+						/* @__PURE__ */ r("div", {
+							className: d.modalSizes,
+							children: [
+								/* @__PURE__ */ n("span", { children: "XS: 366px" }),
+								/* @__PURE__ */ n("span", { children: "S: 378px" }),
+								/* @__PURE__ */ n("span", { children: "M: 492px" }),
+								/* @__PURE__ */ n("span", { children: "L: 644px" }),
+								/* @__PURE__ */ n("span", { children: "XL: 972px" })
+							]
+						})
+					]
+				})
+			})
+		]
+	});
+}, p = {
+	root: "_root_1rwph_55",
+	option: "_option_1rwph_61",
+	item: "_item_1rwph_67",
+	radio: "_radio_1rwph_94",
+	indicator: "_indicator_1rwph_112",
+	label: "_label_1rwph_130",
+	disabled: "_disabled_1rwph_135"
+}, m = i(({ className: t, options: i, disabled: o, ...c }, l) => {
+	let u = a();
+	return /* @__PURE__ */ n(s.Root, {
+		ref: l,
+		disabled: o,
+		className: e(p.root, t, o && p.groupDisabled),
+		...c,
+		children: i.map((t) => {
+			let i = `${u}-${t.value}`, a = o || t.disabled;
+			return /* @__PURE__ */ r("div", {
+				className: e(p.option, a && p.disabled),
+				children: [/* @__PURE__ */ n(s.Item, {
+					id: i,
+					className: p.item,
+					value: t.value,
+					disabled: a,
+					children: /* @__PURE__ */ n("span", {
+						className: p.radio,
+						children: /* @__PURE__ */ n(s.Indicator, { className: p.indicator })
+					})
+				}), t.label && /* @__PURE__ */ n("label", {
+					htmlFor: i,
+					className: p.label,
+					children: t.label
+				})]
+			}, t.value);
+		})
+	});
+});
+m.displayName = "RadioGroup";
+//#endregion
+export { m as RadioGroup, f as TestMixins, u as Typography, t as clsx };
+
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../src/components/Typography/Typography.module.scss","../src/components/Typography/Typography.tsx","../src/components/TestMixins/TestMixins.module.scss","../src/components/TestMixins/TestMixins.tsx","../src/components/RadioGroup/RadioGroup.module.scss","../src/components/RadioGroup/RadioGroup.tsx"],"sourcesContent":[".typography {\n  font-style: normal;\n}\n\n.align-left {\n  text-align: left;\n}\n\n.align-center {\n  text-align: center;\n}\n\n.align-right {\n  text-align: right;\n}\n\n.align-justify {\n  text-align: justify;\n}\n\n.noWrap {\n  overflow: hidden;\n  text-overflow: ellipsis; // if we need\n  white-space: nowrap;\n}\n\n.gutterBottom {\n  margin-bottom: 0.35em;\n}\n","import type { ComponentPropsWithRef, CSSProperties, ElementType, ReactNode } from 'react'\nimport clsx from 'clsx'\nimport s from './Typography.module.scss'\n\ntype TypographyVariant =\n  | 'body1'\n  | 'body2'\n  | 'body3'\n  | 'caption1'\n  | 'caption2'\n  | 'caution'\n  | 'caution-error'\n  | 'h1'\n  | 'h2'\n  | 'h3'\n  | 'large'\n  | 'link'\n  | 'signature'\n  | 'signature-legal'\n  | 'subtitle1'\n  | 'subtitle2'\n  | 'subtitle-link'\n\ntype TypographyAlign = 'center' | 'justify' | 'left' | 'right'\n\ntype MarginProps = {\n  mt?: CSSProperties['marginTop']\n  mb?: CSSProperties['marginBottom']\n  ml?: CSSProperties['marginLeft']\n  mr?: CSSProperties['marginRight']\n  mx?: CSSProperties['marginLeft']\n  my?: CSSProperties['marginTop']\n}\n\nconst tagMapping: Record<TypographyVariant, ElementType> = {\n  large: 'h1',\n  h1: 'h1',\n  h2: 'h2',\n  h3: 'h3',\n  subtitle1: 'h4',\n  subtitle2: 'h5',\n  body1: 'p',\n  body2: 'p',\n  body3: 'p',\n  caption1: 'span',\n  caption2: 'span',\n  link: 'a',\n  'subtitle-link': 'a',\n  // The following is used in reCAPTCHA\n  caution: 'div',\n  'caution-error': 'div',\n  signature: 'span',\n  'signature-legal': 'span',\n}\n\ntype TypographyProps<T extends ElementType = 'div'> = {\n  variant?: TypographyVariant\n  children: ReactNode\n  color?: CSSProperties['color']\n  className?: string\n  style?: CSSProperties\n  noWrap?: boolean\n  gutterBottom?: boolean\n  align?: TypographyAlign\n  href?: string\n  target?: '_blank' | '_parent' | '_self' | '_top'\n  rel?: string\n} & MarginProps &\n  Omit<\n    ComponentPropsWithRef<T>,\n    | 'align'\n    | 'color'\n    | 'gutterBottom'\n    | 'href'\n    | 'noWrap'\n    | 'rel'\n    | 'style'\n    | 'target'\n    | keyof MarginProps\n  >\n\nexport const Typography = <C extends ElementType = 'div'>(props: TypographyProps<C>) => {\n  const {\n    ref,\n    children,\n    variant = 'body1',\n    color,\n    className,\n    style,\n    noWrap,\n    mb,\n    ml,\n    mr,\n    mt,\n    mx,\n    my,\n    gutterBottom,\n    align,\n    href,\n    target,\n    rel,\n    ...rest\n  } = props\n\n  const Component = tagMapping[variant] || 'div'\n\n  const classes = clsx(\n    s.typography,\n    `typography-${variant}`,\n    align && s[`align-${align}`],\n    noWrap && s.noWrap,\n    gutterBottom && s.gutterBottom,\n    className\n  )\n\n  const isLink = variant === 'link' || variant === 'subtitle-link' || Component === 'a'\n  const linkProps = isLink ? { href, target, rel } : {}\n\n  const styles = {\n    marginLeft: mx ?? ml ?? 0,\n    marginRight: mx ?? mr ?? 0,\n    marginTop: my ?? mt ?? 0,\n    marginBottom: my ?? mb ?? 0,\n    color: color ?? 'inherit',\n    ...style,\n  }\n\n  return (\n    <Component ref={ref} className={classes} style={styles} {...linkProps} {...rest}>\n      {children}\n    </Component>\n  )\n}\n","@use '../../styles/mixins' as *;\n@use '../../styles/typography' as *;\n\n// Component styles\n.testContainer {\n  min-height: 100vh;\n  background: #f5f5f5;\n}\n\n// Test container mixin\n.header {\n  padding: 2rem 0;\n  color: white;\n  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n}\n\n.container {\n  @include container;\n\n  padding: 2rem;\n  border-radius: 8px;\n  background: rgb(255 255 255 / 10%);\n\n  h1 {\n    margin: 0;\n    font-size: 2.5rem;\n  }\n\n  p {\n    margin: 0.5rem 0 0;\n    opacity: 0.9;\n  }\n}\n\n// Test content mixin\n.main {\n  padding: 2rem 0;\n}\n\n.content {\n  @include content;\n}\n\n.testSection {\n  margin-bottom: 2rem;\n  padding: 2rem;\n  border-radius: 8px;\n\n  background: white;\n  box-shadow: 0 2px 4px rgb(0 0 0 / 10%);\n\n  h2 {\n    margin-top: 0;\n    padding-bottom: 0.5rem;\n    border-bottom: 2px solid #667eea;\n    color: #333;\n  }\n}\n\n// Breakpoint indicators\n.breakpointIndicators {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 1rem;\n\n  > div {\n    flex: 1;\n\n    min-width: 150px;\n    padding: 1rem;\n    border-radius: 4px;\n\n    font-weight: bold;\n    text-align: center;\n  }\n}\n\n.desktopIndicator {\n  color: white;\n  background: #4caf50;\n\n  @include media-desktop {\n    color: white;\n    background: #ff9800;\n\n    &::after {\n      content: ' (Active)';\n    }\n  }\n}\n\n.tabletIndicator {\n  color: white;\n  background: #ff9800;\n\n  @include media-tablet {\n    color: white;\n    background: #2196f3;\n\n    &::after {\n      content: ' (Active)';\n    }\n  }\n}\n\n.mobileIndicator {\n  color: white;\n  background: #2196f3;\n\n  @include media-mobile {\n    color: white;\n    background: #f44336;\n\n    &::after {\n      content: ' (Active)';\n    }\n  }\n}\n\n// Modal sizes preview\n.modalSizes {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.5rem;\n  margin: 1rem 0;\n\n  > div {\n    padding: 0.5rem 1rem;\n    border: 2px solid transparent;\n    border-radius: 4px;\n\n    font-size: 0.9rem;\n\n    background: #e0e0e0;\n  }\n}\n\n.modalXs {\n  width: $modal-width-xs;\n  border-color: #2196f3;\n  background: #e3f2fd;\n}\n\n.modalS {\n  width: $modal-width-s;\n  border-color: #4caf50;\n  background: #e8f5e9;\n}\n\n.modalM {\n  width: $modal-width-m;\n  border-color: #ff9800;\n  background: #fff3e0;\n}\n\n.modalL {\n  width: $modal-width-l;\n  border-color: #f44336;\n  background: #fce4ec;\n}\n\n.modalXl {\n  width: $modal-width-xl;\n  border-color: #9c27b0;\n  background: #f3e5f5;\n}\n\n.openModalBtn {\n  cursor: pointer;\n\n  padding: 0.75rem 1.5rem;\n  border: none;\n  border-radius: 4px;\n\n  font-size: 1rem;\n  color: white;\n\n  background: #667eea;\n\n  &:hover {\n    background: #764ba2;\n  }\n}\n\n// No-hover mixin test\n.hoverTest {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 2rem;\n  margin-top: 1rem;\n}\n\n.hoverButton {\n  cursor: pointer;\n\n  padding: 1rem 2rem;\n  border: none;\n  border-radius: 4px;\n\n  font-size: 1rem;\n  color: white;\n\n  background: #764ba2;\n\n  transition: all 0.3s;\n\n  &:hover {\n    transform: scale(1.05);\n    background: #667eea;\n    box-shadow: 0 4px 8px rgb(0 0 0 / 20%);\n  }\n\n  &:active {\n    transform: scale(0.95);\n  }\n\n  // No hover on touch devices\n  @include no-hover-mobile {\n    &:hover {\n      transform: none;\n      background: #764ba2;\n      box-shadow: none;\n    }\n  }\n}\n\n.hoverCard {\n  min-width: 200px;\n  padding: 2rem;\n  border-radius: 8px;\n\n  text-align: center;\n\n  background: #e0e0e0;\n\n  transition: all 0.3s;\n\n  &:hover {\n    transform: translateY(-5px);\n    color: white;\n    background: #667eea;\n    box-shadow: 0 8px 16px rgb(0 0 0 / 20%);\n  }\n\n  // No hover on touch devices\n  @include no-hover-mobile {\n    &:hover {\n      transform: none;\n      color: inherit;\n      background: #e0e0e0;\n      box-shadow: none;\n    }\n  }\n}\n\n// Modal styles\n.modalOverlay {\n  position: fixed;\n  z-index: 1000;\n  inset: 0;\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  background: rgb(0 0 0 / 70%);\n}\n\n.modal {\n  position: relative;\n\n  overflow-y: auto;\n\n  // Responsive modal widths\n  width: $modal-width-m; // Default medium\n  max-height: 80vh;\n  padding: 2rem;\n  border-radius: 8px;\n\n  background: white;\n\n  @include media-desktop {\n    width: $modal-width-xl;\n  }\n\n  @include media-tablet {\n    width: $modal-width-l;\n  }\n\n  @include media-mobile {\n    width: $modal-width-s;\n  }\n\n  // Individual width tests\n  .modalSizes {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 0.5rem;\n\n    span {\n      padding: 0.25rem 0.5rem;\n      border-radius: 3px;\n      font-size: 0.8rem;\n      background: #f0f0f0;\n    }\n  }\n}\n\n.closeBtn {\n  cursor: pointer;\n\n  position: absolute;\n  top: 0.5rem;\n  right: 0.5rem;\n\n  padding: 0.5rem;\n  border: none;\n\n  font-size: 2rem;\n  line-height: 1;\n  color: #999;\n\n  background: none;\n\n  &:hover {\n    color: #333;\n  }\n}\n\n// Responsive adjustments for the component itself\n@include media-tablet {\n  .container {\n    padding: 1rem;\n  }\n\n  .testSection {\n    padding: 1.5rem;\n  }\n\n  .breakpointIndicators {\n    > div {\n      min-width: 120px;\n      font-size: 0.9rem;\n    }\n  }\n}\n\n@include media-mobile {\n  .header h1 {\n    font-size: 1.8rem;\n  }\n\n  .testSection {\n    padding: 1rem;\n  }\n\n  .modalSizes {\n    > div {\n      padding: 0.25rem 0.5rem;\n      font-size: 0.8rem;\n    }\n  }\n\n  .hoverTest {\n    flex-direction: column;\n  }\n}\n\n// Flex\n.utilityGrid {\n  display: grid;\n  gap: 2rem;\n}\n\n.flexBox {\n  @include flex(flex, center, center);\n\n  gap: 1rem;\n  padding: 1rem;\n  background: #eee;\n\n  div {\n    padding: 1rem;\n    color: white;\n    background: #667eea;\n  }\n}\n\n// width-height\n.square {\n  @include width-height(120px);\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  color: white;\n\n  background: #4caf50;\n}\n\n// top-left / top-right\n.positionWrapper {\n  position: relative;\n  height: 120px;\n  background: #f3f3f3;\n}\n\n.topLeft {\n  @include top-left(10px);\n\n  position: absolute;\n  padding: 0.5rem;\n  color: white;\n  background: #2196f3;\n}\n\n.topRight {\n  @include top-right(10px);\n\n  position: absolute;\n  padding: 0.5rem;\n  color: white;\n  background: #f44336;\n}\n\n// Typography\n.typographyExample {\n  @include typography(24px, 32px, 700);\n}\n\n// Transition-basic\n.transitionBox {\n  padding: 1rem;\n  background: #ff9800;\n\n  @include transition-basic(background, transform);\n\n  &:hover {\n    transform: scale(1.05);\n    background: #4caf50;\n  }\n}\n\n// Prefix\n.prefixBox {\n  padding: 1rem;\n  background: #ddd;\n\n  @include prefix(user-select, none, (webkit, moz, ms));\n}\n\n// see in DevTools:\n// -webkit-user-select: none;\n// -moz-user-select: none;\n// -ms-user-select: none;\n// user-select: none;\n","import { useState } from 'react'\nimport s from './TestMixins.module.scss'\n\nexport const TestMixins = () => {\n  const [isModalOpen, setIsModalOpen] = useState(false)\n\n  return (\n    <div className={s.testContainer}>\n      {/* Test container mixin */}\n      <header className={s.header}>\n        <div className={s.container}>\n          <h1>Testing All Mixins</h1>\n          <p>Resize your browser to see responsive behavior</p>\n        </div>\n      </header>\n\n      {/* Test content mixin */}\n      <main className={s.main}>\n        <div className={s.content}>\n          <section className={s.testSection}>\n            <h2>Responsive Breakpoints</h2>\n            <div className={s.breakpointIndicators}>\n              <div className={s.desktopIndicator}>Desktop (≥1280px)</div>\n              <div className={s.tabletIndicator}>Tablet (768-1279px)</div>\n              <div className={s.mobileIndicator}>Mobile (≤360px)</div>\n            </div>\n          </section>\n\n          {/* Test modal widths */}\n          <section className={s.testSection}>\n            <h2>Modal Widths</h2>\n            <div className={s.modalSizes}>\n              <div className={s.modalXs}>XS (366px)</div>\n              <div className={s.modalS}>S (378px)</div>\n              <div className={s.modalM}>M (492px)</div>\n              <div className={s.modalL}>L (644px)</div>\n              <div className={s.modalXl}>XL (972px)</div>\n            </div>\n            <button type={'button'} className={s.openModalBtn} onClick={() => setIsModalOpen(true)}>\n              Open Modal\n            </button>\n          </section>\n\n          {/* Test no-hover mixin */}\n          <section className={s.testSection}>\n            <h2>Hover & Touch Testing</h2>\n            <div className={s.hoverTest}>\n              <button type={'button'} className={s.hoverButton}>\n                Hover me (desktop) / Tap me (mobile)\n              </button>\n              <div className={s.hoverCard}>\n                <p>Hover effects change on touch devices</p>\n              </div>\n            </div>\n          </section>\n\n          {/* Test flex, width-height, top-left, top-right, Typography, prefix, transition-basic */}\n          <section className={s.testSection}>\n            <h2>Utility Mixins</h2>\n\n            <div className={s.utilityGrid}>\n              <div className={s.flexBox}>\n                <div>Flexbox</div>\n                <div>1</div>\n                <div>2</div>\n                <div>3</div>\n              </div>\n\n              <div className={s.square}>width-height</div>\n\n              <div className={s.positionWrapper}>\n                <div className={s.topLeft}>Top Left</div>\n                <div className={s.topRight}>Top Right</div>\n              </div>\n\n              <p className={s.typographyExample}>Typography mixin example</p>\n\n              <div className={s.transitionBox}>Hover me (transition-basic mixin)</div>\n\n              <div className={s.prefixBox}>Prefix mixin</div>\n            </div>\n          </section>\n        </div>\n      </main>\n\n      {/* Modal with responsive widths */}\n      {isModalOpen && (\n        <div className={s.modalOverlay} onClick={() => setIsModalOpen(false)}>\n          <div className={s.modal} onClick={e => e.stopPropagation()}>\n            <button type={'button'} className={s.closeBtn} onClick={() => setIsModalOpen(false)}>\n              ×\n            </button>\n            <h2>Responsive Modal</h2>\n            <p>Modal width changes based on screen size</p>\n            <div className={s.modalSizes}>\n              <span>XS: 366px</span>\n              <span>S: 378px</span>\n              <span>M: 492px</span>\n              <span>L: 644px</span>\n              <span>XL: 972px</span>\n            </div>\n          </div>\n        </div>\n      )}\n    </div>\n  )\n}\n","@use '../../styles/mixins' as *;\n\n.root {\n  display: flex;\n  flex-direction: column;\n  gap: 0.75rem;\n}\n\n.option {\n  display: flex;\n  gap: 0.5rem;\n  align-items: center;\n}\n\n.item {\n  @include flex(flex, center, center);\n\n  @include width-height(2.25rem);\n\n  cursor: pointer;\n\n  padding: 0;\n  border: none;\n  border-radius: 50%;\n\n  background-color: transparent;\n\n  @include transition-basic(background-color);\n\n  &:hover:not([data-disabled]) {\n    background-color: var(--color-dark-300);\n  }\n\n  &:active:not([data-disabled]) {\n    background-color: var(--color-dark-100);\n  }\n\n  &:focus-visible {\n    background-color: var(--color-dark-500);\n    outline: none;\n  }\n\n  &[data-disabled] {\n    cursor: not-allowed;\n  }\n}\n\n.radio {\n  @include flex(flex, center, center);\n\n  @include width-height(20px);\n\n  border: 2px solid var(--color-light-100);\n  border-radius: 50%;\n  background-color: transparent;\n\n  @include transition-basic(background-color);\n\n  .item[data-state='checked'] & {\n    border-color: var(--color-light-100);\n  }\n\n  .item[data-disabled] & {\n    border-color: var(--color-dark-100);\n  }\n}\n\n.indicator {\n  @include flex(flex, center, center);\n\n  @include width-height(100%);\n\n  &::after {\n    content: '';\n    border-radius: 50%;\n    background-color: var(--color-light-100);\n\n    @include width-height(10px);\n  }\n\n  .item[data-disabled] &::after {\n    background-color: var(--color-dark-100);\n  }\n}\n\n.label {\n  cursor: pointer;\n  user-select: none;\n  color: var(--color-light-100);\n\n  .disabled & {\n    cursor: not-allowed;\n    color: var(--color-dark-100);\n  }\n}\n","import type { ComponentPropsWithoutRef, ReactNode } from 'react'\nimport * as RadioGroupPrimitive from '@radix-ui/react-radio-group'\nimport clsx from 'clsx'\nimport { forwardRef, useId } from 'react'\nimport s from './RadioGroup.module.scss'\n\nexport type RadioOption = {\n  disabled?: boolean\n  label?: ReactNode\n  value: string\n}\n\nexport type RadioGroupProps = Omit<\n  ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>,\n  'children'\n> & {\n  className?: string\n  options: RadioOption[]\n}\n\nexport const RadioGroup = forwardRef<HTMLDivElement, RadioGroupProps>(\n  ({ className, options, disabled, ...props }, ref) => {\n    const id = useId()\n\n    return (\n      <RadioGroupPrimitive.Root\n        ref={ref}\n        disabled={disabled}\n        className={clsx(s.root, className, disabled && s.groupDisabled)}\n        {...props}\n      >\n        {options.map(option => {\n          const itemId = `${id}-${option.value}`\n          const isDisabled = disabled || option.disabled\n\n          return (\n            <div key={option.value} className={clsx(s.option, isDisabled && s.disabled)}>\n              <RadioGroupPrimitive.Item\n                id={itemId}\n                className={s.item}\n                value={option.value}\n                disabled={isDisabled}\n              >\n                <span className={s.radio}>\n                  <RadioGroupPrimitive.Indicator className={s.indicator} />\n                </span>\n              </RadioGroupPrimitive.Item>\n\n              {option.label && (\n                <label htmlFor={itemId} className={s.label}>\n                  {option.label}\n                </label>\n              )}\n            </div>\n          )\n        })}\n      </RadioGroupPrimitive.Root>\n    )\n  }\n)\n\nRadioGroup.displayName = 'RadioGroup'\n"],"mappings":"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"}

package/dist/src/assets/icons/ArrowBackOutline.d.ts

@@ -0,0 +1,3 @@
+import { type IconProps } from '@/utils';
+declare const ArrowBackOutline: import("react").ForwardRefExoticComponent<IconProps & import("react").RefAttributes<SVGSVGElement>>;
+export { ArrowBackOutline };

package/dist/src/assets/icons/ArrowForwardOutline.d.ts

@@ -0,0 +1,3 @@
+import { type IconProps } from '@/utils';
+declare const ArrowForwardOutline: import("react").ForwardRefExoticComponent<IconProps & import("react").RefAttributes<SVGSVGElement>>;
+export { ArrowForwardOutline };

package/dist/src/assets/icons/ArrowIosBack.d.ts

@@ -0,0 +1,3 @@
+import { type IconProps } from '@/utils';
+declare const ArrowIosBack: import("react").ForwardRefExoticComponent<IconProps & import("react").RefAttributes<SVGSVGElement>>;
+export { ArrowIosBack };

package/dist/src/assets/icons/ArrowIosBackOutline.d.ts

@@ -0,0 +1,3 @@
+import { type IconProps } from '@/utils';
+declare const ArrowIosBackOutline: import("react").ForwardRefExoticComponent<IconProps & import("react").RefAttributes<SVGSVGElement>>;
+export { ArrowIosBackOutline };

package/dist/src/assets/icons/ArrowIosDownOutline.d.ts

@@ -0,0 +1,3 @@
+import { type IconProps } from '@/utils';
+declare const ArrowIosDownOutline: import("react").ForwardRefExoticComponent<IconProps & import("react").RefAttributes<SVGSVGElement>>;
+export { ArrowIosDownOutline };

package/dist/src/assets/icons/ArrowIosForward.d.ts

@@ -0,0 +1,3 @@
+import { type IconProps } from '@/utils';
+declare const ArrowIosForward: import("react").ForwardRefExoticComponent<IconProps & import("react").RefAttributes<SVGSVGElement>>;
+export { ArrowIosForward };

package/dist/src/assets/icons/ArrowIosForwardOutline.d.ts

@@ -0,0 +1,3 @@
+import { type IconProps } from '@/utils';
+declare const ArrowIosForwardOutline: import("react").ForwardRefExoticComponent<IconProps & import("react").RefAttributes<SVGSVGElement>>;
+export { ArrowIosForwardOutline };

package/dist/src/assets/icons/ArrowIosUp.d.ts

@@ -0,0 +1,3 @@
+import { type IconProps } from '@/utils';
+declare const ArrowIosUp: import("react").ForwardRefExoticComponent<IconProps & import("react").RefAttributes<SVGSVGElement>>;
+export { ArrowIosUp };

package/dist/src/assets/icons/Block.d.ts

@@ -0,0 +1,3 @@
+import { type IconProps } from '@/utils';
+declare const Block: import("react").ForwardRefExoticComponent<IconProps & import("react").RefAttributes<SVGSVGElement>>;
+export { Block };

package/dist/src/assets/icons/BlockOutline.d.ts

@@ -0,0 +1,3 @@
+import { type IconProps } from '@/utils';
+declare const BlockOutline: import("react").ForwardRefExoticComponent<IconProps & import("react").RefAttributes<SVGSVGElement>>;
+export { BlockOutline };

package/dist/src/assets/icons/Bookmark.d.ts

@@ -0,0 +1,3 @@
+import { type IconProps } from '@/utils';
+declare const Bookmark: import("react").ForwardRefExoticComponent<IconProps & import("react").RefAttributes<SVGSVGElement>>;
+export { Bookmark };

package/dist/src/assets/icons/BookmarkOutline.d.ts

@@ -0,0 +1,3 @@
+import { type IconProps } from '@/utils';
+declare const BookmarkOutline: import("react").ForwardRefExoticComponent<IconProps & import("react").RefAttributes<SVGSVGElement>>;
+export { BookmarkOutline };

package/dist/src/assets/icons/Brave.d.ts

@@ -0,0 +1,3 @@
+import { type IconProps } from '@/utils';
+declare const Brave: import("react").ForwardRefExoticComponent<IconProps & import("react").RefAttributes<SVGSVGElement>>;
+export { Brave };

package/dist/src/assets/icons/Calendar.d.ts

@@ -0,0 +1,3 @@
+import { type IconProps } from '@/utils';
+declare const Calendar: import("react").ForwardRefExoticComponent<IconProps & import("react").RefAttributes<SVGSVGElement>>;
+export { Calendar };

package/dist/src/assets/icons/CalendarOutline.d.ts

@@ -0,0 +1,3 @@
+import { type IconProps } from '@/utils';
+declare const CalendarOutline: import("react").ForwardRefExoticComponent<IconProps & import("react").RefAttributes<SVGSVGElement>>;
+export { CalendarOutline };

package/dist/src/assets/icons/CheckmarkOutline.d.ts

@@ -0,0 +1,3 @@
+import { type IconProps } from '@/utils';
+declare const CheckmarkOutline: import("react").ForwardRefExoticComponent<IconProps & import("react").RefAttributes<SVGSVGElement>>;
+export { CheckmarkOutline };

package/dist/src/assets/icons/Close.d.ts

@@ -0,0 +1,3 @@
+import { type IconProps } from '@/utils';
+declare const Close: import("react").ForwardRefExoticComponent<IconProps & import("react").RefAttributes<SVGSVGElement>>;
+export { Close };

package/dist/src/assets/icons/CloseOutline.d.ts

@@ -0,0 +1,3 @@
+import { type IconProps } from '@/utils';
+declare const CloseOutline: import("react").ForwardRefExoticComponent<IconProps & import("react").RefAttributes<SVGSVGElement>>;
+export { CloseOutline };

package/dist/src/assets/icons/ColorPaletteOutline.d.ts

@@ -0,0 +1,3 @@
+import { type IconProps } from '@/utils';
+declare const ColorPaletteOutline: import("react").ForwardRefExoticComponent<IconProps & import("react").RefAttributes<SVGSVGElement>>;
+export { ColorPaletteOutline };

package/dist/src/assets/icons/Copy.d.ts

@@ -0,0 +1,3 @@
+import { type IconProps } from '@/utils';
+declare const Copy: import("react").ForwardRefExoticComponent<IconProps & import("react").RefAttributes<SVGSVGElement>>;
+export { Copy };

package/dist/src/assets/icons/CopyOutline.d.ts

@@ -0,0 +1,3 @@
+import { type IconProps } from '@/utils';
+declare const CopyOutline: import("react").ForwardRefExoticComponent<IconProps & import("react").RefAttributes<SVGSVGElement>>;
+export { CopyOutline };

package/dist/src/assets/icons/CreditCard.d.ts

@@ -0,0 +1,3 @@
+import { type IconProps } from '@/utils';
+declare const CreditCard: import("react").ForwardRefExoticComponent<IconProps & import("react").RefAttributes<SVGSVGElement>>;
+export { CreditCard };

package/dist/src/assets/icons/CreditCardOutline.d.ts

@@ -0,0 +1,3 @@
+import { type IconProps } from '@/utils';
+declare const CreditCardOutline: import("react").ForwardRefExoticComponent<IconProps & import("react").RefAttributes<SVGSVGElement>>;
+export { CreditCardOutline };

package/dist/src/assets/icons/DoneAllOutline.d.ts

@@ -0,0 +1,3 @@
+import { type IconProps } from '@/utils';
+declare const DoneAllOutline: import("react").ForwardRefExoticComponent<IconProps & import("react").RefAttributes<SVGSVGElement>>;
+export { DoneAllOutline };

package/dist/src/assets/icons/Edit.d.ts

@@ -0,0 +1,3 @@
+import { type IconProps } from '@/utils';
+declare const Edit: import("react").ForwardRefExoticComponent<IconProps & import("react").RefAttributes<SVGSVGElement>>;
+export { Edit };

package/dist/src/assets/icons/EditOutline.d.ts

@@ -0,0 +1,3 @@
+import { type IconProps } from '@/utils';
+declare const EditOutline: import("react").ForwardRefExoticComponent<IconProps & import("react").RefAttributes<SVGSVGElement>>;
+export { EditOutline };

package/dist/src/assets/icons/Email.d.ts

@@ -0,0 +1,3 @@
+import { type IconProps } from '@/utils';
+declare const Email: import("react").ForwardRefExoticComponent<IconProps & import("react").RefAttributes<SVGSVGElement>>;
+export { Email };

package/dist/src/assets/icons/EmailOutline.d.ts

@@ -0,0 +1,3 @@
+import { type IconProps } from '@/utils';
+declare const EmailOutline: import("react").ForwardRefExoticComponent<IconProps & import("react").RefAttributes<SVGSVGElement>>;
+export { EmailOutline };

package/dist/src/assets/icons/Expand.d.ts

@@ -0,0 +1,3 @@
+import { type IconProps } from '@/utils';
+declare const Expand: import("react").ForwardRefExoticComponent<IconProps & import("react").RefAttributes<SVGSVGElement>>;
+export { Expand };

package/dist/src/assets/icons/ExpandOutline.d.ts

@@ -0,0 +1,3 @@
+import { type IconProps } from '@/utils';
+declare const ExpandOutline: import("react").ForwardRefExoticComponent<IconProps & import("react").RefAttributes<SVGSVGElement>>;
+export { ExpandOutline };

package/dist/src/assets/icons/Explorer.d.ts

@@ -0,0 +1,3 @@
+import { type IconProps } from '@/utils';
+declare const Explorer: import("react").ForwardRefExoticComponent<IconProps & import("react").RefAttributes<SVGSVGElement>>;
+export { Explorer };

package/dist/src/assets/icons/Eye.d.ts

@@ -0,0 +1,3 @@
+import { type IconProps } from '@/utils';
+declare const Eye: import("react").ForwardRefExoticComponent<IconProps & import("react").RefAttributes<SVGSVGElement>>;
+export { Eye };

package/dist/src/assets/icons/EyeOff.d.ts

@@ -0,0 +1,3 @@
+import { type IconProps } from '@/utils';
+declare const EyeOff: import("react").ForwardRefExoticComponent<IconProps & import("react").RefAttributes<SVGSVGElement>>;
+export { EyeOff };

package/dist/src/assets/icons/EyeOffOutline.d.ts

@@ -0,0 +1,3 @@
+import { type IconProps } from '@/utils';
+declare const EyeOffOutline: import("react").ForwardRefExoticComponent<IconProps & import("react").RefAttributes<SVGSVGElement>>;
+export { EyeOffOutline };

package/dist/src/assets/icons/EyeOutline.d.ts

@@ -0,0 +1,3 @@
+import { type IconProps } from '@/utils';
+declare const EyeOutline: import("react").ForwardRefExoticComponent<IconProps & import("react").RefAttributes<SVGSVGElement>>;
+export { EyeOutline };

package/dist/src/assets/icons/Facebook.d.ts

@@ -0,0 +1,3 @@
+import { type ColorIconProps } from '@/utils';
+declare const Facebook: import("react").ForwardRefExoticComponent<ColorIconProps & import("react").RefAttributes<SVGSVGElement>>;
+export { Facebook };

package/dist/src/assets/icons/FillBell.d.ts

@@ -0,0 +1,3 @@
+import { type IconProps } from '@/utils';
+declare const FillBell: import("react").ForwardRefExoticComponent<IconProps & import("react").RefAttributes<SVGSVGElement>>;
+export { FillBell };

package/dist/src/assets/icons/Firefox.d.ts

@@ -0,0 +1,3 @@
+import { type IconProps } from '@/utils';
+declare const Firefox: import("react").ForwardRefExoticComponent<IconProps & import("react").RefAttributes<SVGSVGElement>>;
+export { Firefox };

package/dist/src/assets/icons/FlagEng.d.ts

@@ -0,0 +1,3 @@
+import { type ColorIconProps } from '@/utils';
+declare const FlagEng: import("react").ForwardRefExoticComponent<ColorIconProps & import("react").RefAttributes<SVGSVGElement>>;
+export { FlagEng };

package/dist/src/assets/icons/FlagRus.d.ts

@@ -0,0 +1,3 @@
+import { type ColorIconProps } from '@/utils';
+declare const FlagRus: import("react").ForwardRefExoticComponent<ColorIconProps & import("react").RefAttributes<SVGSVGElement>>;
+export { FlagRus };

package/dist/src/assets/icons/GithubRepo.d.ts

@@ -0,0 +1,3 @@
+import { type IconProps } from '@/utils';
+declare const GithubRepo: import("react").ForwardRefExoticComponent<IconProps & import("react").RefAttributes<SVGSVGElement>>;
+export { GithubRepo };

package/dist/src/assets/icons/Google.d.ts

@@ -0,0 +1,3 @@
+import { type ColorIconProps } from '@/utils';
+declare const Google: import("react").ForwardRefExoticComponent<ColorIconProps & import("react").RefAttributes<SVGSVGElement>>;
+export { Google };

package/dist/src/assets/icons/Heart.d.ts

@@ -0,0 +1,3 @@
+import { type IconProps } from '@/utils';
+declare const Heart: import("react").ForwardRefExoticComponent<IconProps & import("react").RefAttributes<SVGSVGElement>>;
+export { Heart };

package/dist/src/assets/icons/HeartOutline.d.ts

@@ -0,0 +1,3 @@
+import { type IconProps } from '@/utils';
+declare const HeartOutline: import("react").ForwardRefExoticComponent<IconProps & import("react").RefAttributes<SVGSVGElement>>;
+export { HeartOutline };

package/dist/src/assets/icons/Home.d.ts

@@ -0,0 +1,3 @@
+import { type IconProps } from '@/utils';
+declare const Home: import("react").ForwardRefExoticComponent<IconProps & import("react").RefAttributes<SVGSVGElement>>;
+export { Home };

package/dist/src/assets/icons/HomeOutline.d.ts

@@ -0,0 +1,3 @@
+import { type IconProps } from '@/utils';
+declare const HomeOutline: import("react").ForwardRefExoticComponent<IconProps & import("react").RefAttributes<SVGSVGElement>>;
+export { HomeOutline };

package/dist/src/assets/icons/Image.d.ts

@@ -0,0 +1,3 @@
+import { type IconProps } from '@/utils';
+declare const ImageIcon: import("react").ForwardRefExoticComponent<IconProps & import("react").RefAttributes<SVGSVGElement>>;
+export { ImageIcon };

package/dist/src/assets/icons/ImageOutline.d.ts

@@ -0,0 +1,3 @@
+import { type IconProps } from '@/utils';
+declare const ImageOutline: import("react").ForwardRefExoticComponent<IconProps & import("react").RefAttributes<SVGSVGElement>>;
+export { ImageOutline };

package/dist/src/assets/icons/Layers.d.ts

@@ -0,0 +1,3 @@
+import { type IconProps } from '@/utils';
+declare const Layers: import("react").ForwardRefExoticComponent<IconProps & import("react").RefAttributes<SVGSVGElement>>;
+export { Layers };

package/dist/src/assets/icons/LayersOutline.d.ts

@@ -0,0 +1,3 @@
+import { type IconProps } from '@/utils';
+declare const LayersOutline: import("react").ForwardRefExoticComponent<IconProps & import("react").RefAttributes<SVGSVGElement>>;
+export { LayersOutline };

package/dist/src/assets/icons/LogOut.d.ts

@@ -0,0 +1,3 @@
+import { type IconProps } from '@/utils';
+declare const LogOut: import("react").ForwardRefExoticComponent<IconProps & import("react").RefAttributes<SVGSVGElement>>;
+export { LogOut };