@arctura/atomics 0.0.1

package/dist/src/progress-stepper/Step.d.ts

@@ -0,0 +1,93 @@
+import type { HTMLAttributes, FC, MouseEvent, ReactNode, Ref } from 'react';
+import type { IconDefinition } from '@fortawesome/free-solid-svg-icons';
+import type { FabClasses } from '@/src/buttons';
+import type { NodeClasses } from '@/src/progress-stepper/Node';
+/**
+ * Class name overrides for the `Step` component parts.
+ */
+interface StepClasses {
+    /** Classes applied to the description wrapper. */
+    descriptionContainer?: string;
+    /** Classes applied to the step body content. */
+    body?: string;
+    /** Class overrides passed to the node or fab used for the step marker. */
+    node?: FabClasses | NodeClasses;
+    /** Classes applied to the node container wrapper. */
+    nodeContainer?: string;
+    /** Classes applied to the root step container. */
+    root?: string;
+    /** Classes applied to the step title. */
+    title?: string;
+}
+/**
+ * @description Allowed color variants for the step/node components.
+ * - `primary`: Uses the primary color from the theme.
+ * - `secondary`: Uses the secondary color from the theme.
+ * - `accent`: Uses the accent color from the theme.
+ * - `error`: Uses the error color from the theme.
+ * - `info`: Uses the info color from the theme.
+ * - `warning`: Uses the warning color from the theme.
+ */
+type StepColor = 'primary' | 'secondary' | 'accent' | 'error' | 'info' | 'warning';
+/**
+ * @interface StepProps
+ * @extends Omit<HTMLAttributes<HTMLDivElement>, 'onClick'>
+ * @description Props accepted by the `Step` component.
+ */
+interface StepProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onClick' | 'className'> {
+    /** Whether the step is currently active (shows expanded content). */
+    active?: boolean;
+    /** Optional class overrides for the step container, node, and content. */
+    classes?: StepClasses;
+    /** Color variant for the step node. */
+    color?: StepColor;
+    /** Whether the step is marked as completed. */
+    completed?: boolean;
+    /** Optional descriptive content displayed when the step is active. */
+    description?: ReactNode;
+    /** Optional FontAwesome icon rendered inside the node. */
+    icon?: IconDefinition;
+    /** Zero-based index assigned by the parent stepper. */
+    index?: number;
+    /** Optional label displayed when step is active. */
+    label?: string;
+    /** When true, stepper enforces linear progression; when false the step is interactive. */
+    linear?: boolean;
+    /** Click handler for interactive (non-linear) steps. */
+    onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+    /** Layout orientation for the step content. */
+    orientation?: 'horizontal' | 'vertical';
+    /** Ref forwarded to the step container element. */
+    ref?: Ref<HTMLDivElement>;
+    /** Title displayed when the step is active. */
+    title?: string;
+}
+/**
+ * @component Step
+ * @description
+ * Renders a single step node used by `ProgressStepper`.
+ * - When `linear` is `true`, renders a static `Node`; when `false`, renders an interactive `Fab`.
+ * - When `active` is `true`, the step displays its `title` and `description`.
+ *
+ * @param {StepProps} props - Props for configuring appearance and behavior.
+ * @returns {JSX.Element} The rendered step element.
+ *
+ * @example
+ * ```tsx
+ * import { Step } from '@/src';
+ *
+ * const MyStep = () => (
+ *  <Step
+ *   active={true}
+ *   color="primary"
+ *   title="Step Title"
+ *   description="Detailed description of the step content."
+ *   icon={faMugHot}
+ *  />
+ * );
+ * ```
+ */
+declare const Step: FC<StepProps>;
+export { Step };
+export type { StepClasses };
+//# sourceMappingURL=Step.d.ts.map

package/dist/src/progress-stepper/Step.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Step.d.ts","sourceRoot":"","sources":["../../../src/progress-stepper/Step.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAEV,cAAc,EACd,EAAE,EACF,UAAU,EACV,SAAS,EAET,GAAG,EACJ,MAAM,OAAO,CAAC;AAGf,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAGxE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAEhD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAI/D;;GAEG;AACH,UAAU,WAAW;IACnB,kDAAkD;IAClD,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,gDAAgD;IAChD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,0EAA0E;IAC1E,IAAI,CAAC,EAAE,UAAU,GAAG,WAAW,CAAC;IAChC,qDAAqD;IACrD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,kDAAkD;IAClD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,yCAAyC;IACzC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;;;;;;;GAQG;AACH,KAAK,SAAS,GAAG,SAAS,GAAG,WAAW,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,CAAC;AAEnF;;;;GAIG;AACH,UAAU,SAAU,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,SAAS,GAAG,WAAW,CAAC;IACvF,qEAAqE;IACrE,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,0EAA0E;IAC1E,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,uCAAuC;IACvC,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,+CAA+C;IAC/C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,sEAAsE;IACtE,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,0DAA0D;IAC1D,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,uDAAuD;IACvD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oDAAoD;IACpD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0FAA0F;IAC1F,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,wDAAwD;IACxD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IACzD,+CAA+C;IAC/C,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,mDAAmD;IACnD,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC1B,+CAA+C;IAC/C,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAqCD;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,QAAA,MAAM,IAAI,EAAE,EAAE,CAAC,SAAS,CA8FvB,CAAC;AAIF,OAAO,EAAE,IAAI,EAAE,CAAC;AAChB,YAAY,EAAE,WAAW,EAAE,CAAC"}

package/dist/src/progress-stepper/index.d.ts

@@ -0,0 +1,10 @@
+import { Connector } from './Connector';
+import type { ConnectorClasses } from './Connector';
+import { ProgressStepper } from './ProgressStepper';
+import type { ProgressStepperClasses } from './ProgressStepper';
+import { Step } from './Step';
+import type { StepClasses } from './Step';
+import type { StepType } from './ProgressStepper';
+export { Connector, ProgressStepper, Step };
+export type { ConnectorClasses, ProgressStepperClasses, StepClasses, StepType };
+//# sourceMappingURL=index.d.ts.map

package/dist/src/progress-stepper/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/progress-stepper/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AACpD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,mBAAmB,CAAC;AAChE,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAC;AAC1C,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAElD,OAAO,EAAE,SAAS,EAAE,eAAe,EAAE,IAAI,EAAE,CAAC;AAC5C,YAAY,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,WAAW,EAAE,QAAQ,EAAE,CAAC"}

package/dist/src/select/Select.d.ts

@@ -0,0 +1,98 @@
+import type { FC, HTMLAttributes, MouseEvent, Ref } from 'react';
+import type { IconDefinition } from '@fortawesome/free-solid-svg-icons';
+/** Option data consumed by the Select component. */
+interface Option {
+    /** Value used for selection state and form submission. */
+    value: string;
+    /** Visible label shown in the dropdown. */
+    label: string;
+    /** Optional icon rendered alongside the label. */
+    icon?: IconDefinition;
+}
+/** Optional class name hooks for the Select component internals. */
+interface SelectClasses {
+    /** Class names applied to the outer container. */
+    container?: string;
+    /** Class names applied to the chevron icon. */
+    icon?: string;
+    /** Class names applied to the icon wrapper. */
+    iconContainer?: string;
+    /** Class names applied to the label above the control. */
+    label?: string;
+    /** Class names applied to the placeholder value. */
+    placeholder?: string;
+    /** Class names applied to the option row and option icon. */
+    option?: {
+        root?: string;
+        icon?: string;
+    };
+    /** Class names applied to the dropdown list container. */
+    optionsContainer?: string;
+    /** Class names applied to the root wrapper. */
+    root?: string;
+}
+/** Props for the Select component. */
+interface SelectProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'className'> {
+    /** Class name hooks for the internal elements. */
+    classes?: SelectClasses;
+    /** Initial value used when the component is uncontrolled. */
+    defaultValue?: string;
+    /** Whether the select is disabled. */
+    disabled?: boolean;
+    /** Label rendered above the select trigger. */
+    label?: string;
+    /** Name applied to the hidden input for form integration. */
+    name?: string;
+    /** Callback fired when an option is selected. */
+    onChange?: (event: MouseEvent<HTMLLIElement>) => void;
+    /** Available options to display in the dropdown. */
+    options?: Option[];
+    /** Placeholder shown when no selection is active. */
+    placeholder?: string;
+    /** Ref forwarded to the root wrapper. */
+    ref?: Ref<HTMLDivElement>;
+    /** Keyboard tab index for the select trigger and options. */
+    tabIndex?: number;
+    /** Visual treatment for the dropdown. */
+    variant?: 'outline' | 'filled';
+    /** Controlled selected value. */
+    value?: string;
+}
+/**
+ * Select dropdown component.
+ *
+ * Renders a styled dropdown menu for selecting an option from a list.
+ * Supports both controlled and uncontrolled usage, keyboard navigation, and optional icons for options.
+ *
+ * - Controlled: Provide `value` and `onChange` props to manage selection state externally.
+ * - Uncontrolled: Provide `defaultValue` for initial selection and let the component manage state internally.
+ *
+ * @param {SelectProps} props - The props for the Select component.
+ * @returns {JSX.Element} The rendered select dropdown.
+ *
+ * @example
+ * ```tsx
+ * import { Select } from '@/src/select/Select';
+ *
+ * function App() {
+ *  const options = [
+ *   { value: 'option1', label: 'Option 1' },
+ *   { value: 'option2', label: 'Option 2', icon: faStar },
+ * ];
+ *
+ * return (
+ *   <Select
+ *    label="Choose an option"
+ *    options={options}
+ *    placeholder="Select an option"
+ * />
+ * );
+ * ```
+ *
+ * @see Option
+ * @see SelectProps
+ */
+declare const Select: FC<SelectProps>;
+export { Select };
+export type { SelectClasses };
+//# sourceMappingURL=Select.d.ts.map

package/dist/src/select/Select.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/select/Select.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAE,cAAc,EAAE,UAAU,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAIjE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAMxE,oDAAoD;AACpD,UAAU,MAAM;IACd,0DAA0D;IAC1D,KAAK,EAAE,MAAM,CAAC;IACd,2CAA2C;IAC3C,KAAK,EAAE,MAAM,CAAC;IACd,kDAAkD;IAClD,IAAI,CAAC,EAAE,cAAc,CAAC;CACvB;AAED,oEAAoE;AACpE,UAAU,aAAa;IACrB,kDAAkD;IAClD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,+CAA+C;IAC/C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,+CAA+C;IAC/C,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,0DAA0D;IAC1D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oDAAoD;IACpD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,6DAA6D;IAC7D,MAAM,CAAC,EAAE;QAAE,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC1C,0DAA0D;IAC1D,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,+CAA+C;IAC/C,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,sCAAsC;AACtC,UAAU,WAAY,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,GAAG,WAAW,CAAC;IAC1F,kDAAkD;IAClD,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,6DAA6D;IAC7D,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,sCAAsC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+CAA+C;IAC/C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6DAA6D;IAC7D,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,iDAAiD;IACjD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,aAAa,CAAC,KAAK,IAAI,CAAC;IACtD,oDAAoD;IACpD,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,qDAAqD;IACrD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,yCAAyC;IACzC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC1B,6DAA6D;IAC7D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,yCAAyC;IACzC,OAAO,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC/B,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,QAAA,MAAM,MAAM,EAAE,EAAE,CAAC,WAAW,CA6J3B,CAAC;AAIF,OAAO,EAAE,MAAM,EAAE,CAAC;AAClB,YAAY,EAAE,aAAa,EAAE,CAAC"}

package/dist/src/select/index.d.ts

@@ -0,0 +1,5 @@
+import { Select } from './Select';
+import type { SelectClasses } from './Select';
+export { Select };
+export type { SelectClasses };
+//# sourceMappingURL=index.d.ts.map

package/dist/src/select/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/select/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAE9C,OAAO,EAAE,MAAM,EAAE,CAAC;AAClB,YAAY,EAAE,aAAa,EAAE,CAAC"}

package/dist/src/typography/Link.d.ts

@@ -0,0 +1,86 @@
+import type { AnchorHTMLAttributes, FC, MouseEvent, ReactNode, Ref } from 'react';
+import type { TypographyColor, TypographyProps as TypographyComponentProps, TypographyVariant } from '@/src/typography/Typography';
+/**
+ * Optional class name overrides for the anchor wrapper and Typography content.
+ */
+interface LinkClasses {
+    /** Extra classes applied to the outer anchor element. */
+    anchor?: string;
+    /** Extra classes applied to the inner Typography element. */
+    typography?: string;
+}
+/**
+ * Typography props allowed through Link after excluding anchor-specific fields.
+ */
+type TypographyProps = Omit<TypographyComponentProps, 'className' | 'color' | 'ref' | 'variant' | 'target' | 'href' | 'onClick'>;
+/**
+ * Props for the Link component, combining anchor behavior with Typography styling.
+ */
+interface LinkProps extends TypographyProps {
+    /** Additional props forwarded to the anchor element. */
+    anchorProps?: AnchorHTMLAttributes<HTMLAnchorElement>;
+    /** Ref for the outer anchor element. */
+    anchorRef?: Ref<HTMLAnchorElement>;
+    /** Content rendered inside the link. */
+    children?: ReactNode;
+    /** Class overrides for the anchor and Typography elements. */
+    classes?: LinkClasses;
+    /** Typography color variant applied to the inner text. */
+    color?: TypographyColor;
+    /** Destination URL for the link. */
+    href?: string;
+    /** Click handler attached to the anchor element. */
+    onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
+    /** Target browsing context for the anchor element. */
+    target?: string;
+    /** Typography variant used to choose the rendered text style. */
+    variant?: TypographyVariant;
+}
+/**
+ * Link component that pairs a native anchor with the Typography system.
+ *
+ * Use this when you want link behavior, theme-aware text styling, and the
+ * same variant handling used throughout the typography atoms. The component
+ * keeps anchor concerns on the outer element and typography concerns on the
+ * inner text, so you can style each layer independently.
+ *
+ * @example
+ * ```tsx
+ * import { Link } from '@/src/typography';
+ *
+ * export function ContactLinks() {
+ *   return (
+ *     <div className="mg:flex mg:flex-col mg:gap-3">
+ *       <Link
+ *         href="mailto:hello@example.com"
+ *         variant="h3"
+ *         color="primary"
+ *         classes={{
+ *           anchor: 'mg:inline-flex',
+ *           typography: 'mg:font-semibold',
+ *         }}
+ *       >
+ *         hello@example.com
+ *       </Link>
+ *
+ *       <Link
+ *         href="https://example.com/projects"
+ *         target="_blank"
+ *         rel="noreferrer"
+ *         variant="base"
+ *         color="secondary"
+ *         anchorProps={{
+ *           'aria-label': 'Open projects page in a new tab',
+ *         }}
+ *       >
+ *         View projects
+ *       </Link>
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+declare const Link: FC<LinkProps>;
+export { Link };
+export type { LinkClasses };
+//# sourceMappingURL=Link.d.ts.map

package/dist/src/typography/Link.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../../../src/typography/Link.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,EAAE,EAAE,UAAU,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAElF,OAAO,KAAK,EAGV,eAAe,EACf,eAAe,IAAI,wBAAwB,EAC3C,iBAAiB,EAClB,MAAM,6BAA6B,CAAC;AAarC;;GAEG;AACH,UAAU,WAAW;IACnB,yDAAyD;IACzD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,6DAA6D;IAC7D,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED;;GAEG;AACH,KAAK,eAAe,GAAG,IAAI,CACzB,wBAAwB,EACxB,WAAW,GAAG,OAAO,GAAG,KAAK,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,GAAG,SAAS,CAC1E,CAAC;AAEF;;GAEG;AACH,UAAU,SAAU,SAAQ,eAAe;IACzC,wDAAwD;IACxD,WAAW,CAAC,EAAE,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;IACtD,wCAAwC;IACxC,SAAS,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC,wCAAwC;IACxC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,8DAA8D;IAC9D,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,0DAA0D;IAC1D,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,oCAAoC;IACpC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,oDAAoD;IACpD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IACzD,sDAAsD;IACtD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,iEAAiE;IACjE,OAAO,CAAC,EAAE,iBAAiB,CAAC;CAC7B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2CG;AACH,QAAA,MAAM,IAAI,EAAE,EAAE,CAAC,SAAS,CAgEvB,CAAC;AAIF,OAAO,EAAE,IAAI,EAAE,CAAC;AAChB,YAAY,EAAE,WAAW,EAAE,CAAC"}

package/dist/src/typography/Typography.d.ts

@@ -0,0 +1,148 @@
+import type { HTMLAttributes, JSX, ReactNode, Ref } from 'react';
+/**
+ * Number of lines to clamp text to.
+ * Used for truncating text with CSS line clamping utilities.
+ * Valid values: 1 to 10.
+ */
+type ClampLine = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;
+/**
+ * TypographyColor options for Typography text.
+ * Determines the text color utility class applied.
+ *
+ * - 'black': Solid black color
+ * - 'primary': Main foreground color
+ * - 'secondary': Secondary color
+ * - 'accent': Accent color
+ * - 'subtle': Subtle/less prominent color
+ * - 'inverse': For use on dark backgrounds
+ * - 'white': Solid white color
+ */
+type TypographyColor = 'active' | 'black' | 'primary' | 'secondary' | 'accent' | 'subtle' | 'inverse' | 'white';
+/**
+ * Heading tag variants for Typography.
+ * Determines which HTML heading element is rendered.
+ * Valid values: 'h1' through 'h6'.
+ */
+type HeadingVariant = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+/**
+ * List of all valid heading variants for Typography.
+ * Used internally for type checks and rendering.
+ * @see HeadingVariant
+ */
+declare const headingVariants: HeadingVariant[];
+/**
+ * Paragraph style variants for Typography.
+ * Determines the text size and style for paragraphs and spans.
+ * Valid values: 'base', 'small', 'large'.
+ */
+type ParagraphVariant = 'base' | 'small' | 'large';
+/**
+ * Combined heading and paragraph variants supported by Typography.
+ * Used internally for responsive text sizing and variant lookups.
+ */
+type TypographyVariant = HeadingVariant | ParagraphVariant;
+/**
+ * List of all valid paragraph variants for Typography.
+ * Used internally for type checks and rendering.
+ * @see ParagraphVariant
+ */
+declare const paragraphVariants: ParagraphVariant[];
+/**
+ * Common base props for Typography components.
+ */
+interface BaseProps {
+    /** Text alignment. */
+    align?: 'left' | 'center' | 'right' | 'justify';
+    /** Whether to use bold font weight. */
+    bold?: boolean;
+    /** Additional CSS classes to apply. */
+    className?: string;
+    /** Text color variant. */
+    color?: TypographyColor;
+    /** Number of lines to clamp, truncating overflow. */
+    clamp?: ClampLine;
+    /** Content to render inside the component. */
+    children?: ReactNode;
+    /** Removes the default vertical padding when true. */
+    removePadding?: boolean;
+    /** Renders the content as a `span` instead of a heading or paragraph. */
+    span?: boolean;
+    /** Truncates text with an ellipsis when it overflows. */
+    truncate?: boolean;
+    /** Underlines the text. */
+    underline?: boolean;
+}
+/**
+ * Props for heading elements (h1-h6) in Typography.
+ */
+interface HeadingProps extends HTMLAttributes<HTMLHeadingElement> {
+    /** React ref for the heading element. */
+    ref?: Ref<HTMLHeadingElement>;
+    /** Specifies which heading tag to render (`h1`-`h6`). */
+    variant?: HeadingVariant;
+}
+/**
+ * Props for paragraph elements in Typography.
+ */
+interface ParagraphProps extends HTMLAttributes<HTMLParagraphElement> {
+    /** React ref for the paragraph element. */
+    ref?: Ref<HTMLParagraphElement>;
+    /** Paragraph style variant (`base`, `small`, or `large`). */
+    variant?: ParagraphVariant;
+}
+/**
+ * Props for span elements in Typography.
+ */
+interface SpanProps extends HTMLAttributes<HTMLSpanElement> {
+    /** React ref for the span element. */
+    ref?: Ref<HTMLSpanElement>;
+    /** Span style variant (`base`, `small`, or `large`). */
+    variant?: ParagraphVariant;
+}
+/**
+ * All valid props for the Typography component.
+ *
+ * Combines base props with props for headings, paragraphs, and spans.
+ *
+ * @see BaseProps
+ * @see HeadingProps
+ * @see ParagraphProps
+ * @see SpanProps
+ */
+type TypographyProps = BaseProps & (HeadingProps | ParagraphProps | SpanProps);
+/**
+ * Typography component for rendering headings, paragraphs, or spans with flexible styling.
+ *
+ * Renders the appropriate HTML element (h1-h6, p, or span) based on the `variant` and `span` props.
+ * Applies utility classes for alignment, color, font weight, truncation, underline, and line clamping.
+ *
+ * @param {TypographyProps} props - Props for controlling typography style and element type.
+ * @returns {JSX.Element} The rendered typography element.
+ *
+ * @example
+ * ```tsx
+ * import { Typography } from './Typography';
+ *
+ * function MyComponent() {
+ *  return (
+ *    <div>
+ *       <Typography variant="h1" color="primary" bold>
+ *         Heading 1
+ *       </Typography>
+ *       <Typography variant="base" color="secondary" clamp={3}>
+ *         This is a paragraph that will be clamped to 3 lines if it exceeds the limit.
+ *       </Typography>
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+declare function Typography(props: HeadingProps & BaseProps): JSX.Element;
+declare function Typography(props: ParagraphProps & BaseProps): JSX.Element;
+declare function Typography(props: SpanProps & BaseProps): JSX.Element;
+declare namespace Typography {
+    var displayName: string;
+}
+export { headingVariants, paragraphVariants, Typography };
+export type { HeadingVariant, ParagraphVariant, TypographyColor, TypographyProps, TypographyVariant, };
+//# sourceMappingURL=Typography.d.ts.map

package/dist/src/typography/Typography.d.ts.map

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

package/dist/src/typography/index.d.ts

@@ -0,0 +1,7 @@
+import { Typography } from './Typography';
+import type { HeadingVariant, ParagraphVariant, TypographyVariant, TypographyColor } from './Typography';
+import { Link } from './Link';
+import type { LinkClasses } from './Link';
+export { Link, Typography };
+export type { HeadingVariant, LinkClasses, ParagraphVariant, TypographyColor, TypographyVariant };
+//# sourceMappingURL=index.d.ts.map

package/dist/src/typography/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/typography/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,KAAK,EACV,cAAc,EACd,gBAAgB,EAChB,iBAAiB,EACjB,eAAe,EAChB,MAAM,cAAc,CAAC;AACtB,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAC;AAE1C,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC;AAC5B,YAAY,EAAE,cAAc,EAAE,WAAW,EAAE,gBAAgB,EAAE,eAAe,EAAE,iBAAiB,EAAE,CAAC"}

package/dist/src/utils/capitalize.d.ts

@@ -0,0 +1,3 @@
+declare function capitalize(value: string): string;
+export { capitalize };
+//# sourceMappingURL=capitalize.d.ts.map

package/dist/src/utils/capitalize.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"capitalize.d.ts","sourceRoot":"","sources":["../../../src/utils/capitalize.ts"],"names":[],"mappings":"AAAA,iBAAS,UAAU,CAAC,KAAK,EAAE,MAAM,UAIhC;AAED,OAAO,EAAE,UAAU,EAAE,CAAC"}

package/dist/src/utils/index.d.ts

@@ -0,0 +1,2 @@
+export { capitalize } from './capitalize';
+//# sourceMappingURL=index.d.ts.map

package/dist/src/utils/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC"}

package/dist/useBreakpoints-CXOalIdM.js

@@ -0,0 +1,37 @@
+import { useSyncExternalStore as e } from "react";
+//#endregion
+//#region lib/useBreakpoints.ts
+var t = { theme: { breakpoints: {
+	xs: "30rem",
+	sm: "40rem",
+	md: "48rem",
+	lg: "64rem",
+	xl: "80rem",
+	"2xl": "96rem"
+} } }.theme.breakpoints, n = Object.keys(t), r = n[0];
+function i(e) {
+	return Number(e.replace("rem", "")) * Number.parseFloat(getComputedStyle(document.documentElement).fontSize);
+}
+function a() {
+	if (typeof window > "u") return r;
+	let e = r;
+	return Object.entries(t).forEach(([t, n]) => {
+		window.innerWidth >= i(n) && (e = t);
+	}), e;
+}
+function o(e) {
+	return window.addEventListener("resize", e), window.addEventListener("orientationchange", e), window.visualViewport?.addEventListener("resize", e), () => {
+		window.removeEventListener("resize", e), window.removeEventListener("orientationchange", e), window.visualViewport?.removeEventListener("resize", e);
+	};
+}
+function s() {
+	let i = e(o, a, () => r), s = n.indexOf(i);
+	return {
+		breakpoint: i,
+		breakpoints: t,
+		isAtLeast: (e) => s >= n.indexOf(e),
+		isBelow: (e) => s < n.indexOf(e)
+	};
+}
+//#endregion
+export { s as t };

package/dist/useBreakpoints-nd-Blu7O.cjs

@@ -0,0 +1 @@
+let e=require("react");var t={theme:{breakpoints:{xs:`30rem`,sm:`40rem`,md:`48rem`,lg:`64rem`,xl:`80rem`,"2xl":`96rem`}}}.theme.breakpoints,n=Object.keys(t),r=n[0];function i(e){return Number(e.replace(`rem`,``))*Number.parseFloat(getComputedStyle(document.documentElement).fontSize)}function a(){if(typeof window>`u`)return r;let e=r;return Object.entries(t).forEach(([t,n])=>{window.innerWidth>=i(n)&&(e=t)}),e}function o(e){return window.addEventListener(`resize`,e),window.addEventListener(`orientationchange`,e),window.visualViewport?.addEventListener(`resize`,e),()=>{window.removeEventListener(`resize`,e),window.removeEventListener(`orientationchange`,e),window.visualViewport?.removeEventListener(`resize`,e)}}function s(){let i=(0,e.useSyncExternalStore)(o,a,()=>r),s=n.indexOf(i);return{breakpoint:i,breakpoints:t,isAtLeast:e=>s>=n.indexOf(e),isBelow:e=>s<n.indexOf(e)}}Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return s}});

package/package.json

@@ -0,0 +1,67 @@
+{
+  "name": "@arctura/atomics",
+  "version": "0.0.1",
+  "type": "module",
+  "packageManager": "yarn@4.11.0",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "repository": {
+    "url": "https://github.com/marcomg-byte/arctura"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./hooks": {
+      "types": "./dist/lib/hooks.d.ts",
+      "import": "./dist/hooks.js",
+      "require": "./dist/hooks.cjs"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "build": "vite build && tsc -p tsconfig.json",
+    "clean": "rimraf dist",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "test": "vitest run",
+    "test:cov": "vitest run --coverage",
+    "test:debug": "vitest --inspect-brk --no-file-parallelism",
+    "test:ui": "vitest --ui",
+    "test:watch": "vitest watch",
+    "typecheck": "tsc -p tsconfig.eslint.json"
+  },
+  "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^7.1.0",
+    "@fortawesome/free-solid-svg-icons": "^7.1.0",
+    "@fortawesome/react-fontawesome": "^3.1.0",
+    "classnames": "^2.5.1",
+    "embla-carousel": "^8.6.0",
+    "embla-carousel-fade": "^8.6.0",
+    "embla-carousel-react": "^8.6.0",
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7",
+    "tailwind-merge": "^3.4.0"
+  },
+  "devDependencies": {
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/react": "^16.3.2",
+    "@types/node": "^25.9.3",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19",
+    "@vitejs/plugin-react": "^6.0.2",
+    "@vitest/coverage-v8": "4.1.8",
+    "eslint": "^9.39.1",
+    "jsdom": "^29.1.1",
+    "rimraf": "^6.1.3",
+    "typescript": "^6.0.3",
+    "vite": "^8.0.12",
+    "vitest": "4.1.8"
+  }
+}