lupine.components 1.1.11 → 1.1.14

package/src/components/spinner.tsx

@@ -1,100 +1,106 @@
-export enum SpinnerSize {
-  Small = '22px',
-  Medium = '30px',
-  Large = '40px',
-  LargeLarge = '60px',
-}
-export const Spinner01 = ({
-  size = SpinnerSize.Medium,
-  color = 'var(--primary-color)',
-}: {
-  size?: SpinnerSize;
-  color?: string;
-}) => {
-  const borderWidth =
-    size === SpinnerSize.Small || size === SpinnerSize.Medium ? '4px' : size === SpinnerSize.Large ? '6px' : '9px';
-  const css: any = {
-    width: size,
-    aspectRatio: 1,
-    borderRadius: '50%',
-    background: `radial-gradient(farthest-side,${color} 94%,#0000) top/8px 8px no-repeat, conic-gradient(#0000 30%,${color})`,
-    '-webkit-mask': `radial-gradient(farthest-side,#0000 calc(100% - ${borderWidth}),#000 0)`,
-    animation: 'spinner01 1s infinite linear',
-    '@keyframes spinner01': {
-      '100%': { transform: 'rotate(1turn)' },
-    },
-  };
-  return <div css={css}></div>;
-};
-
-export const Spinner02 = ({
-  size = SpinnerSize.Medium,
-  color = 'var(--primary-color)',
-}: {
-  size?: SpinnerSize;
-  color?: string;
-}) => {
-  const base = parseInt(size.replace('px', ''));
-  const ballSize = Array.from({ length: 7 }, (_, i) => `${(i * base / 15 / 7).toFixed(2)}px`);
-  const css: any = {
-    width: size,
-    height: size,
-    display: 'flex',
-    placeItems: 'center',
-    justifyContent: 'center',
-    '.spinner02-box': {
-      '--spin02-w': `${base / 2 - 3}px`,
-      width: '4px',
-      height: '4px',
-      borderRadius: '50%',
-      color,
-      boxShadow: `
-    calc(1*var(--spin02-w))      calc(0*var(--spin02-w))      0 0,
-    calc(0.707*var(--spin02-w))  calc(0.707*var(--spin02-w))  0 ${ballSize[1]},
-    calc(0*var(--spin02-w))      calc(1*var(--spin02-w))      0 ${ballSize[2]},
-    calc(-0.707*var(--spin02-w)) calc(0.707*var(--spin02-w))  0 ${ballSize[3]},
-    calc(-1*var(--spin02-w))     calc(0*var(--spin02-w))      0 ${ballSize[4]},
-    calc(-0.707*var(--spin02-w)) calc(-0.707*var(--spin02-w)) 0 ${ballSize[5]},
-    calc(0*var(--spin02-w))      calc(-1*var(--spin02-w))     0 ${ballSize[6]}`,
-      animation: 'spinner02 1s infinite steps(8)',
-    },
-    '@keyframes spinner02': {
-      '100%': { transform: 'rotate(1turn)' },
-    },
-  };
-  return (
-    <div css={css}>
-      <div class='spinner02-box'></div>
-    </div>
-  );
-};
-
-// color should be space splited RGB colors
-export const Spinner03 = ({ size = SpinnerSize.Medium, colorRGB = '55 55 55' }: { size?: SpinnerSize; colorRGB?: string }) => {
-  const css: any = {
-    width: size,
-    height: size,
-    aspectRatio: 1,
-    display: 'grid',
-    borderRadius: '50%',
-    background: `linear-gradient(0deg, rgb(${colorRGB} / 50%) 30%, #0000 0 70%, rgb(${colorRGB} / 100%) 0) 50% / 8% 100%, linear-gradient(90deg, rgb(${colorRGB} / 25%) 30%, #0000 0 70%, rgb(${colorRGB} / 75%) 0) 50% / 100% 8%`,
-    backgroundRepeat: 'no-repeat',
-    animation: 'spinner03 1s infinite steps(12)',
-    '&::before, &::after': {
-      content: '""',
-      gridArea: '1/1',
-      borderRadius: '50%',
-      background: 'inherit',
-      opacity: 0.915,
-      transform: 'rotate(30deg)',
-    },
-    '&::after': {
-      opacity: 0.83,
-      transform: 'rotate(60deg)',
-    },
-    '@keyframes spinner03': {
-      '100%': { transform: 'rotate(1turn)' },
-    },
-  };
-  return <div css={css}></div>;
-};
+export enum SpinnerSize {
+  Small = '22px',
+  Medium = '30px',
+  Large = '40px',
+  LargeLarge = '60px',
+}
+export const Spinner01 = ({
+  size = SpinnerSize.Medium,
+  color = 'var(--primary-color)',
+}: {
+  size?: SpinnerSize;
+  color?: string;
+}) => {
+  const borderWidth =
+    size === SpinnerSize.Small || size === SpinnerSize.Medium ? '4px' : size === SpinnerSize.Large ? '6px' : '9px';
+  const css: any = {
+    width: size,
+    aspectRatio: 1,
+    borderRadius: '50%',
+    background: `radial-gradient(farthest-side,${color} 94%,#0000) top/8px 8px no-repeat, conic-gradient(#0000 30%,${color})`,
+    '-webkit-mask': `radial-gradient(farthest-side,#0000 calc(100% - ${borderWidth}),#000 0)`,
+    animation: 'spinner01 1s infinite linear',
+    '@keyframes spinner01': {
+      '100%': { transform: 'rotate(1turn)' },
+    },
+  };
+  return <div css={css}></div>;
+};
+
+export const Spinner02 = ({
+  size = SpinnerSize.Medium,
+  color = 'var(--primary-color)',
+}: {
+  size?: SpinnerSize;
+  color?: string;
+}) => {
+  const base = parseInt(size.replace('px', ''));
+  const ballSize = Array.from({ length: 7 }, (_, i) => `${((i * base) / 15 / 7).toFixed(2)}px`);
+  const css: any = {
+    width: size,
+    height: size,
+    display: 'flex',
+    placeItems: 'center',
+    justifyContent: 'center',
+    '.spinner02-box': {
+      '--spin02-w': `${base / 2 - 3}px`,
+      width: '4px',
+      height: '4px',
+      borderRadius: '50%',
+      color,
+      boxShadow: `
+    calc(1*var(--spin02-w))      calc(0*var(--spin02-w))      0 0,
+    calc(0.707*var(--spin02-w))  calc(0.707*var(--spin02-w))  0 ${ballSize[1]},
+    calc(0*var(--spin02-w))      calc(1*var(--spin02-w))      0 ${ballSize[2]},
+    calc(-0.707*var(--spin02-w)) calc(0.707*var(--spin02-w))  0 ${ballSize[3]},
+    calc(-1*var(--spin02-w))     calc(0*var(--spin02-w))      0 ${ballSize[4]},
+    calc(-0.707*var(--spin02-w)) calc(-0.707*var(--spin02-w)) 0 ${ballSize[5]},
+    calc(0*var(--spin02-w))      calc(-1*var(--spin02-w))     0 ${ballSize[6]}`,
+      animation: 'spinner02 1s infinite steps(8)',
+    },
+    '@keyframes spinner02': {
+      '100%': { transform: 'rotate(1turn)' },
+    },
+  };
+  return (
+    <div css={css}>
+      <div class='spinner02-box'></div>
+    </div>
+  );
+};
+
+// color should be space splited RGB colors
+export const Spinner03 = ({
+  size = SpinnerSize.Medium,
+  colorRGB = '55 55 55',
+}: {
+  size?: SpinnerSize;
+  colorRGB?: string;
+}) => {
+  const css: any = {
+    width: size,
+    height: size,
+    aspectRatio: 1,
+    display: 'grid',
+    borderRadius: '50%',
+    background: `linear-gradient(0deg, rgb(${colorRGB} / 50%) 30%, #0000 0 70%, rgb(${colorRGB} / 100%) 0) 50% / 8% 100%, linear-gradient(90deg, rgb(${colorRGB} / 25%) 30%, #0000 0 70%, rgb(${colorRGB} / 75%) 0) 50% / 100% 8%`,
+    backgroundRepeat: 'no-repeat',
+    animation: 'spinner03 1s infinite steps(12)',
+    '&::before, &::after': {
+      content: '""',
+      gridArea: '1/1',
+      borderRadius: '50%',
+      background: 'inherit',
+      opacity: 0.915,
+      transform: 'rotate(30deg)',
+    },
+    '&::after': {
+      opacity: 0.83,
+      transform: 'rotate(60deg)',
+    },
+    '@keyframes spinner03': {
+      '100%': { transform: 'rotate(1turn)' },
+    },
+  };
+  return <div css={css}></div>;
+};

package/src/components/stars-component.tsx

@@ -1,66 +1,66 @@
-import { bindGlobalStyle, CssProps, RefProps } from 'lupine.components';
-
-export type StarsHookComponentProps = {
-  setValue: (value: number) => void;
-  getValue: () => number;
-};
-export type StarsComponentProps = {
-  maxLength: number;
-  value: number;
-  onChange?: (value: number) => void;
-  hook?: StarsHookComponentProps;
-  fontSize?: string;
-};
-export const StarsComponent = (props: StarsComponentProps) => {
-  const css: CssProps = {
-    display: 'flex',
-    flexDirection: 'row',
-    '.stars-label': {
-      color: '#9d9d9d',
-      cursor: 'pointer',
-      display: 'flex',
-      alignItems: 'center',
-    },
-    '.stars-label.active': {
-      color: 'blue',
-    },
-    '.stars-label .full, .stars-label.active .outline': {
-      display: 'none',
-    },
-    '.stars-label.active .full, .stars-label .outline': {
-      display: 'inline',
-    },
-  };
-  bindGlobalStyle('stars-box', css);
-
-  const setValue = (value: number) => {
-    props.value = value;
-    const stars = ref.$all('.stars-label') as NodeListOf<Element>;
-    stars.forEach((star, index) => {
-      star.classList.toggle('active', index < value);
-    });
-  };
-  if (props.hook) {
-    props.hook.setValue = (value) => {
-      setValue(value);
-    };
-    props.hook.getValue = () => props.value;
-  }
-  const ref: RefProps = {};
-  return (
-    <div style={{ fontSize: props.fontSize || '20px' }} ref={ref} class='stars-box'>
-      {Array.from({ length: props.maxLength }).map((value, index) => (
-        <label
-          class={'stars-label' + (index < props.value ? ' active' : '')}
-          onClick={() => {
-            setValue(index + 1);
-            props.onChange?.(index + 1);
-          }}
-        >
-          <i class='ifc-icon ma-cards-heart full'></i>
-          <i class='ifc-icon ma-cards-heart-outline outline'></i>
-        </label>
-      ))}
-    </div>
-  );
-};
+import { bindGlobalStyle, CssProps, RefProps } from 'lupine.components';
+
+export type StarsHookComponentProps = {
+  setValue: (value: number) => void;
+  getValue: () => number;
+};
+export type StarsComponentProps = {
+  maxLength: number;
+  value: number;
+  onChange?: (value: number) => void;
+  hook?: StarsHookComponentProps;
+  fontSize?: string;
+};
+export const StarsComponent = (props: StarsComponentProps) => {
+  const css: CssProps = {
+    display: 'flex',
+    flexDirection: 'row',
+    '.stars-label': {
+      color: '#9d9d9d',
+      cursor: 'pointer',
+      display: 'flex',
+      alignItems: 'center',
+    },
+    '.stars-label.active': {
+      color: 'blue',
+    },
+    '.stars-label .full, .stars-label.active .outline': {
+      display: 'none',
+    },
+    '.stars-label.active .full, .stars-label .outline': {
+      display: 'inline',
+    },
+  };
+  bindGlobalStyle('stars-box', css);
+
+  const setValue = (value: number) => {
+    props.value = value;
+    const stars = ref.$all('.stars-label') as NodeListOf<Element>;
+    stars.forEach((star, index) => {
+      star.classList.toggle('active', index < value);
+    });
+  };
+  if (props.hook) {
+    props.hook.setValue = (value) => {
+      setValue(value);
+    };
+    props.hook.getValue = () => props.value;
+  }
+  const ref: RefProps = {};
+  return (
+    <div style={{ fontSize: props.fontSize || '20px' }} ref={ref} class='stars-box'>
+      {Array.from({ length: props.maxLength }).map((value, index) => (
+        <label
+          class={'stars-label' + (index < props.value ? ' active' : '')}
+          onClick={() => {
+            setValue(index + 1);
+            props.onChange?.(index + 1);
+          }}
+        >
+          <i class='ifc-icon ma-cards-heart full'></i>
+          <i class='ifc-icon ma-cards-heart-outline outline'></i>
+        </label>
+      ))}
+    </div>
+  );
+};

package/src/components/svg.tsx

@@ -1,24 +1,24 @@
-// this is not a good approach because if one svg file is used in multiple places
-// then the svg string will be rendered multiple times.
-export const Svg = ({
-  children,
-  width,
-  height,
-  color,
-}: {
-  children: string;
-  width?: string;
-  height?: string;
-  color?: string;
-}) => {
-  const css: any = {
-    svg: {
-      maxWidth: '100%',
-      maxHeight: '100%',
-      width,
-      height,
-      fill: color,
-    },
-  };
-  return <div css={css}>{children}</div>;
-};
+// this is not a good approach because if one svg file is used in multiple places
+// then the svg string will be rendered multiple times.
+export const Svg = ({
+  children,
+  width,
+  height,
+  color,
+}: {
+  children: string;
+  width?: string;
+  height?: string;
+  color?: string;
+}) => {
+  const css: any = {
+    svg: {
+      maxWidth: '100%',
+      maxHeight: '100%',
+      width,
+      height,
+      fill: color,
+    },
+  };
+  return <div css={css}>{children}</div>;
+};