lupine.components 1.1.13 → 1.1.14

package/src/components/button-push-animation.tsx

@@ -1,138 +1,147 @@
-import { CssProps, RefProps } from 'lupine.web';
-
-export enum ButtonPushAnimationSize {
-  SmallSmall = 'button-ss',
-  Small = 'button-s',
-  Medium = 'button-m',
-  Large = 'button-l',
-  LargeLarge = 'button-ll',
-}
-export type ButtonPushAnimationHookProps = {
-  setEnabled?: (enabled: boolean) => void;
-  getEnabled?: () => boolean;
-};
-export type ButtonPushAnimationProps = {
-  text: string;
-  size: ButtonPushAnimationSize;
-  disabled?: boolean;
-  onClick?: () => void;
-  hook?: ButtonPushAnimationHookProps;
-  class?: string;
-  css?: CssProps;
-};
-export const ButtonPushAnimation = (props: ButtonPushAnimationProps) => {
-  let disabled = props.disabled || false;
-  const onClick = () => {
-    if (disabled) {
-      return;
-    }
-    if (props.onClick) {
-      props.onClick();
-    }
-  };
-  if (props.hook) {
-    props.hook.setEnabled = (enabled: boolean) => {
-      disabled = !enabled;
-      ref.current.disabled = disabled;
-    };
-    props.hook.getEnabled = () => {
-      return !disabled;
-    };
-  }
-
-  const ref: RefProps = {};
-  const css: CssProps = {
-    all: 'unset',
-    cursor: 'pointer',
-    '-webkit-tap-highlight-color': 'rgba(0, 0, 0, 0)',
-    position: 'relative',
-    borderRadius: 'var(--border-radius-m)',
-    backgroundColor: 'rgba(0, 0, 0, 0.75)',
-    boxShadow: '-0.15em -0.15em 0.15em -0.075em rgba(5, 5, 5, 0.25), 0.0375em 0.0375em 0.0675em 0 rgba(5, 5, 5, 0.1)',
-    '.button-outer': {
-      position: 'relative',
-      zIndex: 1,
-      borderRadius: 'inherit',
-      transition: 'box-shadow 300ms ease',
-      willChange: 'box-shadow',
-      boxShadow: '0 0.05em 0.05em -0.01em rgba(5, 5, 5, 1), 0 0.01em 0.01em -0.01em rgba(5, 5, 5, 0.5), 0.15em 0.3em 0.1em -0.01em rgba(5, 5, 5, 0.25)',
-    },
-    '.button-inner': {
-      position: 'relative',
-      zIndex: 2,
-      borderRadius: 'inherit',
-      padding: 'var(--button-padding)',
-      background: 'linear-gradient(135deg, #ffffff, #eeeeee)',
-      transition: 'box-shadow 300ms ease, background-image 250ms ease, transform 250ms ease;',
-      willChange: 'box-shadow, background-image, transform',
-      overflow: 'clip',
-      // clipPath: 'inset(0 0 0 0 round 999vw)',
-      boxShadow: '0 0 0 0 inset rgba(5, 5, 5, 0.1), -0.05em -0.05em 0.05em 0 inset rgba(5, 5, 5, 0.25), 0 0 0 0 inset rgba(5, 5, 5, 0.1), 0 0 0.05em 0.2em inset rgba(255, 255, 255, 0.25), 0.025em 0.05em 0.1em 0 inset rgba(255, 255, 255, 1), 0.12em 0.12em 0.12em inset rgba(255, 255, 255, 0.25), -0.075em -0.25em 0.25em 0.1em inset rgba(5, 5, 5, 0.25)',
-    },
-    '.button-inner span': {
-      position: 'relative',
-      zIndex: 4,
-      // fontFamily: 'Inter, sans-serif',
-      letterSpacing: '-0.05em',
-      // fontWeight: 500,
-      color: 'rgba(0, 0, 0, 0);',
-      backgroundImage: 'linear-gradient(135deg, rgba(25, 25, 25, 1), rgba(75, 75, 75, 1))',
-      backgroundClip: 'text',
-      transition: 'transform 250ms ease',
-      display: 'block',
-      willChange: 'transform',
-      textShadow: 'rgba(0, 0, 0, 0.1) 0 0 0.1em',
-      userSelect: 'none',
-    },
-    '&.button-ss': {
-      borderRadius: '2px',
-    },
-    '&.button-s': {
-      borderRadius: '3px',
-    },
-    '&.button-l': {
-      borderRadius: '6px',
-    },
-    '&.button-ll': {
-      borderRadius: '10px',
-    },
-    '&.button-ss .button-inner': {
-      padding: '0.1rem 0.3rem',
-      fontSize: '0.65rem',
-    },
-    '&.button-s .button-inner': {
-      padding: '0.2rem 0.5rem',
-      fontSize: '0.85rem',
-    },
-    '&.button-l .button-inner': {
-      padding: '0.4rem 1.2rem',
-      fontSize: '1.5rem',
-    },
-    '&.button-ll .button-inner': {
-      padding: '0.5rem 1.5rem',
-      fontSize: '2rem',
-    },
-    '&:active .button-outer': {
-      boxShadow: '0 0 0 0 rgba(5, 5, 5, 1), 0 0 0 0 rgba(5, 5, 5, 0.5), 0 0 0 0 rgba(5, 5, 5, 0.25)',
-    },
-    '&:active .button-inner': {
-      boxShadow: '0.1em 0.15em 0.05em 0 inset rgba(5, 5, 5, 0.75), -0.025em -0.03em 0.05em 0.025em inset rgba(5, 5, 5, 0.5), 0.25em 0.25em 0.2em 0 inset rgba(5, 5, 5, 0.5), 0 0 0.05em 0.5em inset rgba(255, 255, 255, 0.15), 0 0 0 0 inset rgba(255, 255, 255, 1), 0.12em 0.12em 0.12em inset rgba(255, 255, 255, 0.25), -0.075em -0.12em 0.2em 0.1em inset rgba(5, 5, 5, 0.25)',
-    },
-    '&:hover .button-inner': {
-      transform: 'scale(0.99)',
-    },
-    '&:hover .button-inner span': {
-      transform: 'scale(0.975)',
-    },
-    ...props.css,
-  };
-  return (
-    <button ref={ref} css={css} class={['button-push-animation', props.size, props.class].join(' ')} disabled={disabled} onClick={onClick}>
-      <div class="button-outer">
-        <div class="button-inner">
-          <span>{props.text}</span>
-        </div>
-      </div>
-    </button>
-  );
-};
+import { CssProps, RefProps } from 'lupine.web';
+
+export enum ButtonPushAnimationSize {
+  SmallSmall = 'button-ss',
+  Small = 'button-s',
+  Medium = 'button-m',
+  Large = 'button-l',
+  LargeLarge = 'button-ll',
+}
+export type ButtonPushAnimationHookProps = {
+  setEnabled?: (enabled: boolean) => void;
+  getEnabled?: () => boolean;
+};
+export type ButtonPushAnimationProps = {
+  text: string;
+  size: ButtonPushAnimationSize;
+  disabled?: boolean;
+  onClick?: () => void;
+  hook?: ButtonPushAnimationHookProps;
+  class?: string;
+  css?: CssProps;
+};
+export const ButtonPushAnimation = (props: ButtonPushAnimationProps) => {
+  let disabled = props.disabled || false;
+  const onClick = () => {
+    if (disabled) {
+      return;
+    }
+    if (props.onClick) {
+      props.onClick();
+    }
+  };
+  if (props.hook) {
+    props.hook.setEnabled = (enabled: boolean) => {
+      disabled = !enabled;
+      ref.current.disabled = disabled;
+    };
+    props.hook.getEnabled = () => {
+      return !disabled;
+    };
+  }
+
+  const ref: RefProps = {};
+  const css: CssProps = {
+    all: 'unset',
+    cursor: 'pointer',
+    '-webkit-tap-highlight-color': 'rgba(0, 0, 0, 0)',
+    position: 'relative',
+    borderRadius: 'var(--border-radius-m)',
+    backgroundColor: 'rgba(0, 0, 0, 0.75)',
+    boxShadow: '-0.15em -0.15em 0.15em -0.075em rgba(5, 5, 5, 0.25), 0.0375em 0.0375em 0.0675em 0 rgba(5, 5, 5, 0.1)',
+    '.button-outer': {
+      position: 'relative',
+      zIndex: 1,
+      borderRadius: 'inherit',
+      transition: 'box-shadow 300ms ease',
+      willChange: 'box-shadow',
+      boxShadow:
+        '0 0.05em 0.05em -0.01em rgba(5, 5, 5, 1), 0 0.01em 0.01em -0.01em rgba(5, 5, 5, 0.5), 0.15em 0.3em 0.1em -0.01em rgba(5, 5, 5, 0.25)',
+    },
+    '.button-inner': {
+      position: 'relative',
+      zIndex: 2,
+      borderRadius: 'inherit',
+      padding: 'var(--button-padding)',
+      background: 'linear-gradient(135deg, #ffffff, #eeeeee)',
+      transition: 'box-shadow 300ms ease, background-image 250ms ease, transform 250ms ease;',
+      willChange: 'box-shadow, background-image, transform',
+      overflow: 'clip',
+      // clipPath: 'inset(0 0 0 0 round 999vw)',
+      boxShadow:
+        '0 0 0 0 inset rgba(5, 5, 5, 0.1), -0.05em -0.05em 0.05em 0 inset rgba(5, 5, 5, 0.25), 0 0 0 0 inset rgba(5, 5, 5, 0.1), 0 0 0.05em 0.2em inset rgba(255, 255, 255, 0.25), 0.025em 0.05em 0.1em 0 inset rgba(255, 255, 255, 1), 0.12em 0.12em 0.12em inset rgba(255, 255, 255, 0.25), -0.075em -0.25em 0.25em 0.1em inset rgba(5, 5, 5, 0.25)',
+    },
+    '.button-inner span': {
+      position: 'relative',
+      zIndex: 4,
+      // fontFamily: 'Inter, sans-serif',
+      letterSpacing: '-0.05em',
+      // fontWeight: 500,
+      color: 'rgba(0, 0, 0, 0);',
+      backgroundImage: 'linear-gradient(135deg, rgba(25, 25, 25, 1), rgba(75, 75, 75, 1))',
+      backgroundClip: 'text',
+      transition: 'transform 250ms ease',
+      display: 'block',
+      willChange: 'transform',
+      textShadow: 'rgba(0, 0, 0, 0.1) 0 0 0.1em',
+      userSelect: 'none',
+    },
+    '&.button-ss': {
+      borderRadius: '2px',
+    },
+    '&.button-s': {
+      borderRadius: '3px',
+    },
+    '&.button-l': {
+      borderRadius: '6px',
+    },
+    '&.button-ll': {
+      borderRadius: '10px',
+    },
+    '&.button-ss .button-inner': {
+      padding: '0.1rem 0.3rem',
+      fontSize: '0.65rem',
+    },
+    '&.button-s .button-inner': {
+      padding: '0.2rem 0.5rem',
+      fontSize: '0.85rem',
+    },
+    '&.button-l .button-inner': {
+      padding: '0.4rem 1.2rem',
+      fontSize: '1.5rem',
+    },
+    '&.button-ll .button-inner': {
+      padding: '0.5rem 1.5rem',
+      fontSize: '2rem',
+    },
+    '&:active .button-outer': {
+      boxShadow: '0 0 0 0 rgba(5, 5, 5, 1), 0 0 0 0 rgba(5, 5, 5, 0.5), 0 0 0 0 rgba(5, 5, 5, 0.25)',
+    },
+    '&:active .button-inner': {
+      boxShadow:
+        '0.1em 0.15em 0.05em 0 inset rgba(5, 5, 5, 0.75), -0.025em -0.03em 0.05em 0.025em inset rgba(5, 5, 5, 0.5), 0.25em 0.25em 0.2em 0 inset rgba(5, 5, 5, 0.5), 0 0 0.05em 0.5em inset rgba(255, 255, 255, 0.15), 0 0 0 0 inset rgba(255, 255, 255, 1), 0.12em 0.12em 0.12em inset rgba(255, 255, 255, 0.25), -0.075em -0.12em 0.2em 0.1em inset rgba(5, 5, 5, 0.25)',
+    },
+    '&:hover .button-inner': {
+      transform: 'scale(0.99)',
+    },
+    '&:hover .button-inner span': {
+      transform: 'scale(0.975)',
+    },
+    ...props.css,
+  };
+  return (
+    <button
+      ref={ref}
+      css={css}
+      class={['button-push-animation', props.size, props.class].join(' ')}
+      disabled={disabled}
+      onClick={onClick}
+    >
+      <div class='button-outer'>
+        <div class='button-inner'>
+          <span>{props.text}</span>
+        </div>
+      </div>
+    </button>
+  );
+};

package/src/components/button.tsx

@@ -1,55 +1,55 @@
-import { CssProps, RefProps } from 'lupine.web';
-
-export enum ButtonSize {
-  SmallLarge = 'button-ss',
-  Small = 'button-s',
-  Medium = 'button-m',
-  Large = 'button-l',
-  LargeLarge = 'button-ll',
-}
-export type ButtonHookProps = {
-  setEnabled?: (enabled: boolean) => void;
-  getEnabled?: () => boolean;
-};
-export type ButtonProps = {
-  text: string;
-  size: ButtonSize;
-  disabled?: boolean;
-  onClick?: () => void;
-  hook?: ButtonHookProps;
-  class?: string;
-  css?: CssProps;
-};
-export const Button = (props: ButtonProps) => {
-  let disabled = props.disabled || false;
-  const onClick = () => {
-    if (disabled) {
-      return;
-    }
-    if (props.onClick) {
-      props.onClick();
-    }
-  };
-  if (props.hook) {
-    props.hook.setEnabled = (enabled: boolean) => {
-      disabled = !enabled;
-      ref.current.disabled = disabled;
-    };
-    props.hook.getEnabled = () => {
-      return !disabled;
-    };
-  }
-
-  const ref: RefProps = {};
-  return (
-    <button
-      ref={ref}
-      class={['button-base', props.size, props.class].join(' ')}
-      css={props.css}
-      disabled={disabled}
-      onClick={onClick}
-    >
-      {props.text}
-    </button>
-  );
-};
+import { CssProps, RefProps } from 'lupine.web';
+
+export enum ButtonSize {
+  SmallLarge = 'button-ss',
+  Small = 'button-s',
+  Medium = 'button-m',
+  Large = 'button-l',
+  LargeLarge = 'button-ll',
+}
+export type ButtonHookProps = {
+  setEnabled?: (enabled: boolean) => void;
+  getEnabled?: () => boolean;
+};
+export type ButtonProps = {
+  text: string;
+  size: ButtonSize;
+  disabled?: boolean;
+  onClick?: () => void;
+  hook?: ButtonHookProps;
+  class?: string;
+  css?: CssProps;
+};
+export const Button = (props: ButtonProps) => {
+  let disabled = props.disabled || false;
+  const onClick = () => {
+    if (disabled) {
+      return;
+    }
+    if (props.onClick) {
+      props.onClick();
+    }
+  };
+  if (props.hook) {
+    props.hook.setEnabled = (enabled: boolean) => {
+      disabled = !enabled;
+      ref.current.disabled = disabled;
+    };
+    props.hook.getEnabled = () => {
+      return !disabled;
+    };
+  }
+
+  const ref: RefProps = {};
+  return (
+    <button
+      ref={ref}
+      class={['button-base', props.size, props.class].join(' ')}
+      css={props.css}
+      disabled={disabled}
+      onClick={onClick}
+    >
+      {props.text}
+    </button>
+  );
+};

package/src/components/desktop-footer.tsx

@@ -1,17 +1,17 @@
-import { CssProps } from 'lupine.components';
-
-export const DesktopFooter = (props: { title: string }) => {
-  const css: CssProps = {
-    display: 'flex',
-    padding: '0 32px 16px',
-    '.d-footer-cp': {
-      padding: '1px 15px',
-      margin: 'auto',
-    },
-  };
-  return (
-    <div css={css} class='d-footer-box'>
-      <div class='d-footer-cp'>{props.title}</div>
-    </div>
-  );
-};
+import { CssProps } from 'lupine.components';
+
+export const DesktopFooter = (props: { title: string }) => {
+  const css: CssProps = {
+    display: 'flex',
+    padding: '0 32px 16px',
+    '.d-footer-cp': {
+      padding: '1px 15px',
+      margin: 'auto',
+    },
+  };
+  return (
+    <div css={css} class='d-footer-box'>
+      <div class='d-footer-cp'>{props.title}</div>
+    </div>
+  );
+};

package/src/components/desktop-header.tsx

@@ -1,52 +1,52 @@
-import { CssProps } from 'lupine.components';
-import { IconMenuItemProps } from './mobile-components/icon-menu-item-props';
-
-export const DesktopHeader = (props: { title: string; items: IconMenuItemProps[] }) => {
-  const css: CssProps = {
-    display: 'flex',
-    flexDirection: 'row',
-    width: '100%',
-    height: '100%',
-    '.d-header-title': {
-      display: 'flex',
-      flex: '1',
-      margin: '8px 16px',
-      textShadow: '-3px -3px 10px white, 3px 3px 10px black',
-      color: 'darkblue',
-      fontSize: '22px',
-    },
-    '.desktop-menu-bar': {
-      display: 'flex',
-      flexDirection: 'row',
-      width: 'auto',
-      padding: '4px 16px 0',
-      '.desktop-menu-item': {
-        display: 'flex',
-        padding: '0 8px',
-        height: 'fit-content',
-        a: {
-          textDecoration: 'none',
-          color: 'var(--sidebar-color)',
-          i: {
-            paddingRight: '4px',
-          },
-        },
-      },
-    },
-  };
-  return (
-    <div css={css} class='desktop-menu-box'>
-      <div class='flex-1 d-header-title'>{props.title}</div>
-      <div class='desktop-menu-bar'>
-        {props.items.map((item) => (
-          <div class='desktop-menu-item'>
-            <a href={item.href}>
-              <i class={`ifc-icon ${item.icon}`}></i>
-              {item.text}
-            </a>
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-};
+import { CssProps } from 'lupine.components';
+import { IconMenuItemProps } from './mobile-components/icon-menu-item-props';
+
+export const DesktopHeader = (props: { title: string; items: IconMenuItemProps[] }) => {
+  const css: CssProps = {
+    display: 'flex',
+    flexDirection: 'row',
+    width: '100%',
+    height: '100%',
+    '.d-header-title': {
+      display: 'flex',
+      flex: '1',
+      margin: '8px 16px',
+      textShadow: '-3px -3px 10px white, 3px 3px 10px black',
+      color: 'darkblue',
+      fontSize: '22px',
+    },
+    '.desktop-menu-bar': {
+      display: 'flex',
+      flexDirection: 'row',
+      width: 'auto',
+      padding: '4px 16px 0',
+      '.desktop-menu-item': {
+        display: 'flex',
+        padding: '0 8px',
+        height: 'fit-content',
+        a: {
+          textDecoration: 'none',
+          color: 'var(--sidebar-color)',
+          i: {
+            paddingRight: '4px',
+          },
+        },
+      },
+    },
+  };
+  return (
+    <div css={css} class='desktop-menu-box'>
+      <div class='flex-1 d-header-title'>{props.title}</div>
+      <div class='desktop-menu-bar'>
+        {props.items.map((item) => (
+          <div class='desktop-menu-item'>
+            <a href={item.href}>
+              <i class={`ifc-icon ${item.icon}`}></i>
+              {item.text}
+            </a>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};