@fpkit/acss 0.4.4

package/src/components/icons/components/home.tsx

@@ -0,0 +1,57 @@
+import { IconProps } from '../types'
+import React from 'react'
+import Svg from './svg'
+
+const defaultStyles = {
+  ...Svg.styles,
+  fill: 'currentColor',
+  stroke: 'none',
+}
+
+/**
+ * Renders a home icon.
+ *
+ * @param {string} strokeColor - The color of the icon's stroke.
+ * @param {string} fill - The color of the icon's fill.
+ * @param {string} size - The size of the icon.
+ * @param {string} viewBox - The viewBox of the icon.
+ * @param {string} name - The name of the icon.
+ * @param {Object} styles - The styles of the icon.
+ * @param {Object} props - The props of the icon.
+ * @returns {JSX.Element} - A home icon.
+ */
+export const Home = ({
+  strokeColor = 'currentColor',
+  fill = 'none',
+  size = 16,
+  styles = defaultStyles,
+  role = 'img',
+  alt = 'Home icon',
+  ...props
+}: Pick<
+  IconProps,
+  'strokeColor' | 'fill' | 'styles' | 'size' | 'role' | 'alt'
+>) => {
+  return (
+    <Svg size={size} styles={styles} role={role} alt={alt} {...props}>
+      <g
+        fill={fill}
+        stroke={strokeColor}
+        strokeLinecap="square"
+        strokeLinejoin="miter"
+        strokeMiterlimit="10"
+        strokeWidth="2"
+      >
+        <polygon
+          fill="none"
+          points="12 2 2 10 2 23 9 23 9 16 15 16 15 23 22 23 22 10 12 2"
+          stroke={strokeColor}
+        />
+      </g>
+    </Svg>
+  )
+}
+
+export default Home
+Home.displayName = 'Home'
+Home.styles = defaultStyles

package/src/components/icons/components/left.tsx

@@ -0,0 +1,43 @@
+import { IconProps } from '../types'
+import React from 'react'
+import Svg from './svg'
+
+const defaultStyles = {
+  ...Svg.styles,
+  fill: 'currentColor',
+}
+
+/**
+ * Left arrow icon
+ * @param {string} fill - Icon fill color (default: 'currentColor')
+ * @param {string} size - Icon size (default: '24')
+ * @param {React.CSSProperties} styles - Icon styles (default: {})
+ * @param {IconProps} props - Any other valid props for an SVG element
+ * @returns {JSX.Element} - Rendered icon component
+ */
+export const Left = ({
+  fill = 'currentColor',
+  size = 16,
+  styles,
+  role = 'img',
+  alt = 'Left arrow icon',
+  ...props
+}: Pick<
+  IconProps,
+  'strokeColor' | 'fill' | 'styles' | 'size' | 'role' | 'alt'
+>) => {
+  return (
+    <Svg size={size} styles={styles} alt={alt} role={role} {...props}>
+      <g fill={fill}>
+        <path
+          d="M17,23a1,1,0,0,1-.707-.293l-10-10a1,1,0,0,1,0-1.414l10-10a1,1,0,0,1,1.414,1.414L8.414,12l9.293,9.293A1,1,0,0,1,17,23Z"
+          fill={fill}
+        />
+      </g>
+    </Svg>
+  )
+}
+
+export default Left
+Left.displayName = 'Left'
+Left.styles = defaultStyles

package/src/components/icons/components/minus.tsx

@@ -0,0 +1,42 @@
+import { IconProps } from '../types'
+import React from 'react'
+import Svg from './svg'
+
+const defaultStyles = {
+  fill: 'currentColor',
+}
+
+/**
+ * Minus icon component
+ * @param {string} size - Icon size (default: 24)
+ * @param {string} fill - Icon fill color (default: 'currentColor')
+ * @param {object} styles - Inline styles for the SVG element
+ * @param {object} props - Any other SVG attributes
+ * @returns {JSX.Element} - Rendered Minus icon component
+ */
+export const Minus = ({
+  size = 24,
+  fill = 'currentColor',
+  styles,
+  role = 'img',
+  alt = 'Minus icon',
+  ...props
+}: Pick<
+  IconProps,
+  'strokeColor' | 'fill' | 'styles' | 'size' | 'role' | 'alt'
+>) => {
+  return (
+    <Svg size={size} styles={styles} role={role} alt={alt} {...props}>
+      <g fill={fill}>
+        <path
+          d="M17,11H7c-.553,0-1,.447-1,1s.447,1,1,1h10c.553,0,1-.447,1-1s-.447-1-1-1Z"
+          fill={fill}
+        />
+      </g>
+    </Svg>
+  )
+}
+
+export default Minus
+Minus.displayName = 'Minus'
+Minus.styles = defaultStyles

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

@@ -0,0 +1,48 @@
+import * as React from 'react'
+
+import { IconProps } from '../types'
+import Svg from './svg'
+
+const defaultStyles = {
+  ...Svg.styles,
+  fill: 'none',
+  stroke: 'currentColor',
+}
+
+/**
+ * ArrowUp icon component
+ * @param fill - Icon fill color
+ * @param strokeColor - Icon stroke color
+ * @param styles - Icon styles
+ * @param size - Icon size
+ */
+export const PauseSolid = ({
+  strokeColor = 'currentColor',
+  styles,
+  size = 24,
+  role = 'img',
+  alt = 'Pause arrow icon',
+  ...props
+}: Pick<
+  IconProps,
+  'strokeColor' | 'fill' | 'styles' | 'size' | 'role' | 'alt'
+>) => {
+  return (
+    <Svg size={size} styles={styles} role={role} alt={alt} {...props}>
+      <g fill={strokeColor}>
+        <path
+          d="M7,1H2A1,1,0,0,0,1,2V22a1,1,0,0,0,1,1H7a1,1,0,0,0,1-1V2A1,1,0,0,0,7,1Z"
+          fill={strokeColor}
+        ></path>
+        <path
+          d="M22,1H17a1,1,0,0,0-1,1V22a1,1,0,0,0,1,1h5a1,1,0,0,0,1-1V2A1,1,0,0,0,22,1Z"
+          fill={strokeColor}
+        ></path>
+      </g>
+    </Svg>
+  )
+}
+
+export default PauseSolid
+PauseSolid.displayName = 'PauseSolid'
+PauseSolid.style = defaultStyles

package/src/components/icons/components/pause.tsx

@@ -0,0 +1,63 @@
+import * as React from 'react'
+
+import { IconProps } from '../types'
+import Svg from './svg'
+
+const defaultStyles = {
+  ...Svg.styles,
+  fill: 'none',
+  stroke: 'currentColor',
+}
+
+/**
+ * ArrowUp icon component
+ * @param fill - Icon fill color
+ * @param strokeColor - Icon stroke color
+ * @param styles - Icon styles
+ * @param size - Icon size
+ */
+export const Pause = ({
+  strokeColor = 'currentColor',
+  styles,
+  size = 16,
+  role = 'img',
+  alt = 'Up arrow icon',
+  ...props
+}: Pick<
+  IconProps,
+  'strokeColor' | 'fill' | 'styles' | 'size' | 'role' | 'alt'
+>) => {
+  return (
+    <Svg size={size} styles={styles} role={role} alt={alt} {...props}>
+      <g
+        fill="none"
+        stroke-linecap="square"
+        stroke-linejoin="miter"
+        stroke-miterlimit="10"
+      >
+        <rect
+          x="2"
+          y="2"
+          width="6"
+          height="20"
+          fill="none"
+          stroke={strokeColor}
+          stroke-width="2"
+        ></rect>
+        <rect
+          x="16"
+          y="2"
+          width="6"
+          height="20"
+          fill="none"
+          stroke={strokeColor}
+          stroke-width="2"
+        ></rect>
+      </g>
+    </Svg>
+  )
+}
+
+export default Pause
+Pause.displayName = 'Pause'
+Pause.style = defaultStyles

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

@@ -0,0 +1,44 @@
+import * as React from 'react'
+
+import { IconProps } from '../types'
+import Svg from './svg'
+
+const defaultStyles = {
+  ...Svg.styles,
+  fill: 'none',
+  stroke: 'currentColor',
+}
+
+/**
+ * ArrowUp icon component
+ * @param fill - Icon fill color
+ * @param strokeColor - Icon stroke color
+ * @param styles - Icon styles
+ * @param size - Icon size
+ */
+export const PlaySolid = ({
+  strokeColor = 'currentColor',
+  styles,
+  size = 24,
+  role = 'img',
+  alt = 'Up arrow icon',
+  ...props
+}: Pick<
+  IconProps,
+  'strokeColor' | 'fill' | 'styles' | 'size' | 'role' | 'alt'
+>) => {
+  return (
+    <Svg size={size} styles={styles} role={role} alt={alt} {...props}>
+      <g fill={strokeColor}>
+        <path
+          fill={strokeColor}
+          d="M20.555,11.168l-15-10c-0.307-0.204-0.702-0.224-1.026-0.05C4.203,1.292,4,1.631,4,2v20 c0,0.369,0.203,0.708,0.528,0.882C4.676,22.961,4.838,23,5,23c0.194,0,0.388-0.057,0.555-0.168l15-10C20.833,12.646,21,12.334,21,12 S20.833,11.354,20.555,11.168z"
+        ></path>
+      </g>
+    </Svg>
+  )
+}
+
+export default PlaySolid
+PlaySolid.displayName = 'PlaySolid'
+PlaySolid.style = defaultStyles

package/src/components/icons/components/play.tsx

@@ -0,0 +1,51 @@
+import * as React from 'react'
+
+import { IconProps } from '../types'
+import Svg from './svg'
+
+const defaultStyles = {
+  ...Svg.styles,
+  fill: 'none',
+  stroke: 'currentColor',
+}
+
+/**
+ * ArrowUp icon component
+ * @param fill - Icon fill color
+ * @param strokeColor - Icon stroke color
+ * @param styles - Icon styles
+ * @param size - Icon size
+ */
+export const Play = ({
+  strokeColor = 'currentColor',
+  styles,
+  size = 24,
+  role = 'img',
+  alt = 'Up arrow icon',
+  ...props
+}: Pick<
+  IconProps,
+  'strokeColor' | 'fill' | 'styles' | 'size' | 'role' | 'alt'
+>) => {
+  return (
+    <Svg size={size} styles={styles} role={role} alt={alt} {...props}>
+      <g
+        fill="none"
+        stroke-linecap="square"
+        stroke-linejoin="miter"
+        stroke-miterlimit="10"
+      >
+        <path
+          d="M7 21L7 3L19 12L7 21Z"
+          stroke={strokeColor}
+          stroke-width="2"
+          fill="none"
+        ></path>{' '}
+      </g>
+    </Svg>
+  )
+}
+
+export default Play
+Play.displayName = 'PlayIcon'
+Play.style = defaultStyles

package/src/components/icons/components/remove.tsx

@@ -0,0 +1,42 @@
+import { IconProps } from '../types'
+import React from 'react'
+import Svg from './svg'
+
+const defaultStyles = {
+  fill: 'currenStyle',
+}
+
+/**
+ * Remove icon component
+ * @param {string} size - The size of the icon
+ * @param {string} fill - The fill color of the icon
+ * @param {object} styles - The styles to apply to the icon
+ * @param {object} props - The additional props to pass to the icon
+ * @returns {JSX.Element} - The Remove icon component
+ */
+export const Remove = ({
+  size = 16,
+  fill = 'currentColor',
+  styles,
+  role = 'img',
+  alt = 'Remove icon',
+  ...props
+}: Pick<
+  IconProps,
+  'strokeColor' | 'fill' | 'styles' | 'size' | 'role' | 'alt'
+>) => {
+  return (
+    <Svg size={size} alt={alt} styles={styles} role={role} {...props}>
+      <g fill={fill}>
+        <path
+          d="M19.7,4.3c-0.4-0.4-1-0.4-1.4,0L12,10.6L5.7,4.3c-0.4-0.4-1-0.4-1.4,0s-0.4,1,0,1.4l6.3,6.3l-6.3,6.3 c-0.4,0.4-0.4,1,0,1.4C4.5,19.9,4.7,20,5,20s0.5-0.1,0.7-0.3l6.3-6.3l6.3,6.3c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3 c0.4-0.4,0.4-1,0-1.4L13.4,12l6.3-6.3C20.1,5.3,20.1,4.7,19.7,4.3z"
+          fill={fill}
+        />
+      </g>
+    </Svg>
+  )
+}
+
+export default Remove
+Remove.displayName = 'Remove'
+Remove.styles = defaultStyles

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

@@ -0,0 +1,52 @@
+import * as React from 'react'
+
+import { IconProps } from '../types'
+import Svg from './svg'
+
+const defaultStyles = {
+  ...Svg.styles,
+  fill: 'none',
+  stroke: 'currentColor',
+}
+
+/**
+ * Resume icon component
+ * @param fill - Icon fill color
+ * @param strokeColor - Icon stroke color
+ * @param styles - Icon styles
+ * @param size - Icon size
+ */
+export const ResumeSolid = ({
+  strokeColor = 'currentColor',
+  styles,
+  size = 16,
+  role = 'img',
+  alt = 'Up arrow icon',
+  ...props
+}: Pick<
+  IconProps,
+  'strokeColor' | 'fill' | 'styles' | 'size' | 'role' | 'alt'
+>) => {
+  return (
+    <Svg size={size} styles={styles} role={role} alt={alt} {...props}>
+      <g fill={strokeColor}>
+        <path
+          fill={strokeColor}
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M3 21.8685L17.8028 12L3 2.1315L3 21.8685Z"
+        ></path>
+        <path
+          fill={strokeColor}
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M19 2L19 22L21 22L21 2L19 2Z"
+        ></path>
+      </g>
+    </Svg>
+  )
+}
+
+export default ResumeSolid
+ResumeSolid.displayName = 'ResumeSolid'
+ResumeSolid.style = defaultStyles

package/src/components/icons/components/resume.tsx

@@ -0,0 +1,57 @@
+import * as React from 'react'
+
+import { IconProps } from '../types'
+import Svg from './svg'
+
+const defaultStyles = {
+  ...Svg.styles,
+  fill: 'none',
+  stroke: 'currentColor',
+}
+
+/**
+ * Resume icon component
+ * @param fill - Icon fill color
+ * @param strokeColor - Icon stroke color
+ * @param styles - Icon styles
+ * @param size - Icon size
+ */
+export const Resume = ({
+  strokeColor = 'currentColor',
+  styles,
+  size = 16,
+  role = 'img',
+  alt = 'Up arrow icon',
+  ...props
+}: Pick<
+  IconProps,
+  'strokeColor' | 'fill' | 'styles' | 'size' | 'role' | 'alt'
+>) => {
+  return (
+    <Svg size={size} styles={styles} role={role} alt={alt} {...props}>
+      <g
+        fill="none"
+        stroke-linecap="square"
+        stroke-linejoin="miter"
+        stroke-miterlimit="10"
+      >
+        <path
+          d="M20 21L20 3"
+          stroke={strokeColor}
+          stroke-width="2"
+          fill="none"
+        ></path>
+        <path
+          d="M4 4L4 20L16 12L4 4Z"
+          stroke={strokeColor}
+          stroke-width="2"
+          fill="none"
+        ></path>
+      </g>
+    </Svg>
+  )
+}
+
+export default Resume
+Resume.displayName = 'Resume'
+Resume.style = defaultStyles

package/src/components/icons/components/right.tsx

@@ -0,0 +1,43 @@
+import { IconProps } from '../types'
+import React from 'react'
+import Svg from './svg'
+
+const defaultStyles = {
+  fill: 'currentColor',
+}
+
+/**
+ * Renders a right arrow icon.
+ *
+ * @param {string} size - The size of the icon.
+ * @param {string} fill - The fill color of the icon.
+ * @param {React.CSSProperties} styles - The styles to apply to the icon.
+ * @param {IconProps} props - The props to pass down to the icon.
+ * @returns {JSX.Element} - A right arrow icon.
+ */
+export const Right = ({
+  size = 16,
+  fill = 'currentColor',
+  styles,
+  role = 'img',
+  alt = 'Right arrow icon',
+  ...props
+}: Pick<
+  IconProps,
+  'strokeColor' | 'fill' | 'styles' | 'size' | 'role' | 'alt'
+>) => {
+  return (
+    <Svg size={size} alt={alt} styles={styles} role={role} {...props}>
+      <g fill={fill}>
+        <path
+          d="M7,23a1,1,0,0,1-.707-1.707L15.586,12,6.293,2.707A1,1,0,0,1,7.707,1.293l10,10a1,1,0,0,1,0,1.414l-10,10A1,1,0,0,1,7,23Z"
+          fill={fill}
+        />
+      </g>
+    </Svg>
+  )
+}
+
+export default Right
+Right.displayName = 'Right'
+Right.styles = defaultStyles

package/src/components/icons/components/star.tsx

@@ -0,0 +1,38 @@
+import { IconProps } from '../types'
+import React from 'react'
+import Svg from './svg'
+
+export function Star({
+  size = 16,
+  fill,
+  strokeColor = 'currentColor',
+  styles,
+  role = 'img',
+  alt = 'Star icon',
+  ...props
+}: Pick<
+  IconProps,
+  'strokeColor' | 'fill' | 'styles' | 'size' | 'role' | 'alt'
+>) {
+  return (
+    <Svg size={size} alt={alt} styles={styles} role={role} {...props}>
+      <g
+        fill={fill}
+        stroke={strokeColor}
+        strokeLinecap="square"
+        strokeLinejoin="miter"
+        strokeMiterlimit="10"
+        strokeWidth="2"
+      >
+        <polygon
+          fill="none"
+          points="12,2.49 15.09,8.75 22,9.754 17,14.628 18.18,21.51 12,18.262 5.82,21.51 7,14.628 2,9.754 8.91,8.75 "
+          stroke={strokeColor}
+        />
+      </g>
+    </Svg>
+  )
+}
+
+export default Star
+Star.displayName = 'Star'

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

@@ -0,0 +1,44 @@
+import * as React from 'react'
+
+import { IconProps } from '../types'
+import Svg from './svg'
+
+const defaultStyles = {
+  ...Svg.styles,
+  fill: 'none',
+  stroke: 'currentColor',
+}
+
+/**
+ * Stop icon component
+ * @param fill - Icon fill color
+ * @param strokeColor - Icon stroke color
+ * @param styles - Icon styles
+ * @param size - Icon size
+ */
+export const StopSolid = ({
+  strokeColor = 'currentColor',
+  styles,
+  size = 24,
+  role = 'img',
+  alt = 'Stop icon',
+  ...props
+}: Pick<
+  IconProps,
+  'strokeColor' | 'fill' | 'styles' | 'size' | 'role' | 'alt'
+>) => {
+  return (
+    <Svg size={size} styles={styles} role={role} alt={alt} {...props}>
+      <g fill={strokeColor}>
+        <path
+          fill={strokeColor}
+          d="M22,1H2C1.447,1,1,1.447,1,2v20c0,0.553,0.447,1,1,1h20c0.553,0,1-0.447,1-1V2C23,1.447,22.553,1,22,1z"
+        ></path>
+      </g>
+    </Svg>
+  )
+}
+
+export default StopSolid
+StopSolid.displayName = 'StopSolid'
+StopSolid.style = defaultStyles

package/src/components/icons/components/stop.tsx

@@ -0,0 +1,54 @@
+import * as React from 'react'
+
+import { IconProps } from '../types'
+import Svg from './svg'
+
+const defaultStyles = {
+  ...Svg.styles,
+  fill: 'none',
+  stroke: 'currentColor',
+}
+
+/**
+ * Stop icon component
+ * @param fill - Icon fill color
+ * @param strokeColor - Icon stroke color
+ * @param styles - Icon styles
+ * @param size - Icon size
+ */
+export const Stop = ({
+  strokeColor = 'currentColor',
+  styles,
+  size = 16,
+  role = 'img',
+  alt = 'Up arrow icon',
+  ...props
+}: Pick<
+  IconProps,
+  'strokeColor' | 'fill' | 'styles' | 'size' | 'role' | 'alt'
+>) => {
+  return (
+    <Svg size={size} styles={styles} role={role} alt={alt} {...props}>
+      <g
+        fill="none"
+        stroke-linecap="square"
+        stroke-linejoin="miter"
+        stroke-miterlimit="10"
+      >
+        <rect
+          x="2"
+          y="2"
+          fill="none"
+          stroke={strokeColor}
+          stroke-width="2"
+          width="20"
+          height="20"
+        ></rect>
+      </g>
+    </Svg>
+  )
+}
+
+export default Stop
+Stop.displayName = 'Stop'
+Stop.style = defaultStyles