@lightsparkdev/ui 0.0.0

package/dist/styles/type.d.cts

@@ -0,0 +1,28 @@
+import * as _emotion_react_jsx_runtime from '@emotion/react/jsx-runtime';
+import _emotion_styled__default from '@emotion/styled';
+
+declare const HeadingTypes: readonly ["h1", "h2", "h3", "h4"];
+type HeadingType = (typeof HeadingTypes)[number];
+declare const marginPx: readonly [0, 8, 12, 16, 24, 32, 40];
+type MarginPx = (typeof marginPx)[number];
+type StyledHeadingBaseProps = {
+    mt: MarginPx;
+    mb: MarginPx;
+    mtSm: MarginPx;
+    mbSm: MarginPx;
+    light?: boolean;
+};
+type StyledHeadingType = ReturnType<typeof _emotion_styled__default.h2<StyledHeadingProps>>;
+declare const headings: {
+    [K in HeadingType]: StyledHeadingType;
+};
+type HeadingProps = Partial<StyledHeadingBaseProps> & {
+    children?: React.ReactNode;
+    type?: HeadingType;
+    id?: string;
+    m0?: boolean;
+};
+declare function Heading({ children, type, id, mt, mb, mtSm, mbSm, m0, light, }: HeadingProps): _emotion_react_jsx_runtime.JSX.Element;
+declare function headingWithDefaults(defaultProps: HeadingProps): (props: HeadingProps) => _emotion_react_jsx_runtime.JSX.Element;
+
+export { Heading, HeadingProps, headingWithDefaults, headings };

package/dist/styles/type.d.ts

@@ -0,0 +1,28 @@
+import * as _emotion_react_jsx_runtime from '@emotion/react/jsx-runtime';
+import _emotion_styled__default from '@emotion/styled';
+
+declare const HeadingTypes: readonly ["h1", "h2", "h3", "h4"];
+type HeadingType = (typeof HeadingTypes)[number];
+declare const marginPx: readonly [0, 8, 12, 16, 24, 32, 40];
+type MarginPx = (typeof marginPx)[number];
+type StyledHeadingBaseProps = {
+    mt: MarginPx;
+    mb: MarginPx;
+    mtSm: MarginPx;
+    mbSm: MarginPx;
+    light?: boolean;
+};
+type StyledHeadingType = ReturnType<typeof _emotion_styled__default.h2<StyledHeadingProps>>;
+declare const headings: {
+    [K in HeadingType]: StyledHeadingType;
+};
+type HeadingProps = Partial<StyledHeadingBaseProps> & {
+    children?: React.ReactNode;
+    type?: HeadingType;
+    id?: string;
+    m0?: boolean;
+};
+declare function Heading({ children, type, id, mt, mb, mtSm, mbSm, m0, light, }: HeadingProps): _emotion_react_jsx_runtime.JSX.Element;
+declare function headingWithDefaults(defaultProps: HeadingProps): (props: HeadingProps) => _emotion_react_jsx_runtime.JSX.Element;
+
+export { Heading, HeadingProps, headingWithDefaults, headings };

package/dist/styles/type.js

@@ -0,0 +1,153 @@
+"use client";
+import {
+  firstChild,
+  pxToRems
+} from "../chunk-LZHLWOXG.js";
+import "../chunk-QR7BKTM6.js";
+import "../chunk-ACZDUWPH.js";
+import "../chunk-WVJNZRKF.js";
+import {
+  bp
+} from "../chunk-JSGRNWSB.js";
+import "../chunk-CLU2FRJZ.js";
+import {
+  __spreadValues
+} from "../chunk-CIGAQ47A.js";
+
+// src/styles/type.tsx
+import { css, useTheme } from "@emotion/react";
+import styled from "@emotion/styled";
+import { jsx } from "@emotion/react/jsx-runtime";
+var defaultHeadingSizes = {
+  h1: {
+    size: 32,
+    sizeSm: 21
+  },
+  h2: {
+    size: 24,
+    sizeSm: 18
+  },
+  h3: {
+    size: 21,
+    sizeSm: 18
+  },
+  h4: {
+    size: 14,
+    sizeSm: 14
+  }
+};
+var defaultHeadingMargins = {
+  h1: {
+    mt: 24,
+    mb: 24,
+    mtSm: 24,
+    mbSm: 24
+  },
+  h2: {
+    mt: 24,
+    mb: 24,
+    mtSm: 24,
+    mbSm: 24
+  },
+  h3: {
+    mt: 24,
+    mb: 24,
+    mtSm: 24,
+    mbSm: 24
+  },
+  h4: {
+    mt: 16,
+    mb: 16,
+    mtSm: 16,
+    mbSm: 16
+  }
+};
+var baseHeading = ({ mt, mb, mtSm, mbSm, theme }) => css`
+  line-height: 1.214em;
+
+  margin-bottom: ${mb}px;
+  margin-top: ${mt}px;
+
+  ${bp.sm(`
+    margin-top: ${mtSm}px;
+    margin-bottom: ${mbSm}px;
+  `)}
+`;
+var firstChildStyles = firstChild(`margin-top: 0;`);
+var headings = {
+  h1: styled.h1`
+    ${(props) => baseHeading(props)}
+    ${firstChildStyles}
+
+    font-size: ${pxToRems(defaultHeadingSizes.h1.size)};
+    font-weight: ${({ light }) => light ? 400 : 800}};
+    ${bp.sm(`
+      font-size: ${pxToRems(defaultHeadingSizes.h1.sizeSm)};
+    `)}
+  `,
+  h2: styled.h2`
+    ${(props) => baseHeading(props)}
+    ${firstChildStyles}
+
+    font-size: ${pxToRems(defaultHeadingSizes.h2.size)};
+    font-weight: ${({ light }) => light ? 400 : 700}};
+    ${bp.sm(`
+      font-size: ${pxToRems(defaultHeadingSizes.h2.sizeSm)};
+    `)}
+  `,
+  h3: styled.h3`
+    ${(props) => baseHeading(props)}
+    ${firstChildStyles}
+
+    font-size: ${pxToRems(defaultHeadingSizes.h3.size)};
+    font-weight: ${({ light }) => light ? 400 : 700}};
+    ${bp.sm(`
+      font-size: ${pxToRems(defaultHeadingSizes.h3.sizeSm)};
+    `)}
+  `,
+  h4: styled.h4`
+    ${(props) => baseHeading(props)}
+    ${firstChildStyles}
+
+    font-size: ${pxToRems(defaultHeadingSizes.h4.size)};
+    font-weight: ${({ light }) => light ? 400 : 600}};
+    ${bp.sm(`
+      font-size: ${pxToRems(defaultHeadingSizes.h4.sizeSm)};
+    `)}
+  `
+};
+function Heading({
+  children,
+  type = "h2",
+  id,
+  mt = defaultHeadingMargins[type].mt,
+  mb = defaultHeadingMargins[type].mb,
+  mtSm = defaultHeadingMargins[type].mtSm,
+  mbSm = defaultHeadingMargins[type].mbSm,
+  m0 = false,
+  light = false
+}) {
+  const StyledHeading = headings[type];
+  const theme = useTheme();
+  return /* @__PURE__ */ jsx(
+    StyledHeading,
+    {
+      id,
+      mt: m0 ? 0 : mt,
+      mb: m0 ? 0 : mb,
+      mtSm: m0 ? 0 : mtSm,
+      mbSm: m0 ? 0 : mbSm,
+      light,
+      theme,
+      children
+    }
+  );
+}
+function headingWithDefaults(defaultProps) {
+  return (props) => /* @__PURE__ */ jsx(Heading, __spreadValues(__spreadValues({}, defaultProps), props));
+}
+export {
+  Heading,
+  headingWithDefaults,
+  headings
+};