@fpkit/acss 2.2.0 → 3.1.0

package/src/components/link/link.scss

@@ -1,4 +1,4 @@
-@use '../../sass/mixins';
+@use "../../sass/mixins";
 
 /**
  * Link Component Styles
@@ -33,7 +33,7 @@ a[href] {
   --link-padding-block: 0;
 
   // Transitions
-  --link-transition: all 0.75s ease-in-out;
+  --link-transition: all 0.35s ease-in-out;
 
   // Focus Indicator (WCAG 2.4.7 - 3:1 contrast minimum)
   --link-focus-color: currentColor;
@@ -66,18 +66,12 @@ a[href] {
   }
 
   // Focus state - WCAG 2.4.7 compliant focus indicator
-  &:focus {
-    outline: var(--link-focus-width) var(--link-focus-style)
-      var(--link-focus-color);
-    outline-offset: var(--link-focus-offset);
-    --link-decoration: underline;
-  }
-
   // Focus-visible for better UX (only show outline on keyboard focus)
   &:focus-visible {
     outline: var(--link-focus-width) var(--link-focus-style)
       var(--link-focus-color);
     outline-offset: var(--link-focus-offset);
+    font-weight: bold;
   }
 
   // Visited and active states
@@ -130,7 +124,7 @@ a[href] {
   }
 
   // Pill variant (rounded corners)
-  &[data-link~='pill'],
+  &[data-link~="pill"],
   &:has(> i) {
     --link-radius: 99rem;
     --link-decoration: none;

package/src/components/link/link.tsx

@@ -176,14 +176,29 @@ export const LinkButton = React.forwardRef<HTMLAnchorElement, LinkProps>(
   ({ href, children, ...props }, ref) => {
     return (
       <Link ref={ref} href={href} {...props}>
-        {children}
+        <i>{children}</i>
       </Link>
     );
   }
 );
 
+Link.displayName = "Link";
 IconLink.displayName = "IconLink";
 LinkButton.displayName = "LinkButton";
-Link.displayName = "Link";
 
-export default Link;
+// Compound component pattern - attach subcomponents to Link with proper typing
+export interface LinkComponent
+  extends React.ForwardRefExoticComponent<
+    LinkProps & React.RefAttributes<HTMLAnchorElement>
+  > {
+  LinkButton: typeof LinkButton;
+  IconLink: typeof IconLink;
+}
+
+// Attach subcomponents to Link using Object.assign for better type inference
+const LinkWithSubcomponents = Object.assign(Link, {
+  LinkButton,
+  IconLink,
+});
+
+export default LinkWithSubcomponents as LinkComponent;

package/src/components/nav/nav.scss

@@ -24,7 +24,7 @@ body > nav,
       &:hover {
         background-color: var(--nav-hover-bg, #e8e8e8);
       }
-      &:hover:where(img, button) {
+      &:hover:has(img, button) {
         background-color: transparent;
       }
     }

package/src/index.scss

@@ -22,4 +22,5 @@
 @use "./components/list/list.scss";
 @use "./components/alert/alert.scss";
 @use "./components/text-to-speech/text-to-speech.scss";
+@use "./components/flexbox/flex.scss";
 @use "./sass/styles";

package/src/index.ts

@@ -23,9 +23,9 @@ export { Input, type InputProps } from "./components/form/inputs";
 export { Icon, type IconProps } from "./components/icons/icon";
 export { Img } from "./components/images/img";
 export type { ImgProps } from "./components/images/img.types";
-export { Link } from "./components/link/link";
+export { default as Link } from "./components/link/link";
 export type { LinkProps } from "./components/link/link.types";
-export { List, type ListItemProps } from "./components/list/list";
+export { default as List, type ListProps, type ListItemProps } from "./components/list/list";
 export { Modal, type ModalProps } from "./components/modal/modal";
 export { Popover, type PopoverProps } from "./components/popover/popover";
 export { RenderTable as TBL, type TableProps } from "./components/tables/table";
@@ -34,6 +34,23 @@ export { TextToSpeech } from "./components/text-to-speech/TextToSpeech";
 
 // Layout components
 export * from "./components/layout/landmarks";
+export { default as Flex } from "./components/flexbox/flex";
+export type {
+  FlexProps,
+  FlexItemProps,
+  FlexSpacerProps,
+  FlexContainerElement,
+  FlexItemElement,
+  FlexDirection,
+  FlexWrap,
+  FlexJustify,
+  FlexAlign,
+  FlexAlignContent,
+  FlexAlignSelf,
+  FlexGap,
+  FlexVariant,
+  ResponsiveFlexProps,
+} from "./components/flexbox/flex.types";
 
 // Navigation components
 export * from "./components/nav/nav";

package/src/patterns/page/page-header.tsx

@@ -1,8 +1,6 @@
-import React, { Component } from 'react'
+import React from 'react'
 import Landmarks from '#components/layout/landmarks'
 import Heading from '#components/heading/heading'
-import { Link } from '#components/link/link'
-import { ComponentProps } from '#types'
 
 export enum HeaderVariants {
   Cover = 'cover',