npm - @syscore/ui-library - Versions diffs - 1.3.2 → 1.3.4 - Mend

@syscore/ui-library 1.3.2 → 1.3.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/client/components/ui/card.tsx +3 -3
package/client/global.css +312 -0
package/client/storybook.css +1 -292
package/dist/index.cjs.js +1 -1
package/dist/index.d.ts +180 -0
package/dist/index.es.js +4502 -6
package/package.json +1 -1

package/client/components/ui/card.tsx CHANGED Viewed

@@ -83,10 +83,10 @@ const CardWithIcon = React.forwardRef<
 >(({ icon: Icon, title, description }, ref) => (
   <Card
     ref={ref}
-    className="border-gray-100 bg-white p-6 gap-6 hover:scale-102 hover:border-gray-200 ease-in-out duration-200 will-change-transform"
+    className="card-with-icon"
   >
-    <div className="flex items-center gap-4">
-      {Icon && <Icon className="size-12" />}
+    <div className="card-with-icon__header">
+      {Icon && <Icon className="card-with-icon__icon" />}
       <Text as="h3" variant="overline-large">{title}</Text>
     </div>
     <Text as="p" variant="body-base">{description}</Text>

package/client/global.css CHANGED Viewed

@@ -400,6 +400,31 @@
   color: var(--color-gray-800, #282a31);
 }
+.card-with-icon {
+  border: 1px solid var(--color-gray-100, #eff1f2);
+  background-color: var(--color-white, #fff);
+  padding: 1.5rem;
+  gap: 1.5rem;
+  transition: transform 200ms ease-in-out, border-color 200ms ease-in-out;
+  will-change: transform;
+}
+.card-with-icon:hover {
+  transform: scale(1.02);
+  border-color: var(--color-gray-200, #dedfe3);
+}
+.card-with-icon__header {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+.card-with-icon__icon {
+  width: 3rem;
+  height: 3rem;
+}
 /* Input Styles */
 .input-wrapper {
   display: flex;
@@ -5547,3 +5572,290 @@
   flex-shrink: 0;
   margin-right: 1rem;
 }
+.heading-large {
+  font-family: var(--font-ftmade);
+  font-size: 38px;
+  line-height: 40px;
+  letter-spacing: -0.38px;
+  &::before {
+    content: "";
+    margin-bottom: -0.2703em;
+    display: table;
+  }
+  &::after {
+    content: "";
+    margin-top: -0.1023em;
+    display: table;
+  }
+}
+.heading-medium {
+  font-family: var(--font-ftmade);
+  font-size: 34px;
+  line-height: 36px;
+  letter-spacing: -0.34px;
+  &::before {
+    content: "";
+    margin-bottom: -0.2734em;
+    display: table;
+  }
+  &::after {
+    content: "";
+    margin-top: -0.1054em;
+    display: table;
+  }
+}
+.heading-small {
+  font-family: var(--font-ftmade);
+  font-size: 30px;
+  line-height: 32px;
+  letter-spacing: -0.3px;
+  &::before {
+    content: "";
+    margin-bottom: -0.2773em;
+    display: table;
+  }
+  &::after {
+    content: "";
+    margin-top: -0.1093em;
+    display: table;
+  }
+}
+.heading-xsmall {
+  font-family: var(--font-ftmade);
+  font-size: 22px;
+  line-height: 24px;
+  letter-spacing: -0.22px;
+  &::before {
+    content: "";
+    margin-bottom: -0.2895em;
+    display: table;
+  }
+  &::after {
+    content: "";
+    margin-top: -0.1215em;
+    display: table;
+  }
+}
+.heading-xxsmall {
+  font-family: var(--font-ftmade);
+  font-size: 20px;
+  line-height: 22px;
+  letter-spacing: -0.22px;
+  &::before {
+    content: "";
+    margin-bottom: -0.2895em;
+    display: table;
+  }
+  &::after {
+    content: "";
+    margin-top: -0.1215em;
+    display: table;
+  }
+}
+/* Body Utilities */
+.body-large {
+  font-size: 18px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 25.2px;
+  &::before {
+    content: "";
+    margin-bottom: -0.2694em;
+    display: table;
+  }
+  &::after {
+    content: "";
+    margin-top: -0.4444em;
+    display: table;
+  }
+}
+.body-base {
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 22.4px;
+  &::before {
+    content: "";
+    margin-bottom: -0.2625em;
+    display: table;
+  }
+  &::after {
+    content: "";
+    margin-top: -0.4375em;
+    display: table;
+  }
+}
+.body-small {
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 19.6px;
+  &::before {
+    content: "";
+    margin-bottom: -0.2536em;
+    display: table;
+  }
+  &::after {
+    content: "";
+    margin-top: -0.4286em;
+    display: table;
+  }
+}
+/* Overline Utilities */
+.overline-large {
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 14px; /* 100% */
+  letter-spacing: 0.5px;
+  text-transform: uppercase;
+  &::before {
+    content: "";
+    margin-bottom: -0.075em;
+    display: table;
+  }
+  &::after {
+    content: "";
+    margin-top: -0.25em;
+    display: table;
+  }
+}
+@utility overline-medium {
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 12px; /* 100% */
+  letter-spacing: 0.5px;
+  text-transform: uppercase;
+  &::before {
+    content: "";
+    margin-bottom: -0.075em;
+    display: table;
+  }
+  &::after {
+    content: "";
+    margin-top: -0.25em;
+    display: table;
+  }
+}
+@utility overline-small {
+  font-size: 10px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 10px; /* 100% */
+  letter-spacing: 0.5px;
+  text-transform: uppercase;
+  &::before {
+    content: "";
+    margin-bottom: -0.075em;
+    display: table;
+  }
+  &::after {
+    content: "";
+    margin-top: -0.25em;
+    display: table;
+  }
+}
+/* Number Utilities */
+.number-large {
+  font-size: 18px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 25.2px;
+  font-variant-numeric: lining-nums tabular-nums;
+  &::before {
+    content: "";
+    margin-bottom: -0.2694em;
+    display: table;
+  }
+  &::after {
+    content: "";
+    margin-top: -0.4444em;
+    display: table;
+  }
+}
+@utility number-base {
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 22.4px;
+  font-variant-numeric: lining-nums tabular-nums;
+  &::before {
+    content: "";
+    margin-bottom: -0.2625em;
+    display: table;
+  }
+  &::after {
+    content: "";
+    margin-top: -0.4375em;
+    display: table;
+  }
+}
+.number-small {
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 19.6px;
+  font-variant-numeric: lining-nums tabular-nums;
+  &::before {
+    content: "";
+    margin-bottom: -0.2536em;
+    display: table;
+  }
+  &::after {
+    content: "";
+    margin-top: -0.4286em;
+    display: table;
+  }
+}
+.number-xsmall {
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 16.8px;
+  font-variant-numeric: lining-nums tabular-nums;
+  &::before {
+    content: "";
+    margin-bottom: -0.2417em;
+    display: table;
+  }
+  &::after {
+    content: "";
+    margin-top: -0.4167em;
+    display: table;
+  }
+}
+.underline-dotted {
+  text-decoration-line: underline;
+  text-decoration-style: dotted;
+  text-decoration-skip-ink: none;
+  text-decoration-thickness: 0.75px;
+  text-underline-offset: 2px;
+}

package/client/storybook.css CHANGED Viewed

@@ -1,8 +1,7 @@
 /** @import must precede all other statements */
 @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap")
 layer(base);
-@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap")
-layer(base);
 @import "tailwindcss";
@@ -872,293 +871,3 @@ layer(base);
     @apply mx-auto max-w-[calc(1072px+64px)] w-full px-8;
   }
 }
-/* Typography Utilities */
-/* Heading Utilities  */
-@utility heading-large {
-  font-family: var(--font-ftmade);
-  font-size: 38px;
-  line-height: 40px;
-  letter-spacing: -0.38px;
-  &::before {
-    content: "";
-    margin-bottom: -0.2703em;
-    display: table;
-  }
-  &::after {
-    content: "";
-    margin-top: -0.1023em;
-    display: table;
-  }
-}
-@utility heading-medium {
-  font-family: var(--font-ftmade);
-  font-size: 34px;
-  line-height: 36px;
-  letter-spacing: -0.34px;
-  &::before {
-    content: "";
-    margin-bottom: -0.2734em;
-    display: table;
-  }
-  &::after {
-    content: "";
-    margin-top: -0.1054em;
-    display: table;
-  }
-}
-@utility heading-small {
-  font-family: var(--font-ftmade);
-  font-size: 30px;
-  line-height: 32px;
-  letter-spacing: -0.3px;
-  &::before {
-    content: "";
-    margin-bottom: -0.2773em;
-    display: table;
-  }
-  &::after {
-    content: "";
-    margin-top: -0.1093em;
-    display: table;
-  }
-}
-@utility heading-xsmall {
-  font-family: var(--font-ftmade);
-  font-size: 22px;
-  line-height: 24px;
-  letter-spacing: -0.22px;
-  &::before {
-    content: "";
-    margin-bottom: -0.2895em;
-    display: table;
-  }
-  &::after {
-    content: "";
-    margin-top: -0.1215em;
-    display: table;
-  }
-}
-@utility heading-xxsmall {
-  font-family: var(--font-ftmade);
-  font-size: 20px;
-  line-height: 22px;
-  letter-spacing: -0.22px;
-  &::before {
-    content: "";
-    margin-bottom: -0.2895em;
-    display: table;
-  }
-  &::after {
-    content: "";
-    margin-top: -0.1215em;
-    display: table;
-  }
-}
-/* Body Utilities */
-@utility body-large {
-  font-size: 18px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 25.2px;
-  &::before {
-    content: "";
-    margin-bottom: -0.2694em;
-    display: table;
-  }
-  &::after {
-    content: "";
-    margin-top: -0.4444em;
-    display: table;
-  }
-}
-@utility body-base {
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 22.4px;
-  &::before {
-    content: "";
-    margin-bottom: -0.2625em;
-    display: table;
-  }
-  &::after {
-    content: "";
-    margin-top: -0.4375em;
-    display: table;
-  }
-}
-@utility body-small {
-  font-size: 14px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 19.6px;
-  &::before {
-    content: "";
-    margin-bottom: -0.2536em;
-    display: table;
-  }
-  &::after {
-    content: "";
-    margin-top: -0.4286em;
-    display: table;
-  }
-}
-/* Overline Utilities */
-@utility overline-large {
-  font-size: 14px;
-  font-style: normal;
-  font-weight: 600;
-  line-height: 14px; /* 100% */
-  letter-spacing: 0.5px;
-  text-transform: uppercase;
-  &::before {
-    content: "";
-    margin-bottom: -0.075em;
-    display: table;
-  }
-  &::after {
-    content: "";
-    margin-top: -0.25em;
-    display: table;
-  }
-}
-@utility overline-medium {
-  font-size: 12px;
-  font-style: normal;
-  font-weight: 600;
-  line-height: 12px; /* 100% */
-  letter-spacing: 0.5px;
-  text-transform: uppercase;
-  &::before {
-    content: "";
-    margin-bottom: -0.075em;
-    display: table;
-  }
-  &::after {
-    content: "";
-    margin-top: -0.25em;
-    display: table;
-  }
-}
-@utility overline-small {
-  font-size: 10px;
-  font-style: normal;
-  font-weight: 600;
-  line-height: 10px; /* 100% */
-  letter-spacing: 0.5px;
-  text-transform: uppercase;
-  &::before {
-    content: "";
-    margin-bottom: -0.075em;
-    display: table;
-  }
-  &::after {
-    content: "";
-    margin-top: -0.25em;
-    display: table;
-  }
-}
-/* Number Utilities */
-@utility number-large {
-  font-size: 18px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 25.2px;
-  font-variant-numeric: lining-nums tabular-nums;
-  &::before {
-    content: "";
-    margin-bottom: -0.2694em;
-    display: table;
-  }
-  &::after {
-    content: "";
-    margin-top: -0.4444em;
-    display: table;
-  }
-}
-@utility number-base {
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 22.4px;
-  font-variant-numeric: lining-nums tabular-nums;
-  &::before {
-    content: "";
-    margin-bottom: -0.2625em;
-    display: table;
-  }
-  &::after {
-    content: "";
-    margin-top: -0.4375em;
-    display: table;
-  }
-}
-@utility number-small {
-  font-size: 14px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 19.6px;
-  font-variant-numeric: lining-nums tabular-nums;
-  &::before {
-    content: "";
-    margin-bottom: -0.2536em;
-    display: table;
-  }
-  &::after {
-    content: "";
-    margin-top: -0.4286em;
-    display: table;
-  }
-}
-@utility number-xsmall {
-  font-size: 14px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 16.8px;
-  font-variant-numeric: lining-nums tabular-nums;
-  &::before {
-    content: "";
-    margin-bottom: -0.2417em;
-    display: table;
-  }
-  &::after {
-    content: "";
-    margin-top: -0.4167em;
-    display: table;
-  }
-}
-@utility underline-dotted {
-  text-decoration-line: underline;
-  text-decoration-style: dotted;
-  text-decoration-skip-ink: none;
-  text-decoration-thickness: 0.75px;
-  text-underline-offset: 2px;
-}