@eleventheye/asui 1.5.0 → 1.7.1

package/src/icons/HomeIcon.tsx

@@ -1,36 +0,0 @@
-import React from 'react';
-import { IconProps } from '../icons/Icons.types';
-import { IconContainer } from '../icons/styles';
-
-const HomeIcon: React.FC<IconProps> = ({
-  className = '',
-  size = 24,
-  color = '#fffff0',
-  fillColor = 'transparent',
-  fillOpacity = 1,
-  circleStrokeColor = '#fffff0',
-}) => {
-  return (
-    <IconContainer className={className}>
-      <svg width={size} height={size} viewBox="0 0 24 24" fill="transparent" xmlns="http://www.w3.org/2000/svg">
-        <circle
-          fill={fillColor}
-          fillOpacity={fillOpacity}
-          cx="12"
-          cy="12"
-          r="10.5"
-          stroke={circleStrokeColor}
-          strokeWidth={'1.5px'}
-        />
-        <path
-          fillRule="evenodd"
-          clipRule="evenodd"
-          d="M10.7 7.2c0 .4-.3.6-.6.6-.4 0-.6-.3-.6-.6s.3-.6.6-.6c.4 0 .6.3.6.6Zm-.6 2.6c.4 0 .6-.3.6-.6s-.3-.6-.6-.6c-.4 0-.6.3-.6.6s.3.6.6.6Zm.6 6.3c0 .4-.3.6-.6.6-.4 0-.6-.3-.6-.6s.3-.6.6-.6c.4 0 .6.3.6.6Zm-.6-4.4c.4 0 .6-.3.6-.6 0-.4-.3-.6-.6-.6-.4 0-.6.3-.6.6 0 .4.3.6.6.6Zm2.5-4.4c0 .4-.3.6-.6.6s-.6-.3-.6-.6.3-.6.6-.6.6.3.6.6ZM12 9.8c.4 0 .6-.3.6-.6s-.3-.6-.6-.6-.6.3-.6.6.3.6.6.6Zm.6 6.3c0 .4-.3.6-.6.6s-.6-.3-.6-.6.3-.6.6-.6.6.3.6.6Zm1.3-8.2c.4 0 .6-.3.6-.6s-.3-.6-.6-.6-.6.3-.6.6.3.6.6.6Zm.6 1.3c0 .4-.3.6-.6.6s-.6-.3-.6-.6.3-.6.6-.6.6.3.6.6Zm-.6 7.6c.4 0 .6-.3.6-.6s-.3-.6-.6-.6-.6.3-.6.6.3.6.6.6ZM9.5 4.7c-1.1 0-1.9.8-1.9 1.9V16.7c0 1.1.8 1.9 1.9 1.9h5c1.1 0 1.9-.8 1.9-1.9V6.6c0-1.1-.8-1.9-1.9-1.9h-5Zm5 1.3h-5c-.4 0-.6.3-.6.6V16.7c0 .4.3.6.6.6h5c.4 0 .6-.3.6-.6V6.6c0-.4-.3-.6-.6-.6Z"
-          fill={color}
-        />
-      </svg>
-    </IconContainer>
-  );
-};
-
-export default HomeIcon;

package/src/icons/Icons.types.tsx

@@ -1,12 +0,0 @@
-type IconProps = {
-  className?: string;
-  size?: number;
-  color?: string;
-  fillColor?: string;
-  fillOpacity?: number;
-  strokeSize?: number;
-  circleStrokeColor?: string;
-  style?: React.CSSProperties;
-};
-
-export type { IconProps };

package/src/icons/LockIcon.tsx

@@ -1,38 +0,0 @@
-import React from 'react';
-import { IconProps } from '../icons/Icons.types';
-import { IconContainer } from '../icons/styles';
-
-const LockIcon: React.FC<IconProps> = ({
-  className = '',
-  size = 24,
-  color = '#fffff0',
-  fillColor = 'transparent',
-  fillOpacity = 1,
-  circleStrokeColor = '#fffff0',
-}) => {
-  return (
-    <IconContainer className={className}>
-      <svg width={size} height={size} viewBox="0 0 24 24" fill="transparent" xmlns="http://www.w3.org/2000/svg">
-        <circle
-          fill={fillColor}
-          fillOpacity={fillOpacity}
-          cx="12"
-          cy="12"
-          r="10.5"
-          stroke={circleStrokeColor}
-          strokeWidth={'1.5px'}
-        />
-        <path
-          fillRule="evenodd"
-          clipRule="nonzero"
-          d="M15.75 10.69c1.12 0 2.02.9 2.02 2.02v4.05c0 1.12-.9 2.02-2.02 2.02H7.65c-1.12 0-2.02-.9-2.02-2.02v-4.05c0-1.12.9-2.02 2.02-2.02V8.67c0-2.23 1.82-4.05 4.05-4.05s4.05 1.82 4.05 4.05v2.02ZM11.7 5.96c1.49 0 2.7 1.21 2.7 2.7v2.02H9V8.66c0-1.49 1.21-2.7 2.7-2.7Zm4.05 6.08H7.65c-.37 0-.68.3-.68.68v4.05c0 .37.3.68.68.68h8.1c.37 0 .68-.3.68-.68v-4.05c0-.37-.3-.68-.68-.68Z"
-          fill={color}
-          stroke={color}
-          strokeWidth={'0.2px'}
-        />
-      </svg>
-    </IconContainer>
-  );
-};
-
-export default LockIcon;

package/src/icons/PenIcon.tsx

@@ -1,36 +0,0 @@
-import React from 'react';
-import { IconProps } from '../icons/Icons.types';
-import { IconContainer } from '../icons/styles';
-
-const PenIcon: React.FC<IconProps> = ({
-  className = '',
-  size = 24,
-  color = '#fffff0',
-  fillColor = '#transparent',
-  fillOpacity = 1,
-  circleStrokeColor = '#fffff0',
-}) => {
-  return (
-    <IconContainer className={className}>
-      <svg width={size} height={size} viewBox="0 0 24 24" fill="transparent" xmlns="http://www.w3.org/2000/svg">
-        <circle
-          fill={fillColor}
-          fillOpacity={fillOpacity}
-          cx="12"
-          cy="12"
-          r="10.5"
-          stroke={circleStrokeColor}
-          strokeWidth={'1.5px'}
-        />
-        <path
-          fillRule="evenodd"
-          clipRule="evenodd"
-          d="m15.23 10.2-1.45-1.45.51-.51c.2-.2.52-.2.72 0l.72.72c.2.2.2.52 0 .72l-.51.51Zm-.93.93-1.45-1.45-3.27 3.27 1.45 1.45 3.27-3.27Zm2.18-4.36.72.72c.2.2.2.52 0 .72l-.45.45c.28.57.17 1.27-.3 1.75l-5.42 5.44-2.9-2.9 5.44-5.43c.47-.47 1.18-.58 1.75-.3l.45-.45c.2-.2.52-.2.72 0ZM6.62 17.35l1.09-3.98 2.89 2.89-3.98 1.09Z"
-          fill={color}
-        />
-      </svg>
-    </IconContainer>
-  );
-};
-
-export default PenIcon;

package/src/icons/RulerIcon.tsx

@@ -1,36 +0,0 @@
-import React from 'react';
-import { IconProps } from '../icons/Icons.types';
-import { IconContainer } from '../icons/styles';
-
-const RulerIcon: React.FC<IconProps> = ({
-  className = '',
-  size = 24,
-  color = '#fffff0',
-  fillColor = 'transparent',
-  fillOpacity = 1,
-  circleStrokeColor = '#fffff0',
-}) => {
-  return (
-    <IconContainer className={className}>
-      <svg width={size} height={size} viewBox="0 0 24 24" fill="transparent" xmlns="http://www.w3.org/2000/svg">
-        <circle
-          fill={fillColor}
-          fillOpacity={fillOpacity}
-          cx="12"
-          cy="12"
-          r="10.5"
-          stroke={circleStrokeColor}
-          strokeWidth={'1.5px'}
-        />
-        <path
-          d="M9.7 8.6v2.1c0 .4.3.7.7.7s.7-.3.7-.7V8.6h1.4v3.5c0 .4.3.7.7.7s.7-.3.7-.7V8.6h1.4v2.1c0 .4.3.7.7.7s.7-.3.7-.7V8.6h1.4c.4 0 .7.3.7.7v4.9c0 .4-.3.7-.7.7H5.5c-.4 0-.7-.3-.7-.7V9.3c0-.4.3-.7.7-.7H6.9v3.5c0 .4.3.7.7.7s.7-.3.7-.7V8.6H9.7ZM5.5 7.2H18.1c1.2 0 2.1.9 2.1 2.1v4.9c0 1.2-.9 2.1-2.1 2.1H5.5c-1.2 0-2.1-.9-2.1-2.1V9.3c0-1.2.9-2.1 2.1-2.1Z"
-          fillRule="evenodd"
-          clipRule="evenodd"
-          fill={color}
-        />
-      </svg>
-    </IconContainer>
-  );
-};
-
-export default RulerIcon;

package/src/icons/SaveIcon.tsx

@@ -1,45 +0,0 @@
-import React from 'react';
-import { IconProps } from '../icons/Icons.types';
-import { IconContainer } from '../icons/styles';
-
-const SaveIcon: React.FC<IconProps> = ({
-  className = '',
-  size = 24,
-  color = '#fffff0',
-  fillColor = 'transparent',
-  fillOpacity = 1,
-  circleStrokeColor = '#fffff0',
-}) => {
-  return (
-    <IconContainer className={className}>
-      <svg width={size} height={size} viewBox="0 0 24 24" fill="transparent" xmlns="http://www.w3.org/2000/svg">
-        <circle
-          fill={fillColor}
-          fillOpacity={fillOpacity}
-          cx="12"
-          cy="12"
-          r="10.5"
-          stroke={circleStrokeColor}
-          strokeWidth={'1.5px'}
-        />
-
-        <path
-          fillRule="evenodd"
-          clipRule="evenodd"
-          d="M12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9ZM11 12C11 12.5523 11.4477 13 12 13C12.5523 13 13 12.5523 13 12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12Z"
-          fill={color}
-        />
-        <path d="M6.81 10.75c0-2.17 1.76-3.94 3.94-3.94v1.13c-1.55 0-2.81 1.26-2.81 2.81H6.81Z" fill={color} />
-        <path d="M13.25 16.06c1.55 0 2.81-1.26 2.81-2.81h1.13c0 2.17-1.76 3.94-3.94 3.94v-1.13Z" fill={color} />
-        <path
-          fillRule="evenodd"
-          clipRule="evenodd"
-          d="M12 3.75C7.44 3.75 3.75 7.44 3.75 12c0 4.56 3.69 8.25 8.25 8.25 4.56 0 8.25-3.69 8.25-8.25 0-4.56-3.69-8.25-8.25-8.25ZM5.25 12c0 3.73 3.02 6.75 6.75 6.75s6.75-3.02 6.75-6.75S15.73 5.25 12 5.25 5.25 8.27 5.25 12Z"
-          fill={color}
-        />
-      </svg>
-    </IconContainer>
-  );
-};
-
-export default SaveIcon;

package/src/icons/TimeLapseIcon.tsx

@@ -1,36 +0,0 @@
-import React from 'react';
-import { IconProps } from '../icons/Icons.types';
-import { IconContainer } from '../icons/styles';
-
-const TimeLapseIcon: React.FC<IconProps> = ({
-  className = '',
-  size = 24,
-  color = '#fffff0',
-  fillColor = 'transparent',
-  fillOpacity = 1,
-  circleStrokeColor = '#fffff0',
-}) => {
-  return (
-    <IconContainer className={className}>
-      <svg width={size} height={size} viewBox="0 0 24 24" fill="transparent" xmlns="http://www.w3.org/2000/svg">
-        <circle
-          fill={fillColor}
-          fillOpacity={fillOpacity}
-          cx="12"
-          cy="12"
-          r="10.5"
-          stroke={circleStrokeColor}
-          strokeWidth={'1.5px'}
-        />
-        <path
-          d="M12.03 17.33c-1.51 0-2.77-.63-3.78-1.51l3.78-3.78V6.74c2.9 0 5.29 2.39 5.29 5.29s-2.39 5.29-5.29 5.29Zm8.32-5.3c0 4.54-3.78 8.32-8.32 8.32s-8.32-3.78-8.32-8.32 3.78-8.32 8.32-8.32 8.32 3.79 8.32 8.32Zm-1.51 0c0 3.78-3.02 6.8-6.8 6.8s-6.81-3.02-6.81-6.8 3.02-6.8 6.8-6.8 6.8 3.02 6.8 6.8Z"
-          fillRule="evenodd"
-          clipRule="evenodd"
-          fill={color}
-        />
-      </svg>
-    </IconContainer>
-  );
-};
-
-export default TimeLapseIcon;

package/src/icons/UnlockIcon.tsx

@@ -1,38 +0,0 @@
-import React from 'react';
-import { IconProps } from '../icons/Icons.types';
-import { IconContainer } from '../icons/styles';
-
-const UnlockIcon: React.FC<IconProps> = ({
-  className = '',
-  size = 24,
-  color = '#fffff0',
-  fillColor = 'transparent',
-  fillOpacity = 1,
-  circleStrokeColor = '#fffff0',
-}) => {
-  return (
-    <IconContainer className={className}>
-      <svg width={size} height={size} viewBox="0 0 24 24" fill="transparent" xmlns="http://www.w3.org/2000/svg">
-        <circle
-          fill={fillColor}
-          fillOpacity={fillOpacity}
-          cx="12"
-          cy="12"
-          r="10.5"
-          stroke={circleStrokeColor}
-          strokeWidth={'1.5px'}
-        />
-        <path
-          fillRule="evenodd"
-          clipRule="nonzero"
-          d="M15.75 11.7c.369 0 .675.306.675.675v4.05c0 .369-.306.675-.675.675h-8.1c-.369 0-.675-.306-.675-.675v-4.05c0-.369.306-.675.675-.675h8.1Zm.675-3.375c0-2.232-1.818-4.05-4.05-4.05s-4.05 1.818-4.05 4.05V10.35H7.65c-1.125 0-2.025.9-2.025 2.025v4.05c0 1.125.9 2.025 2.025 2.025h8.1c1.125 0 2.025-.9 2.025-2.025v-4.05c0-1.125-.9-2.025-2.025-2.025H9.675V8.325c0-1.494 1.206-2.7 2.7-2.7s2.7 1.206 2.7 2.7h1.35Z"
-          fill={color}
-          stroke={color}
-          strokeWidth={'0.2px'}
-        />
-      </svg>
-    </IconContainer>
-  );
-};
-
-export default UnlockIcon;

package/src/icons/UserSettingsIcon.tsx

@@ -1,34 +0,0 @@
-import React from 'react';
-import { IconProps } from '../icons/Icons.types';
-import { IconContainer } from '../icons/styles';
-
-const UserSettingsIcon: React.FC<IconProps> = ({
-  className = '',
-  size = 24,
-  color = '#fffff0',
-  fillColor = 'transparent',
-  fillOpacity = 1,
-  circleStrokeColor = '#fffff0',
-}) => {
-  return (
-    <IconContainer className={className}>
-      <svg width={size} height={size} viewBox="0 0 24 24" fill="transparent" xmlns="http://www.w3.org/2000/svg">
-        <circle
-          fill={fillColor}
-          fillOpacity={fillOpacity}
-          cx="12"
-          cy="12"
-          r="10.5"
-          stroke={circleStrokeColor}
-          strokeWidth={'1.5px'}
-        />
-        <path
-          d="m9.7 11.6c-.4 0-.8.2-.8.6-.1 1.5 0 3 0 4.5 1.1.6 2.3 1.2 3.4 1.7 1.1-.5 2.2-1.1 3.2-1.7v-3.9c0-.4 0-1.1-.7-1.2zm2.4-6.13C10.8 5.37 10 7.1 10.7 8s2.41.87 2.91-.13c.7-1-.06-2.44-1.51-2.4zm.1-1.5c1.6 0 3 1.23 3.2 2.63.4 1.6-1.1 3.4-2.9 3.4h1.9c1.3-.1 2.6.7 2.7 1.9v3.9c.3-.2.5-.3.8-.5V10h1.6v6c-2.46 1.5-4.8 2.78-7.2 4.2-2.48-1.44-5.14-2.78-7.6-4.2v-6h1.7v5.3c.3.1.5.3.8.5V12.6c-.1-1.1.7-2.3 1.9-2.5.9-.1 1.8-.1 2.8-.1-1.6-.2-2.9-1.4-3-2.7-.2-1.7 1.4-3.43 3.3-3.33Z"
-          fill={color}
-        />
-      </svg>
-    </IconContainer>
-  );
-};
-
-export default UserSettingsIcon;

package/src/icons/index.ts

@@ -1,63 +0,0 @@
-export * from './AddItemIcon';
-export { default as AddItemIcon } from './AddItemIcon';
-
-export * from './AddUserIcon';
-export { default as AddUserIcon } from './AddUserIcon';
-
-export * from './CheckIcon';
-export { default as CheckIcon } from './CheckIcon';
-
-export * from './CloseIcon';
-export { default as CloseIcon } from './CloseIcon';
-
-export * from './DeleteIcon';
-export { default as DeleteIcon } from './DeleteIcon';
-
-export * from './EleventheyeIcon';
-export { default as EleventheyeIcon } from './EleventheyeIcon';
-
-export * from './EyeIcon';
-export { default as EyeIcon } from './EyeIcon';
-
-export * from './EyeSlashIcon';
-export { default as EyeSlashIcon } from './EyeSlashIcon';
-
-export * from './FootballIcon';
-export { default as FootballIcon } from './FootballIcon';
-
-export * from './GamesIcon';
-export { default as GamesIcon } from './GamesIcon';
-
-export * from './GearUserIcon';
-export { default as GearUserIcon } from './GearUserIcon';
-
-export * from './HexagonIcon';
-export { default as HexagonIcon } from './HexagonIcon';
-
-export * from './HomeIcon';
-export { default as HomeIcon } from './HomeIcon';
-
-export * from './LockIcon';
-export { default as LockIcon } from './LockIcon';
-
-export * from './PenIcon';
-export { default as PenIcon } from './PenIcon';
-
-export * from './RulerIcon';
-export { default as RulerIcon } from './RulerIcon';
-
-export * from './SaveIcon';
-export { default as SaveIcon } from './SaveIcon';
-
-export * from './TimeLapseIcon';
-export { default as TimeLapseIcon } from './TimeLapseIcon';
-
-export * from './UnlockIcon';
-export { default as UnlockIcon } from './UnlockIcon';
-
-export * from './UserSettingsIcon';
-export { default as UserSettingsIcon } from './UserSettingsIcon';
-
-// export * from './icons/Icons.types.js';
-export * from './Icons.types';
-export type { IconProps } from './Icons.types';

package/src/icons/styles.tsx

@@ -1,9 +0,0 @@
-import styled from 'styled-components';
-
-export const IconContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  flex-wrap: nowrap;
-`;

package/src/index.ts

@@ -1,22 +0,0 @@
-export { default as AddItemIcon } from './icons/AddItemIcon';
-export { default as AddUserIcon } from './icons/AddUserIcon';
-export { default as CheckIcon } from './icons/CheckIcon';
-export { default as CloseIcon } from './icons/CloseIcon';
-export { default as DeleteIcon } from './icons/DeleteIcon';
-export { default as EleventheyeIcon } from './icons/EleventheyeIcon';
-export { default as EyeIcon } from './icons/EyeIcon';
-export { default as EyeSlashIcon } from './icons/EyeSlashIcon';
-export { default as FootballIcon } from './icons/FootballIcon';
-export { default as GamesIcon } from './icons/GamesIcon';
-export { default as GearUserIcon } from './icons/GearUserIcon';
-export { default as HexagonIcon } from './icons/HexagonIcon';
-export { default as HomeIcon } from './icons/HomeIcon';
-export * from './icons/Icons.types';
-export type { IconProps } from './icons/Icons.types';
-export { default as LockIcon } from './icons/LockIcon';
-export { default as PenIcon } from './icons/PenIcon';
-export { default as RulerIcon } from './icons/RulerIcon';
-export { default as SaveIcon } from './icons/SaveIcon';
-export { default as TimeLapseIcon } from './icons/TimeLapseIcon';
-export { default as UnlockIcon } from './icons/UnlockIcon';
-export { default as UserSettingsIcon } from './icons/UserSettingsIcon';

package/src/stories/Button.stories.ts

@@ -1,53 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { fn } from '@storybook/test';
-
-import { Button } from './Button';
-
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
-const meta = {
-  title: 'Example/Button',
-  component: Button,
-  parameters: {
-    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
-    layout: 'centered',
-  },
-  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
-  tags: ['autodocs'],
-  // More on argTypes: https://storybook.js.org/docs/api/argtypes
-  argTypes: {
-    backgroundColor: { control: 'color' },
-  },
-  // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
-  args: { onClick: fn() },
-} satisfies Meta<typeof Button>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
-export const Primary: Story = {
-  args: {
-    primary: true,
-    label: 'Button',
-  },
-};
-
-export const Secondary: Story = {
-  args: {
-    label: 'Button',
-  },
-};
-
-export const Large: Story = {
-  args: {
-    size: 'large',
-    label: 'Button',
-  },
-};
-
-export const Small: Story = {
-  args: {
-    size: 'small',
-    label: 'Button',
-  },
-};

package/src/stories/Button.tsx

@@ -1,37 +0,0 @@
-import React from 'react';
-
-import './button.css';
-
-export interface ButtonProps {
-  /** Is this the principal call to action on the page? */
-  primary?: boolean;
-  /** What background color to use */
-  backgroundColor?: string;
-  /** How large should the button be? */
-  size?: 'small' | 'medium' | 'large';
-  /** Button contents */
-  label: string;
-  /** Optional click handler */
-  onClick?: () => void;
-}
-
-/** Primary UI component for user interaction */
-export const Button = ({
-  primary = false,
-  size = 'medium',
-  backgroundColor,
-  label,
-  ...props
-}: ButtonProps) => {
-  const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
-  return (
-    <button
-      type="button"
-      className={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
-      style={{ backgroundColor }}
-      {...props}
-    >
-      {label}
-    </button>
-  );
-};