@fpkit/acss 0.5.4 → 0.5.6

package/src/components/icons/components/info-solid.tsx

@@ -0,0 +1,40 @@
+import * as React from "react";
+
+import { IconProps } from "../types";
+import Svg from "./svg";
+
+/**
+ * Add Icon component
+ * @param {string} fill - Icon fill color (default: 'currentColor')
+ * @param {string} size - Icon size (default: '24')
+ * @param {IconProps} props - Other icon properties
+ * @returns {JSX.Element} - Rendered component
+ */
+export const InfoSolid = ({
+  fill = "currentColor",
+  size = 24,
+  role = "img",
+  alt = "Add icon",
+  ...props
+}: Pick<
+  IconProps,
+  "strokeColor" | "fill" | "styles" | "size" | "role" | "alt"
+>): JSX.Element => {
+  return (
+    <Svg size={size} role={role} alt={alt} {...props}>
+      <g fill={fill}>
+        <path
+          fill={fill}
+          d="M8,17.06V20h8v-2.94c3.059-1.514,5-4.607,5-8.06c0-4.963-4.038-9-9-9S3,4.037,3,9 C3,12.452,4.941,15.546,8,17.06z M7,9c0-2.757,2.243-5,5-5h1v2h-1c-1.654,0-3,1.346-3,3v1H7V9z"
+        ></path>{" "}
+        <path
+          fill={fill}
+          d="M8,22v1c0,0.553,0.448,1,1,1h6c0.552,0,1-0.447,1-1v-1H8z"
+        ></path>
+      </g>
+    </Svg>
+  );
+};
+
+export default InfoSolid;
+InfoSolid.displayName = "InfoSolid";

package/src/components/icons/components/info.tsx

@@ -0,0 +1,36 @@
+import * as React from "react";
+
+import { IconProps } from "../types";
+import Svg from "./svg";
+
+/**
+ * Add Icon component
+ * @param {string} fill - Icon fill color (default: 'currentColor')
+ * @param {string} size - Icon size (default: '24')
+ * @param {IconProps} props - Other icon properties
+ * @returns {JSX.Element} - Rendered component
+ */
+export const Info = ({
+  fill = "currentColor",
+  size = 24,
+  role = "img",
+  alt = "Info icon",
+  ...props
+}: Pick<
+  IconProps,
+  "strokeColor" | "fill" | "styles" | "size" | "role" | "alt"
+>): JSX.Element => {
+  return (
+    <Svg size={size} role={role} alt={alt} {...props}>
+      <g fill={fill}>
+        <path
+          d="M11 17h2v-6h-2v6zm1-15C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zM11 9h2V7h-2v2z"
+          fill={fill}
+        />
+      </g>
+    </Svg>
+  );
+};
+
+export default Info;
+Info.displayName = "Info";

package/src/components/icons/components/question-solid.tsx

@@ -0,0 +1,36 @@
+import * as React from "react";
+
+import { IconProps } from "../types";
+import Svg from "./svg";
+
+/**
+ * Add Icon component
+ * @param {string} fill - Icon fill color (default: 'currentColor')
+ * @param {string} size - Icon size (default: '24')
+ * @param {IconProps} props - Other icon properties
+ * @returns {JSX.Element} - Rendered component
+ */
+export const QuestionSolid = ({
+  fill = "currentColor",
+  size = 24,
+  role = "img",
+  alt = "Add icon",
+  ...props
+}: Pick<
+  IconProps,
+  "strokeColor" | "fill" | "styles" | "size" | "role" | "alt"
+>): JSX.Element => {
+  return (
+    <Svg size={size} role={role} alt={alt} {...props}>
+      <g fill={fill}>
+        <path
+          d="M12,0C5.383,0,0,5.383,0,12s5.383,12,12,12,12-5.383,12-12S18.617,0,12,0Zm0,19.5c-.69,0-1.25-.56-1.25-1.25s.56-1.25,1.25-1.25,1.25,.56,1.25,1.25-.56,1.25-1.25,1.25Zm2.688-7.198c-1.444,1.224-1.688,1.667-1.688,2.198,0,.553-.447,1-1,1s-1-.447-1-1c0-1.434,.807-2.379,2.395-3.724,.447-.38,1.844-1.72,1.024-3.046-.532-.861-2.517-.984-4.162-.256-.507,.223-1.096-.006-1.319-.511-.223-.505,.006-1.096,.511-1.319,2.33-1.03,5.463-.924,6.672,1.035,1.103,1.784,.554,3.938-1.433,5.622Z"
+          fill={fill}
+        ></path>
+      </g>
+    </Svg>
+  );
+};
+
+export default QuestionSolid;
+QuestionSolid.displayName = "QuestionSolid";

package/src/components/icons/components/success-solid.tsx

@@ -0,0 +1,36 @@
+import * as React from "react";
+
+import { IconProps } from "../types";
+import Svg from "./svg";
+
+/**
+ * Add Icon component
+ * @param {string} fill - Icon fill color (default: 'currentColor')
+ * @param {string} size - Icon size (default: '24')
+ * @param {IconProps} props - Other icon properties
+ * @returns {JSX.Element} - Rendered component
+ */
+export const SuccessSolid = ({
+  fill = "currentColor",
+  size = 24,
+  role = "img",
+  alt = "Add icon",
+  ...props
+}: Pick<
+  IconProps,
+  "strokeColor" | "fill" | "styles" | "size" | "role" | "alt"
+>): JSX.Element => {
+  return (
+    <Svg size={size} role={role} alt={alt} {...props}>
+      <g fill={fill}>
+        <path
+          d="M12,0C5.373,0,0,5.373,0,12s5.373,12,12,12,12-5.373,12-12C23.981,5.381,18.619,.019,12,0Zm7.207,7.707l-9,9c-.195,.195-.451,.293-.707,.293s-.512-.098-.707-.293l-4-4c-.391-.391-.391-1.023,0-1.414s1.023-.391,1.414,0l3.293,3.293L17.793,6.293c.391-.391,1.023-.391,1.414,0s.391,1.023,0,1.414Z"
+          fill={fill}
+        ></path>
+      </g>
+    </Svg>
+  );
+};
+
+export default SuccessSolid;
+SuccessSolid.displayName = "SuccessSolid";

package/src/components/icons/components/svg.tsx

@@ -6,7 +6,6 @@ const defaultStyes = {
   display: 'inline-flex',
   alignItems: 'center',
   width: 'auto',
-  fontSize: 'inherit',
 }
 
 export const Svg = ({

package/src/components/icons/components/warn-solid.tsx

@@ -0,0 +1,36 @@
+import * as React from "react";
+
+import { IconProps } from "../types";
+import Svg from "./svg";
+
+/**
+ * Add Icon component
+ * @param {string} fill - Icon fill color (default: 'currentColor')
+ * @param {string} size - Icon size (default: '24')
+ * @param {IconProps} props - Other icon properties
+ * @returns {JSX.Element} - Rendered component
+ */
+export const WarnSolid = ({
+  fill = "currentColor",
+  size = 24,
+  role = "img",
+  alt = "Add icon",
+  ...props
+}: Pick<
+  IconProps,
+  "strokeColor" | "fill" | "styles" | "size" | "role" | "alt"
+>): JSX.Element => {
+  return (
+    <Svg size={size} role={role} alt={alt} {...props}>
+      <g fill={fill}>
+        <path
+          d="M23.641,18.485L14.732,1.643C13.931,.134,12.059-.44,10.55,.361c-.546,.29-.992,.736-1.282,1.282L.359,18.485c-.793,1.504-.217,3.367,1.288,4.16,.445,.235,.942,.357,1.445,.355H20.908c1.7,.005,3.083-1.369,3.088-3.07,.002-.504-.12-1-.355-1.445Zm-11.641,1.515c-.828,0-1.5-.672-1.5-1.5s.672-1.5,1.5-1.5,1.5,.672,1.5,1.5-.672,1.5-1.5,1.5Zm.53-5h-1.061c-.264,0-.483-.205-.499-.469l-.438-7c-.018-.288,.211-.531,.499-.531h1.936c.288,0,.517,.243,.499,.531l-.438,7c-.016,.264-.235,.469-.499,.469Z"
+          fill={fill}
+        />
+      </g>
+    </Svg>
+  );
+};
+
+export default WarnSolid;
+WarnSolid.displayName = "WarnSolid";

package/src/components/icons/icon.scss

@@ -5,13 +5,11 @@
   --icon-width: max-content;
   --icon-gap: 0.2rem;
   --icon-height: max-content;
-  --icon-fs: inherit;
 
   display: var(--icon-display);
   flex-direction: var(--icon-direction);
   gap: var(--icon-gap);
- align-items: var(--icons-placement);
+  place-items: var(--icons-placement);
   width: var(--icon-width);
   height: var(--icon-height);
-  font-size: var(--icon-fs);
 }

package/src/components/icons/icon.stories.tsx

@@ -1,96 +1,63 @@
-import * as React from 'react'
+import * as React from "react";
 
-import type { Meta, StoryObj } from '@storybook/react'
+import { Meta, StoryObj } from "@storybook/react";
 
-import { Button } from '#components/buttons/button'
-import { Icon } from './icon'
-import Heading  from '#components/heading/heading'
-// import './icon.scss'
- 
+import { Button } from "#components/buttons/button";
+import { Icon } from "./icon";
+import "./icon.scss";
 
 const meta: Meta<typeof Icon> = {
   component: Icon,
-  title: 'FP.React Components/Icons',
+  title: "FP.React Components/Icons",
+  tags: ["rc"],
   args: {
     // styles: Icon.styles,
   },
   decorators: [
     (Story) => (
-      <section style={{ minWidth: '60vw', textAlign: 'center' }}>
+      <section style={{ minWidth: "60vw", textAlign: "center" }}>
         <Story />
       </section>
     ),
   ],
-} as Meta
+} as Meta;
 
-export default meta
-type Story = StoryObj<typeof Icon>
+export default meta;
+type Story = StoryObj<typeof Icon>;
 
 export const IconSet = {
   args: {},
-  render: (...args: any) => {
+  render: () => {
     return (
       <Icon>
         <Icon.Code styles={Icon.Code.styles} />
-        Code Icon{' '}
+        Code Icon{" "}
       </Icon>
-    )
+    );
   },
-}
-
-
-export const IconSizes = {
-  args: {},
-  render: (...args: any) => {
-    return (
-      <Icon>
-        <Icon.ArrowUp size={16} />
-        <Icon.ArrowUp size={24} />
-        <Icon.ArrowUp size={32} />
-        <Icon.ArrowUp size={48} />
-        <Icon.ArrowUp size={64} />
-        <Icon.ArrowUp size={96} />
-        <Icon.ArrowUp size={128} />
-      </Icon>
-    )
-  },
-}
-
-export const HeadingIcon = {
-  args: {},
-  render: (...args: any) => {
-    return (
-      <Heading type="h1">
-        <Icon>
-          <Icon.Code size={32} /> Code Icon
-        </Icon>
-      </Heading>
-    )
-  },
-}
+};
 
 export const IconButton = {
   args: {},
-  render: (...args: any) => {
+  render: () => {
     return (
-   
+      <>
         <Button type="button">
           <Icon>
             <Icon.Code />
           </Icon>
           Click Me
         </Button>
-     
-    )
+      </>
+    );
   },
-}
-
+};
 
 export const Code: Story = {
   args: {
     children: <Icon.Code role="img" aria-label="code icon" />,
   },
-} as Story
+} as Story;
 
 export const Home: Story = {
   args: {
@@ -101,142 +68,184 @@ export const Home: Story = {
       </>
     ),
   },
-} as Story
+} as Story;
 
 export const Add: Story = {
   args: {
     children: <Icon.Add />,
   },
-} as Story
+} as Story;
 
 export const ArrowDown: Story = {
   args: {
     children: <Icon.ArrowDown />,
   },
-} as Story
+} as Story;
 
 export const ArrowLeft: Story = {
   args: {
     children: <Icon.ArrowLeft />,
   },
-} as Story
+} as Story;
 
 export const ArrowRight: Story = {
   args: {
     children: <Icon.ArrowRight />,
   },
-} as Story
+} as Story;
 
 export const ArrowUp: Story = {
   args: {
     children: <Icon.ArrowUp />,
   },
-} as Story
+} as Story;
 
 export const Chat: Story = {
   args: {
     children: <Icon.Chat />,
   },
-} as Story
+} as Story;
 
 export const User: Story = {
   args: {
     children: <Icon.User />,
   },
-} as Story
+} as Story;
 
 export const Left: Story = {
   args: {
     children: <Icon.Left />,
   },
-} as Story
+} as Story;
 
 export const Right: Story = {
   args: {
     children: <Icon.Right />,
   },
-} as Story
+} as Story;
 
 export const Up: Story = {
   args: {
     children: <Icon.Up />,
   },
-} as Story
+} as Story;
 
 export const Down: Story = {
   args: {
     children: <Icon.Down />,
   },
-} as Story
+} as Story;
 
 export const Minus: Story = {
   args: {
     children: <Icon.Minus />,
   },
-} as Story
+} as Story;
 
 export const Remove: Story = {
   args: {
     children: <Icon.Remove />,
   },
-} as Story
+} as Story;
 
 export const Star: Story = {
   args: {
     children: <Icon.Star />,
   },
-} as Story
+} as Story;
 
 export const Copy: Story = {
   args: {
     children: <Icon.Copy />,
   },
-} as Story
+} as Story;
 
 export const Play: Story = {
   args: {
     children: <Icon.Play />,
   },
-} as Story
+} as Story;
 
 export const Pause: Story = {
   args: {
     children: <Icon.Pause />,
   },
-} as Story
+} as Story;
 
 export const Resume: Story = {
   args: {
     children: <Icon.Resume />,
   },
-} as Story
+} as Story;
 
 export const Stop: Story = {
   args: {
     children: <Icon.Stop />,
   },
-} as Story
+} as Story;
 
 export const PlaySolid: Story = {
   args: {
     children: <Icon.PlaySolid />,
   },
-} as Story
+} as Story;
 
 export const PauseSolid: Story = {
   args: {
     children: <Icon.PauseSolid />,
   },
-} as Story
+} as Story;
 
 export const ResumeSolid: Story = {
   args: {
     children: <Icon.ResumeSolid />,
   },
-} as Story
+} as Story;
 
 export const StopSolid: Story = {
   args: {
     children: <Icon.StopSolid />,
   },
-} as Story
+} as Story;
+
+export const Info: Story = {
+  args: {
+    children: <Icon.Info />,
+  },
+} as Story;
+
+export const Alert: Story = {
+  args: {
+    children: <Icon.AlertSolid />,
+  },
+} as Story;
+
+export const InfoSolid: Story = {
+  args: {
+    children: <Icon.InfoSolid />,
+  },
+} as Story;
+
+export const QuestionSolid: Story = {
+  args: {
+    children: <Icon.QuestionSolid />,
+  },
+} as Story;
+
+export const WarnSolid: Story = {
+  args: {
+    children: <Icon.WarnSolid />,
+  },
+} as Story;
+
+export const SuccessSolid: Story = {
+  args: {
+    children: <Icon.SuccessSolid />,
+  },
+} as Story;
+
+export const AlertSquareSolid: Story = {
+  args: {
+    children: <Icon.AlertSquareSolid />,
+  },
+} as Story;

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,26 +46,15 @@ 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>;
 
-/**
- * A component for rendering icons with consistent styling and behavior.
- *
- * @param {object} props - The component props
- * @param {string} [props.id] - Optional unique identifier for the icon
- * @param {string} [props.classes] - CSS classes to apply to the icon
- * @param {React.ReactNode} [props.children] - Child elements to render inside the icon
- * @param {object} [props.styles] - Custom styles to apply to the icon
- * @param {...any} [props.props] - Additional props to spread to the underlying UI component
- * @returns {JSX.Element} The rendered icon component
- */
 export const Icon = ({
   id,
   classes,
@@ -78,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;