@lets-events/react 12.10.17 → 12.11.1

package/src/components/Filter.tsx

@@ -1,165 +1,165 @@
-import { styled } from '../styles'
-import { ComponentProps, ElementType } from 'react'
-import { Theme, DropdownMenu } from '@radix-ui/themes'
-import { CheckboxGroup, CheckboxItem } from './CheckboxGroup'
-import { Icon } from './Icon'
-import { typographyLabelValues } from '../types/typographyValues'
-
-const FilterContentStyled = styled(DropdownMenu.Content, {
-  background: 'white',
-  padding: '$8 $12',
-  border: '1px solid $dark300',
-  borderRadius: '$xs',
-  boxShadow: '0px 4px 4px 0px rgba(35, 53, 67, 0.08)',
-  width: 'calc(var(--radix-popper-anchor-width) - 24px);',
-  minWidth: '100%',
-  marginTop: '3px',
-  fontFamily: '$default',
-  variants: {
-    typography: typographyLabelValues,
-    fontWeight: {
-      regular: {
-        fontWeight: '$regular'
-      },
-      medium: {
-        fontWeight: '$medium'
-      },
-      semibold: {
-        fontWeight: '$semibold'
-      },
-      bold: {
-        fontWeight: '$bold'
-      },
-    },
-  },
-})
-const FilterStyled = styled('div', {
-  fontFamily: '$default',
-  color: '$dark600',
-  letterSpacing: '0px',
-  cursor: 'pointer',
-  border: '1px solid $dark300',
-  borderRadius: '$xs',
-  padding: '$8 $12',
-  width: 'calc(100% - 24px)',
-  display: 'flex',
-  'button': {
-    fontFamily: '$default',
-    color: '$dark600',
-    letterSpacing: '0px',
-    backgroundColor: 'transparent',
-    border: 'none',
-    width: '100%',
-    outline: 'none',
-    display: 'flex',
-    alignItems: 'center',
-    gap: '$8',
-    cursor: 'pointer',
-    'svg:last-child': {
-      marginLeft: 'auto',
-    }
-  },
-  variants: {
-    typography: {
-      labelLarge: {
-        'span': {
-          fontSize: '$labelLarge',
-          lineHeight: '$labelLarge',
-        }
-      },
-      labelMedium: {
-        'span': {
-          fontSize: '$labelMedium',
-          lineHeight: '$labelMedium',
-        }
-      },
-      labelSmall: {
-        'span': {
-          fontSize: '$labelSmall',
-          lineHeight: '$labelSmall',
-        }
-      },
-      labelExtraSmall: {
-        'span': {
-          fontSize: '$labelExtraSmall',
-          lineHeight: '$labelExtraSmall',
-        }
-      },
-    },
-    fontWeight: {
-      regular: {
-        'span': { fontWeight: '$regular' }
-      },
-      medium: {
-        'span': { fontWeight: '$medium' }
-      },
-      semibold: {
-        'span': { fontWeight: '$semibold' }
-      },
-      bold: {
-        'span': { fontWeight: '$bold' }
-      },
-    },
-  }
-})
-
-
-export type FilterProps = ComponentProps<typeof DropdownMenu.Root> & {
-  as?: ElementType,
-  placeholder?: string,
-  fontWeight: 'regular' | 'medium' | 'semibold' | 'bold',
-  typography: 'labelExtraSmall' | 'labelSmall' | 'labelMedium' | 'labelLarge',
-}
-export type FilterItemProps = ComponentProps<typeof CheckboxItem> & {
-  as?: ElementType,
-  value: string,
-  typography: FilterProps['typography'],
-  fontWeight: FilterProps['fontWeight'],
-}
-
-
-export function Filter({
-  children,
-  placeholder,
-  typography,
-  fontWeight,
-  ...props
-}: FilterProps) {
-  return (
-    <Theme>
-      <DropdownMenu.Root {...props}>
-        <FilterStyled typography={typography} fontWeight={fontWeight}>
-          <DropdownMenu.Trigger>
-            <button aria-label={placeholder || 'Fitrar'}>
-              <Icon name='filter' />
-              <span>{placeholder || 'Fitrar'}</span>
-              <DropdownMenu.TriggerIcon />
-            </button>
-          </DropdownMenu.Trigger>
-          <FilterContentStyled avoidCollisions={false}
-            align="start"
-            alignOffset={-14}
-            typography={typography}
-            fontWeight={fontWeight}
-          >
-            <CheckboxGroup>
-              {children}
-            </CheckboxGroup>
-          </FilterContentStyled>
-        </FilterStyled>
-      </DropdownMenu.Root>
-    </Theme>
-  )
-}
-
-
-export function FilterItem({
-  children,
-  ...props
-}: FilterItemProps) {
-  return (
-    <CheckboxItem {...props} style={{ padding: '8px 12px' }}>
-      {children}
-    </CheckboxItem>
-  )
+import { styled } from '../styles'
+import { ComponentProps, ElementType } from 'react'
+import { Theme, DropdownMenu } from '@radix-ui/themes'
+import { CheckboxGroup, CheckboxItem } from './CheckboxGroup'
+import { Icon } from './Icon'
+import { typographyLabelValues } from '../types/typographyValues'
+
+const FilterContentStyled = styled(DropdownMenu.Content, {
+  background: 'white',
+  padding: '$8 $12',
+  border: '1px solid $dark300',
+  borderRadius: '$xs',
+  boxShadow: '0px 4px 4px 0px rgba(35, 53, 67, 0.08)',
+  width: 'calc(var(--radix-popper-anchor-width) - 24px);',
+  minWidth: '100%',
+  marginTop: '3px',
+  fontFamily: '$default',
+  variants: {
+    typography: typographyLabelValues,
+    fontWeight: {
+      regular: {
+        fontWeight: '$regular'
+      },
+      medium: {
+        fontWeight: '$medium'
+      },
+      semibold: {
+        fontWeight: '$semibold'
+      },
+      bold: {
+        fontWeight: '$bold'
+      },
+    },
+  },
+})
+const FilterStyled = styled('div', {
+  fontFamily: '$default',
+  color: '$dark600',
+  letterSpacing: '0px',
+  cursor: 'pointer',
+  border: '1px solid $dark300',
+  borderRadius: '$xs',
+  padding: '$8 $12',
+  width: 'calc(100% - 24px)',
+  display: 'flex',
+  'button': {
+    fontFamily: '$default',
+    color: '$dark600',
+    letterSpacing: '0px',
+    backgroundColor: 'transparent',
+    border: 'none',
+    width: '100%',
+    outline: 'none',
+    display: 'flex',
+    alignItems: 'center',
+    gap: '$8',
+    cursor: 'pointer',
+    'svg:last-child': {
+      marginLeft: 'auto',
+    }
+  },
+  variants: {
+    typography: {
+      labelLarge: {
+        'span': {
+          fontSize: '$labelLarge',
+          lineHeight: '$labelLarge',
+        }
+      },
+      labelMedium: {
+        'span': {
+          fontSize: '$labelMedium',
+          lineHeight: '$labelMedium',
+        }
+      },
+      labelSmall: {
+        'span': {
+          fontSize: '$labelSmall',
+          lineHeight: '$labelSmall',
+        }
+      },
+      labelExtraSmall: {
+        'span': {
+          fontSize: '$labelExtraSmall',
+          lineHeight: '$labelExtraSmall',
+        }
+      },
+    },
+    fontWeight: {
+      regular: {
+        'span': { fontWeight: '$regular' }
+      },
+      medium: {
+        'span': { fontWeight: '$medium' }
+      },
+      semibold: {
+        'span': { fontWeight: '$semibold' }
+      },
+      bold: {
+        'span': { fontWeight: '$bold' }
+      },
+    },
+  }
+})
+
+
+export type FilterProps = ComponentProps<typeof DropdownMenu.Root> & {
+  as?: ElementType,
+  placeholder?: string,
+  fontWeight: 'regular' | 'medium' | 'semibold' | 'bold',
+  typography: 'labelExtraSmall' | 'labelSmall' | 'labelMedium' | 'labelLarge',
+}
+export type FilterItemProps = ComponentProps<typeof CheckboxItem> & {
+  as?: ElementType,
+  value: string,
+  typography: FilterProps['typography'],
+  fontWeight: FilterProps['fontWeight'],
+}
+
+
+export function Filter({
+  children,
+  placeholder,
+  typography,
+  fontWeight,
+  ...props
+}: FilterProps) {
+  return (
+    <Theme>
+      <DropdownMenu.Root {...props}>
+        <FilterStyled typography={typography} fontWeight={fontWeight}>
+          <DropdownMenu.Trigger>
+            <button aria-label={placeholder || 'Fitrar'}>
+              <Icon name='filter' />
+              <span>{placeholder || 'Fitrar'}</span>
+              <DropdownMenu.TriggerIcon />
+            </button>
+          </DropdownMenu.Trigger>
+          <FilterContentStyled avoidCollisions={false}
+            align="start"
+            alignOffset={-14}
+            typography={typography}
+            fontWeight={fontWeight}
+          >
+            <CheckboxGroup>
+              {children}
+            </CheckboxGroup>
+          </FilterContentStyled>
+        </FilterStyled>
+      </DropdownMenu.Root>
+    </Theme>
+  )
+}
+
+
+export function FilterItem({
+  children,
+  ...props
+}: FilterItemProps) {
+  return (
+    <CheckboxItem {...props} style={{ padding: '8px 12px' }}>
+      {children}
+    </CheckboxItem>
+  )
 }

package/src/components/Flex.tsx

@@ -1,131 +1,131 @@
-import { ComponentProps, CSSProperties, ElementType, ReactNode } from 'react';
-import type { CSS } from '@stitches/react';
-import { styled, config } from '../styles'
-import { Flex as FlexRadix } from "@radix-ui/themes";
-export const FlexStyled = styled(FlexRadix, {
-  variants: {
-    display: {
-      'flex': { display: 'flex' },
-      'inline-flex': { display: 'inline-flex' }
-    },
-    align: {
-      start: { alignItems: 'flex-start' },
-      center: { alignItems: 'center' },
-      end: { alignItems: 'flex-end' },
-      stretch: { alignItems: 'stretch' },
-      baseline: { alignItems: 'baseline' },
-    },
-    justify: {
-      start: { justifyContent: 'flex-start' },
-      center: { justifyContent: 'center' },
-      end: { justifyContent: 'flex-end' },
-      between: { justifyContent: 'space-between' },
-      around: { justifyContent: 'space-around' },
-      evenly: { justifyContent: 'space-evenly' },
-    },
-    direction: {
-      row: { flexDirection: 'row' },
-      column: { flexDirection: 'column' },
-      'row-reverse': { flexDirection: 'row-reverse' },
-      'column-reverse': { flexDirection: 'column-reverse' },
-    },
-    gap: {
-      0: { gap: '0px' },
-      2: { gap: '$2' },
-      4: { gap: '$4' },
-      6: { gap: '$6' },
-      8: { gap: '$8' },
-      10: { gap: '$10' },
-      12: { gap: '$12' },
-      14: { gap: '$14' },
-      16: { gap: '$16' },
-      20: { gap: '$20' },
-      22: { gap: '$22' },
-      24: { gap: '$24' },
-      32: { gap: '$32' },
-      36: { gap: '$36' },
-      40: { gap: '$40' },
-      48: { gap: '$48' },
-      56: { gap: '$56' },
-      64: { gap: '$64' },
-      72: { gap: '$72' },
-      80: { gap: '$80' },
-      full: { gap: '$full' },
-    },
-    gapY: {
-      2: { gap: '$2' },
-      4: { gap: '$4' },
-      6: { gap: '$6' },
-      8: { gap: '$8' },
-      10: { gap: '$10' },
-      12: { gap: '$12' },
-      14: { gap: '$14' },
-      16: { gap: '$16' },
-      20: { gap: '$20' },
-      22: { gap: '$22' },
-      24: { gap: '$24' },
-      32: { gap: '$32' },
-      36: { gap: '$36' },
-      40: { gap: '$40' },
-      48: { gap: '$48' },
-      56: { gap: '$56' },
-      64: { gap: '$64' },
-      72: { gap: '$72' },
-      80: { gap: '$80' },
-      full: { gap: '$full' },
-    },
-    gapX: {
-      2: { gap: '$2' },
-      4: { gap: '$4' },
-      6: { gap: '$6' },
-      8: { gap: '$8' },
-      10: { gap: '$10' },
-      12: { gap: '$12' },
-      14: { gap: '$14' },
-      16: { gap: '$16' },
-      20: { gap: '$20' },
-      22: { gap: '$22' },
-      24: { gap: '$24' },
-      32: { gap: '$32' },
-      36: { gap: '$36' },
-      40: { gap: '$40' },
-      48: { gap: '$48' },
-      56: { gap: '$56' },
-      64: { gap: '$64' },
-      72: { gap: '$72' },
-      80: { gap: '$80' },
-      full: { gap: '$full' },
-    }
-  },
-  defaultVariants: {
-    display: 'flex',
-    direction: 'row',
-    gap: 10,
-  }
-
-})
-
-type GapValue = NonNullable<ComponentProps<typeof FlexStyled>['gap']>;
-
-export type FlexProps = {
-  as?: ElementType;
-  children: ReactNode;
-  display?: 'flex' | 'inline-flex';
-  align?: 'start' | 'center' | 'end' | 'stretch' | 'baseline';
-  justify?: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
-  direction?: 'row' | 'column' | 'row-reverse' | 'column-reverse';
-  gap?: GapValue;
-  gapX?: Exclude<GapValue, 0 | '0'>;
-  gapY?: Exclude<GapValue, 0 | '0'>;
-  className?: string;
-  style?: CSSProperties;
-  css?: CSS<typeof config>;
-};
-
-export function Flex({ children, ...props }: FlexProps) {
-  return (
-    <FlexStyled {...(props as ComponentProps<typeof FlexStyled>)}>
-      {children}
-    </FlexStyled>
-  )
+import { ComponentProps, CSSProperties, ElementType, ReactNode } from 'react';
+import type { CSS } from '@stitches/react';
+import { styled, config } from '../styles'
+import { Flex as FlexRadix } from "@radix-ui/themes";
+export const FlexStyled = styled(FlexRadix, {
+  variants: {
+    display: {
+      'flex': { display: 'flex' },
+      'inline-flex': { display: 'inline-flex' }
+    },
+    align: {
+      start: { alignItems: 'flex-start' },
+      center: { alignItems: 'center' },
+      end: { alignItems: 'flex-end' },
+      stretch: { alignItems: 'stretch' },
+      baseline: { alignItems: 'baseline' },
+    },
+    justify: {
+      start: { justifyContent: 'flex-start' },
+      center: { justifyContent: 'center' },
+      end: { justifyContent: 'flex-end' },
+      between: { justifyContent: 'space-between' },
+      around: { justifyContent: 'space-around' },
+      evenly: { justifyContent: 'space-evenly' },
+    },
+    direction: {
+      row: { flexDirection: 'row' },
+      column: { flexDirection: 'column' },
+      'row-reverse': { flexDirection: 'row-reverse' },
+      'column-reverse': { flexDirection: 'column-reverse' },
+    },
+    gap: {
+      0: { gap: '0px' },
+      2: { gap: '$2' },
+      4: { gap: '$4' },
+      6: { gap: '$6' },
+      8: { gap: '$8' },
+      10: { gap: '$10' },
+      12: { gap: '$12' },
+      14: { gap: '$14' },
+      16: { gap: '$16' },
+      20: { gap: '$20' },
+      22: { gap: '$22' },
+      24: { gap: '$24' },
+      32: { gap: '$32' },
+      36: { gap: '$36' },
+      40: { gap: '$40' },
+      48: { gap: '$48' },
+      56: { gap: '$56' },
+      64: { gap: '$64' },
+      72: { gap: '$72' },
+      80: { gap: '$80' },
+      full: { gap: '$full' },
+    },
+    gapY: {
+      2: { gap: '$2' },
+      4: { gap: '$4' },
+      6: { gap: '$6' },
+      8: { gap: '$8' },
+      10: { gap: '$10' },
+      12: { gap: '$12' },
+      14: { gap: '$14' },
+      16: { gap: '$16' },
+      20: { gap: '$20' },
+      22: { gap: '$22' },
+      24: { gap: '$24' },
+      32: { gap: '$32' },
+      36: { gap: '$36' },
+      40: { gap: '$40' },
+      48: { gap: '$48' },
+      56: { gap: '$56' },
+      64: { gap: '$64' },
+      72: { gap: '$72' },
+      80: { gap: '$80' },
+      full: { gap: '$full' },
+    },
+    gapX: {
+      2: { gap: '$2' },
+      4: { gap: '$4' },
+      6: { gap: '$6' },
+      8: { gap: '$8' },
+      10: { gap: '$10' },
+      12: { gap: '$12' },
+      14: { gap: '$14' },
+      16: { gap: '$16' },
+      20: { gap: '$20' },
+      22: { gap: '$22' },
+      24: { gap: '$24' },
+      32: { gap: '$32' },
+      36: { gap: '$36' },
+      40: { gap: '$40' },
+      48: { gap: '$48' },
+      56: { gap: '$56' },
+      64: { gap: '$64' },
+      72: { gap: '$72' },
+      80: { gap: '$80' },
+      full: { gap: '$full' },
+    }
+  },
+  defaultVariants: {
+    display: 'flex',
+    direction: 'row',
+    gap: 10,
+  }
+
+})
+
+type GapValue = NonNullable<ComponentProps<typeof FlexStyled>['gap']>;
+
+export type FlexProps = {
+  as?: ElementType;
+  children: ReactNode;
+  display?: 'flex' | 'inline-flex';
+  align?: 'start' | 'center' | 'end' | 'stretch' | 'baseline';
+  justify?: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
+  direction?: 'row' | 'column' | 'row-reverse' | 'column-reverse';
+  gap?: GapValue;
+  gapX?: Exclude<GapValue, 0 | '0'>;
+  gapY?: Exclude<GapValue, 0 | '0'>;
+  className?: string;
+  style?: CSSProperties;
+  css?: CSS<typeof config>;
+};
+
+export function Flex({ children, ...props }: FlexProps) {
+  return (
+    <FlexStyled {...(props as ComponentProps<typeof FlexStyled>)}>
+      {children}
+    </FlexStyled>
+  )
 }