feat: add v1 components

* Style/css variables (#155)

* feat: add initial variables

* style: segregate file into sections

* chore: append --rs prefix

* refactor: change var names

* feat: add fonts import

* chore: remove accent and neutral colors

* feat: Button component (#153)

* feat: add button props and style

* chore: add loading prop

* chore: minor formatting

* feat: add icon and position props

* chore: variant primary set to default

* docs: update button docs

* chore: change icon props

* fix: add default primary and change styles

* fix: add width prop

* fix: not allowed icon on cursor

* chore: spelling change

* style: change hover style handing

* docs: mdx icons

* style: rename gap to space according to design

* chore: remove var

* style: point to correct vars and add viz colors

* Feat/avatar (#154)

* feat: add avatar component

* style: size

* fix: size prop incorrect class names

* feat: add fallback support

* feat: add border radius

* feat: add compoundVariants

* feat: add avatar group

* fix: avatar placeholder for additional avatar remaining

* Feat/button theme integration (#159)

* feat: add theme provider

* fix: add theme props for gray color

* fix: typo in mauve color

* fix: add css import support

* chore: remove comment

* docs: add comments

* feat: add theme to button

* style: change button variant styles

* style: fix primary variant button

* fix: hover effects not working correctly

* style: fix the styles for the other theme styles

* chore: remove comment and avatar component

* Feat/theme provider (#156)

* feat: add theme provider

* fix: add theme props for gray color

* fix: typo in mauve color

* fix: add css import support

* chore: remove comment

* docs: add comments

* Feat/spinner (#161)

* feat: spinner first draft

* chore: remove comment

* fix: remove invisible loading text

* chore: remove additional sizes

* fix: change rotation pitch and refactor

* chore: fix space variables

* docs: spinner

* fix: css

* fix: add rs vars

* feat: add spinner component to button (#163)

* style: hover styling

* Feat/breadcrumb (#164)

* feat: add breadcrumb component

* style: add css style vars

* style: update css

* add space variable

* style: change dropdown css to match design system

* feat: dropdown change logic

* fix: spacing and some dropdown padding

* style: add consistent spacing to the items and the icons

* docs: add mdx for breadcrumb

* style: fix space around ellipsis

* feat: add toast component modifications (#168)

* feat: add toast component modifications

* feat: add duration prop

* feat: add action as a dedicated prop

* feat: simplify things

* style: change css

* docs: add mdx for toast

* feat: add new badge on side nav (#167)

* feat: add new badge on side nav

* style: add css variables

* style: reduce space

* Feat/avatar integrate theme (#160)

* feat: integrate theme with avatar component

* feat: add neutral color for the extended avatar info

* fix: remove hover effect

* fix: add seperation in ratio with the sizes

* fix: add default cursor instead of text cursor

* feat: major emphasis changes

* style: use border from styles

* docs: updated avatar mdx

* feat: add classname

* migration: move new components to v2 folder

* migration: bring in old components from main to v2

* Feat/v2 config (#172)

* Add rollup config for v2

* feat: move things

* fix: change import path pattern

* chore: rename v2 to v1

* fix: rollup creating nested dist folders

* style: css file import fix

* style: css import fix

* fix: add typings declaration file for module.css file import

* fix: typings file

* docs: depricate old components

* style: add theme switch transition

* chore: move base css import to top

* chore: update example with new component usage

* fix: add missing export

* fix: add duplicates as causing circular dependency

* fix: copy themeprovider to v1 folder due to circular dependency

* fix: toast not obeying theme switching

* fix: merge typing and typings declaration files into one

* docs: add v1 components support in docs

* chore: add new badge for toast

* style: hover button styling

* style: text button hover when disabled

* fix: nested dist issue

* docs: add comments

* chore: remove duplicate transition

* docs: imports and spellings

* chore: docs

* Feat/multi v1 (#173)

* fix: rollup creating nested dist folders

* style: css file import fix

* style: css import fix

* fix: add typings declaration file for module.css file import

* fix: typings file

* docs: depricate old components

* style: add theme switch transition

* chore: move base css import to top

* chore: update example with new component usage

* fix: add missing export

* fix: add duplicates as causing circular dependency

* fix: copy themeprovider to v1 folder due to circular dependency

* fix: toast not obeying theme switching

* fix: merge typing and typings declaration files into one

* docs: add v1 components support in docs

* chore: add new badge for toast

* docs: add comments

* chore: remove duplicate transition

* docs: imports and spellings

* chore: docs

* fix: minor button fixes

* fix: spinner related fixes

* docs: update version

* docs: update breadcrumb mdx

* style: make breadcrumb a bit lighter in color

* docs: add ellipsis variant for breadcrumb

* docs: update avatar docs

* docs: add button props

* docs: add spinner props

* docs: add breadcrumb props

* docs: avatar doc update

* fix: size

* docs: update

* docs: toast

* style: fix color

* style: change color for orange

* style: add bg color

* chore: remove old component

* chore: deprecate old component

* feat: Add new dropdown

* docs: add mdx doc

* chore: usage in breadcrumb

* chore: add newBadge to dropdown

* style: secondary border

* fix: button vars fix

* chore: rearrange import

* chore: add components in assets for testing

apps/www/components/hero/index.tsx

@@ -18,7 +18,7 @@ export const Hero = () => {
                     margin: "0 var(--mr-4)",
                   }}
                 />
-                apsara v2 nightly is out, find out what's new 🎉
+                Apsara v1 is out, find out what's new 🎉
               </Flex>
             </Link>
           </Badge>

apps/www/components/markdown/mdx.tsx

@@ -1,5 +1,6 @@
 import { Link2Icon } from "@radix-ui/react-icons";
 import * as Apsara from "@raystack/apsara";
+import * as ApsaraV1 from "@raystack/apsara/v1";
 import * as React from "react";
 import { LiveProvider } from "react-live";
 import { Frontmatter } from "~/types/frontmatter";
@@ -11,7 +12,8 @@ import Playground from "./playground";
 import { Preview } from "./preview";
 
 export const components = {
-  ...Apsara,
+  ...Apsara, // Todo: remove this once we fully migrate to Apsara v1
+  ...ApsaraV1,
   ...Icons,
   DataTable: Assets,
   Attributes: Attributes,

apps/www/components/page.module.css

@@ -7,4 +7,16 @@
 
 .content > :last-child {
   margin-bottom: 100px;
+}
+
+.badge {
+  background-color: var(--rs-accent-9); 
+  color: var(--rs-accent-contrast);
+  padding: 0 var(--rs-space-2);
+  margin-left: var(--rs-space-2);
+  border-radius: var(--rs-radius-2);
+  font-size: 0.55em;
+  font-weight: bold;
+  display: inline-block;
+  vertical-align: middle;
 }

apps/www/components/primitive-page.tsx

@@ -150,6 +150,7 @@ const LeftSideBar = () => {
             >
               <NavItemTitle active={currentPageSlug === page.slug}>
                 {page.title}
+                {page.newBadge && <span className={styles.badge}>New</span>}
               </NavItemTitle>
             </NavItem>
           ))}
@@ -162,7 +163,10 @@ const LeftSideBar = () => {
               href={`/${page.slug}`}
               active={currentPageSlug === page.slug}
             >
-              {page.title}
+              <NavItemTitle active={currentPageSlug === page.slug}>
+                {page.title}
+                {page.newBadge && <span className={styles.badge}>New</span>}
+              </NavItemTitle>
             </NavItem>
           ))}
         </Box>