@fpkit/acss 0.5.5 → 0.5.6

package/src/components/icons/icon.tsx

@@ -9,6 +9,7 @@ import {
   Copy,
   Down,
   Home,
+  Info,
   Left,
   Minus,
   Remove,
@@ -23,11 +24,17 @@ import {
   PlaySolid,
   PauseSolid,
   ResumeSolid,
-  StopSolid
-} from './index'
+  StopSolid,
+  AlertSolid,
+  InfoSolid,
+  QuestionSolid,
+  WarnSolid,
+  SuccessSolid,
+  AlertSquareSolid,
+} from "./index";
 
-import UI from '#components/ui'
-import React from 'react'
+import UI from "#components/ui";
+import React from "react";
 
 /**
  * The default styles object for the Icon component.
@@ -39,14 +46,14 @@ import React from 'react'
  * @property {string} width - Sets width to 'auto' for automatic sizing.
  */
 const defaultStyles = {
-  display: 'inline-flex',
-  direction: 'row',
-  gap: '.2rem',
-  placeItems: 'center',
-  width: 'auto',
-}
+  display: "inline-flex",
+  direction: "row",
+  gap: ".2rem",
+  placeItems: "center",
+  width: "auto",
+};
 
-export type IconProps = React.ComponentProps<typeof UI>
+export type IconProps = React.ComponentProps<typeof UI>;
 
 export const Icon = ({
   id,
@@ -67,34 +74,43 @@ export const Icon = ({
     >
       {children}
     </UI>
-  )
-}
+  );
+};
 
-export default Icon
-Icon.displayName = 'Icon'
-Icon.styles = defaultStyles
-Icon.Add = Add
-Icon.ArrowDown = ArrowDown
-Icon.ArrowLeft = ArrowLeft
-Icon.ArrowRight = ArrowRight
-Icon.ArrowUp = ArrowUp
-Icon.Chat = Chat
-Icon.Code = Code
-Icon.Copy = Copy
-Icon.Home = Home
-Icon.Left = Left
-Icon.Minus = Minus
-Icon.Remove = Remove
-Icon.Right = Right
-Icon.Star = Star
-Icon.Up = Up
-Icon.Down = Down
-Icon.User = User
-Icon.Play = Play
-Icon.Pause = Pause
-Icon.Stop = Stop
-Icon.Resume = Resume
-Icon.ResumeSolid = ResumeSolid
-Icon.PlaySolid = PlaySolid
-Icon.PauseSolid = PauseSolid
-Icon.StopSolid = StopSolid
+export default Icon;
+Icon.displayName = "Icon";
+Icon.Add = Add;
+Icon.ArrowDown = ArrowDown;
+Icon.ArrowLeft = ArrowLeft;
+Icon.ArrowRight = ArrowRight;
+Icon.ArrowUp = ArrowUp;
+Icon.Chat = Chat;
+Icon.Code = Code;
+Icon.Copy = Copy;
+Icon.Down = Down;
+Icon.Home = Home;
+Icon.Info = Info;
+Icon.InfoSolid = InfoSolid;
+Icon.AlertSolid = AlertSolid;
+Icon.Left = Left;
+Icon.Minus = Minus;
+Icon.Pause = Pause;
+Icon.PauseSolid = PauseSolid;
+Icon.Play = Play;
+Icon.PlaySolid = PlaySolid;
+Icon.Remove = Remove;
+Icon.Resume = Resume;
+Icon.ResumeSolid = ResumeSolid;
+Icon.Right = Right;
+Icon.Star = Star;
+Icon.Stop = Stop;
+Icon.StopSolid = StopSolid;
+Icon.Up = Up;
+Icon.User = User;
+Icon.styles = defaultStyles;
+Icon.QuestionSolid = QuestionSolid;
+Icon.WarnSolid = WarnSolid;
+Icon.SuccessSolid = SuccessSolid;
+Icon.AlertSquareSolid = AlertSquareSolid;
+// aliases
+Icon.Close = Icon.Remove;

package/src/components/icons/index.ts

@@ -1,29 +1,36 @@
-export * from './types'
-export * from './components/code'
-export * from './components/home'
-export * from './components/add'
-export * from './components/arrow-left'
-export * from './components/chat'
-export * from './components/arrow-down'
-export * from './components/arrow-left'
-export * from './components/arrow-up'
-export * from './components/arrow-right'
-export * from './components/user'
-export * from './components/right'
-export * from './components/left'
-export * from './components/minus'
-export * from './components/remove'
-export * from './components/copy'
-export * from './components/svg'
-export * from './components/up'
-export * from './components/down'
-export * from './components/star'
-export * from './components/user'
-export * from './components/play'
-export * from './components/pause'
-export * from './components/resume'
-export * from './components/stop'
-export * from './components/stop-solid'
-export * from './components/play-solid'
-export * from './components/pause-solid'
-export * from './components/resume-solid'
+export * from "./types";
+export * from "./components/code";
+export * from "./components/home";
+export * from "./components/add";
+export * from "./components/arrow-left";
+export * from "./components/chat";
+export * from "./components/arrow-down";
+export * from "./components/arrow-left";
+export * from "./components/arrow-up";
+export * from "./components/arrow-right";
+export * from "./components/user";
+export * from "./components/right";
+export * from "./components/left";
+export * from "./components/minus";
+export * from "./components/remove";
+export * from "./components/copy";
+export * from "./components/svg";
+export * from "./components/up";
+export * from "./components/down";
+export * from "./components/star";
+export * from "./components/user";
+export * from "./components/play";
+export * from "./components/pause";
+export * from "./components/resume";
+export * from "./components/stop";
+export * from "./components/stop-solid";
+export * from "./components/play-solid";
+export * from "./components/pause-solid";
+export * from "./components/resume-solid";
+export * from "./components/info";
+export * from "./components/alert-solid";
+export * from "./components/info-solid";
+export * from "./components/question-solid";
+export * from "./components/warn-solid";
+export * from "./components/success-solid";
+export * from "./components/alert-square-solid";

package/src/components/ui.tsx

@@ -1,38 +1,39 @@
-/* eslint-enable react/display-name */
-import React from 'react'
+ 
+/* eslint-disable */
+import React from "react";
 
 type PolymorphicRef<C extends React.ElementType> =
-  React.ComponentPropsWithRef<C>['ref']
+  React.ComponentPropsWithRef<C>["ref"];
 
 type AsProp<C extends React.ElementType> = {
-  as?: C
-}
+  as?: C;
+};
 
-type PropsToOmit<C extends React.ElementType, P> = keyof (AsProp<C> & P)
+type PropsToOmit<C extends React.ElementType, P> = keyof (AsProp<C> & P);
 
 type PolymorphicComponentProp<
   C extends React.ElementType,
   Props = {},
 > = React.PropsWithChildren<Props & AsProp<C>> &
-  Omit<React.ComponentPropsWithoutRef<C>, PropsToOmit<C, Props>>
+  Omit<React.ComponentPropsWithoutRef<C>, PropsToOmit<C, Props>>;
 
 type PolymorphicComponentPropWithRef<
   C extends React.ElementType,
   Props = {},
 > = PolymorphicComponentProp<C, Props> & {
-  ref?: PolymorphicRef<C>
-}
+  ref?: PolymorphicRef<C>;
+};
 
 type FPProps<C extends React.ElementType> = PolymorphicComponentPropWithRef<
   C,
   {
-    renderStyles?: boolean
-    styles?: React.CSSProperties
-    classes?: string
-    id?: string
-    children?: React.ReactNode
+    renderStyles?: boolean;
+    styles?: React.CSSProperties;
+    classes?: string;
+    id?: string;
+    children?: React.ReactNode;
   }
->
+>;
 
 /*
  * FPComponent type definition
@@ -43,25 +44,27 @@ type FPProps<C extends React.ElementType> = PolymorphicComponentPropWithRef<
  * @param props - The component props
  * @returns React component
  */
-type FPComponent = <C extends React.ElementType = 'span'>(
-  props: FPProps<C>,
-) => React.ReactElement | any
+type FPComponent = <C extends React.ElementType = "span">(
+  props: FPProps<C>
+) => React.ReactElement | (any & { displayName?: String });
 
 const FP: FPComponent = React.forwardRef(
   <C extends React.ElementType>(
     { as, styles, classes, children, defaultStyles, ...props }: FPProps<C>,
-    ref?: PolymorphicRef<C>,
+    ref?: PolymorphicRef<C>
   ) => {
-    const Component = as || 'div'
+    const Component = as ?? "div";
 
-    const styleObj: React.CSSProperties = { ...defaultStyles, ...styles }
+    const styleObj: React.CSSProperties = { ...defaultStyles, ...styles };
 
     return (
       <Component ref={ref} style={styleObj} className={classes} {...props}>
         {children}
       </Component>
-    )
-  },
-)
+    );
+  }
+);
 
-export default FP
+export default FP;
+// @ts-expect-error -- React component displayName
+FP.displayName = "FP";

package/src/decorators/instructions.tsx

@@ -0,0 +1,44 @@
+import { StoryFn } from "@storybook/react";
+import UI from "#components/ui";
+
+/**
+ * A decorator that wraps a Storybook story with instructions and an optional title.
+ * This decorator creates a container that displays instructions above the story component.
+ *
+ * @param {React.ReactNode} [instructions] - Optional instructions to display above the story
+ * @param {string} [title] - Optional title for the instructions section. Defaults to "Story Instructions"
+ * @returns {Function} A decorator function that wraps the story component
+ *
+ * @example
+ * ```tsx
+ * export const MyStory = Template.bind({});
+ * MyStory.decorators = [
+ *   WithInstructions(
+ *     <p>Follow these steps to interact with the component...</p>,
+ *     "Usage Instructions"
+ *   )
+ * ];
+ * ```
+ */
+export const WithInstructions =
+  (instructions?: React.ReactNode, title?: string) => (Story: StoryFn) => {
+    return (
+      <UI
+        style={{
+          paddingBlock: "2rem",
+          display: "flex",
+          flexDirection: "column",
+          gap: "3rem",
+          width: "max(320px, 90%)",
+        }}
+      >
+        <Story />
+        <div style={{ paddingInline: "1rem" }}>
+          <h3>{title || "Story Instructions"}</h3>
+          {instructions}
+        </div>
+      </UI>
+    );
+  };
+
+export default WithInstructions;

package/src/hooks/useDialogClickHandler.ts

@@ -0,0 +1,26 @@
+import { useCallback, RefObject } from "react";
+
+export const useDialogClickHandler = (
+  dialogRef: RefObject<HTMLDialogElement>,
+  handleClose: () => void
+) => {
+  const handleClick = useCallback(
+    (e: React.MouseEvent<HTMLDialogElement>) => {
+      const dialogDimensions = dialogRef.current?.getBoundingClientRect();
+      if (dialogDimensions) {
+        const isClickOutside =
+          e.clientY < dialogDimensions.top ||
+          e.clientY > dialogDimensions.bottom ||
+          e.clientX < dialogDimensions.left ||
+          e.clientX > dialogDimensions.right;
+
+        if (isClickOutside) {
+          handleClose();
+        }
+      }
+    },
+    [dialogRef, handleClose]
+  );
+
+  return handleClick;
+};

package/src/index.scss

@@ -1,22 +1,23 @@
-@import "./sass/reset";
-@import "./sass/layout";
-@import "./sass/type";
-@import "./sass/properties";
-@import "./sass/globals";
-@import "./sass/elements";
-@import "./components/buttons/button.scss";
-@import "./components/tag/tag.scss";
-@import "./components/images/img.scss";
-@import "./components/cards/card.scss";
-@import "./components/progress/progress.scss";
-@import "./components/details/details.scss";
-@import "./components/link/link.scss";
-@import "./components/layout/landmarks.scss";
-@import "./components/dialog/dialog.scss";
-@import "./sass/_grid.scss";
-@import "./components/badge/badge.scss";
-@import "./components/nav/nav.scss";
-@import "./components/form/form.scss";
-@import "./components/breadcrumbs/breadcrumb.scss";
-@import "./components/text-to-speech/text-to-speech.scss";
-@import "./sass/styles";
+@use "./sass/reset";
+@use "./sass/layout";
+@use "./sass/type";
+@use "./sass/properties";
+@use "./sass/globals";
+@use "./sass/elements";
+@use "./components/buttons/button.scss";
+@use "./components/tag/tag.scss";
+@use "./components/images/img.scss";
+@use "./components/cards/card.scss";
+@use "./components/progress/progress.scss";
+@use "./components/details/details.scss";
+@use "./components/link/link.scss";
+@use "./components/layout/landmarks.scss";
+@use "./components/dialog/dialog.scss";
+@use "./sass/_grid.scss";
+@use "./components/badge/badge.scss";
+@use "./components/nav/nav.scss";
+@use "./components/form/form.scss";
+@use "./components/breadcrumbs/breadcrumb.scss";
+@use "./components/alert/alert.scss";
+@use "./components/text-to-speech/text-to-speech.scss";
+@use "./sass/styles";

package/src/sass/_globals.scss

@@ -5,6 +5,9 @@
   --TRUE: initial;
   --FALSE: ;
   --fs-weight: 500;
+  --min-w: 20rem;
+  --border-radius: 0.25rem;
+  --padding: 1.5rem;
 }
 
 html {
@@ -46,6 +49,9 @@ body {
 * + ul,
 * + section {
   margin-block-start: 1rem;
+  &:empty {
+    display: none;
+  }
 }
 
 main,
@@ -87,7 +93,7 @@ ol {
   flex-direction: var(--li-direction, column);
   gap: var(--li-gap, 0.2rem);
   flex-wrap: var(--li-wrap, nowrap);
-  padding-inline-start: var(--li-ps, var(--spc-2));
+  padding-inline-start: var(--li-ps, var(--spc-3));
   &[role="list"],
   &[data-list~="unstyled"] {
     list-style: var(--li-style, none);

package/src/styles/alert/alert.css

@@ -0,0 +1,68 @@
+[role=alert] {
+  /* Success colors */
+  --alert-success-bg: #e6f4ea;
+  --alert-success-border: #34a853;
+  --alert-success-text: #1e4620;
+  /* Error colors */
+  --alert-error-bg: #fdeded;
+  --alert-error-border: #d32f2f;
+  --alert-error-text: #5f2120;
+  /* Warning colors */
+  --alert-warning-bg: #fff4e5;
+  --alert-warning-border: #ff9800;
+  --alert-warning-text: #663c00;
+  /* Info colors */
+  --alert-info-bg: #e5f6fd;
+  --alert-info-border: #0288d1;
+  --alert-info-text: #084154;
+  --alert-border: thin solid currentColor;
+  background-color: var(--alert-bg, whitesmoke);
+  border: var(--alert-border, currentColor);
+  color: var(--alert-color, currentColor);
+  padding: var(--alert-padding, var(--spc-4));
+  margin-block-end: var(--alert-margin-block-end);
+  font-size: var(--fs-0);
+  line-height: 1.6;
+  display: flex;
+  flex-direction: row;
+  border-radius: var(--alert-border-radius, var(--border-radius));
+  border: var(--alert-border);
+  gap: var(--alert-gap, var(--spc-4));
+}
+[role=alert] div {
+  margin-block-start: 0;
+  align-items: center;
+}
+[role=alert] .alert-message {
+  flex: 2;
+  margin-block-start: 0;
+}
+[role=alert] .alert-message h3 {
+  margin-block-end: 0;
+}
+[role=alert][data-alert~=info] {
+  --alert-bg: var(--alert-info-bg);
+  --alert-color: var(--alert-info-text);
+  border-color: var(--alert-info-border);
+}
+[role=alert][data-alert~=warning] {
+  --alert-bg: var(--alert-warning-bg);
+  --alert-color: var(--alert-warning-text);
+  border-color: var(--alert-warning-border);
+}
+[role=alert][data-alert~=error] {
+  --alert-bg: var(--alert-error-bg);
+  --alert-color: var(--alert-error-text);
+  border-color: var(--alert-error-border);
+}
+[role=alert][data-alert~=success] {
+  --alert-bg: var(--alert-success-bg);
+  --alert-color: var(--alert-success-text);
+  border-color: var(--alert-success-border);
+}
+[role=alert] button[data-btn~=icon] {
+  --btn-bg: transparent;
+  max-height: fit-content;
+}
+
+/*# sourceMappingURL=alert.css.map */

package/src/styles/alert/alert.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../components/alert/alert.scss"],"names":[],"mappings":"AAAA;AACE;EACA;EACA;EACA;AAEA;EACA;EACA;EACA;AAEA;EACA;EACA;EACA;AAEA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;;AACA;EACE;EACA;;AAGF;EACE;EACA;;AACA;EACE;;AAIJ;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAIA;EACE;EACA","file":"alert.css"}

package/src/styles/badge/badge.css

@@ -1,10 +1,10 @@
 sup:has(> span) {
   --badge-bg: lightgray;
   --badge-color: currentColor;
-  --badge-radius: 0.15rem;
-  --badge-padding: 0.15rem;
+  --badge-radius: 0.5rem;
+  --badge-padding: 0.3rem;
   --badge-v-align: 0.5rem;
-  --badge-fs: clamp(0.4rem, 0.5rem + 0.5vw, 7rem);
+  --badge-fs: var(--fs-1);
   background-color: var(--badge-bg);
   color: var(--badge-color);
   padding: var(--badge-padding);

package/src/styles/details/details.css

@@ -8,7 +8,7 @@ details {
   --details-gap: 0rem;
   --details-px: 1.5rem;
   --details-py: 1rem;
-  --details-radius: 0.5rem;
+  --details-radius: var(--border-radius);
   --summary-cursor: pointer;
   --summary-transitions: all 0.75s ease-in-out;
   --summary-display: flex;
@@ -29,6 +29,19 @@ details {
   overflow: clip;
   border-radius: var(--details-radius);
 }
+details + details {
+  border-radius: 0;
+  border-top: none;
+}
+details:first-of-type {
+  border-radius: var(--details-radius) var(--details-radius) 0 0;
+}
+details:last-of-type {
+  border-radius: 0 0 var(--details-radius) var(--details-radius);
+}
+details:only-of-type {
+  border-radius: var(--details-radius);
+}
 details::marker {
   content: none;
 }

package/src/styles/details/details.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../components/details/details.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAYA;;AAVA;EACE;;AAGF;EACE;EACA;EACA;;AAIF;EACE;;AAEF;EACE;;AAIJ;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;;AACA;EACE;;AAEF;EACE","file":"details.css"}
+{"version":3,"sourceRoot":"","sources":["../../components/details/details.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACE;EACA;;AAGF;EACE;;AAGF;EACE;;AAIF;EACE;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAYA;;AAVA;EACE;;AAGF;EACE;EACA;EACA;;AAIF;EACE;;AAEF;EACE;;AAIJ;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;;AACA;EACE;;AAEF;EACE","file":"details.css"}

package/src/styles/dialog/dialog.css

@@ -1,25 +1,27 @@
 :root {
-  --dialog-min-w: 320px;
-  --dialog-gap: 0.75rem;
+  --dialog-min-w: max(20rem, 80%);
+  --dialog-gap: 0.625rem;
   --dialog-border-color: lightgray;
-  --dialog-border-radius: 0.5rem;
-  --dialog-padding: 0.5rem;
+  --dialog-border-width: thin;
+  --dialog-border-style: solid;
+  --dialog-border-radius: var(--border-radius);
+  --dialog-padding: 1.5rem;
   --dialog-padding-inline: 1rem;
   --dialog-close-color: gray;
   --dialog-button-bg: transparent;
-  --dialog-button-border: transparent 1px solid;
+  --dialog-button-border: transparent thin solid;
   --dialog-button-hover-bg: whitesmoke;
   --dialog-display: flex;
   --dialog-flex-direction: column;
 }
 
 dialog {
-  min-width: var(--dialog-min-w);
+  width: var(--dialog-min-w);
+  min-width: var(--min-w);
   gap: var(--dialog-gap);
-  border-color: var(--dialog-border-color);
+  border: var(--dialog-border-color) var(--dialog-border-width) solid;
   border-radius: var(--dialog-border-radius);
   padding: var(--dialog-padding);
-  padding-inline: var(--dialog-padding-inline);
   padding-block-start: calc(var(--dialog-padding) - 0rem);
 }
 dialog[open] {
@@ -27,13 +29,22 @@ dialog[open] {
   flex-direction: var(--dialog-flex-direction);
   gap: var(--dialog-gap);
 }
+dialog section {
+  width: 100%;
+  display: flex;
+  justify-content: start;
+  gap: var(--dialog-gap);
+  flex-direction: var(--dialog-flex-direction);
+  margin-block-start: 0;
+  --sect-y: 0;
+}
 
 .dialog-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   width: 100%;
-  min-width: 320px;
+  min-width: 100%;
 }
 .dialog-header h3 {
   margin-block-start: 0;
@@ -48,14 +59,18 @@ dialog[open] {
   cursor: pointer;
 }
 .dialog-header button[type=button]:hover, .dialog-header button[type=button]:focus {
-  border-color: currentColor;
+  border-color: var(--dialog-close-color);
   background-color: var(--dialog-button-hover-bg);
 }
 
-.alert-dialog-actions {
+.alert-dialog-actions,
+.dialog-footer {
   display: flex;
-  justify-content: flex-start;
-  gap: 0.5rem;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: var(--dialog-footer-justify, flex-end);
+  gap: var(--dialog-gap);
+  width: 100%;
 }
 
 /*# sourceMappingURL=dialog.css.map */

package/src/styles/dialog/dialog.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../components/dialog/dialog.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;;AAEF;EACE;;AAEF;EACE;EACA;EACA;;AACA;EAEE;EACA;;;AAKN;EACE;EACA;EACA","file":"dialog.css"}
+{"version":3,"sourceRoot":"","sources":["../../components/dialog/dialog.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;;AAEF;EACE;;AAEF;EACE;EACA;EACA;;AACA;EAEE;EACA;;;AAKN;AAAA;EAEE;EACA;EACA;EACA;EACA;EACA","file":"dialog.css"}